Item add Modal

express-server/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "start": "node ./bin/www"
+    "start": "nodemon ./bin/www"
   },
   "dependencies": {
     "axios": "^0.18.0",

express-server/public/javascripts/ajax.js

@@ -229,6 +229,7 @@ function Detail(){
                     idtoken: idtoken
                 },
                 success(res){
+                    console.log(res.groups)
                     console.log("/myshoppinglists inside idtoken: ", idtoken)
                     $.ajax({
                         type: "GET",
@@ -255,31 +256,22 @@ function Detail(){
                                     //ITEM ADD
                                     // von Card Header Kopiert
 
-                                    // <a href="" class="itemadd">
+                                    $(".card-header").append(`<div class="shoplistid" id="${id}">
-                                    //     <i class="fas fa-plus"></i>
-                                    //     </a>
-
-                                    $(".card-header").append(`
                                         <a href="${link}" style="left: 5px; margin-top: -50px">
                                             <i class="fas fa-caret-left"></i>
                                         </a>
-
+                                        <button class="itemadd">
-                                        
+                                        <i class="fas fa-plus"></i>
-
+                                        </button>
                                         <h1 class="text-center">
                                             ${neu[0].name}
-                                        </h1>
+                                        </h1></div>
-
-                                        
-                                        
                                     `);
-                                    for (let i = 0; i < res.length; i++) {
+                                    for (let i = 0; i < res.groups.length; i++) {
-                                        const el = res[i];
+                                        const el = res.groups[i];
-                                        $(".card-text").append(`<div class="card border-dark mb-3 items" id="${el.group_id}" style="max-width: 18rem;">
+                                        $(".card-body").append(`
-                                        <div class="card-body text-dark">
                                         <h5 class="card-title text-center">${el.name}</h5>
-                                        </div>
+                                        `);
-                                    </div>`);
                                     }
                                     ItemAdden()
                                 },
@@ -303,6 +295,42 @@ function Detail(){
 
 function ItemAdden(){
     $(".itemadd").click(function(){
-        alert("aleert");
+
+        let getid = $(this).closest('.shoplistid');
+        let id = getid.attr('id'); 
+        console.log(id);
+
+        $('.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").append(`
+                          <option value="${i}">${el.name}</option>
+                        `);
+                    }
+                    
+                },
+                error(err){
+                    console.log(err);
+                }
+            });
+        }).catch((error) => console.error("Get id token client error: ", error));}else{console.log("Check Auth error", user)}});
     });
-}
+}
+
+$(".itemhinzu").click(function(){
+
+    
+
+});

express-server/public/stylesheets/style.css

@@ -48,5 +48,5 @@
     background: transparent;
     position: absolute;
     right:5px;
-    margin-top: -50px;
+    border: 0px;
 }

express-server/views/dash.ejs

@@ -2,6 +2,7 @@
 <html>
   <head>
     <title></title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <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'>
@@ -43,7 +44,7 @@
         <div class="card border-light mb-3 detailcardausgabe" style="width: 50rem;">
             <div class="card-header"></div>
 
-            <div class="card-body">
+            <div class="card-body text-dark"></div>
                 
         </div>
     </div>
@@ -75,6 +76,42 @@
     </div>
 
 
+    <!-- Modal Item Hinzufügen -->
+    <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-content">
+                <div class="inhalt">
+
+                    <center><p class="layout ueberschrift">Item hinzufügen</p></center>
+                    <div class="form-group layout">
+                      <label for="exampleInputEmail1">Gegenstand</label>
+                      <input type="text" class="form-control" id="intemname" placeholder="zB: Coca Cola">
+                    </div>
+    
+                    <div class="form-group layout">
+                      <label for="Anzahl-example">Anzahl</label>
+                      <select class="custom-select" id="inputGroupSelect01">
+                        <option selected>1</option>
+                        <option value="1">2</option>
+                        <option value="2">3</option>
+                        <option value="3">4</option>
+                        <option value="4">5</option>
+                      </select>
+                    </div>
+                    <div class="form-group layout">
+                        <label for="Group-select">Group</label>
+                        <select class="custom-select" id="inputGroupSelect02">
+                        </select>
+                    </div>
+    
+                </div>
+                <center><button type="submit" class="btn btn-outline-dark itemhinzu">Hinzufügen</button></center>
+                <br>
+            </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">