einkaufslisten übersicht, detailansicht

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

@@ -79,6 +79,20 @@ async function generateUser() {
         }
 }
 
+async function displayShoppinglist(sl_id) {
+    try {
+        let groups = await query('SELECT row_to_json("Group") AS obj FROM "Group" JOIN "Shoppinglist" USING (sl_id) WHERE sl_id = $1;', [sl_id]);
+        let items = await query('SELECT row_to_json("Item") AS obj FROM "Item" JOIN "Group" USING (group_id) WHERE "Group".sl_id = $1;', [sl_id]);
+        return items_in_groups(groups, items);
+        
+        
+    }
+
+    catch (error) {
+        console.error(error);
+    }
+}
+
 
 //sl_id generieren
 function generate_sl_id() {
@@ -92,6 +106,23 @@ function generate_sl_id() {
     return output;
 }
 
-module.exports = {
-    getShoppinglistsAdmin, getShoppinglistsShared, newShoppinglist
+function items_in_groups(groups, items) {
+
+    let result = [];
+
+    for(let item of groups) {
+
+        result.push({
+            group_id: item.group_id,
+            name: item.name,
+            color: item.color,
+            content: items.filter(function(obj) {return obj.group_id == item.group_id})
+        });
+    }
+
+    return result;
+}
+
+module.exports = {
+    getShoppinglistsAdmin, getShoppinglistsShared, newShoppinglist, displayShoppinglist
 }

express-server/public/javascripts/ajax.js

@@ -28,9 +28,4 @@ $(document).ready(function() {
 
         });    
     });
-
-
-
-
-
 });

express-server/public/javascripts/test.js

@@ -0,0 +1,27 @@
+$(document).ready(function() {
+    $.ajax({
+        type: "GET",
+        url: "/myshoppinglists",
+        success(data) {
+            for(let item of data) {
+                $(".tb_myshoppinglists").append("<tr id='" + item.sl_id +"'><td>" + item.name + "</td><td>" + item.description +
+                 "</td><td> <a class='btn-floating btn-large waves-effect waves-light red btn_detail'><i class='material-icons'>forward</i></a></td></tr>");
+            }
+        }
+    });
+
+    $.ajax({
+        type: "GET",
+        url: "/sharedshoppinglists",
+        success(data) {
+            for(let item of data) {
+                $(".tb_sharedshoppinglists").append("<tr id='" + item.sl_id +"'><td>" + item.name + "</td><td>" + item.description +
+                "</td><td> <a class='btn-floating btn-large waves-effect waves-light red btn_detail'><i class='material-icons'>forward</i></a></td></tr>");
+            }
+        }
+    });
+
+    $(document).on("click", ".btn_detail", function() {
+        window.location.replace("/shoppinglist/" + $(this).closest("tr").attr("id"));
+    });
+});

express-server/routes/index.js

@@ -63,7 +63,7 @@ router.get("/myshoppinglists", async function(req, res, next) {
 
   try {
     //Get user id: req.session.passport.user.profile.id
-    res.status(200).send(await postgres.getShoppinglistsAdmin("testuser"));
+    res.status(200).send(await postgres.getShoppinglistsAdmin("testuser1"));
   }
 
   catch(err) {
@@ -77,7 +77,7 @@ router.get("/myshoppinglists", async function(req, res, next) {
 router.get("/sharedshoppinglists", async function(req, res, next) {
   try {
     //Get user id: req.session.passport.user.profile.id
-    res.status(200).send(await postgres.getShoppinglistsShared("testuser"));
+    res.status(200).send(await postgres.getShoppinglistsShared("testuser1"));
   }
 
   catch(err) {
@@ -90,7 +90,19 @@ router.get("/sharedshoppinglists", async function(req, res, next) {
 
 router.post("/shoppinglist", async function(req, res, next) {
   try {
-    res.status(200).send(await postgres.newShoppinglist(req.body.name, req.body.description, "testuser"));
+    res.status(200).send(await postgres.newShoppinglist(req.body.name, req.body.description, "testuser1"));
+  }
+
+  catch(err) {
+    res.status(400).send(await err);
+  }
+});
+
+//GET Shoppinglist detail
+
+router.get("/shoppinglist/:sl_id", async (req, res) => {
+  try {
+    res.status(200).send(await postgres.displayShoppinglist(req.params.sl_id));
   }
 
   catch(err) {
@@ -99,7 +111,7 @@ router.post("/shoppinglist", async function(req, res, next) {
 });
 
 router.get("/test1", (req, res) => {
-  res.send(req.user);
+  res.render("index1");
 });
 
 module.exports = router;

express-server/views/index.ejs

@@ -67,7 +67,6 @@
 
 
 
-
     <!-- <h1></h1>
     <p>Welcome to </p> -->
     <a href="/myshoppinglists">Meine Einkaufslisten anzeigen</a><br>

express-server/views/index1.ejs

@@ -1,20 +1,48 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <title></title>
-    <link rel='stylesheet' href='/stylesheets/style.css' />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
-    <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-  </head>
-  <body>
-    <a href="/myshoppinglists">Meine Einkaufslisten anzeigen</a><br>
-    <a href="/sharedshoppinglists">Mit mir geteilte Einkaufslisten anzeigen</a><br>
-    <a href="">Einkaufsliste erstellen</a><br>
-    <a href='/logout'>Logout</a>
 
-    <script src="/jquery/dist/jquery.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
-    <script src="/javascripts/ajax.js"></script>
-  </body>
+<head>
+  <title></title>
+  <link rel='stylesheet' href='/stylesheets/test.css' />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
+  <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+</head>
+
+<body>
+
+  <div class="container">
+    <p>Logged in as: testuser1</p>
+    <div class="row">
+      <div class="col s12 m12 l6">
+        <p>My Shoppinglists</p>
+        <table>
+          <thead>
+            <th>Name</th>
+            <th>Description</th>
+            <th>Open</th>
+          </thead>
+          <tbody class="tb_myshoppinglists"></tbody>
+        </table>
+      </div>
+
+      <div class="col s12 m12 l6">
+          <p>Shared Shoppinglists</p>
+        <table>
+          <thead>
+            <th>Name</th>
+            <th>Description</th>
+            <th>Open</th>
+          </thead>
+          <tbody class="tb_sharedshoppinglists"></tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+
+  <script src="/jquery/dist/jquery.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
+  <script src="/javascripts/test.js"></script>
+</body>
+
 </html>