eckertnoah
/
spinn_mit
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

added like to comments etc

noah
nooahe 2022-11-15 14:59:24 +01:00
parent f365ca3592
commit 3d178fd58e
5 changed files with 357 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
css/style.css
View File

@ -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;
}

299
js/functions.js
View File

@ -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,20 +144,38 @@ 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
$.post('system/addLike.php/?id=' + data.id, {}).done(function(response){
$("#mypar").html(response.amount);
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");
}
});
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)
}
});
@ -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) => {
$.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);
k.classList.add("loeschen")
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 = $("<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");
}
})
.catch(function(error) {
console.log('Error!: ' + error.message);
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))
}
});
/*
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);
*/
}
});
}

24
system/addLike.php
View File

@ -7,17 +7,39 @@ require_once('data.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();
$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);
?>

2
system/ideeSpeichern.php
View File

@ -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();
?>

46
system/removeLike.php Normal file
View File

@ -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));
}
?>