Revert "colorpicker fertig und gruppen löschbar"

This reverts commit eb9a230d69a4df53eef8220a13cfd19ad3763f55.
This commit is contained in:
Georg Reisinger 2019-01-26 21:08:38 +01:00
parent e26dbb7998
commit d9c3d422d7
4 changed files with 44 additions and 103 deletions

View File

@ -68,7 +68,6 @@ $(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",
@ -80,7 +79,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");
@ -127,7 +126,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" style="background-color: #b3b3b3;"> <div class="card-header">
<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>
@ -211,7 +210,6 @@ 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("");
}); });
} }
@ -255,7 +253,10 @@ function Detail(){
var link = "/dash/"+idtoken; var link = "/dash/"+idtoken;
$(".card-header").append(`<div class="shoplistid" id="${id}" style="background-color:#b3b3b3"> //ITEM ADD
// 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>
@ -268,15 +269,12 @@ 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="col-md-6 col-lg-4 shoplisteid" id="${res.sl_id}"> $(".gruppeninhalt").append(`<div class="card mb-3" style="max-width: 18rem;background-color:#${el.color};">
<div class="card mb-3 groupid ${el.group_id}" id="${el.group_id}" style="max-width: 18rem;background-color:#${el.color};"> <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="${el.name}">
<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></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]
@ -285,8 +283,7 @@ function Detail(){
`); `);
} }
} }
ItemAdden(); ItemAdden()
groupdelete();
}, },
error(err){ error(err){
console.log("Detail error userinfo_json: ", err); console.log("Detail error userinfo_json: ", err);
@ -372,32 +369,3 @@ $(".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");
}
});
});
};

View File

@ -38,19 +38,13 @@ input[type="radio"] {
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 .farbe8 { input[type="radio"]:checked + label .violet {
border: 1px solid black; border: 1px solid black;
} }
input[type="radio"]:checked + label .farbe9 { input[type="radio"]:checked + label .purple {
border: 1px solid black; border: 1px solid black;
} }
input[type="radio"]:checked + label .farbe10 { input[type="radio"]:checked + label .pink {
border: 1px solid black;
}
input[type="radio"]:checked + label .farbe11 {
border: 1px solid black;
}
input[type="radio"]:checked + label .farbe12 {
border: 1px solid black; border: 1px solid black;
} }
label { label {
@ -87,21 +81,15 @@ input[type="radio"] {
label span.farbe6 { label span.farbe6 {
background: #2196F3; background: #2196F3;
} }
label span.farbe7 { label span.blue {
background: #03a9f4; background: #03A9F4;
} }
label span.farbe8 { label span.violet {
background: #00bcd4; background: #00BCD4;
} }
label span.farbe9 { label span.purple {
background: #009688; background: #009688;
} }
label span.farbe10 { label span.pink {
background: #4caf50; background: #4CAF50;
}
label span.farbe11 {
background: #8bc34a;
}
label span.farbe12 {
background: #cddc39;
} }

View File

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

View File

@ -13,7 +13,7 @@
<body id="vue-app"> <body id="vue-app">
<!-- Navbar --> <!-- Navbar -->
<nav class="navbar sticky-top navbar-light spez-farbe" style="background-color:rgb(200, 200, 201)"> <nav class="navbar sticky-top navbar-light bg-light" style="background-color:rgb(200, 200, 201)">
<a class="navbar-brand" id="dashurl"> <a class="navbar-brand" id="dashurl">
<div class="logo-image"> <div class="logo-image">
<img src="/images/Logo.png" class="img-fluid"> <img src="/images/Logo.png" class="img-fluid">
@ -33,7 +33,7 @@
<br> <br>
<!-- alle cards--> <!-- alle cards-->
<div class="row justify-content-center cardausgabe"> <div class="container justify-content-center cardausgabe">
<div class="card-columns"> <div class="card-columns">
<div class="listen-ausgabe"> <div class="listen-ausgabe">
</div> </div>
@ -43,20 +43,16 @@
<!-- detail card --> <!-- detail card -->
<div class="row justify-content-center "> <div class="row justify-content-center ">
<div class="card border-light mb-3 detailcardausgabe" style="width: 50rem;"> <div class="card border-light mb-3 detailcardausgabe" style="width: 50rem;">
<div class="card-header" style="background-color: #b3b3b3;"></div> <div class="card-header"></div>
<div class="card-body text-dark"> <div class="card-body text-dark gruppeninhalt"></div>
<div class="row justify-content-center gruppeninhalt">
</div>
</div>
</div> </div>
</div> </div>
<!-- Modal Group Hinzufügen --> <!-- Modal Group Hinzufügen -->
<div class="modal fade bd-example-modal-sm ListenDetailAdd" tabindex="-1" role="dialog" aria-labelledby="ListenDetailAdd" aria-hidden="true"> <div class="modal fade bd-example-modal-sm ListenDetailAdd" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm"> <div class="modal-dialog modal-sm">
<div class="modal-content"> <div class="modal-content">
<div> <div>
@ -72,7 +68,7 @@
<div class="farbeeen"> <div class="farbeeen">
<input type="radio" name="color" id="farbe1" value="F44336" /> <input type="radio" name="color" id="farbe1" value="F44336" />
<label for="farbe1"><span class="farbe1"></span></label> <label for="farbe1"><span class="farbe1 border"></span></label>
<input type="radio" name="color" id="farbe2" value="e91e63" /> <input type="radio" name="color" id="farbe2" value="e91e63" />
<label for="farbe2"><span class="farbe2"></span></label> <label for="farbe2"><span class="farbe2"></span></label>
@ -89,25 +85,25 @@
<input type="radio" name="color" id="farbe6" value="2196F3" /> <input type="radio" name="color" id="farbe6" value="2196F3" />
<label for="farbe6"><span class="farbe6"></span></label> <label for="farbe6"><span class="farbe6"></span></label>
<br> <!-- <br>
<input type="radio" name="color" id="farbe7" value="03a9f4" /> <input type="radio" name="color" id="violet" value="violet" />
<label for="farbe7"><span class="farbe7"></span></label> <label for="violet"><span class="violet"></span></label>
<input type="radio" name="color" id="farbe8" value="00bcd4" /> <input type="radio" name="color" id="purple" value="purple" />
<label for="farbe8"><span class="farbe8"></span></label> <label for="purple"><span class="purple"></span></label>
<input type="radio" name="color" id="farbe9" value="009688" /> <input type="radio" name="color" id="pink" value="pink" />
<label for="farbe9"><span class="farbe9"></span></label> <label for="pink"><span class="pink"></span></label>
<input type="radio" name="color" id="farbe10" value="4caf50" /> <input type="radio" name="color" id="blue" value="blue" />
<label for="farbe10"><span class="farbe10"></span></label> <label for="blue"><span class="blue"></span></label>
<input type="radio" name="color" id="farbe11" value="8bc34a" /> <input type="radio" name="color" id="violet" value="violet" />
<label for="farbe11"><span class="farbe11"></span></label> <label for="violet"><span class="violet"></span></label>
<input type="radio" name="color" id="farbe12" value="cddc39" /> <input type="radio" name="color" id="purple" value="purple" />
<label for="farbe12"><span class="farbe12"></span></label> <label for="purple"><span class="purple"></span></label> -->
</div> </div>
</div> </div>
@ -122,7 +118,7 @@
<!-- Modal Item Hinzufügen --> <!-- Modal Item Hinzufügen -->
<div class="modal fade bd-example-modal-sm GroupItemAdd" tabindex="-1" role="dialog" aria-labelledby="GroupItemAdd" aria-hidden="true"> <div class="modal fade bd-example-modal-sm GroupItemAdd" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm"> <div class="modal-dialog modal-sm">
<div class="modal-content"> <div class="modal-content">
<div class="inhalt"> <div class="inhalt">