ganz viel geiler scheiss gemacht!

css/style.css

@@ -3,8 +3,8 @@ h1 {
 }
 
 #map {
-  height: 100vh;
+  height: 50vh;
-  width: 80vh;
+  width: 100%;
   float: left;
 }
 
@@ -42,3 +42,8 @@ h1 {
   height: 30px;
   width: 30px;
 }
+
+#cancel {
+  width: 60px;
+  height: 60px;
+}

index.php

@@ -20,21 +20,21 @@ dbVerbindungErzeugen()
 
     <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>
-      <label for="text">Text:</label>
-      <input type="text" name="text"><br><br>
-      <input type="submit" value="Formular Absenden">
-      </form>
 
--->
 
     </div>
-    <div id="idee">
+
+    <div id="idee_container">
+      <img src="/images/cancel.png" id="cancel">
+      
+      <div id="idee">
+
+      </div>
     </div>
 
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+
     <script src="js/functions.js"></script>
     <script src="js/main.js"></script>
     <script src="loadMap.js"></script>

js/functions.js

@@ -28,7 +28,20 @@ fetch(url,
 
 */
 
+// submit kommentar nicht seite neu laden
+
+$(document).ready(function(){
+    $("#kommentarform").submit(function(e) {
+        console.log("Submitted")
+        e.preventDefault(); // avoid to execute the actual submit of the form.
+    });
+})
+
+// idee laden
+
 function ideeAnzeigen(data) {
+
+  document.getElementById("idee").innerHTML = "";
   document.querySelectorAll('.loeschen').forEach(e => e.remove());
   let titelErstellen = document.createElement("h1");
   let titelInhalt = document.createTextNode(data.titel);
@@ -56,6 +69,8 @@ function ideeAnzeigen(data) {
   console.log(data);
 
 
+
+
   let herz = document.createElement("img");
   herz.src= "../images/herz-0.png";
   herz.classList.add("herz");
@@ -64,17 +79,138 @@ function ideeAnzeigen(data) {
   herz.addEventListener('click', function() {
     herz.src= "../images/herz-1.png";
 
+    $.post('system/addLike.php/?id=' + data.id, {}).done(function(response){
+      $("#mypar").html(response.amount);
+
+    });
 
 
   });
-}
+
+  kommentarErstellen(data.id);
+
+  let kommentare_container = document.createElement("div")
+  kommentare_container.setAttribute("id", "kommentare_container");
+  document.getElementById('idee').appendChild(kommentare_container);
 
 
 
+  kommentareAnzeigen(data.id);
 
-function kommentareAnzeigen(kommentarId){
 
-  let  url = "system/alleKommentareHolen.php";
+};
+
+
+//  kommentar formular likesErstellen
+
+function kommentarErstellen(idee_id) {
+  console.log(idee_id);
+
+
+  let formular = document.createElement("form");
+  formular.classList.add("formular");
+  formular.setAttribute("action", "https://751068-4.web.fhgr.ch/system/kommentarSpeichern.php");
+  formular.setAttribute("method", "post");
+  formular.setAttribute("id", "kommentarform");
+  document.getElementById("idee").appendChild(formular);
+
+  let text_label = document.createElement("label");
+  text_label.setAttribute("for", "text");
+
+  let text_input = document.createElement("input");
+  text_input.setAttribute("type", "text");
+  text_input.setAttribute("name", "text")
+
+  let submit_input = document.createElement("input");
+  submit_input.setAttribute("type", "submit");
+  submit_input.setAttribute("value", "Kommentar posten");
+
+  let id = document.createElement("input");
+  id.setAttribute("type", "hidden");
+  id.setAttribute("name", "idee_id")
+  id.value = idee_id;
+
+  document.getElementById("kommentarform").appendChild(text_label);
+  document.getElementById("kommentarform").appendChild(text_input);
+  document.getElementById("kommentarform").appendChild(submit_input);
+  document.getElementById("kommentarform").appendChild(id);
+
+  $("#kommentarform").submit(function(e){
+
+    let form = $(this);
+
+    $.ajax({
+      type: "POST",
+      url: "https://751068-4.web.fhgr.ch/system/kommentarSpeichern.php",
+      data: form.serialize(),
+    })
+      e.preventDefault();
+      document.getElementById("kommentare_container").innerHTML = "";
+
+      kommentareAnzeigen(idee_id);
+  });
+};
+
+// Idee formular erstellen
+function formularErstellen(koordianten) {
+
+  document.getElementById("idee").innerHTML = "";
+
+
+  let formular = document.createElement("form");
+  formular.classList.add("formular");
+  formular.setAttribute("action", "https://751068-4.web.fhgr.ch/system/ideeSpeichern.php");
+  formular.setAttribute("method", "post");
+  formular.setAttribute("id", "form");
+  document.getElementById("idee").appendChild(formular);
+
+  let koordinaten_lng = document.createElement("input");
+  koordinaten_lng.setAttribute("type", "hidden");
+  koordinaten_lng.setAttribute("name", "lng")
+  koordinaten_lng.value = koordianten.toJSON().lng;
+
+  let koordinaten_lat = document.createElement("input");
+  koordinaten_lat.setAttribute("type", "hidden");
+  koordinaten_lat.setAttribute("name", "lat")
+  koordinaten_lat.value = koordianten.toJSON().lat;
+
+  let titel_label = document.createElement("label");
+  titel_label.setAttribute("for", "titel");
+  titel_label.innerHTML = "Titel:";
+
+  let titel_input = document.createElement("input");
+  titel_input.setAttribute("type", "text");
+  titel_input.setAttribute("name", "titel")
+
+  let text_label = document.createElement("label");
+  text_label.setAttribute("for", "text");
+  text_label.innerHTML = "Text:";
+
+  let text_input = document.createElement("input");
+  text_input.setAttribute("type", "text");
+  text_input.setAttribute("name", "text")
+
+  let submit_input = document.createElement("input");
+  submit_input.setAttribute("type", "submit");
+  submit_input.setAttribute("value", "Formular Absenden");
+
+
+  document.getElementById("form").appendChild(titel_label);
+  document.getElementById("form").appendChild(titel_input);
+  document.getElementById("form").appendChild(text_label);
+  document.getElementById("form").appendChild(text_input);
+  document.getElementById("form").appendChild(submit_input);
+  document.getElementById("form").appendChild(koordinaten_lat);
+  document.getElementById("form").appendChild(koordinaten_lng);
+};
+
+
+
+function kommentareAnzeigen(idee_id){
+
+  document.getElementById("kommentare_container").innerHTML = "";
+
+  let  url = "system/alleKommentareHolen.php/?id=" + idee_id;
   fetch(url)
     .then((response) => {
       return response.json();
@@ -84,13 +220,15 @@ function kommentareAnzeigen(kommentarId){
         let k_text = document.createTextNode("Kommentare:");
         k.appendChild(k_text);
         k.classList.add("loeschen")
-        document.getElementById('idee').appendChild(k);
+        document.getElementById('kommentare_container').appendChild(k);
 
-        let kommentarErstellen = document.createElement("p");
+        for (var i = 0; i < data.length; i++) {
-        let kommentar = document.createTextNode(data[kommentarId].k_text);
+          let kommentarErstellen = document.createElement("p");
-        kommentarErstellen.appendChild(kommentar);
+          let kommentar = document.createTextNode(data[i].k_text);
-        kommentarErstellen.classList.add("loeschen");
+          kommentarErstellen.appendChild(kommentar);
-        document.getElementById('idee').appendChild(kommentarErstellen);
+          kommentarErstellen.classList.add("loeschen");
+          document.getElementById('kommentare_container').appendChild(kommentarErstellen);
+        }
     })
     .catch(function(error) {
       console.log('Error!: ' + error.message);

loadMap.js

@@ -1,22 +1,22 @@
 
-/* 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,
   disableDefaultUI: true,
+  gestureHandling: "greedy",
 
 });
 infoWindow = new google.maps.InfoWindow();
@@ -31,7 +31,6 @@ addMarkers();
 
 
 
-
 function addMarkers(){
 
   let  url = "system/alleInfosHolen.php";
@@ -57,7 +56,7 @@ function addMarkers(){
 
          marker.addListener("click", () => {
           ideeAnzeigen(markerData[i]);
-          kommentareAnzeigen(markerData[i].id);
+          
          })
        }
        else {
@@ -70,9 +69,39 @@ function addMarkers(){
     });
   }
 
+// NEUE IDEE ERFASSEN
+
+map.addListener("click", (mapsMouseEvent) => {
+  newMarker(mapsMouseEvent.latLng);
+
+  formularErstellen(mapsMouseEvent.latLng);
+})
 
 
+function newMarker(mousePosition) {
+  const newMarker = new google.maps.Marker({
 
+      position: mousePosition,
+      map: map,
+      animation: google.maps.Animation.DROP,
+
+    });
+
+    newMarker.setMap(map);
+
+    let icon = {url:"/images/ort.png", size: new google.maps.Size(30, 30)};
+
+    newMarker.setIcon("/images/newMarker.jpg");
+
+    $("#cancel").click(function() {
+      document.getElementById("idee").innerHTML = "";
+      newMarker.setMap(null);
+    })
+
+}
+
+
+// CHANCEL location_button
 
 // LOCATION BUTTON
 

system/addLike.php

@@ -1,11 +1,23 @@
+<?php
+require_once('data.php');
+?>
+
 <?php
 
-   $likeCount =
+  $db = dbVerbindungErzeugen();
-   $currentId =
+
+  $id = $_GET["id"];
+  $sql = "SELECT likes FROM idee WHERE id = $id";
+ 	$resultat = $db->query($sql);
+ 	$likeCount = $resultat ->fetchColumn();
+  $likeCount += 1;
+
+
+	echo ($likeCount);
 
   $sql = "UPDATE idee SET likes=? WHERE id=?";
  $stmt = $db->prepare($sql);
- $stmt->execute($likeCount, $currentId);
+ $stmt->execute(array($likeCount, $id));
 
 
 ?>

system/alleKommentareHolen.php

@@ -5,7 +5,9 @@ require_once('data.php');
 <?php
 
   $db = dbVerbindungErzeugen();
-	$sql = "SELECT * FROM kommentar";
+
+  $k_id = $_GET["id"];
+	$sql = "SELECT * FROM kommentar WHERE idee_id = $k_id";
 	$resultat = $db->query($sql);
 	$resultatArray = $resultat ->fetchAll();
 	echo json_encode($resultatArray);

system/ideeSpeichern.php

@@ -7,17 +7,23 @@ require_once('data.php');
 
   $db = dbVerbindungErzeugen();
 
+  $lat = $_POST['lat'];
+  $lng = $_POST['lng'];
+
     if(isset($_POST['titel'])){
     $titel = $_POST['titel'];
   }
-  if(isset($_POST['inhalt'])){
+  if(isset($_POST['text'])){
-    $inhalt = $_POST['inhalt'];
+    $inhalt = $_POST['text'];
   }
 
-$sql = "INSERT INTO idee (titel, inhalt) VALUES (?, ?)";
+$sql = "INSERT INTO idee (titel, inhalt, koordinatenLat, koordinatenLng) VALUES (?, ?, ?, ?)";
 $stmt = $db->prepare($sql);
-$stmt->execute(array($titel, $inhalt));
+$stmt->execute(array($titel, $inhalt, $lat, $lng));
 
 echo $db->lastInsertId();
 
+header("Location: https://751068-4.web.fhgr.ch/");
+die();
+
   ?>

system/kommentarSpeichern.php

@@ -0,0 +1,22 @@
+<?php
+require_once('data.php');
+?>
+
+
+<?php
+
+  $db = dbVerbindungErzeugen();
+
+  if(isset($_POST['text'])){
+    $inhalt = $_POST['text'];
+  }
+
+  $id = $_POST['idee_id'];
+  echo($id);
+
+$sql = "INSERT INTO kommentar (k_text, idee_id) VALUES (?, ?)";
+$stmt = $db->prepare($sql);
+$stmt->execute(array($inhalt, $id));
+
+
+  ?>