added like to comments etc
nooahe
parent
f365ca3592
commit
3d178fd58e
|
|
@ -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;
|
||||
}
|
||||
309
js/functions.js
309
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,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) => {
|
||||
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);
|
||||
|
||||
|
||||
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");
|
||||
}
|
||||
|
||||
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))
|
||||
|
||||
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);
|
||||
}
|
||||
})
|
||||
.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);
|
||||
|
||||
*/
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
|
||||
|
||||
?>
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
||||
?>
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
?>
|
||||
Loading…
Reference in New Issue