dergeorg/SmartShopper
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge branch 'master' of https://github.com/LukasNowy/SmartShopper

Browse Source
This commit is contained in:
LukasNowy 2019-01-29 17:52:08 +01:00
commit 9141c17e4d
3 changed files with 151 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
express-server/public/javascripts/ajax.js
View File

@ -68,6 +68,7 @@ $(document).ready(function() {
// let name = $("#groupname").val(); // let name = $("#groupname").val();
// let color = $("#groupfarbe").val(); // let color = $("#groupfarbe").val();
$("#ListenDetailAdd").modal("hide");
$.ajax({ $.ajax({
type: "POST", type: "POST",
@ -79,7 +80,7 @@ $(document).ready(function() {
}, },
success(res){ success(res){
console.log("groupadd funktioniert"); console.log("groupadd funktioniert");
$("#mySmallModalLabel").modal("hide");
}, },
error(err){ error(err){
console.log("error"); console.log("error");
@ -126,7 +127,7 @@ function eigeneEinkaufslisten(){
$(".listen-ausgabe").append(`<div class="col-md-12 karten"> $(".listen-ausgabe").append(`<div class="col-md-12 karten">
<div class="card border-light mb-3" style="max-width: 18rem;" id="${el.sl_id}"> <div class="card border-light mb-3" style="max-width: 18rem;" id="${el.sl_id}">
<div class="card-header"> <div class="card-header" style="background-color: #b3b3b3;">
<span> <span>
<img src="${picture}" alt="Avatar" style="width:10%; border-radius: 50%;"> <img src="${picture}" alt="Avatar" style="width:10%; border-radius: 50%;">
${userinfo}</span> ${userinfo}</span>
@ -210,6 +211,7 @@ function lala(){
let card = $(this).closest(".card"); let card = $(this).closest(".card");
let id = card.attr("id"); let id = card.attr("id");
globaleAddZwischenID = id; globaleAddZwischenID = id;
$("#groupname").val("");
}); });
} }
@ -253,10 +255,7 @@ function Detail(){
var link = "/dash/"+idtoken; var link = "/dash/"+idtoken;
//ITEM ADD $(".card-header").append(`<div class="shoplistid" id="${id}" style="background-color:#b3b3b3">
// von Card Header Kopiert
$(".card-header").append(`<div class="shoplistid" id="${id}">
<a href="${link}" style="left: 5px; margin-top: -50px"> <a href="${link}" style="left: 5px; margin-top: -50px">
<i class="fas fa-caret-left"></i> <i class="fas fa-caret-left"></i>
</a> </a>
@ -269,12 +268,15 @@ function Detail(){
`); `);
for (let i = 0; i < res.groups.length; i++) { for (let i = 0; i < res.groups.length; i++) {
const el = res.groups[i]; const el = res.groups[i];
$(".gruppeninhalt").append(`<div class="card mb-3" style="max-width: 18rem;background-color:#${el.color};"> $(".gruppeninhalt").append(`<div class="col-md-6 col-lg-4 shoplisteid" id="${res.sl_id}">
<div class="card-header"><h5 class="card-title">${el.name}</h5><button class="btn seemore" type="button" data-toggle="collapse" data-target="#${el.name}" aria-expanded="false" aria-controls="${el.name}"><i class="fas fa-caret-down"></i></button> <div class="card mb-3 groupid ${el.group_id}" id="${el.group_id}" style="max-width: 18rem;background-color:#${el.color};">
<div class="${el.name}">
</div> <div class="card-header"><h5 class="card-title">${el.name}</h5><button class="btn trashgroup"><i class="far fa-trash-alt"></i></button><button class="btn seemore" type="button" data-toggle="collapse" data-target="#${el.name}" aria-expanded="false" aria-controls="${el.name}"><i class="fas fa-caret-down"></i></button>
</div> <div class="${el.name}">
</div> </div>
</div>
</div></div>
`); `);
for(let x = 0; x < el.content.length; x++){ for(let x = 0; x < el.content.length; x++){
const el2 = el.content[x] const el2 = el.content[x]
@ -283,7 +285,8 @@ function Detail(){
`); `);
} }
} }
ItemAdden() ItemAdden();
groupdelete();
}, },
error(err){ error(err){
console.log("Detail error userinfo_json: ", err); console.log("Detail error userinfo_json: ", err);
@ -368,4 +371,33 @@ $(".itemhinzu").click(function(){
Detail(); Detail();
}); });
function groupdelete(){
$('.trashgroup').click(function(){
let getid = $(this).closest('.shoplisteid');
let shoplistid = getid.attr('id');
let getid2 = $(this).closest('.groupid');
let groupid = getid2.attr('id');
console.log(shoplistid);
console.log(groupid);
$.ajax({
type: "DELETE",
url: "/group",
data: {
sl_id: shoplistid,
group_id: groupid},
success(res){
console.log("card gelöscht");
$(`.${groupid}`).remove();
},
error(err){
console.log("error");
}
});
});
};

176
express-server/public/stylesheets/colorpicker-style.css
View File

@ -11,85 +11,97 @@ body {
color: #333; color: #333;
} */ } */
input[type="radio"] { input[type="radio"] {
display: none; display: none;
border: 1px solid black; border: 1px solid black;
} }
input[type="radio"]:checked + label span { input[type="radio"]:checked + label span {
transform: scale(1.25); transform: scale(1.25);
} }
input[type="radio"]:checked + label .farbe1 { input[type="radio"]:checked + label .farbe1 {
border: 1px solid black; border: 1px solid black;
} }
input[type="radio"]:checked + label .farbe2 { input[type="radio"]:checked + label .farbe2 {
border: 1px solid black; border: 1px solid black;
} }
input[type="radio"]:checked + label .farbe3 { input[type="radio"]:checked + label .farbe3 {
border: 1px solid black; border: 1px solid black;
} }
input[type="radio"]:checked + label .farbe4 { input[type="radio"]:checked + label .farbe4 {
border: 1px solid black; border: 1px solid black;
} }
input[type="radio"]:checked + label .farbe5 { input[type="radio"]:checked + label .farbe5 {
border: 1px solid black; border: 1px solid black;
} }
input[type="radio"]:checked + label .farbe6 { input[type="radio"]:checked + label .farbe6 {
border: 1px solid black; border: 1px solid black;
} }
input[type="radio"]:checked + label .farbe7 { input[type="radio"]:checked + label .farbe7 {
border: 1px solid black; border: 1px solid black;
} }
input[type="radio"]:checked + label .violet { input[type="radio"]:checked + label .farbe8 {
border: 1px solid black; border: 1px solid black;
} }
input[type="radio"]:checked + label .purple { input[type="radio"]:checked + label .farbe9 {
border: 1px solid black; border: 1px solid black;
} }
input[type="radio"]:checked + label .pink { input[type="radio"]:checked + label .farbe10 {
border: 1px solid black; border: 1px solid black;
} }
label { input[type="radio"]:checked + label .farbe11 {
display: inline-block; border: 1px solid black;
width: 25px; }
height: 25px; input[type="radio"]:checked + label .farbe12 {
margin-right: 10px; border: 1px solid black;
cursor: pointer; }
} label {
label:hover span { display: inline-block;
transform: scale(1.25); width: 25px;
} height: 25px;
label span { margin-right: 10px;
display: block; cursor: pointer;
width: 100%; }
height: 100%; label:hover span {
transition: transform 0.2s ease-in-out; transform: scale(1.25);
} }
label span.farbe1 { label span {
background: #F44336; display: block;
} width: 100%;
label span.farbe2 { height: 100%;
background: #e91e63; transition: transform 0.2s ease-in-out;
} }
label span.farbe3 { label span.farbe1 {
background: #9c27b0; background: #F44336;
} }
label span.farbe4 { label span.farbe2 {
background: #673ab7; background: #e91e63;
} }
label span.farbe5 { label span.farbe3 {
background: #3F51B5; background: #9c27b0;
} }
label span.farbe6 { label span.farbe4 {
background: #2196F3; background: #673ab7;
} }
label span.blue { label span.farbe5 {
background: #03A9F4; background: #3F51B5;
} }
label span.violet { label span.farbe6 {
background: #00BCD4; background: #2196F3;
} }
label span.purple { label span.farbe7 {
background: #009688; background: #03a9f4;
} }
label span.pink { label span.farbe8 {
background: #4CAF50; background: #00bcd4;
} }
label span.farbe9 {
background: #009688;
}
label span.farbe10 {
background: #4caf50;
}
label span.farbe11 {
background: #8bc34a;
}
label span.farbe12 {
background: #cddc39;
}

11
express-server/public/stylesheets/style.css
View File

@ -60,4 +60,15 @@
.farbeeen{ .farbeeen{
margin-left: 19px; margin-left: 19px;
}
.spez-farbe{
background-color: #b3b3b3;
}
.trashgroup{
background: transparent;
position: absolute;
right:23px;
margin-top:-40px;
} }