show project list in a table

routes/routes.js

@@ -558,16 +558,80 @@ module.exports = function (app, config, passport, i18n) {
 
   // ======== APP ROUTES - PROJECT LIST ====================
   app.get('/project', function (req, res) {
-    if (req.isAuthenticated()) {
-      res.render(lang+'/projectList/projects', {
-        isUserAuthenticated: true
-      });
-    }
-    else {
-      res.render(lang+'/projectList/projects', {
-        isUserAuthenticated: false
-      });
-    }
+    async.waterfall([
+      // get all projects from projectdb
+      function(done) {
+        methods.getAllProjects(function(projectsOverview, err) {
+          if (!err) {
+            done(err, projectsOverview)
+          }
+        })
+      },
+      // create JSON object of projects and user status for front-end
+      function(projectsOverview, done) {
+      //  var allProjects = []
+        var activeProjects = []
+        var nonActiveProjects = []
+/*
+        for (var i = 0; i < projectsOverview.length; i++) {
+          allProjects.push({
+            id: projectsOverview[i].id,
+            status: projectsOverview[i].projectstatus,
+            logo: projectsOverview[i].logo,
+            akronym: projectsOverview[i].pname,
+            title: projectsOverview[i].title,
+            summary: projectsOverview[i].onelinesummary,
+            category: projectsOverview[i].category,
+            cp: projectsOverview[i].contact_email
+          })
+        }
+*/
+        for (var i = 0; i < projectsOverview.length; i++) {
+          if (projectsOverview[i].projectstatus == 0) {
+            nonActiveProjects.push({
+              id: projectsOverview[i].id,
+              logo: projectsOverview[i].logo,
+              akronym: projectsOverview[i].pname,
+              title: projectsOverview[i].title,
+              summary: projectsOverview[i].onelinesummary,
+              category: projectsOverview[i].category,
+              cp: projectsOverview[i].contact_email
+            })
+          }
+          else if (projectsOverview[i].projectstatus == 1) {
+            activeProjects.push({
+              id: projectsOverview[i].id,
+              logo: projectsOverview[i].logo,
+              akronym: projectsOverview[i].pname,
+              title: projectsOverview[i].title,
+              summary: projectsOverview[i].onelinesummary,
+              category: projectsOverview[i].category,
+              cp: projectsOverview[i].contact_email
+            })
+          }
+        }
+
+        // render the page
+        if (req.isAuthenticated()) {
+          res.render(lang+'/projectList/projects', {
+            isUserAuthenticated: true,
+            //project: allProjects
+            nonActive: nonActiveProjects,
+            active: activeProjects
+          });
+        }
+        else {
+          res.render(lang+'/projectList/projects', {
+            isUserAuthenticated: false,
+            //project: allProjects
+            nonActive: nonActiveProjects,
+            active: activeProjects
+          });
+        }
+      }
+    ])
+
+    
   })
 
 };

views/DE/projectList/projects.pug

@@ -33,11 +33,57 @@ html(lang="de")
         }
   body
     div(class="container-fluid")
-        div(class="row")
-            div(class="col-md-6 offset-md-2")
-                h3(class="mb-3 font-weight-bold") Hello World
-            div(class="col-md-6 offset-md-3")
-                p Content: Project List in a table
+        h3(class="mb-3 font-weight-bold") Aktive Projekte
+        table(class="table table-striped")
+            thead
+                tr
+                    th Logo
+                    th Akronym
+                    th Title
+                    th Kernziel
+                    th Kategorie
+                    th Ansprechpartner
+                    th Projektinhalte
+            tbody
+                for item in active
+                    tr
+                        //td #{item.status}
+                        td
+                            img(src=item.logo, width="40", height="40")
+                        td #{item.akronym}
+                        td #{item.title}
+                        td #{item.summary}
+                        td #{item.category}
+                        td
+                            a(class="nav-link", href="mailto:"+ item.cp) #{item.cp}
+                        td
+                            a(class="nav-link", href="https://m4lab.hft-stuttgart.de/projectoverview?projectID="+ item.id) Zur Projektübersicht
+        br
+        h3(class="mb-3 font-weight-bold") Abgeschlossene Projekte
+        table(class="table table-striped")
+            thead
+                tr
+                    th Logo
+                    th Akronym
+                    th Title
+                    th Kernziel
+                    th Kategorie
+                    th Ansprechpartner
+                    th Projektinhalte
+            tbody
+                for item in nonActive
+                    tr
+                        //td #{item.status}
+                        td
+                            img(src=item.logo, width="40", height="40")
+                        td #{item.akronym}
+                        td #{item.title}
+                        td #{item.summary}
+                        td #{item.category}
+                        td
+                            a(class="nav-link", href="mailto:"+ item.cp) #{item.cp}
+                        td
+                            a(class="nav-link", href="https://m4lab.hft-stuttgart.de/projectoverview?projectID="+ item.id) Zur Projektübersicht 
 
     // jQuery
     script(src="https://code.jquery.com/jquery-3.3.1.min.js")