noch nicht alles ausgegeben style fehlt teils

So ziemlich alle routes bis auf item add und noch nicht alle detail ausgaben ....
2018-12-03 21:06:36 +01:00
parent 9e28c0fa32
commit a2bb9f25d3
3 changed files with 241 additions and 50 deletions
--- a/express-server/public/javascripts/ajax.js
+++ b/express-server/public/javascripts/ajax.js
@@ -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");
+    });
 }
--- a/express-server/public/stylesheets/style.css
+++ b/express-server/public/stylesheets/style.css
@@ -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;
 }
--- a/express-server/views/index.ejs
+++ b/express-server/views/index.ejs
@@ -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>