noch nicht alles ausgegeben style fehlt teils
So ziemlich alle routes bis auf item add und noch nicht alle detail ausgaben ....
This commit is contained in:
InesSuess
parent
9e28c0fa32
commit
a2bb9f25d3
@ -1,7 +1,36 @@
|
||||
$(document).ready(function() {
|
||||
|
||||
bekommen();
|
||||
// loeschen();
|
||||
eigeneEinkaufslisten();
|
||||
geteilteEinkaufslisten();
|
||||
$(".detailcardausgabe").hide();
|
||||
|
||||
$(".gruppenadd").click(function(){
|
||||
|
||||
// let name = $("#groupname").val();
|
||||
// let color = $("#groupfarbe").val();
|
||||
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "/group",
|
||||
data: {
|
||||
sl_id: globaleAddZwischenID,
|
||||
name: $("#groupname").val(),
|
||||
color: $("#groupfarbe").val()
|
||||
},
|
||||
success(res){
|
||||
console.log("groupadd funktioniert");
|
||||
$("#mySmallModalLabel").modal("hide");
|
||||
},
|
||||
error(err){
|
||||
console.log("error");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$(".sl_add").click(function(){
|
||||
$('#EigeneListeAdd').modal('show');
|
||||
});
|
||||
|
||||
|
||||
$(".add").click(function(){
|
||||
|
||||
@ -17,16 +46,7 @@ $(document).ready(function() {
|
||||
},
|
||||
success(res){
|
||||
console.log("add funktioniert");
|
||||
$("#mySmallModalLabel").modal("hide");
|
||||
// $(".listen-ausgabe").append(`<div class="col-md-12 karten">
|
||||
// <div class="card border-light mb-3" style="max-width: 18rem;">
|
||||
// <div class="card-header"><span>Username...</span><button class="btn trash r"><i class="far fa-trash-alt"></i></button></div>
|
||||
// <div class="card-body">
|
||||
// <h5 class="card-title">`+ $("#einkaufslistenname").val() +`</h5>
|
||||
// <p class="card-text">`+ $("#einkaufslistenbeschreibung").val() +`</p>
|
||||
// </div>
|
||||
// </div></div>`
|
||||
// )
|
||||
$("#normalAdd").modal("hide");
|
||||
},
|
||||
error(err){
|
||||
console.log("error");
|
||||
@ -37,33 +57,68 @@ $(document).ready(function() {
|
||||
|
||||
});
|
||||
|
||||
function bekommen(){
|
||||
var globaleAddZwischenID = "";
|
||||
// var globaleGetZwischenID = "";
|
||||
|
||||
function eigeneEinkaufslisten(){
|
||||
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: "/myshoppinglists",
|
||||
success(data){
|
||||
console.log("get funktioniert");
|
||||
for(let i = 0; i < data.length; i++){
|
||||
const el = data[i];
|
||||
success(res){
|
||||
|
||||
$(".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-header"><span>Username...</span><button class="btn trash r"><i class="far fa-trash-alt"></i></button></div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">${el.name}</h5>
|
||||
<p class="card-text">${el.description}</p>
|
||||
</div>
|
||||
</div></div>`
|
||||
)
|
||||
}
|
||||
loeschen();
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: "/userinfo_json",
|
||||
success(data){
|
||||
let userinfo = data.profile.displayName
|
||||
console.log(userinfo);
|
||||
|
||||
for(let i = 0; i < res.length; i++){
|
||||
const el = res[i];
|
||||
|
||||
$(".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-header">
|
||||
<span>${userinfo}</span>
|
||||
<button class="btn edit"><i class="fas fa-angle-down"></i></button>
|
||||
<button class="btn trash"><i class="far fa-trash-alt"></i></button>
|
||||
<button class="btn groupadd" data-toggle="modal" data-target=".ListenDetailAdd"><i class="fas fa-ellipsis-v"></i></button>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">${el.name}</h5>
|
||||
<p class="card-text">${el.description}</p>
|
||||
</div>
|
||||
</div></div>`
|
||||
)
|
||||
}
|
||||
console.log("Eigene Einkaufslisten");
|
||||
loeschen();
|
||||
lala();
|
||||
Detail();
|
||||
// groupHinzufügen()
|
||||
}
|
||||
})
|
||||
},
|
||||
error(err){
|
||||
console.log("error");
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
function geteilteEinkaufslisten(){
|
||||
$.ajax({
|
||||
data: "GET",
|
||||
url: "/sharedshoppinglists",
|
||||
success(res){
|
||||
console.log("Geteilte Einkaufslisten");
|
||||
},
|
||||
error(err){
|
||||
console.log("error");
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
function loeschen(){
|
||||
$(".trash").click(function(){
|
||||
@ -80,13 +135,80 @@ function loeschen(){
|
||||
sl_id: id},
|
||||
success(res){
|
||||
console.log("card gelöscht");
|
||||
// bekommen();
|
||||
card.remove();
|
||||
},
|
||||
error(err){
|
||||
|
||||
console.log("error");
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
};
|
||||
|
||||
function lala(){
|
||||
$(".groupadd").click(function(){
|
||||
let card = $(this).closest(".card");
|
||||
let id = card.attr("id");
|
||||
globaleAddZwischenID = id;
|
||||
});
|
||||
}
|
||||
|
||||
function Detail(){
|
||||
$(".edit").click(function(){
|
||||
|
||||
$(".cardausgabe").hide();
|
||||
$(".detailcardausgabe").show();
|
||||
|
||||
let card = $(this).closest(".card");
|
||||
let id = card.attr("id");
|
||||
|
||||
$.ajax({
|
||||
data: "GET",
|
||||
url: "/shoppinglist_json/" + id,
|
||||
success(res){
|
||||
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: "/myshoppinglists",
|
||||
success(result){
|
||||
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: "/userinfo_json",
|
||||
success(data){
|
||||
let userinfo = data.profile.displayName
|
||||
console.log(userinfo);
|
||||
|
||||
const neu = result.filter(obj => obj.sl_id === id);
|
||||
|
||||
$(".card-header").append(`<h1 class="text-center">${neu[0].name}</h1><button class="btn itemadd"><ion-icon name="more" size="large"></ion-icon></button>
|
||||
`);
|
||||
for (let i = 0; i < res.length; i++) {
|
||||
const el = res[i];
|
||||
$(".card-text").append(`<div class="card border-dark mb-3 items" id="${el.group_id}" style="max-width: 18rem;">
|
||||
<div class="card-body text-dark">
|
||||
<h5 class="card-title text-center">${el.name}</h5>
|
||||
</div>
|
||||
</div>`);
|
||||
}
|
||||
ItemAdden()
|
||||
}
|
||||
})
|
||||
},
|
||||
error(err){
|
||||
console.log("error");
|
||||
}
|
||||
});
|
||||
},
|
||||
error(err){
|
||||
console.log("error");
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
function ItemAdden(){
|
||||
$(".itemadd").click(function(){
|
||||
alert("aleert");
|
||||
});
|
||||
}
|
||||
@ -22,6 +22,31 @@
|
||||
.trash{
|
||||
background: transparent;
|
||||
position:absolute;
|
||||
right:5px;
|
||||
right: 29px;
|
||||
margin-top:-7px;
|
||||
}
|
||||
|
||||
.edit{
|
||||
background: transparent;
|
||||
position: absolute;
|
||||
right: 60px;
|
||||
margin-top:-7px;
|
||||
}
|
||||
|
||||
.groupadd{
|
||||
background: transparent;
|
||||
position: absolute;
|
||||
right:5px;
|
||||
margin-top: -7px;
|
||||
}
|
||||
|
||||
.ueberschrift{
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.itemadd{
|
||||
background: transparent;
|
||||
position: absolute;
|
||||
right:5px;
|
||||
margin-top: -50px;
|
||||
}
|
||||
@ -5,6 +5,7 @@
|
||||
<link rel='stylesheet' href='/stylesheets/style.css'>
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
|
||||
<link rel='stylesheet' href='/bootstrap/dist/css/bootstrap.min.css'>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@ -18,42 +19,84 @@
|
||||
<ul class="nav justify-content-end liste">
|
||||
<li class="nav-item">
|
||||
<!-- <a class="nav-link active" href="#">Add</a> -->
|
||||
<button class="btn btn-outline-light border-secondary" data-toggle="modal" data-target=".bd-example-modal-sm">Hinzufügen</button>
|
||||
<button class="btn btn-outline-light border-secondary sl_add" style="color: black">Shoppingliste Hinzufügen</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<!--cards-->
|
||||
<div class="container justify-content-center">
|
||||
<!-- alle cards-->
|
||||
<div class="container justify-content-center cardausgabe">
|
||||
<div class="card-columns">
|
||||
<div class="row listen-ausgabe">
|
||||
<div class="listen-ausgabe">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- detail card -->
|
||||
<div class="row justify-content-center ">
|
||||
<div class="card border-light mb-3 detailcardausgabe" style="width: 50rem;">
|
||||
<div class="card-header text-center"></div>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title"></h5>
|
||||
<p class="card-text"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Modal Group Hinzufügen -->
|
||||
<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-content">
|
||||
<form>
|
||||
<div class="form-group layout">
|
||||
<label for="exampleInputEmail1">Name</label>
|
||||
<input type="text" class="form-control" id="einkaufslistenname"placeholder="Billa">
|
||||
</div>
|
||||
<div class="form-group layout">
|
||||
<label for="exampleInputPassword1">Beschreibung</label>
|
||||
<input type="text" class="form-control" id="einkaufslistenbeschreibung" placeholder="Großeinkauf bei Billa">
|
||||
</div>
|
||||
<center><button type="submit" class="btn btn-outline-dark add">Submit</button></center>
|
||||
<br>
|
||||
</form>
|
||||
<form>
|
||||
|
||||
<center><p class="layout ueberschrift">Group hinzufügen</p></center>
|
||||
<div class="form-group layout">
|
||||
<label for="exampleInputEmail1">Name</label>
|
||||
<input type="text" class="form-control" id="groupname"placeholder="zB: Getränke">
|
||||
</div>
|
||||
|
||||
<div class="form-group layout">
|
||||
<label for="exampleInputPassword1">Farbe</label>
|
||||
<input type="text" class="form-control" id="groupfarbe" placeholder="zB: Red">
|
||||
</div>
|
||||
|
||||
<center><button type="submit" class="btn btn-outline-dark gruppenadd">Hinzufügen</button></center>
|
||||
<br>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Modal Shoppingliste Hinzufügen -->
|
||||
<div class="modal fade bd-example-modal-sm EigeneListeAdd" tabindex="-1" id="EigeneListeAdd" role="dialog" aria-labelledby="EigeneListeAdd" aria-hidden="true">
|
||||
<div class="modal-dialog modal-sm">
|
||||
<div class="modal-content">
|
||||
<form>
|
||||
|
||||
<div class="form-group layout">
|
||||
<label for="exampleInputEmail1">Name</label>
|
||||
<input type="text" class="form-control" id="einkaufslistenname"placeholder="zB: Billa">
|
||||
</div>
|
||||
|
||||
<div class="form-group layout">
|
||||
<label for="exampleInputPassword1">Beschreibung</label>
|
||||
<input type="text" class="form-control" id="einkaufslistenbeschreibung" placeholder="zB: Großeinkauf bei Billa">
|
||||
</div>
|
||||
|
||||
<center><button type="submit" class="btn btn-outline-dark add">Hinzufügen</button></center>
|
||||
<br>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <a href="/shoppinglist_json/0">dfasdfghjklöghjkl</a> -->
|
||||
<!-- <a href="/myshoppinglists">Meine Einkaufslisten anzeigen</a><br>
|
||||
<a href="/sharedshoppinglists">Mit mir geteilte Einkaufslisten anzeigen</a><br>
|
||||
<a href="">Einkaufsliste erstellen</a><br>
|
||||
@ -62,5 +105,6 @@
|
||||
<script src="/jquery/dist/jquery.js"></script>
|
||||
<script src="/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<script src="/javascripts/ajax.js"></script>
|
||||
<script src="https://unpkg.com/ionicons@4.4.8/dist/ionicons.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user