added current location button, click on marker adds infos, comments and clickable like button

css/style.css

@@ -31,3 +31,14 @@ h1 {
   width: 80px;
   height: 80px;
 }
+
+
+.herz {
+  width: 80px;
+  height: 80px;
+}
+
+#currentLocation {
+  height: 30px;
+  width: 30px;
+}

index.php

@@ -17,8 +17,10 @@ dbVerbindungErzeugen()
     <h1>spinn mit!!</h1>
     <div id="map">
     </div>
-<!--
+
     <div class="formular-wrapper">
+    <img src="/images/navigation.png" id="currentLocation">
+<!--
       <form class="formular" action="https://751068-4.web.fhgr.ch/" method="post">
       <label for="titel">Titel:</label>
       <input type="text" name="titel"><br><br>

js/functions.js

@@ -33,24 +33,66 @@ function ideeAnzeigen(data) {
   let titelErstellen = document.createElement("h1");
   let titelInhalt = document.createTextNode(data.titel);
   titelErstellen.appendChild(titelInhalt);
-  titelErstellen.classList.add("loeschen")
+  titelErstellen.classList.add("loeschen");
   document.getElementById('idee').appendChild(titelErstellen);
 
   let inhaltErstellen = document.createElement("p");
   let inhaltInhalt = document.createTextNode(data.inhalt);
   inhaltErstellen.appendChild(inhaltInhalt);
-  inhaltErstellen.classList.add("loeschen")
+  inhaltErstellen.classList.add("loeschen");
   document.getElementById('idee').appendChild(inhaltErstellen);
 
   let likesErstellen = document.createElement("p");
   let likes = document.createTextNode(data.likes + " Likes");
   likesErstellen.appendChild(likes);
-  likesErstellen.classList.add("loeschen")
+  likesErstellen.classList.add("loeschen");
   document.getElementById('idee').appendChild(likesErstellen);
 
   let bild = document.createElement("img");
-  bild.src = "https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg";
-  bild.classList.add("ideeBilder")
-  bild.classList.add("loeschen")
+  bild.src = data.bild;
+  bild.classList.add("ideeBilder");
+  bild.classList.add("loeschen");
   document.getElementById('idee').appendChild(bild);
+  console.log(data);
+
+
+  let herz = document.createElement("img");
+  herz.src= "../images/herz-0.png";
+  herz.classList.add("herz");
+  herz.classList.add("loeschen");
+  document.getElementById('idee').appendChild(herz);
+  herz.addEventListener('click', function() {
+    herz.src= "../images/herz-1.png";
+
+
+
+  });
+}
+
+
+
+
+function kommentareAnzeigen(kommentarId){
+
+  let  url = "system/alleKommentareHolen.php";
+  fetch(url)
+    .then((response) => {
+      return response.json();
+    })
+    .then((data) => {
+        let k = document.createElement("h3");
+        let k_text = document.createTextNode("Kommentare:");
+        k.appendChild(k_text);
+        k.classList.add("loeschen")
+        document.getElementById('idee').appendChild(k);
+
+        let kommentarErstellen = document.createElement("p");
+        let kommentar = document.createTextNode(data[kommentarId].k_text);
+        kommentarErstellen.appendChild(kommentar);
+        kommentarErstellen.classList.add("loeschen");
+        document.getElementById('idee').appendChild(kommentarErstellen);
+    })
+    .catch(function(error) {
+      console.log('Error!: ' + error.message);
+    });
   }

loadMap.js

@@ -1,17 +1,18 @@
 
-const zuerich_bounds = {
+/* const zuerich_bounds = {
   north: 47.41590970260092,
   south: 47.315703309031846,
   west: 8.45742642179812,
   east: 8.600047733589026,
 };
-
+*/
 function initMap() {
   const map = new google.maps.Map(document.getElementById('map'), {
   mapId: "fd4581e1612d9ef",
   center: {lat: 47.38109493760974, lng: 8.521861488204763},
   restriction: {
-      latLngBounds: zuerich_bounds,
+/*      latLngBounds: zuerich_bounds,
+*/
       strictBounds: false,
     },
   zoom: 13,
@@ -56,20 +57,56 @@ function addMarkers(){
 
          marker.addListener("click", () => {
           ideeAnzeigen(markerData[i]);
+          kommentareAnzeigen(markerData[i].id);
          })
        }
        else {
 
        }
      }
-
-
-
-
     })
     .catch(function(error) {
       console.log('Error!: ' + error.message);
     });
   }
 
+
+
+
+
+// LOCATION BUTTON
+
+  let location_button = document.getElementById("currentLocation");
+  // map.controls[google.maps.ControlPosition.TOP_CENTER].push("location_button");
+  location_button.addEventListener("click", () => {
+  // Try HTML5 geolocation.
+  if (navigator.geolocation) {
+    navigator.geolocation.getCurrentPosition(
+      (position) => {
+        const pos = {
+          lat: position.coords.latitude,
+          lng: position.coords.longitude,
+        };
+
+        const marker = new google.maps.Marker({
+            position: pos,
+            map: map,
+            icon: {
+              url: "/images/current_location.png",
+            animation: google.maps.Animation.DROP,
+            scaledSize: new google.maps.Size(50, 50)
+        }});
+
+        map.setCenter(pos);
+      },
+      () => {
+        handleLocationError(true, infoWindow, map.getCenter());
+      }
+    );
+  } else {
+    // Browser doesn't support Geolocation
+    handleLocationError(false, infoWindow, map.getCenter());
+  }
+
+});
 }

system/addLike.php

@@ -0,0 +1,11 @@
+<?php
+
+   $likeCount =
+   $currentId =
+
+  $sql = "UPDATE idee SET likes=? WHERE id=?";
+ $stmt = $db->prepare($sql);
+ $stmt->execute($likeCount, $currentId);
+
+
+?>

system/alleKommentareHolen.php

@@ -0,0 +1,12 @@
+<?php
+require_once('data.php');
+?>
+
+<?php
+
+  $db = dbVerbindungErzeugen();
+	$sql = "SELECT * FROM kommentar";
+	$resultat = $db->query($sql);
+	$resultatArray = $resultat ->fetchAll();
+	echo json_encode($resultatArray);
+ ?>