fehler behoben

.gitignore

@@ -1 +1,7 @@
 express-server\public\javascripts\test.js
+express-server\views\dash2.ejs
+express-server\public\test\style.css
+express-server\public\test\dash.js
+express-server/views/dash2.ejs
+express-server/public/test/style.css
+express-server/public/test/dash.js

express-server/db-connect/db-connect.js

@@ -119,6 +119,8 @@ async function newShoppinglist(name, description, username, color) {
     } catch (error) {
         console.error(error);
     }
+
+    return getShoppinglistsAdmin(username);
 }
 
 //rename Shoppinglist
@@ -174,12 +176,16 @@ async function displayShoppinglist(sl_id) {
 
 //delete shoppinglist
 
-async function deleteShoppinglist(sl_id) {
+async function deleteShoppinglist(sl_id,uid) {
 
     try {
         await nonQuery('DELETE FROM "Shoppinglist_admin" WHERE sl_id = $1', [sl_id]);
         await nonQuery('DELETE FROM "Shoppinglist_member" WHERE sl_id = $1', [sl_id]);
+        await nonQuery('DELETE FROM "Group" WHERE sl_id = $1', [sl_id]);
+        await nonQuery('DELETE FROM "Item" WHERE sl_id = $1', [sl_id]);
         await nonQuery('DELETE FROM "Shoppinglist" WHERE sl_id = $1', [sl_id]);
+
+        return getShoppinglistsAdmin(uid);
     } catch (error) {
         console.error(error);
     }

express-server/public/test/dash.js

@@ -1,49 +1,147 @@
-import Axios from "axios";
+// Initialize Firebase
-
+var config = {
-$(document).ready(function () {
-
-    M.AutoInit();
-    //initialize all modals           
-    $('.modal').modal({
-        dismissible: false
-    });
-
-    // Initialize Firebase
-    var config = {
     apiKey: "AIzaSyCuvwf78cmSDoZ2yS4XxHZhnjUn7yIHYfw",
     authDomain: "test-667ca.firebaseapp.com",
     databaseURL: "https://test-667ca.firebaseio.com",
     projectId: "test-667ca",
     storageBucket: "test-667ca.appspot.com",
     messagingSenderId: "221332577314"
-    };
+};
 
-    firebase.initializeApp(config);
+firebase.initializeApp(config);
 
-    var app = new Vue({
+var app = new Vue({
-        el: "myapp",
+    el: ".myapp",
     data: {
+        title: "smartshopper.cf",
         myshoppinglists: [],
-            sharedshoppinglists: []
+        sharedshoppinglists: [],
+        currentlist: {}
     },
 
     methods: {
-            fetchData: function() {
+        deleteShoppinglist(sl_id) {
+
             firebase.auth().onAuthStateChanged(function (user) {
                 if (user) {
                     firebase.auth().currentUser.getIdToken( /* forceRefresh */ true).then(function (idtoken) {
-                            alert("LALALALAL");
+                        axios({
+                            method: 'delete',
+                            url: "/shoppinglist",
+                            data: {
+                                sl_id: sl_id,
+                                idtoken: idtoken
+                            }
+                        }).then((res) => {
+                            app.myshoppinglists = res.data;
+                        });
+                    }).catch((error) => console.error("Get id token client error: ", error));
+                } else {
+                    console.log("Check Auth error", user)
+                }
+            });
+
+
+        },
+
+        getShoppinglistDetail(sl_id) {
+
+            axios({
+                method: 'get',
+                url: "/shoppinglist_json/" + sl_id,
+
+            }).then((res) => {
+                app.currentlist = res.data;
+                console.log(res.data);
+            });
+
+        },
+
+        createShoppinglist(name, description) {
+            firebase.auth().onAuthStateChanged(function (user) {
+                if (user) {
+                    firebase.auth().currentUser.getIdToken( /* forceRefresh */ true).then(function (idtoken) {
+                        axios({
+                            method: 'post',
+                            url: "/shoppinglist",
+                            data: {
+                                name: name,
+                                description: description,
+                                color: "white",
+                                idtoken: idtoken
+                            }
+                        }).then((res) => {
+                            app.myshoppinglists = res.data;
+                        });
+                    }).catch((error) => console.error("Get id token client error: ", error));
+                } else {
+                    console.log("Check Auth error", user)
+                }
+            });
+
+        }
+    },
+
+    created() {
+
+        firebase.auth().onAuthStateChanged(function (user) {
+            if (user) {
+                firebase.auth().currentUser.getIdToken( /* forceRefresh */ true).then(function (idtoken) {
+                    axios.get('/myshoppinglists?idtoken=' + idtoken)
+                        .then(function (res) {
+
+                            app.myshoppinglists = res.data;
+                            console.log(res.data);
+                        })
+                        .catch(function (error) {
+
+                            console.log(error);
+                        })
+                        .then(function () {
+
+                        });
+                }).catch((error) => console.error("Get id token client error: ", error));
+            } else {
+                console.log("Check Auth error", user)
+            }
+        });
+
+
+
+        firebase.auth().onAuthStateChanged(function (user) {
+            if (user) {
+                firebase.auth().currentUser.getIdToken( /* forceRefresh */ true).then(function (idtoken) {
+                    axios.get('sharedshoppinglists?idtoken=' + idtoken)
+                        .then(function (res) {
+
+                            app.sharedshoppinglists = res.data;
+                            console.log(res.data);
+                        })
+                        .catch(function (error) {
+
+                            console.log(error);
+                        })
+                        .then(function () {
+
+                        });
                 }).catch((error) => console.error("Get id token client error: ", error));
             } else {
                 console.log("Check Auth error", user)
             }
         });
     }
-        },
+});
 
-        mounted() {
+$(document).ready(function(){
-            this.fetchData();
+    $('.collapsible').collapsible();
-        }
+    $('.modal').modal();
   });
 
+$(document).on("click", ".citemL", function () {
+    $(".activeL").removeClass("activeL");
+    $(this).addClass("activeL");
+});
+
+$(".nav-createlist").click(function() {
+    $('#modal1').modal("open");
 });

express-server/public/test/style.css

@@ -1,3 +1,20 @@
 body {
-    background-color: rgb(238, 238, 238);
+    background-color: rgb(240, 240, 240) !important;
+}
+
+.msl {
+    color: rgb(56, 56, 56) !important;
+}
+
+.activeL {
+    background-color: #e53935 !important;
+    color: #f0f0f0 !important;
+}
+
+.ico {
+    color: #bdbdbd !important;
+}
+
+.brand-logo {
+    margin-left: 30px !important;
 }

express-server/routes/index.js

@@ -51,6 +51,7 @@ router.get('/dash/:idtoken', function (req, res, next) {
   res.render('dash');
 });
 
+
 router.get('/register', (req, res) => {
   res.status(200).render('registrieremail');
 });
@@ -167,20 +168,13 @@ router.post("/shoppinglist", async function (req, res, next) {
 //GET Shoppinglist detail
 
 router.get("/shoppinglist_json/:sl_id", async (req, res) => {
-  var token = req.query.idtoken;
+
-  var uid;
-  firebaseAdmin.auth().verifyIdToken(token)
-    .then(async function (decodedToken) {
-      uid = decodedToken.uid;
-      console.log("UID: ", uid);
   try {
     res.status(200).send(await postgres.displayShoppinglist(req.params.sl_id));
   } catch (err) {
     res.status(400).send(await err);
   }
-    }).catch(function (error) {
+
-      console.log(error)
-    });
 
 });
 
@@ -191,11 +185,21 @@ postgres.displayShoppinglist("4tezJYMK");
 //DELETE Shoppinglist
 
 router.delete("/shoppinglist", async (req, res) => {
+
+    var token = req.body.idtoken;
+    var uid;
+    firebaseAdmin.auth().verifyIdToken(token)
+      .then(async function (decodedToken) {
+        uid = decodedToken.uid;
+  
         try {
-    res.status(200).send(await postgres.deleteShoppinglist(req.body.sl_id));
+          res.status(200).send(await postgres.deleteShoppinglist(req.body.sl_id, uid));
         } catch (err) {
           res.status(400).send(await err);
         }
+      }).catch(function (error) {
+        console.log(error)
+      });
 });
 
 router.post("/movedoneitem", (req, res) => {

express-server/views/dash2.ejs

@@ -9,8 +9,8 @@
 
     <script src="https://www.gstatic.com/firebasejs/5.7.0/firebase.js"></script>
 
-    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+
-    <script src="/ocrscan/axios.js"></script>
+
 
     <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
 
@@ -22,52 +22,102 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <!-- Compiled and minified CSS -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
+    <link rel="stylesheet" href="/test/materialize/css/materialize.min.css">
 
     <!-- Compiled and minified JavaScript -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
+    <script src="/test/materialize/js/materialize.min.js"></script>
 
     <link rel="stylesheet" href="test/style.css">
+
+
 </head>
 
 <body>
-
+    <div class="myapp">
         <nav>
             <div class="nav-wrapper red darken-1">
-            <a href="#" class="brand-logo">SmartShopper.cf</a>
+                <a class="brand-logo">{{title}}</a>
                 <ul id="nav-mobile" class="right hide-on-med-and-down">
                     <li><a href="sass.html">Done Purchases</a></li>
                     <li><a href="/scan">Scan bill</a></li>
-                <li><a href="/logout">Logout</a></li>
+                    <li class="nav-createlist"><a>Create Shoppinglist</a></li>
                 </ul>
             </div>
         </nav>
 
-    <div class="container row myapp">
+
+        <div class="container row">
             <div class="col s6">
-            <p>My Shoppinglists</p>
+                <ul class="collection with-header">
-            <div class="collection">
+                    <li class="collection-header">
-                <a href="#!" class="collection-item">Alvin</a>
+                        <h4>Your Shoppinglists</h4>
-                <a href="#!" class="collection-item active">Alvin</a>
+                    </li>
-                <a href="#!" class="collection-item">Alvin</a>
+                    <li class="collection-item citemL" v-for="item in myshoppinglists">
-                <a href="#!" class="collection-item">Alvin</a>
+                        <div v-on:click="getShoppinglistDetail(item.sl_id)">{{item.name}}<a href="#!"
+                                class="secondary-content"><i v-on:click="deleteShoppinglist(item.sl_id)"
+                                    class="material-icons ico">delete</i> <i class="material-icons ico">edit</i></a>
                         </div>
+                    </li>
+
+                </ul>
+
+
+                <ul class="collection with-header">
+                    <li class="collection-header">
+                        <h4>Shared Shoppinglists</h4>
+                    </li>
+                    <li class="collection-item citemL" v-for="item in sharedshoppinglists">
+                        <div>{{item.name}}<a href="#!" class="secondary-content"><i
+                                    class="material-icons ico">remove_circle_outline</i></a></div>
+                    </li>
+
+                </ul>
 
             </div>
 
+            <!-- etainansicht -->
             <div class="col s6">
-                <p>Shared Shoppinglists</p>
+
+                <ul class="collapsible">
+                    <li v-for="group in currentlist.groups">
+                        <div class="collapsible-header"><i class="material-icons">view_list</i>{{group.name}}</div>
+                        <div class="collapsible-body"><span>
+
                                 <div class="collection">
-                    <a href="#!" class="collection-item">Alvin</a>
+                                    <a  class="collection-item msl" v-for="item in group.content">{{item.name}}</a>
-                    <a href="#!" class="collection-item active">Alvin</a>
+                                </div>
-                    <a href="#!" class="collection-item">Alvin</a>
+
-                    <a href="#!" class="collection-item">Alvin</a>
+                            </span></div>
+                    </li>
+                </ul>
             </div>
 
         </div>
+
+
+        <div id="modal1" class="modal">
+            <div class="modal-content">
+                <h4>Create new Shoppinglist</h4>
+
+                <input id="sl_name" type="text" class="validate" v-model="name">
+                <label class="active" for="sl_desc">Name</label>
+
+                <input id="sl_name" type="text" class="validate" v-model="description">
+                <label class="active" for="sl_desc">Description</label>
+
+            </div>
+            <div class="modal-footer">
+                <a href="#!" class="modal-close waves-effect waves-green btn-flat" v-on:click="createShoppinglist(name, description)">Create</a>
+            </div>
         </div>
 
 
+
+    </div>
+
+    <script src="/test/vue.js"></script>
+    <script src="/ocrscan/axios.js"></script>
+
     <script src="/test/dash.js"></script>
 </body>