diff --git a/express-server/public/images/Hintergrund.png b/express-server/public/images/Hintergrund.png new file mode 100644 index 00000000..e65382d6 Binary files /dev/null and b/express-server/public/images/Hintergrund.png differ diff --git a/express-server/public/javascripts/ajax.js b/express-server/public/javascripts/ajax.js index ebc9adaa..f5b53ccc 100644 --- a/express-server/public/javascripts/ajax.js +++ b/express-server/public/javascripts/ajax.js @@ -62,6 +62,7 @@ $(document).ready(function () { success(res) { console.log("add funktioniert"); $(".listen-ausgabe").html(""); + $(".shared-cards").html(""); eigeneEinkaufslisten(); geteilteEinkaufslisten(); $(".EigeneListeAdd").modal("hide"); @@ -89,6 +90,7 @@ var globalegraddid = ""; // var globaleGetZwischenID = ""; function eigeneEinkaufslisten() { + // $(".listen-ausgabe").remove(); firebase.auth().onAuthStateChanged(async function (user) { if (user) { firebase.auth().currentUser.getIdToken( /* forceRefresh */ true).then(function (idtoken) { @@ -113,12 +115,14 @@ function eigeneEinkaufslisten() { success(data) { const userinfo = data.name; const picture = data.picture; - console.log(data) + console.log(res) for (let i = 0; i < res.length; i++) { const el = res[i]; + $('body').attr('name',`${idtoken}`); + $(".listen-ausgabe").append(`
-
+
Avatar @@ -126,6 +130,7 @@ function eigeneEinkaufslisten() { +
@@ -138,6 +143,7 @@ function eigeneEinkaufslisten() { slbearbeiten(); loeschen(); Detail(); + shareinvite(); // groupHinzufügen() }, error(err) { @@ -165,7 +171,7 @@ function geteilteEinkaufslisten() { firebase.auth().onAuthStateChanged(async function (user) { if (user) { firebase.auth().currentUser.getIdToken( /* forceRefresh */ true).then(function (idtoken) { - console.log("/sharedshoppinglists idtoke: ", idtoken) + // console.log("/sharedshoppinglists idtoke: ", idtoken) $.ajax({ data: "GET", url: "/sharedshoppinglists", @@ -173,8 +179,41 @@ function geteilteEinkaufslisten() { idtoken: idtoken }, success(res) { - console.log("Geteilte Einkaufslisten"); - // $(".shared-cards").append(`
${res}
`); + console.log(res); + for (let i = 0; i < res.length; i++) { + const el = res[i]; + $.ajax({ + type: "GET", + url: "/shoppinglist_json/" + res[i].sl_id, + data: { + idtoken: idtoken + }, + success(result){ + console.log(result); + + $(".shared-cards").append(`
+
+
+ + Avatar + ${result.admin.name} + + + +
+ +
+
${result.name}
+

${result.description}

+
+
`); + slbearbeiten(); + loeschen(); + sharedtail(); + },error(err){ + console.log(err); + } + })} }, error(err) { console.error("/sharedshoppinglists error:", err); @@ -187,19 +226,18 @@ function geteilteEinkaufslisten() { }); }; -function loeschen() { - $(".trash").click(function () { - - let card = $(this).closest(".card"); +function selfexinvite(){ +$(".sharetrash").click(function(){ + let card = $(this).closest(".card"); let id = card.attr("id"); - // console.log(id); - + firebase.auth().currentUser.getIdToken( /* forceRefresh */ true).then(function (idtoken) { $.ajax({ type: "DELETE", - url: "/shoppinglist", + url: "/exitinvite", data: { - sl_id: id + sl_id: id, + idtoken: idtoken }, success(res) { console.log("card gelöscht"); @@ -209,7 +247,128 @@ function loeschen() { console.log("error"); } }); + }).catch((error) => console.error("Get id token client error: ", error)); +}); +} +function sharedtail (){ + $(".shareedit").click(function(){ + $(".cardausgabe").hide(); + $(".sharecards").hide(); + $(".strich").hide(); + $(".detailcardausgabe").show(); + + let card = $(this).closest(".card"); + let sl_id = card.attr("id"); + firebase.auth().currentUser.getIdToken( /* forceRefresh */ true).then(function (idtoken) { + $.ajax({ + type: "GET", + url: "/shoppinglist_json/" + sl_id, + data: { + idtoken: idtoken + }, + success(result){ + Members = result.members + var link = "/dash/" + idtoken; + $(".kopf").attr("style", `background-color:#${result.color}`); + + console.log(result); + + $(".card-header").append(`
+ + + + +

+ ${result.name} +

+ `); + for (let i = 0; i < result.groups.length; i++) { + const el = result.groups[i]; + $(".gruppeninhalt").append(`
+
+ +
+
${el.name}
+ + + + +
+
+
+ +
+ `); + for (let x = 0; x < el.content.length; x++) { + const el2 = el.content[x] + $(`.${el.name}`).append(`
+
+
+ ${el2.name}${el2.count} +
+
`); + } + } + $(".alleMem").append(` +
Avatar +   + ${result.admin.name}
+
+ `); + for (let i = 0; i < result.members.length; i++) { + const el = result.members[i]; + $(".alleMem").append(` +
Avatar +   + ${el.name}
+ `); + } + lala(); + gruppenhinzu(); + ItemAdden(); + groupdelete(); + groupbearbeiten(); + MemberAnzeigen(); + + },error(err){ + console.log(err); + } + }) + }).catch((error) => console.error("Get id token client error: ", error)); + }) +} + +function MemberAnzeigen(){ + $(".showMembers").click(function(){ + $(".Mem").modal('show'); + }); +} + +function loeschen() { + $(".trash").click(function () { + + let card = $(this).closest(".card"); + let id = card.attr("id"); + + // console.log(id); + firebase.auth().currentUser.getIdToken( /* forceRefresh */ true).then(function (idtoken) { + $.ajax({ + type: "DELETE", + url: "/shoppinglist", + data: { + sl_id: id, + idtoken: idtoken + }, + success(res) { + console.log("card gelöscht"); + card.remove(); + }, + error(err) { + console.log("error"); + } + }); + }).catch((error) => console.error("Get id token client error: ", error)); }); }; @@ -227,7 +386,7 @@ function gruppenhinzu() { let name = $("#groupname").val(); let color = $("input:checked").val(); - // $("#ListenDetailAdd").modal("hide"); + console.log(globaleAddZwischenID); firebase.auth().onAuthStateChanged(async function (user) { @@ -245,23 +404,10 @@ function gruppenhinzu() { hidden: false }, success(res) { - - console.log(res); - $("input:checked").val(""); $("#groupname").val(""); + $("input:checked").val(""); $(".ListenDetailAdd").modal("hide"); - - $(".gruppeninhalt").append(`
-
- -
${name}
-
-
-
- -
- `); - + refreshDetailsl(globaleAddZwischenID); }, error(err) { console.log("error"); @@ -280,6 +426,8 @@ function Detail() { $(".edit").click(function () { $(".cardausgabe").hide(); + $(".sharecards").hide(); + $(".strich").hide(); $(".detailcardausgabe").show(); let card = $(this).closest(".card"); @@ -320,24 +468,39 @@ function Detail() { $(".kopf").attr("style", `background-color:#${neu[0].color}`); - console.log(neu[0].color); + console.log(res); + + if (res.invitelink != null) { + $(".card-header").append(`
+ + + + +

+ ${neu[0].name} +

+ `); + } + else{ + $(".card-header").append(`
+ + + + +

+ ${neu[0].name} +

+ `); + } - $(".card-header").append(`
- - - - -

- ${neu[0].name} -

- `); for (let i = 0; i < res.groups.length; i++) { const el = res.groups[i]; $(".gruppeninhalt").append(`
-
${el.name}
+
${el.name}
+ @@ -349,18 +512,48 @@ function Detail() { `); for (let x = 0; x < el.content.length; x++) { const el2 = el.content[x] - $(`.${el.name}`).append(`
-
-
- ${el2.name}${el2.count} -
-
`); + $(`.${el.name}`).append(`
+
+
+ ${el2.name}${el2.count}x +
+
`); } } + + $(".alleMem").append(` +
Avatar +   + ${res.admin.name}
+
+ `); + + if (res.members.length == "0") { + $(".alleMem").append("
Noch keine Mitglieder vorhanden
"); + } + else{ + for (let i = 0; i < res.members.length; i++) { + const el = res.members[i]; + $(".alleMem").append(` +
Avatar +   + ${el.name} + + +
+ `); + } + + } lala(); gruppenhinzu(); ItemAdden(); groupdelete(); + groupbearbeiten(); + MemberAnzeigen(); + delMember(); + itembearbeiten(); + donepurchase(); }, error(err) { console.log("Detail error userinfo_json: ", err); @@ -383,6 +576,91 @@ function Detail() { }); }); }; +var glitemid = ""; +function itembearbeiten() { + $(".itemedit").click(function(){ + let getitemid = $(this).closest('.checkbox'); + let itemid = getitemid.attr('id'); + let getgroupid = $(this).closest('.groupid'); + let groupid = getgroupid.attr('id'); + let getslid = $(this).closest('.shoplisteid'); + let slid = getslid.attr('id'); + glitemid = itemid; + + console.log(itemid, groupid, slid); + + let name = $(this).closest('div').find('span.ed').text(); + let anz = $(this).closest('div').find('span.ed2').text(); + let anzperfekt = anz.split("x")[0]; + + console.log(name, anzperfekt); + + $(".eh").prop("id",`${slid}`); + $(".eh2").prop("id",`${groupid}`); + $(".eh3").prop("id",`${itemid}`); + + + $(".GroupItemedit").modal('show'); + $("#itemnameb").val(name); + $("#inputGroupSelect02").val(anzperfekt); + }); +} + +$(".itemhinzub").click(function(){ + let slid = $(this).closest(".eh").attr('id'); + let groupid = $(this).closest(".eh2").attr('id'); + + + let name = $("#itemnameb").val(); + let anz = $("#inputGroupSelect02").val(); + + console.log(glitemid); + + $.ajax({ + type: "PUT", + url: "/item", + data: { + sl_id: slid, + group_id: groupid, + item_id: glitemid, + name: name, + count: anz + }, + success(res) { + console.log("item verändert"); + refreshDetailsl(slid); + }, + error(err) { + console.log("error"); + } + }); + +}); + +function delMember(){ + $(".exinvitemembersssss").click(function(){ + let getid = $(this).closest('.slid'); + let shoplistid = getid.attr('id'); + let getid2 = $(this).closest('.uid'); + let username = getid2.attr('id'); + + $.ajax({ + type: "DELETE", + url: "/member", + data: { + sl_id: shoplistid, + uid: username + }, + success(res) { + console.log("user entfernt"); + refreshDetailsl(shoplistid); + }, + error(err) { + console.log("error"); + } + }); + }); +} function ItemAdden() { $(".itemadd").click(function () { @@ -395,38 +673,6 @@ function ItemAdden() { globalegraddid = grid; globaleAddZwischenID = slid; $('.GroupItemAdd').modal('show'); - - // firebase.auth().onAuthStateChanged(async function (user) { - // if (user) { - // firebase.auth().currentUser.getIdToken( /* forceRefresh */ true).then(function (idtoken) { - // $.ajax({ - // type: "GET", - // url: "/shoppinglist_json/" + id, - // data: { - // idtoken: idtoken - // }, - // success(result) { - - // console.log(result); - - // for (let i = 0; i < result.groups.length; i++) { - // const el = result.groups[i]; - - // $(".custom-select-groups").append(` - // - // `); - // } - - // }, - // error(err) { - // console.log(err); - // } - // }); - // }).catch((error) => console.error("Get id token client error: ", error)); - // } else { - // console.log("Check Auth error", user) - // } - // }); }); } @@ -453,6 +699,7 @@ $(".itemhinzu").click(function () { success(result) { $('.GroupItemAdd').modal('hide'); console.log("post item"); + refreshDetailsl(globaleAddZwischenID); }, error(err) { @@ -488,7 +735,7 @@ function groupdelete() { }, success(res) { console.log("card gelöscht"); - $(`.${groupid}`).remove(); + refreshDetailsl(shoplistid); }, error(err) { console.log("error"); @@ -504,31 +751,320 @@ $(".sledit").click(function(){ let slid = $(this).closest(".card").attr('id'); let desc = $(this).closest('div').siblings().find('p.card-text').text(); let name = $(this).closest('div').siblings().find('h5.card-title').text(); + let color = $(this).closest('.card-header').css("background-color"); $(".editmodal").prop("id",`${slid}`); $("#editname").val(name); $("#editbeschreibung").val(desc); -}); + var rgb = color.split("(")[1].split(")")[0]; + + var r = rgb.split(", ")[0]; + var g = rgb.split(", ")[1]; + var b = rgb.split(", ")[2]; + + function rgbToHex (r,g,b){ + var bin = r << 16 | g << 8 | b; + return (function(h){ + return new Array(7-h.length).join("0")+h + })(bin.toString(16).toUpperCase()) + } + + $(".aktuelleFarbe").css("color", "#"+rgbToHex(r,g,b)); +}); }; $(".update").click(function(){ let name = $("#editname").val(); let desc = $("#editbeschreibung").val(); let id = $(this).closest(".editmodal").attr('id'); + let color = ""; + if($("input:checked").val()==null){ + color = $('.aktuelleFarbe').css("color"); + } + else{ + color = $("input:checked").val(); + } + firebase.auth().currentUser.getIdToken( /* forceRefresh */ true).then(function (idtoken) { $.ajax({ type: "PUT", url: "/shoppinglist", data: { sl_id: id, name: name, - description: desc + description: desc, + color: color, + idtoken: idtoken }, success(res){ + $(".karten").remove(); $("#editname").val(""); $("#editbeschreibung").val(""); $('#editsl').modal('hide'); + eigeneEinkaufslisten() }, error(err){ } + });}).catch((error) => console.error("Get id token client error: ", error)); +}); + +function groupbearbeiten(){ +$(".gredit").click(function(){ + $('#Listengroupbearbeiten').modal('show'); + let grid = $(this).closest(".groupid").attr('id'); + let slid = $(this).closest(".shoplisteid").attr('id'); + let name = $(this).closest('div').find('h5.title').text(); + let color = $(this).closest(".groupid").css("background-color"); + + $(".editgroudmodal").prop("id",`${slid}`); + $(".grouid").prop("id",`${grid}`); + $("#groupb").val(name); + var rgb = color.split("(")[1].split(")")[0]; + + var r = rgb.split(", ")[0]; + var g = rgb.split(", ")[1]; + var b = rgb.split(", ")[2]; + + function rgbToHex (r,g,b){ + var bin = r << 16 | g << 8 | b; + return (function(h){ + return new Array(7-h.length).join("0")+h + })(bin.toString(16).toUpperCase()) + } + $(".aktuelleFarbe2").css("color", "#"+rgbToHex(r,g,b)); +})} + +$(".gruppbea").click(function(){ + let name = $("#groupb").val(); + let slid = $(this).closest(".editgroudmodal").attr('id'); + let grid = $(this).closest(".grouid").attr('id'); + let color = ""; + if($("input:checked").val()==null){ + color = $('.aktuelleFarbe2').css("color"); + } + else{ + color = $("input:checked").val(); + } + firebase.auth().currentUser.getIdToken( /* forceRefresh */ true).then(function (idtoken) { + $.ajax({ + type: "PUT", + url: "/group", + data: { + sl_id: slid, + group_id: grid, + name: name, + color: color, + idtoken: idtoken + }, + success(res){ + $("#groupb").val(""); + $('#gredit').modal('hide'); + refreshDetailsl(slid); + }, + error(err){ + + } + })}).catch((error) => console.error("Get id token client error: ", error)); +}); + +function refreshDetailsl(slid){ + // $(".shoplisteid").remove(); + $(".shoplistid").remove(); + // $(".card-header").empty(); + $(".gruppeninhalt").empty(); + firebase.auth().onAuthStateChanged(async function (user) { + if (user) { + firebase.auth().currentUser.getIdToken( /* forceRefresh */ true).then(function (idtoken) { + $.ajax({ + type: "GET", + url: "/shoppinglist_json/" + slid, + data: { + idtoken: idtoken + }, + success(res) { + + var link = "/dash/" + idtoken; + + $(".kopf").attr("style", `background-color:#${res.color}`); + + $(".card-header").append(`
+ + + + +

+ ${res.name} +

+ `); + for (let i = 0; i < res.groups.length; i++) { + const el = res.groups[i]; + $(".gruppeninhalt").append(`
+
+ +
+
${el.name}
+ + + + +
+
+
+ +
+ `); + for (let x = 0; x < el.content.length; x++) { + const el2 = el.content[x] + $(`.${el.name}`).append(`
+
+
+ ${el2.name}${el2.count}x +
+
`) + } + } + lala(); + // gruppenhinzu(); + ItemAdden(); + groupdelete(); + groupbearbeiten(); + itembearbeiten(); + donepurchase(); + + }, + error(err) { + console.log(err); + } + }); + }).catch((error) => console.error("Get id token client error: ", error)); + } else { + console.log("Check Auth error", user) + } + }); +} + +$(".linkinfo").click(function(){ + firebase.auth().currentUser.getIdToken( /* forceRefresh */ true).then(function (idtoken) { + $.ajax({ + type: "GET", + url: "/group", + data: { + idtoken: idtoken + }, + success(res){ + $("#groupb").val(""); + $('#gredit').modal('hide'); + refreshDetailsl(slid); + }, + error(err){ + + } + })}).catch((error) => console.error("Get id token client error: ", error)); +}) + +function shareinvite(){ + $(".postshare").click(function(){ + let slid = $(this).closest(".card").attr('id'); + firebase.auth().currentUser.getIdToken( /* forceRefresh */ true).then(function (idtoken) { + $.ajax({ + type: "POST", + url: "/invite", + data: { + sl_id: slid, + }, + success(res){ + firebase.auth().currentUser.getIdToken( /* forceRefresh */ true).then(function (idtoken) { + $.ajax({ + type: "GET", + url: "/shoppinglist_json/"+slid, + data: { + idtoken: idtoken + }, + success(res){ + $(".InviteLinkAnzeigen").modal('show'); + console.log(res); + $("#InviteLink").val(res.invitelink); + copy(); + + }, + error(err){ + + } + })}).catch((error) => console.error("Get id token client error: ", error)); + }, + error(err){ + + } + })}).catch((error) => console.error("Get id token client error: ", error)); +}) +} + +function copy(){ + $(".copy").click(function(){ + var copyText = document.getElementById("InviteLink"); + copyText.select(); + document.execCommand("copy"); + }) +} + +$(".beitreten").click(function(){ + let invitelink = $("#slbeitreten").val(); + console.log(invitelink); + $.ajax({ + type: "GET", + url: "/invite/:" + invitelink, + success(res){ + console.log("funktioniert"); + // geteilteEinkaufslisten(); + // $(".beiLink").modal('hide'); + // $("html").empty(); + // $("html").append(`${res}`); + // console.log(res); + }, + error(err){ + console.log(err); + } }); }); + +$(".Modalbeitreten").click(function(){ + $(".beiLink").modal('show'); +}); + +$(".purchased-items").click(function(){ + $(".cardausgabe").hide(); + $(".sharecards").hide(); + $(".strich").hide(); + firebase.auth().currentUser.getIdToken( /* forceRefresh */ true).then(function (idtoken) { + $.ajax({ + type:"GET", + url: "/donepurchases", + success(res){ + // refreshDetailsl(slid); + console.log(res); + }, + error(err){ + console.log(error); + } + });}).catch((error) => console.error("Get id token client error: ", error)); +}); + + +function donepurchase(){ +$(".check").click(function(){ + if($("input:checked")==true){ + alert("ja"); + } +// $.ajax({ +// type:"POST", +// url: "/movedoneitem", +// success(res){ +// // refreshDetailsl(slid); +// console.log(yay); +// }, +// error(err){ +// console.log(error); +// } +// }) +}); +} + diff --git a/express-server/public/stylesheets/style.css b/express-server/public/stylesheets/style.css index c5626969..b97ada41 100644 --- a/express-server/public/stylesheets/style.css +++ b/express-server/public/stylesheets/style.css @@ -1,3 +1,11 @@ +body{ + background-image: url("./../images/Hintergrund.png"); + background-repeat: no-repeat; + position: sticky; + background-size: cover; + background-attachment: fixed + } + .logo-image{ width: 46px; height: 46px; @@ -10,11 +18,20 @@ margin: 5%; } +.purchased-items{ + background-color: transparent; + size: 50px; +} + .card{ margin: O auto; float: none; } +.checkbox{ + background-color: transparent; +} + .btn-light{ border-color: 1px solid black; } @@ -25,6 +42,18 @@ right: 5px; margin-top:-7px; } +.sharetrash{ + background: transparent; + position:absolute; + right: 5px; + margin-top:-7px; +} + +.exinvitemembersssss{ + background: transparent; + position:fixed; + margin-top: -7px; +} .edit{ background: transparent; @@ -33,12 +62,45 @@ margin-top:-7px; } +.shareedit{ + background: transparent; + position: absolute; + right: 29px; + margin-top:-7px; +} + +.showMembers{ + background: transparent; + margin-top: -2%; +} + .sledit{ background: transparent; position: absolute; margin-top: -7px; } +.postshare{ + background: transparent; + position: absolute; + margin-top: -5px; + margin-left: 23px; +} + +.gredit{ + background: transparent; + position: absolute; + right: 67px; + margin-top:-40px; + border: 0px; +} + +.itemedit{ + background: transparent; + position: absolute; + margin-top:-8px; +} + .groupadd{ background: transparent; position: absolute; diff --git a/express-server/views/dash.ejs b/express-server/views/dash.ejs index 7fc3bf63..b78685fb 100644 --- a/express-server/views/dash.ejs +++ b/express-server/views/dash.ejs @@ -18,7 +18,7 @@ -
- - -
-
+
+ +
+
+
+
+
@@ -79,8 +87,72 @@
+ + + + + + + + + + + + +