j9t03WAa

1/* Dieses Skript wird ausgeführt, wenn der Browser index.html lädt. */
2
3// Befehle werden sequenziell abgearbeitet ...
4
5/**
6 * "console.log" schreibt auf die Konsole des Browsers
7 * Das Konsolenfenster muss im Browser explizit geöffnet werden.
8 */
9console.log("The script is going to start..hallo.");
10
11// Es folgen einige Deklarationen, die aber noch nicht ausgeführt werden ...
12
13// Hier wird die verwendete API für Geolocations gewählt
14// Die folgende Deklaration ist ein 'Mockup', das immer funktioniert und eine fixe Position liefert.
15GEOLOCATIONAPI = {
16    getCurrentPosition: function(onsuccess) {
17        onsuccess({
18            "coords": {
19                "latitude": 49.013790,
20                "longitude": 8.390071,
21                "altitude": null,
22                "accuracy": 39,
23                "altitudeAccuracy": null,
24                "heading": null,
25                "speed": null
26            },
27            "timestamp": 1540282332239
28        });
29    }
30};
31
32// Die echte API ist diese.
33// Falls es damit Probleme gibt, kommentieren Sie die Zeile aus.
34//GEOLOCATIONAPI = navigator.geolocation;
35
36/**
37 * GeoTagApp Locator Modul
38 */
39var gtaLocator = (function GtaLocator(geoLocationApi) {
40
41    // Private Member
42
43    /**
44     * Funktion spricht Geolocation API an.
45     * Bei Erfolg Callback 'onsuccess' mit Position.
46     * Bei Fehler Callback 'onerror' mit Meldung.
47     * Callback Funktionen als Parameter übergeben.
48     */
49    var tryLocate = function(onsuccess, onerror) {
50        if (geoLocationApi) {
51            geoLocationApi.getCurrentPosition(onsuccess, function(error) {
52                var msg;
53                switch (error.code) {
54                    case error.PERMISSION_DENIED:
55                        msg = "User denied the request for Geolocation.";
56                        break;
57                    case error.POSITION_UNAVAILABLE:
58                        msg = "Location information is unavailable.";
59                        break;
60                    case error.TIMEOUT:
61                        msg = "The request to get user location timed out.";
62                        break;
63                    case error.UNKNOWN_ERROR:
64                        msg = "An unknown error occurred.";
65                        break;
66                }
67                onerror(msg);
68            });
69        } else {
70            onerror("Geolocation is not supported by this browser.");
71        }
72    };
73
74    // Auslesen Breitengrad aus der Position
75    var getLatitude = function(position) {
76        return position.coords.latitude;
77    };
78
79    // Auslesen Längengrad aus Position
80    var getLongitude = function(position) {
81        return position.coords.longitude;
82    };
83
84    // Hier Google Maps API Key eintragen
85    var apiKey = "nLVatE1lz7t1UPxGVLvBoydGeDyFW68T";
86
87    /**
88     * Funktion erzeugt eine URL, die auf die Karte verweist.
89     * Falls die Karte geladen werden soll, muss oben ein API Key angegeben
90     * sein.
91     *
92     * lat, lon : aktuelle Koordinaten (hier zentriert die Karte)
93     * tags : Array mit Geotag Objekten, das auch leer bleiben kann
94     * zoom: Zoomfaktor der Karte
95     */
96    var getLocationMapSrc = function(lat, lon, tags, zoom) {
97
98        zoom = typeof zoom !== 'undefined' ? zoom : 10;
99
100        if (apiKey === "YOUR API KEY HERE") {
101            console.log("No API key provided.");
102            return "images/mapview.jpg";
103        }
104
105        var tagList = "&pois=You," + lat + "," + lon;
106        if (tags !== undefined) tags.forEach(function(tag) {
107            tagList += "|" + tag.name + "," + tag.latitude + "," + tag.longitude;
108        });
109
110        var urlString = "https://www.mapquestapi.com/staticmap/v4/getmap?key=" +
111            apiKey + "&size=600,400&zoom=" + zoom + "&center=" + lat + "," + lon + "&" + tagList;
112
113        console.log("Generated Maps Url: " + urlString);
114        return urlString;
115    };
116
117    return { // Start öffentlicher Teil des Moduls ...
118
119        // Public Member
120
121        readme: "Dieses Objekt enthält 'öffentliche' Teile des Moduls.",
122
123        updateLocation: function() {
124
125if(
126    document.getElementById('latitude').value.length === 0 &&
127    document.getElementById('longitude').value.length === 0
128){
129    tryLocate(function(position){
130        document.getElementById('latitude').value =  getLatitude(position);
131        document.getElementById('longitude').value = getLongitude(position);
132        document.getElementById('safeLatitude').value =  getLatitude(position);;
133        document.getElementById('safeLongitude').value = getLongitude(position);;
134
135        var url = getLocationMapSrc(getLatitude(position),getLongitude(position),[],17);
136        document.getElementById('result-img').src = url;
137
138    },function (message){
139        alert(message);
140    })
141}
142else{
143    var jsonString = document.getElementById('map').dataset.tags;
144    var url = getLocationMapSrc(document.getElementById('latitude').value,document.getElementById('longitude').value,JSON.parse(jsonString),17);
145    document.getElementById('result-img').src = url;
146}
147
148
149
150
151
152
153
154        }
155
156    }; // ... Ende öffentlicher Teil
157})(GEOLOCATIONAPI);
158
159/**
160 * $(function(){...}) wartet, bis die Seite komplett geladen wurde. Dann wird die
161 * angegebene Funktion aufgerufen. An dieser Stelle beginnt die eigentliche Arbeit
162 * des Skripts.
163 */
164
165
166var addTagButton = function(){
167    document.getElementById("submit_tag").onclick = submitTagEcho;
168};
169var searchButton = function(){
170    document.getElementById("submit_search").onclick = submitSearchEcho;
171};
172
173var deleteButton = function(){
174    document.getElementById("submit_delete").onclick = submitRemoveEcho;
175};
176
177var ajax = new XMLHttpRequest();
178
179
180ajax.onreadystatechange = function() {
181    if (ajax.readyState == 4) {
182
183        var content = JSON.parse(ajax.responseText);
184        //document.getElementById('map').dataset.tags = content;
185        var contentResults = document.getElementById("results");
186
187        contentResults.innerHTML = "";
188        for(var i = 0; i < content.length; i++){
189
190            contentResults.innerHTML += "<li>" + content[i].name + " ( " + content[i].latitude + ", " + content[i].longitude + " ) " + content[i].hashtag + " </li>";
191
192        }
193        document.getElementById('map').dataset.tags = JSON.stringify(content);
194        gtaLocator.updateLocation();
195
196    }
197};
198
199function submitTagEcho() {
200    ajax.open("POST", "/geotags", true);
201    ajax.setRequestHeader("Content-type", "application/json");
202    var gtagData = {
203        "latitude":document.getElementById("latitude").value,
204        "longitude":document.getElementById("longitude").value,
205        "name":document.getElementById("name").value,
206        "hashtag":document.getElementById("hashtag").value
207    };
208    //console.log(JSON.stringify(gtagData));
209    ajax.send(JSON.stringify(gtagData));
210
211}
212
213function submitSearchEcho() {
214    var search = document.getElementById("searchfield").value;
215
216
217    ajax.open("GET", '/geotags?search=' + search, true);
218    ajax.setRequestHeader("Content-type", "application/json");
219    ajax.send(null);
220    //console.log(JSON.stringify(gtagData));
221
222}
223
224function submitRemoveEcho() {
225    var search = document.getElementById("searchfield").value;
226
227        ajax.open("GET", '/geotags?remove=' + search, true);
228        ajax.setRequestHeader("Content-type", "application/json");
229        ajax.send(null);
230
231}
232
233
234$(function() {
235    addTagButton();
236    searchButton();
237    deleteButton();
238    gtaLocator.updateLocation();
239
240
241});