641 lines
16 KiB
JavaScript
641 lines
16 KiB
JavaScript
|
|
//LocalLike Objekt erstellen
|
|
|
|
let localLikes = {}
|
|
|
|
|
|
UPLOADCARE_LOCALE_TRANSLATIONS = {
|
|
buttons: {
|
|
cancel: '',
|
|
remove: '',
|
|
choose: {
|
|
files: {
|
|
one: '',
|
|
other: ''
|
|
},
|
|
images: {
|
|
one: '',
|
|
other: ''
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
|
|
|
|
$(document).ready(function(){
|
|
|
|
window.scrollTo(0,1)
|
|
|
|
|
|
// submit kommentar nicht seite neu laden
|
|
|
|
$("#kommentarform").submit(function(e) {
|
|
console.log("Comment Submitted")
|
|
|
|
e.preventDefault(); // avoid to execute the actual submit of the form.
|
|
});
|
|
|
|
|
|
|
|
|
|
if(!localStorage.getItem('firstVisit')){
|
|
console.log("loadStartscreen");
|
|
localStorage.setItem('firstVisit', 'false');
|
|
loadStartScreen();
|
|
} else {
|
|
console.log("not load Startscreen ");
|
|
$(".mapControls").removeClass("hideElement")
|
|
$("#logo").removeClass("hideElement")
|
|
|
|
|
|
}
|
|
|
|
|
|
//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));
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
function loadStartScreen(){
|
|
|
|
$("#startScreen").removeClass("hideElement")
|
|
|
|
$('#startScreen').click(() => {
|
|
$(".mapControls").removeClass("hideElement")
|
|
$("#logo").removeClass("hideElement")
|
|
$("#startScreen").addClass("hideElement")
|
|
|
|
})
|
|
|
|
setTimeout(() => {
|
|
$(".mapControls").removeClass("hideElement")
|
|
$("#logo").removeClass("hideElement")
|
|
$("#startScreen").addClass("hideElement")
|
|
}, 10000);
|
|
//onclick
|
|
//$(".mapControls").removeClass("hideElement")
|
|
//$("#logo").removeClass("hideElement")
|
|
|
|
}
|
|
|
|
function openOverlay(){
|
|
|
|
$("#overlay").removeClass("hidden").addClass("show")
|
|
$("#currentLocation").addClass("hideButton")
|
|
|
|
$("#cancel").click(function() {
|
|
$("#overlay").removeClass("show").addClass("hidden")
|
|
$("#currentLocation").removeClass("hideButton")
|
|
setTimeout(() => {
|
|
document.getElementById("overlay_container").innerHTML = "";
|
|
|
|
}, 300);
|
|
|
|
|
|
})
|
|
}
|
|
|
|
|
|
//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) {
|
|
|
|
document.getElementById("overlay_container").innerHTML = "";
|
|
let inhaltContainer = document.createElement("div");
|
|
inhaltContainer.setAttribute("id","inhaltContainer")
|
|
|
|
|
|
let likesErstellen = document.createElement("p");
|
|
let likes = document.createTextNode("Gefällt " + data.likes + " Mal");
|
|
likesErstellen.appendChild(likes);
|
|
likesErstellen.classList.add("likeDisplay");
|
|
|
|
let titleLocationContainer = document.createElement("div");
|
|
titleLocationContainer.classList.add("titleLocationContainer");
|
|
|
|
let titelErstellen = document.createElement("h1");
|
|
let titelInhalt = document.createTextNode(data.titel);
|
|
titelErstellen.appendChild(titelInhalt);
|
|
titelErstellen.classList.add("ideeTitel");
|
|
|
|
let adresseErstellen = document.createElement("p");
|
|
let adresseInhalt = document.createTextNode(data.adresse);
|
|
adresseErstellen.appendChild(adresseInhalt);
|
|
adresseErstellen.classList.add("ideeAdresse");
|
|
|
|
|
|
|
|
let inhaltErstellen = document.createElement("p");
|
|
let inhaltInhalt = document.createTextNode(data.inhalt);
|
|
inhaltErstellen.appendChild(inhaltInhalt);
|
|
inhaltErstellen.classList.add("ideeInhalt");
|
|
|
|
|
|
|
|
|
|
if(data.bild != null && data.bild != ""){
|
|
let bildContainer = $("<div>").attr({id: "gallery--getting-started", class: "ImgContainer pswp-gallery pswp-gallery--single-column"});
|
|
|
|
let loadingscreen = $("<div>").addClass("loadingscreen");
|
|
let loader = $("<div>").addClass("loader");
|
|
|
|
loader.appendTo(loadingscreen)
|
|
loadingscreen.appendTo($("#overlay_container"))
|
|
|
|
|
|
let imgUrlArr = JSON.parse(data.bild);
|
|
|
|
bildContainer.css("background-image", "url(" + imgUrlArr[0] + ")");
|
|
|
|
|
|
for (let i = 0; i < imgUrlArr.length; i++) {
|
|
|
|
|
|
let pswpA = $("<a>").attr({href: imgUrlArr[i], 'data-cropped': "true", target: "_blank"})
|
|
|
|
|
|
pswpA.appendTo(bildContainer)
|
|
|
|
}
|
|
|
|
bildContainer.prependTo($("#overlay_container"))
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} else {
|
|
inhaltContainer.classList.add("class","topMargin")
|
|
}
|
|
|
|
|
|
|
|
let ideeLike = document.createElement("img");
|
|
ideeLike.classList.add("herz");
|
|
|
|
|
|
//check if user has liked Idea before,load proper image and set class
|
|
|
|
if(localLikes.ideen.includes(data.id)){
|
|
ideeLike.src= "../images/herz-1.svg";
|
|
ideeLike.classList.add("liked");
|
|
}else{
|
|
ideeLike.src= "../images/herz-0.svg";
|
|
ideeLike.classList.add("unliked");
|
|
}
|
|
|
|
document.getElementById('overlay_container').appendChild(inhaltContainer);
|
|
document.getElementById('inhaltContainer').appendChild(likesErstellen);
|
|
document.getElementById('inhaltContainer').appendChild(ideeLike);
|
|
titleLocationContainer.appendChild(titelErstellen);
|
|
titleLocationContainer.appendChild(adresseErstellen);
|
|
document.getElementById('inhaltContainer').appendChild(titleLocationContainer);
|
|
document.getElementById('inhaltContainer').appendChild(inhaltErstellen);
|
|
|
|
|
|
|
|
|
|
|
|
ideeLike.addEventListener('click', function() {
|
|
|
|
if(localLikes.ideen.includes(data.id)){
|
|
ideeLike.src= "../images/herz-0.svg";
|
|
ideeLike.classList.add("unliked");
|
|
ideeLike.classList.remove("liked");
|
|
removeLike("idee", data.id)
|
|
}else{
|
|
|
|
ideeLike.src= "../images/herz-1.svg";
|
|
ideeLike.classList.add("liked");
|
|
ideeLike.classList.remove("unliked");
|
|
addLike("idee", data.id)
|
|
}
|
|
|
|
|
|
});
|
|
|
|
kommentarErstellen(data.id);
|
|
|
|
let kommentare_container = document.createElement("div")
|
|
kommentare_container.setAttribute("id", "kommentare_container");
|
|
document.getElementById('inhaltContainer').appendChild(kommentare_container);
|
|
|
|
|
|
|
|
kommentareAnzeigen(data.id);
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
//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("Gefällt " + response + " Mal")
|
|
|
|
});
|
|
|
|
//add like in LocalStorage
|
|
chageLocalStorrage("idee", id, "add")
|
|
|
|
|
|
|
|
|
|
}else if(typ == "kommentar"){
|
|
$.post('system/addLike.php/?typ=kommentar&id=' + id, {}).done(function(response){
|
|
|
|
|
|
element.parent().prev().children().first().html("Gefällt " + response + " Mal")
|
|
|
|
|
|
});
|
|
|
|
//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("Gefällt " + response + " Mal")
|
|
|
|
|
|
});
|
|
|
|
chageLocalStorrage("idee", id, "remove")
|
|
|
|
}else if(typ == "kommentar"){
|
|
$.post('system/removeLike.php/?typ=kommentar&id=' + id, {}).done(function(response){
|
|
|
|
|
|
element.parent().prev().children().first().html("Gefällt " + response + " Mal")
|
|
|
|
|
|
});
|
|
|
|
chageLocalStorrage("kommentar", id, "remove")
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
// kommentar formular likesErstellen
|
|
|
|
function kommentarErstellen(idee_id) {
|
|
console.log(idee_id);
|
|
|
|
|
|
let formular = document.createElement("form");
|
|
formular.classList.add("kommentarFormular");
|
|
formular.setAttribute("action", "../system/kommentarSpeichern.php");
|
|
formular.setAttribute("method", "post");
|
|
formular.setAttribute("id", "kommentarform");
|
|
document.getElementById("inhaltContainer").appendChild(formular);
|
|
|
|
|
|
let text_input = document.createElement("textarea");
|
|
text_input.classList.add("kommentarText");
|
|
text_input.setAttribute("rows", "3");
|
|
text_input.setAttribute("type", "text");
|
|
text_input.setAttribute("placeholder", "Schreibe einen Kommentar...");
|
|
text_input.setAttribute("name", "text");
|
|
|
|
let submit_input = document.createElement("input");
|
|
submit_input.classList.add("kommentarSubmit");
|
|
submit_input.setAttribute("type", "submit");
|
|
submit_input.setAttribute("value", "");
|
|
|
|
let id = document.createElement("input");
|
|
id.setAttribute("type", "hidden");
|
|
id.setAttribute("name", "idee_id")
|
|
id.value = idee_id;
|
|
|
|
|
|
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: "/system/kommentarSpeichern.php",
|
|
data: form.serialize(),
|
|
})
|
|
|
|
|
|
e.preventDefault();
|
|
$("textarea.kommentarText").val("")
|
|
document.getElementById("kommentare_container").innerHTML = "";
|
|
|
|
kommentareAnzeigen(idee_id);
|
|
});
|
|
};
|
|
|
|
|
|
|
|
// Idee formular erstellen
|
|
function formularErstellen(koordianten, ergebnisAdresse) {
|
|
|
|
document.getElementById("overlay_container").innerHTML = "";
|
|
|
|
|
|
let formular = document.createElement("form");
|
|
formular.classList.add("formular");
|
|
formular.setAttribute("action", "../system/ideeSpeichern.php");
|
|
formular.setAttribute("method", "post");
|
|
formular.setAttribute("id", "form");
|
|
document.getElementById("overlay_container").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_input = document.createElement("input");
|
|
titel_input.setAttribute("type", "text");
|
|
titel_input.classList.add("titel");
|
|
titel_input.setAttribute("name", "titel");
|
|
titel_input.setAttribute("placeholder", "TITEL");
|
|
|
|
let adresse_input = document.createElement("input");
|
|
adresse_input.setAttribute("type", "text");
|
|
adresse_input.classList.add("adresse");
|
|
adresse_input.setAttribute("name", "adresse");
|
|
adresse_input.setAttribute("value", ergebnisAdresse);
|
|
|
|
|
|
let text_input = $("<textarea>");
|
|
text_input.attr("rows", "10");
|
|
text_input.attr("name", "text");
|
|
text_input.attr("placeholder", "Deine Idee...");
|
|
|
|
let image_links = document.createElement("input");
|
|
image_links.setAttribute("type", "hidden");
|
|
image_links.setAttribute("name", "bilder");
|
|
|
|
let submit_input = document.createElement("button");
|
|
submit_input.setAttribute("type", "submit");
|
|
submit_input.classList.add("submit");
|
|
|
|
let textAndImage = $("<div>").addClass("textAndImage")
|
|
|
|
|
|
|
|
document.getElementById("form").appendChild(titel_input);
|
|
document.getElementById("form").appendChild(adresse_input);
|
|
textAndImage.appendTo("#form");
|
|
text_input.appendTo(textAndImage);
|
|
|
|
|
|
document.getElementById("form").appendChild(submit_input);
|
|
document.getElementById("form").appendChild(koordinaten_lat);
|
|
document.getElementById("form").appendChild(koordinaten_lng);
|
|
document.getElementById("form").appendChild(image_links);
|
|
|
|
let imageUpload = $('<div class="image-preview" id="image-upload">')
|
|
imageUpload.html('<input type="hidden" role="uploadcare-uploader" data-public-key="3a3c37e85850c6cfe077" data-multiple="true" data-images-only data-clearable data-tabs="file camera" data-image-shrink="1024x1024" data-system-dialog="true"/>')
|
|
|
|
imageUpload.appendTo(textAndImage);
|
|
|
|
|
|
|
|
// get a widget reference
|
|
const widget = uploadcare.Widget("[role=uploadcare-uploader]", { multiple: true});
|
|
|
|
// listen to the "upload completed" event
|
|
widget.onUploadComplete(fileGroupInfo => {
|
|
// get a information about uploaded group
|
|
// check https://uploadcare.com/docs/file-uploader-api/file-groups/#file-group-info
|
|
|
|
let linkArr = [];
|
|
let ImgUrl;
|
|
|
|
|
|
|
|
|
|
$("<div>").addClass("ImgPrevContainer").appendTo($("div.image-preview"));
|
|
|
|
for (var i = 0; i < fileGroupInfo.count && i < 4; i++) {
|
|
ImgUrl = "https://ucarecdn.com/" + fileGroupInfo.uuid + "/nth/" + i + "/-/preview/-/quality/smart/-/format/auto/";
|
|
linkArr.push(ImgUrl);
|
|
createImgPrev(ImgUrl + "-/resize/x100/"); //img Preview 100 pixels high
|
|
};
|
|
|
|
|
|
// ImgUrl = "https://ucarecdn.com/" + fileInfo.uuid + "/-/preview/-/quality/smart/-/format/auto/";
|
|
// console.log(fileInfo);
|
|
// linkArr.push(ImgUrl);
|
|
|
|
|
|
let linkArrString = JSON.stringify(linkArr);
|
|
console.log(linkArrString);
|
|
image_links.value = linkArrString;
|
|
|
|
$(".uploadcare--widget__button_type_remove").click(() => {
|
|
console.log("delete");
|
|
$("div.ImgPrevContainer").remove()
|
|
image_links.value = "";
|
|
})
|
|
|
|
});
|
|
|
|
console.log($(".uploadcare--widget__button_type_open needsclick"));
|
|
$(".uploadcare--widget__button_type_open needsclick").addClass("test")
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
function createImgPrev(imgURL){
|
|
|
|
let prevImg = $("<div>").addClass("prevIMG");
|
|
prevImg.css("background-image", "url(" + imgURL + ")");
|
|
prevImg.appendTo($("div.ImgPrevContainer"));
|
|
|
|
// $("div.ImgPrevContainer").css('background-image', 'url(' + imgURL + ')');
|
|
}
|
|
|
|
|
|
|
|
function kommentareAnzeigen(idee_id){
|
|
|
|
|
|
$.post("./system/alleKommentareHolen.php/?id=" + idee_id, {}).done(function(comments){
|
|
|
|
|
|
|
|
|
|
let commentArray = JSON.parse(comments);
|
|
|
|
|
|
for (var i = 0; i < commentArray.length; i++) {
|
|
|
|
|
|
let thisComment = commentArray[i];
|
|
|
|
|
|
let kommentarContainer = $("<div>").addClass("comment");
|
|
let kommentarLinks = $("<div>").addClass("commentLeft")
|
|
let kommentarRechts = $("<div>").addClass("commentRight")
|
|
|
|
|
|
|
|
|
|
let kommentarLikeNumber = $("<p>").text("Gefällt " + thisComment.k_likes + " Mal").addClass("commentLikeNumber");
|
|
kommentarLikeNumber.appendTo(kommentarLinks);
|
|
|
|
let kommentarText = $("<p>").addClass("commentText");
|
|
kommentarText.text(thisComment.k_text);
|
|
kommentarText.appendTo(kommentarLinks);
|
|
|
|
let kommentarLikeButton = $("<img>").addClass("unliked commentLike")
|
|
|
|
|
|
if(localLikes.kommentare.includes(thisComment.k_id)){
|
|
kommentarLikeButton.attr("src", "../images/herz-1.svg");
|
|
kommentarLikeButton.addClass("liked");
|
|
}else{
|
|
kommentarLikeButton.attr("src", "../images/herz-0.svg");
|
|
kommentarLikeButton.addClass("unliked");
|
|
}
|
|
|
|
kommentarLikeButton.appendTo(kommentarRechts);
|
|
|
|
kommentarLinks.appendTo(kommentarContainer)
|
|
kommentarRechts.appendTo(kommentarContainer)
|
|
|
|
kommentarContainer.appendTo($("#kommentare_container"));
|
|
|
|
|
|
|
|
|
|
kommentarLikeButton.click( function() {
|
|
|
|
if(localLikes.kommentare.includes(thisComment.k_id)){
|
|
kommentarLikeButton.attr("src", "../images/herz-0.svg");
|
|
kommentarLikeButton.addClass("unliked");
|
|
kommentarLikeButton.removeClass("liked");
|
|
removeLike("kommentar", thisComment.k_id, $(this))
|
|
}else{
|
|
|
|
kommentarLikeButton.attr("src", "../images/herz-1.svg");
|
|
kommentarLikeButton.addClass("liked");
|
|
kommentarLikeButton.removeClass("unliked");
|
|
addLike("kommentar", thisComment.k_id, $(this))
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
|