Projektinformationen und Projektdaten

routes/routes-project.js

@@ -364,6 +364,7 @@ module.exports = function (app) {
 
   app.get('/projectlist', async function(req, res){
     let projectArr = []
+    let pagesArr = []
     let isProject = true
     let firstId = 0
 
@@ -403,15 +404,33 @@ module.exports = function (app) {
             else {
               projectData[i].web_url = "https://transfer.hft-stuttgart.de/pages/"+projectData[i].name
             }
+            // remove 'website' from tag list
+            const index = projectData[i].tag_list.indexOf('website');
+            if (index > -1) {
+              projectData[i].tag_list.splice(index, 1);
+            }
+
+            // fill in pagesArr
+            let pages = {
+              logo: projectData[i].avatar_url,
+              name: projectData[i].name,
+              weburl: projectData[i].web_url,
+              desc: projectData[i].description,
+              keywords: projectData[i].tag_list
+            }
+            pagesArr.push(pages)
+
           }
-          let project = {
-            logo: projectData[i].avatar_url,
-            name: projectData[i].name,
-            weburl: projectData[i].web_url,
-            desc: projectData[i].description,
-            keywords: projectData[i].tag_list
+          else {
+            let project = {
+              logo: projectData[i].avatar_url,
+              name: projectData[i].name,
+              weburl: projectData[i].web_url,
+              desc: projectData[i].description,
+              keywords: projectData[i].tag_list
+            }
+            projectArr.push(project)
           }
-          projectArr.push(project)
         }
 
         firstId = projectData[projectData.length-1].id
@@ -419,7 +438,8 @@ module.exports = function (app) {
     }
 
     res.render(lang+'/project/projectList', {
-      project: projectArr
+      project: projectArr,
+      pages: pagesArr
     })
   })
 

views/DE/project/projectList.pug

@@ -28,12 +28,43 @@ html(lang="de")
         }
   body
     div(class="container")
-        div(class="pt-4 pb-4")
-            input(id="searchInput", class="form-control form-control-dark w-100", type="text", placeholder="Suchen Sie hier nach Themen und Projekten", onkeyup="searchFunction()")
-        h3(class="mb-3 font-weight-bold") Projekte
+        div(class="pt-4 pb-4 form-row")
+            div(class="form-group col-md-10")
+                input(id="searchInput", class="form-control", type="text", placeholder="Suchen Sie hier nach Themen und Projekten", onkeyup="searchFunction()")
+            div(class="form-group col-md-2")
+                select(class="form-control")
+                    option uncategorized
+        h3(class="mb-3 font-weight-bold") Projektinformationen
+        p(class="font-italic") Hier finden Sie Informationen zu den bei uns gehosteten Projekten, wie z.B. Projektbeschreibungen, Projektwebseiten, Visualisierungen, Demonstrationen.
 
         div(class="container")
-            p#projectCounter #{project.length} Projekte werden angezeigt
+            //p#pagesCounter #{pages.length} Projektinformationen werden angezeigt
+            | <div class="row">
+            for item in pages
+                div(class="py-4 col-sm")
+                    div(class="card", style="width: 18rem;")
+                        div(class="title-container")
+                            h5(class="card-title-bottom-left") #{item.name}
+                            img(class="card-img-top", src=item.logo)
+                        div(class="card-body")
+                            div(class="row")
+                                each key in item.keywords
+                                    h6
+                                        span(class="badge badge-pill badge-primary px-2") #{key}
+                                        | &nbsp;
+                            div(class="row")
+                                div(class="col-9")
+                                    p(class="card-text") #{item.desc}
+                                div(class="col-3")
+                                    svg(class="bi bi-chevron-right", width="32", height="32", viewBox="0 0 20 20", fill="currentColor", xmlns="http://www.w3.org/2000/svg")
+                                        | <a xlink:href="#{item.weburl}" target="_blank"><path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z"></path></a>
+            | </div>
+
+        h3(class="mb-3 font-weight-bold") Projektdaten
+        p(class="font-italic") Hier finden Sie den direkten Zugang zu den Inalten der bei uns gehosteten Projekte.
+
+        div(class="container")
+            //p#projectCounter #{project.length} Projektdaten werden angezeigt
             | <div class="row">
             for item in project
                 div(class="py-4 col-sm")
@@ -89,5 +120,6 @@ html(lang="de")
                 }
             }
 
-            document.getElementById("projectCounter").innerHTML = counterBlock+" Projekte werden angezeigt"
+            //document.getElementById("pagesCounter").innerHTML = counterBlock+" Projekte werden angezeigt"
+            //document.getElementById("projectCounter").innerHTML = counterBlock+" Projekte werden angezeigt"
         }
\ No newline at end of file