diff --git a/css/style.css b/css/style.css index 978394f..1a93781 100644 --- a/css/style.css +++ b/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; +} \ No newline at end of file diff --git a/js/functions.js b/js/functions.js index 171a356..23c58b4 100644 --- a/js/functions.js +++ b/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"); - 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"; + //check if user has liked Idea before,load proper image and set class + + if(localLikes.ideen.includes(data.id)){ + ideeLike.src= "../images/herz-1.png"; + ideeLike.classList.add("liked"); + }else{ + ideeLike.src= "../images/herz-0.png"; + ideeLike.classList.add("unliked"); + } - $.post('system/addLike.php/?id=' + data.id, {}).done(function(response){ - $("#mypar").html(response.amount); + document.getElementById('idee').appendChild(ideeLike); - }); + 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; - 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('kommentare_container').appendChild(k); + $.post("./system/alleKommentareHolen.php/?id=" + idee_id, {}).done(function(comments){ + + let k = document.createElement("h3"); + let k_text = document.createTextNode("Kommentare:"); + k.appendChild(k_text); + document.getElementById('kommentare_container').appendChild(k); - for (var i = 0; i < data.length; i++) { - let kommentarErstellen = document.createElement("p"); - let kommentar = document.createTextNode(data[i].k_text); - kommentarErstellen.appendChild(kommentar); - kommentarErstellen.classList.add("loeschen"); - document.getElementById('kommentare_container').appendChild(kommentarErstellen); + + let commentArray = JSON.parse(comments); + + + for (var i = 0; i < commentArray.length; i++) { + + + let thisComment = commentArray[i]; + + + let kommentarContainer = $("
").addClass("comment"); + + + let kommentarText = $("

").addClass("commentText"); + kommentarText.text(thisComment.k_text); + kommentarText.appendTo(kommentarContainer); + + let kommentarLikeNumber = $("

").text(thisComment.k_likes + " Likes").addClass("commentLikeNumber"); + kommentarLikeNumber.appendTo(kommentarContainer); + + let kommentarLikeButton = $("").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); + + */ + } + + + }); + + } + + + + diff --git a/system/addLike.php b/system/addLike.php index 972f919..c0c651d 100644 --- a/system/addLike.php +++ b/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); + + ?> diff --git a/system/ideeSpeichern.php b/system/ideeSpeichern.php index a227c49..55bfc67 100644 --- a/system/ideeSpeichern.php +++ b/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(); ?> diff --git a/system/removeLike.php b/system/removeLike.php new file mode 100644 index 0000000..a86ff41 --- /dev/null +++ b/system/removeLike.php @@ -0,0 +1,46 @@ + + +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)); + + } + + + +?>