added like to comments etc

css/style.css

@@ -47,3 +47,18 @@ h1 {
   width: 60px;
   height: 60px;
 }
+
+p.commentText{
+  display: inline-block;
+  padding-right: 20px;
+}
+
+p.commentLikeNumber{
+  display: inline-block;
+  padding-right: 20px;
+}
+
+img.commentLike{
+  width: 15px;
+  display: inline-block;
+}

js/functions.js

@@ -28,16 +28,91 @@ fetch(url,
 
 */
 
-// submit kommentar nicht seite neu laden
+//LocalLike Objekt erstellen
+
+let localLikes = {}
+
+
 
 $(document).ready(function(){
+
+
+  // submit kommentar nicht seite neu laden
+
     $("#kommentarform").submit(function(e) {
         console.log("Submitted")
         e.preventDefault(); // avoid to execute the actual submit of the form.
     });
+
+
+
+
+  //LocalStorage erstellen oder auslesen
+
+  if(localStorage.getItem('localLikes')){
+    //likes auslesen
+    
+    localLikes = JSON.parse(localStorage.getItem('localLikes'))
+
+    console.log("Stored local Likes:")
+    console.log(localLikes)
+    
+  }else{
+    
+    //LocalLikes leer 
+
+    localLikes = {
+      ideen: [],
+      kommentare: []
+    }
+
+    console.log("New Local Likes created")
+    console.log(localLikes)
+    
+    localStorage.setItem('localLikes',JSON.stringify(localLikes));
+
+  }
 })
 
-// idee laden
+
+
+//LocalStorage Anpassen (Likes hinzufügen oder entfernen)
+
+
+function chageLocalStorrage(typ, id, addRemove){
+  
+  if(typ =="idee"){
+
+    if(addRemove == "add" && !localLikes.ideen.includes(id)){
+      localLikes.ideen.push(id);
+      console.log("like added");
+      console.log(localLikes);
+    }else if(addRemove == "remove" && localLikes.ideen.includes(id)){
+      let index = localLikes.ideen.indexOf(id);
+      localLikes.ideen.splice(index, 1);
+      console.log("like removed");
+      console.log(localLikes);
+    }
+
+  }else if(typ == "kommentar"){
+
+    if(addRemove == "add"){
+      localLikes.kommentare.push(id);
+    }else if(addRemove == "remove"){
+      let index = localLikes.kommentare.indexOf(id);
+      localLikes.kommentare.splice(index, 1);
+    }
+
+
+  }
+
+  localStorage.setItem('localLikes',JSON.stringify(localLikes));
+  
+}
+
+
+
+// IDEE ANZEIGEN
 
 function ideeAnzeigen(data) {
 
@@ -58,7 +133,7 @@ function ideeAnzeigen(data) {
   let likesErstellen = document.createElement("p");
   let likes = document.createTextNode(data.likes + " Likes");
   likesErstellen.appendChild(likes);
-  likesErstellen.classList.add("loeschen");
+  likesErstellen.classList.add("likeDisplay");
   document.getElementById('idee').appendChild(likesErstellen);
 
   let bild = document.createElement("img");
@@ -69,22 +144,40 @@ function ideeAnzeigen(data) {
   console.log(data);
 
 
+  let ideeLike = document.createElement("img");
+  ideeLike.classList.add("herz");
 
 
-  let herz = document.createElement("img");
+  //check if user has liked Idea before,load proper image and set class
-  herz.src= "../images/herz-0.png";
+  
-  herz.classList.add("herz");
+  if(localLikes.ideen.includes(data.id)){
-  herz.classList.add("loeschen");
+    ideeLike.src= "../images/herz-1.png";
-  document.getElementById('idee').appendChild(herz);
+    ideeLike.classList.add("liked");
-  herz.addEventListener('click', function() {
+  }else{
-    herz.src= "../images/herz-1.png";
+    ideeLike.src= "../images/herz-0.png";
+    ideeLike.classList.add("unliked");
+  }
 
-    $.post('system/addLike.php/?id=' + data.id, {}).done(function(response){
+  document.getElementById('idee').appendChild(ideeLike);
-      $("#mypar").html(response.amount);
 
-    });
 
 
+  ideeLike.addEventListener('click', function() {
+
+    if(localLikes.ideen.includes(data.id)){
+      ideeLike.src= "../images/herz-0.png";
+      ideeLike.classList.add("unliked");
+      ideeLike.classList.remove("liked");
+      removeLike("idee", data.id)
+    }else{
+      
+      ideeLike.src= "../images/herz-1.png";
+      ideeLike.classList.add("liked");
+      ideeLike.classList.remove("unliked");
+      addLike("idee", data.id)
+    }
+   
+
   });
 
   kommentarErstellen(data.id);
@@ -101,6 +194,82 @@ function ideeAnzeigen(data) {
 };
 
 
+
+
+//Like Hinzufügen
+
+function addLike(typ, id, element){
+
+
+
+  if(typ == "idee"){
+
+      //increment likes in DB
+    $.post('system/addLike.php/?typ=idee&id=' + id, {}).done(function(response){
+      
+
+        //neue Likes anzeigen
+        
+        $("p.likeDisplay").html(response + " Likes") 
+  
+    });
+
+    //add like in LocalStorage
+    chageLocalStorrage("idee", id, "add")
+
+  
+
+
+  }else if(typ == "kommentar"){
+    $.post('system/addLike.php/?typ=kommentar&id=' + id, {}).done(function(response){
+
+      
+      element.prev().html(response + " Likes") 
+      
+  
+    });
+
+  //add like in LocalStorage
+    chageLocalStorrage("kommentar", id, "add")
+  } 
+
+}
+
+function removeLike(typ, id, element){
+
+  //decrement likes in DB
+
+  if(typ == "idee"){
+    $.post('system/removeLike.php/?typ=idee&id=' + id, {}).done(function(response){
+
+     
+      $("p.likeDisplay").html(response + " Likes") 
+
+  
+    });
+
+    chageLocalStorrage("idee", id, "remove")
+
+  }else if(typ == "kommentar"){
+    $.post('system/removeLike.php/?typ=kommentar&id=' + id, {}).done(function(response){
+      
+
+      element.prev().html(response + " Likes") 
+      
+  
+    });
+
+    chageLocalStorrage("kommentar", id, "remove")
+
+  } 
+
+  
+}
+
+
+
+
+
 //  kommentar formular likesErstellen
 
 function kommentarErstellen(idee_id) {
@@ -109,7 +278,7 @@ function kommentarErstellen(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("action", "../system/kommentarSpeichern.php");
   formular.setAttribute("method", "post");
   formular.setAttribute("id", "kommentarform");
   document.getElementById("idee").appendChild(formular);
@@ -141,7 +310,7 @@ function kommentarErstellen(idee_id) {
 
     $.ajax({
       type: "POST",
-      url: "https://751068-4.web.fhgr.ch/system/kommentarSpeichern.php",
+      url: "/system/kommentarSpeichern.php",
       data: form.serialize(),
     })
       e.preventDefault();
@@ -151,6 +320,8 @@ function kommentarErstellen(idee_id) {
   });
 };
 
+
+
 // Idee formular erstellen
 function formularErstellen(koordianten) {
 
@@ -159,7 +330,7 @@ function formularErstellen(koordianten) {
 
   let formular = document.createElement("form");
   formular.classList.add("formular");
-  formular.setAttribute("action", "https://751068-4.web.fhgr.ch/system/ideeSpeichern.php");
+  formular.setAttribute("action", "../system/ideeSpeichern.php");
   formular.setAttribute("method", "post");
   formular.setAttribute("id", "form");
   document.getElementById("idee").appendChild(formular);
@@ -208,29 +379,91 @@ function formularErstellen(koordianten) {
 
 function kommentareAnzeigen(idee_id){
 
-  document.getElementById("kommentare_container").innerHTML = "";
 
-  let  url = "system/alleKommentareHolen.php/?id=" + idee_id;
+  $.post("./system/alleKommentareHolen.php/?id=" + idee_id, {}).done(function(comments){
-  fetch(url)
+      
-    .then((response) => {
+    let k = document.createElement("h3");
-      return response.json();
+    let k_text = document.createTextNode("Kommentare:");
-    })
+    k.appendChild(k_text);
-    .then((data) => {
+    document.getElementById('kommentare_container').appendChild(k);
-        let k = document.createElement("h3");
-        let k_text = document.createTextNode("Kommentare:");
-        k.appendChild(k_text);
-        k.classList.add("loeschen")
-        document.getElementById('kommentare_container').appendChild(k);
 
-        for (var i = 0; i < data.length; i++) {
+  
-          let kommentarErstellen = document.createElement("p");
+    let commentArray = JSON.parse(comments);
-          let kommentar = document.createTextNode(data[i].k_text);
+    
-          kommentarErstellen.appendChild(kommentar);
+
-          kommentarErstellen.classList.add("loeschen");
+    for (var i = 0; i < commentArray.length; i++) {
-          document.getElementById('kommentare_container').appendChild(kommentarErstellen);
+
+
+      let thisComment = commentArray[i];
+
+
+      let kommentarContainer = $("<div>").addClass("comment");
+
+
+      let kommentarText = $("<p>").addClass("commentText");
+      kommentarText.text(thisComment.k_text);
+      kommentarText.appendTo(kommentarContainer);
+
+      let kommentarLikeNumber = $("<p>").text(thisComment.k_likes + " Likes").addClass("commentLikeNumber");
+      kommentarLikeNumber.appendTo(kommentarContainer);
+
+      let kommentarLikeButton = $("<img>").addClass("unliked commentLike")
+      
+
+      if(localLikes.kommentare.includes(thisComment.k_id)){
+        kommentarLikeButton.attr("src", "../images/herz-1.png");
+        kommentarLikeButton.addClass("liked");
+      }else{
+        kommentarLikeButton.attr("src", "../images/herz-0.png");
+        kommentarLikeButton.addClass("unliked");
+      }
+
+      kommentarLikeButton.appendTo(kommentarContainer);
+
+      kommentarContainer.appendTo($("#kommentare_container"));
+
+
+
+
+      kommentarLikeButton.click( function() {
+
+        if(localLikes.kommentare.includes(thisComment.k_id)){
+          kommentarLikeButton.attr("src", "../images/herz-0.png");
+          kommentarLikeButton.addClass("unliked");
+          kommentarLikeButton.removeClass("liked");
+          removeLike("kommentar", thisComment.k_id, $(this))
+        }else{
+          
+          kommentarLikeButton.attr("src", "../images/herz-1.png");
+          kommentarLikeButton.addClass("liked");
+          kommentarLikeButton.removeClass("unliked");
+          addLike("kommentar", thisComment.k_id, $(this))
+          
         }
-    })
+      
-    .catch(function(error) {
+
-      console.log('Error!: ' + error.message);
+      });
-    });
+
+
+      
+
+      /*
+
+      let kommentarErstellen = document.createElement("p");
+      let kommentar = document.createTextNode(commentArray[i].k_text);
+      kommentarErstellen.appendChild(kommentar);
+      kommentarErstellen.classList.add("comment");
+      document.getElementById('kommentare_container').appendChild(kommentarErstellen);
+
+      */
+    }
+   
+
+  });
+
+
   }
+
+
+
+

system/addLike.php

@@ -7,17 +7,39 @@ require_once('data.php');
   $db = dbVerbindungErzeugen();
 
   $id = $_GET["id"];
-  $sql = "SELECT likes FROM idee WHERE id = $id";
+  $typ = $_GET["typ"];
+
+  if ($typ == "idee") {
+    $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(array($likeCount, $id));
 
+  } elseif ($typ == "kommentar"){
+
+    $sql = "SELECT k_likes FROM kommentar WHERE k_id = $id";
+    $resultat = $db->query($sql);
+    $likeCount = $resultat ->fetchColumn();
+   $likeCount += 1;
+ 
+ 
+
+ 
+   $sql = "UPDATE kommentar SET k_likes=? WHERE k_id=?";
+  $stmt = $db->prepare($sql);
+  $stmt->execute(array($likeCount, $id));
+
+  }
+
+  echo ($likeCount);
+  
+
 
 ?>

system/ideeSpeichern.php

@@ -23,7 +23,7 @@ $stmt->execute(array($titel, $inhalt, $lat, $lng));
 
 echo $db->lastInsertId();
 
-header("Location: https://751068-4.web.fhgr.ch/");
+header("Location: /");
 die();
 
   ?>

system/removeLike.php

@@ -0,0 +1,46 @@
+<?php
+require_once('data.php');
+?>
+
+<?php
+
+  $db = dbVerbindungErzeugen();
+
+  $id = $_GET["id"];
+  $typ = $_GET["typ"];
+
+  if ($typ == "idee") {
+    $sql = "SELECT likes FROM idee WHERE id = $id";
+ 	$resultat = $db->query($sql);
+ 	$likeCount = $resultat ->fetchColumn();
+  
+  if ($likeCount > 0){
+    $likeCount -= 1;
+  }
+
+
+	echo ($likeCount);
+
+  $sql = "UPDATE idee SET likes=? WHERE id=?";
+ $stmt = $db->prepare($sql);
+ $stmt->execute(array($likeCount, $id));
+
+  } elseif ($typ == "kommentar"){
+
+    $sql = "SELECT k_likes FROM kommentar WHERE k_id = $id";
+    $resultat = $db->query($sql);
+    $likeCount = $resultat ->fetchColumn();
+   $likeCount -= 1;
+ 
+ 
+   echo ($likeCount);
+ 
+   $sql = "UPDATE kommentar SET k_likes=? WHERE k_id=?";
+  $stmt = $db->prepare($sql);
+  $stmt->execute(array($likeCount, $id));
+
+  }
+  
+
+
+?>