sl bearbeiten

express-server/public/javascripts/ajax.js

@@ -125,6 +125,7 @@ function eigeneEinkaufslisten() {
                                         ${userinfo}</span>
                                         <button class="btn edit"><i class="fas fa-pencil-alt "></i></button>
                                         <button class="btn trash"><i class="far fa-trash-alt"></i></button>
+                                        <button class="btn sledit"><i class="far fa-edit"></i></button>
                                     </div>
                                     
                                     <div class="card-body">
@@ -134,6 +135,7 @@ function eigeneEinkaufslisten() {
                                 </div></div>`)
                                             }
                                             console.log("Eigene Einkaufslisten");
+                                            slbearbeiten();
                                             loeschen();
                                             Detail();
                                             // groupHinzufügen()
@@ -172,6 +174,7 @@ function geteilteEinkaufslisten() {
                     },
                     success(res) {
                         console.log("Geteilte Einkaufslisten");
+                        // $(".shared-cards").append(`<div class="col-md-6 col-lg-4 shoplisteid">${res}</div>`);
                     },
                     error(err) {
                         console.error("/sharedshoppinglists error:", err);
@@ -494,3 +497,38 @@ function groupdelete() {
 
     });
 };
+
+function slbearbeiten(){
+$(".sledit").click(function(){
+    $('#editsl').modal('show');
+    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();
+    $(".editmodal").prop("id",`${slid}`);
+    $("#editname").val(name);
+    $("#editbeschreibung").val(desc);
+});    
+};
+
+$(".update").click(function(){
+    let name = $("#editname").val();
+    let desc = $("#editbeschreibung").val();
+    let id = $(this).closest(".editmodal").attr('id');
+    $.ajax({
+        type: "PUT",
+        url: "/shoppinglist",
+        data: {
+            sl_id: id,
+            name: name,
+            description: desc
+        },
+        success(res){
+            $("#editname").val("");
+            $("#editbeschreibung").val("");
+            $('#editsl').modal('hide');
+        },
+        error(err){
+
+        }
+    });
+});

express-server/public/stylesheets/style.css

@@ -33,6 +33,12 @@
     margin-top:-7px;
 }
 
+.sledit{
+    background: transparent;
+    position: absolute;
+    margin-top: -7px;
+}
+
 .groupadd{
     background: transparent;
     position: absolute;

express-server/views/dash.ejs

@@ -56,6 +56,13 @@
         </div>
     </div>
 
+    <!-- shares cards -->
+    <div class="row justify-content-center ">
+            <div class="container shared-cards"></div>
+    </div>
+
+    
+
     <!-- detail card -->
     <div class="row justify-content-center ">
         <div class="card border-light mb-3 detailcardausgabe shadow-sm" style="width: 50rem;">
@@ -91,7 +98,7 @@
                         <div class="farbeeen">
 
                             <input type="radio" name="color" id="farbe1" value="F44336" />
-                            <label for="farbe1"><span class="farbe1 border"></span></label>
+                            <label for="farbe1"><span class="farbe1"></span></label>
 
                             <input type="radio" name="color" id="farbe2" value="e91e63" />
                             <label for="farbe2"><span class="farbe2"></span></label>
@@ -192,7 +199,7 @@
                         <div class="farbeeen">
 
                             <input type="radio" name="color" id="farbe1" value="F44336" />
-                            <label for="farbe1"><span class="farbe1 border"></span></label>
+                            <label for="farbe1"><span class="farbe1"></span></label>
 
                             <input type="radio" name="color" id="farbe2" value="e91e63" />
                             <label for="farbe2"><span class="farbe2"></span></label>
@@ -241,6 +248,32 @@
         </div>
     </div>
 
+    <!-- Modal Shoppingliste bearbeiten -->
+    <div class="modal fade bd-example-modal-sm editsl" tabindex="-1" id="editsl" role="dialog"
+        aria-labelledby="editsl" aria-hidden="true">
+        <div class="modal-dialog modal-sm">
+            <div class="modal-content editmodal" id="">
+                <div>
+
+                    <div class="form-group layout">
+                        <label for="exampleInputEmail1">Name</label>
+                        <input type="text" class="form-control" id="editname" placeholder="zB: Billa">
+                    </div>
+
+                    <div class="form-group layout">
+                        <label for="exampleInputPassword1">Beschreibung</label>
+                        <input type="text" class="form-control" id="editbeschreibung"
+                            placeholder="zB: Großeinkauf bei Billa">
+                    </div>
+
+                    <center><button type="submit" class="btn btn-outline-dark update">Hinzufügen</button></center>
+                    <br>
+
+                </div>
+            </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>