updates

app.js → app.ts

-const express = require('express')
-const path = require('path')
-//const passport = require('passport')
-const morgan = require('morgan')
-const cookieParser = require('cookie-parser')
-const bodyParser = require('body-parser')
-const session = require('express-session')
-const flash = require('express-flash')
-const fileUpload = require('express-fileupload')
-const helmet = require('helmet')
-const compression = require('compression')
+import express from 'express'
+import path from 'path'
+import passport from 'passport'
+import morgan from 'morgan'
+import cookieParser from 'cookie-parser'
+import bodyParser from 'body-parser'
+import session from 'express-session'
+import flash from 'express-flash'
+import fileUpload from 'express-fileupload'
+//import helmet from 'helmet'
+import compression from 'compression'
 
 var env = process.env.NODE_ENV || 'testing'
 const config = require('./config/config')[env]
+const lang = 'DE';
 
 var app = express()
-
 app.set('port', config.app.port)
 app.set('views', __dirname + '/views')
 app.set('view engine', 'pug')
 
-app.use(helmet())
+//app.use(helmet())
 app.use(compression())
 app.use(morgan('combined'))
 app.use(cookieParser())
@@ -30,13 +30,12 @@ app.use(session(
     {
         resave: true,
         saveUninitialized: true,
+        //secret: config.app.sessionSecret
         secret: 'thisisasecret-thisisasecret-thisisasecret'
     }
 ))
-
-//app.use(passport.initialize())
-//app.use(passport.session())
-
+app.use(passport.initialize())
+app.use(passport.session())
 app.use(flash())
 app.use((req, res, next) => {
     res.locals.errors = req.flash("error")
@@ -57,20 +56,17 @@ app.use(function(req, res, next) {
     next()
 })
   
-//require('./routes/routes-account')(app, config, passport, i18n);
-//require('./routes/routes-project')(app, config, passport)
-require('./routes/routes-project')(app, config)
+require('./routes/project')(app, lang)
   
 // Handle 404
-app.use(function (req, res, next) {
-    //res.status(404).send('404: Page not Found', 404)
-    res.status(404).render('./DE/404')
+app.use(function (req:any, res:any) {
+    res.status(404).render(lang+'/404')
 })
   
 // Handle 500 - any server error
-app.use(function (err, req, res, next) {
+app.use(function (err:any, req:any, res:any, next:any) {
     console.error(err.stack)
-    res.status(500).render('./DE/500', {
+    res.status(500).render(lang+'/500', {
       error: err
     })
 })

config/config.js → config/config.ts

@@ -2,7 +2,8 @@ module.exports = {
   development: {
     app: {
       name: 'Project Page Manager',
-      port: process.env.PORT || 8888
+      port: process.env.PORT || 8888,
+      sessionSecret: 'thisisasecret-thisisasecret-thisisasecret'
     },
     passport: {
       strategy: 'saml',
@@ -29,12 +30,16 @@ module.exports = {
       authPass: 'passwordmail',
       tlsCiphers: 'SSLv3',
       from: 'email_from',
+    },
+    gitlab: {
+      token_readWriteProjects: 'putyourtokenhere'
     }
   },
   testing: {
     app: {
       name: 'Project Page Manager',
-      port: process.env.PORT || 8888
+      port: process.env.PORT || 8888,
+      sessionSecret: 'thisisasecret-thisisasecret-thisisasecret'
     },
     passport: {
       strategy: 'saml',
@@ -61,6 +66,9 @@ module.exports = {
       authPass: 'passwordmail',
       tlsCiphers: 'SSLv3',
       from: 'email_from',
+    },
+    gitlab: {
+      token_readWriteProjects: 'putyourtokenhere'
     }
   },
   production: {

routes/dbconn.js → config/dbconn.ts

-const mysql = require('mysql')
+import mysql from 'mysql'
 
-var env = process.env.NODE_ENV || 'testing';
-const config = require('../config/config')[env]
+var env = process.env.NODE_ENV || 'development';
+const config = require('./config')[env]
 
 // ==== USER ACOOUNT DB CONNECTION ====
 var userConnection = mysql.createConnection({
@@ -51,4 +51,4 @@ var connection = {
     project: projectConnection
 }
 
-module.exports = connection
\ No newline at end of file
+export = connection
\ No newline at end of file

functions/gitlab.ts

+import axios from 'axios'
+
+var gitlab = {
+    getProjects: async function(perPage:number, idAfter:number) {
+        try {
+            let projects = await axios({
+                method: 'get',
+                url: 'https://transfer.hft-stuttgart.de/gitlab/api/v4/projects?visibility=public&pagination=keyset&per_page='+perPage+'&order_by=id&sort=asc&id_after='+idAfter
+            })
+            let data = projects.data
+            let reposArr = []
+            let pagesArr = []
+            for(let i = 0; i < data.length; i++){
+                // skip template project
+                if (data[i].name == 'page_basic' || data[i].name == 'generic' || data[i].name == 'simple_raw' || data[i].name == 'simple_thesis') {
+                    continue
+                } else if(data[i].tag_list.includes('website')) {
+                    pagesArr.push(data[i])
+                } else {
+                    reposArr.push(data[i])
+                }
+            }
+            return {
+                error: false,
+                data: [reposArr, pagesArr]}
+        }
+        catch (err) {
+            return {
+                error: true,
+                data: err}
+        }
+    },
+    getLatestPipelineStatus: async function(projectId:number) {
+        return axios({
+            method: 'get',
+            url: 'https://transfer.hft-stuttgart.de/gitlab/api/v4/projects/'+projectId+'/pipelines'
+        })
+        .then(res => res.data[0].status)
+        .catch(err => console.error(err))
+    }
+}
+
+export = gitlab
\ No newline at end of file

routes/helpers.js → functions/helpers.ts

 var helpers = {
-    stringToArray: function (input){
+    stringToArray: function (input:string){
         if(input != null){
             return input.split(',');
         }else{
@@ -8,4 +8,4 @@ var helpers = {
     }
 };
 
-module.exports = helpers;
\ No newline at end of file
+export = helpers;
\ No newline at end of file

routes/methods.js → functions/methods.ts

-const dbconn = require('./dbconn');
+const dbconn = require('../config/dbconn');
 
 var methods = {
     // test method
@@ -6,9 +6,9 @@ var methods = {
 		console.log('Current Date is: ' + new Date().toISOString().slice(0, 10));
     },
     // ===================== user db =====================
-    getUserIdByEmail: function(email, callback) {
-        var userId
-        dbconn.user.query('SELECT id FROM user WHERE email = "' +email+'"', function (err, rows, fields) {
+    getUserIdByEmail: function(email:string, callback:any) {
+        var userId:number
+        dbconn.user.query('SELECT id FROM user WHERE email = "' +email+'"', function (err:any, rows:any) {
             if (err) {
                 throw err;
             }
@@ -28,39 +28,39 @@ var methods = {
         });
     },
     */
-    addUserProjectRole: function(data, callback) {
-        dbconn.user.query('INSERT INTO user_project_role SET ?', data, function (err, results, fields){
+    addUserProjectRole: function(data:any, callback:any) {
+        dbconn.user.query('INSERT INTO user_project_role SET ?', data, function (err:any){
             if (err) throw err;
             callback(err);
         })
     },
     // ======================= project db =======================
-    getAllProjects: function(callback) {
-        dbconn.project.query('CALL getAllprojects', function (err, rows, fields){
+    getAllProjects: function(callback:any) {
+        dbconn.project.query('CALL getAllprojects', function (err:any, rows:any){
             if (err) throw err;
             callback(rows[0], err);
         })
     },
-    getAllMailinglists: function(callback) {
-        dbconn.project.query('CALL getAllLists', function (err, rows, fields){
+    getAllMailinglists: function(callback:any) {
+        dbconn.project.query('CALL getAllLists', function (err:any, rows:any){
             if (err) throw err;
             callback(rows[0], err);
 	    })
     },
-    getProjectOverviewById: function(projectId, callback) {
-        dbconn.project.query('CALL GetProjectInformationByProjectID(' + projectId+ ')', function (err, rows, fields){
+    getProjectOverviewById: function(projectId:number, callback:any) {
+        dbconn.project.query('CALL GetProjectInformationByProjectID(' + projectId+ ')', function (err:any, rows:any){
             if (err) throw err;
             callback(rows[0], err);
     	})
     },
-    getProjectImagesById: function(projectId, callback) {
-        dbconn.project.query('CALL getImagesByProjectID(' + projectId+ ')', function (err, rows, fields){
+    getProjectImagesById: function(projectId:number, callback:any) {
+        dbconn.project.query('CALL getImagesByProjectID(' + projectId+ ')', function (err:any, rows:any){
             if (err) throw err;
             callback(rows[0], err);
         })
     },
-    addProjectOverview: function(data, callback) {
-        dbconn.project.query('INSERT INTO project_overview SET ?', data, function (err, results, fields){
+    addProjectOverview: function(data:any, callback:any) {
+        dbconn.project.query('INSERT INTO project_overview SET ?', data, function (err:any, results:any){
             if (err) {
                 console.error(err);
             }
@@ -69,4 +69,4 @@ var methods = {
     }
 };
 
-module.exports = methods;
\ No newline at end of file
+export = methods;
\ No newline at end of file

package.json

@@ -7,20 +7,21 @@
     "email": "rosanny.sihombing@hft-stuttgart.de"
   },
   "keywords": [
-    "m4_lab",
-    "prjects"
+    "m4_lab"
   ],
   "repository": {
     "type": "git",
     "url": "https://transfer.hft-stuttgart.de/gitlab/m4lab_tv1/project-page.git"
   },
   "scripts": {
-    "start": "nodemon app.js",
+    "start": "nodemon app.ts",
+    "build": "tsc --build",
+    "clean": "tsc --build --clean",
     "test": ""
   },
   "dependencies": {
     "async": "^3.2.0",
-    "axios": "^0.20.0",
+    "axios": "^0.21.1",
     "body-parser": "^1.19.0",
     "compression": "^1.7.4",
     "cookie-parser": "1.4.3",
@@ -34,11 +35,28 @@
     "morgan": "^1.10.0",
     "mysql": "^2.18.1",
     "passport": "0.3.2",
-    "passport-saml": "^1.3.4",
-    "pug": "^2.0.4"
+    "passport-saml": "^2.0.6",
+    "pug": "^3.0.2",
+    "update": "^0.7.4"
   },
   "engines": {
     "node": ">= 4.0.0"
   },
-  "license": "MIT"
+  "license": "MIT",
+  "devDependencies": {
+    "@types/async": "^3.2.6",
+    "@types/compression": "^1.7.0",
+    "@types/cookie-parser": "^1.4.2",
+    "@types/express": "^4.17.12",
+    "@types/express-fileupload": "^1.1.6",
+    "@types/express-flash": "^0.0.2",
+    "@types/express-session": "^1.17.3",
+    "@types/helmet": "^4.0.0",
+    "@types/morgan": "^1.9.2",
+    "@types/mysql": "^2.15.18",
+    "@types/passport": "^1.0.6",
+    "nodemon": "^2.0.9",
+    "ts-node": "^10.0.0",
+    "typescript": "^4.3.5"
+  }
 }

routes/mailer.js

-const nodemailer = require('nodemailer')
-
-var env = process.env.NODE_ENV || 'testing';
-const config = require('../config/config')[env]
-
-var smtpTransport = nodemailer.createTransport({
-    host: config.mailer.host,
-    secureConnection: config.mailer.secureConnection,
-    port: config.mailer.port,
-    auth: {
-      user: config.mailer.authUser,
-      pass: config.mailer.authPass
-    },
-    tls: {
-        ciphers: config.mailer.tlsCiphers
-    } 
-});
-  
-var mailOptions = {
-    to: "",
-    from: config.mailer.from,
-    subject: "",
-    text: ""
-};
-
-var mailer = {
-    transport: smtpTransport,
-    options: mailOptions
-}
-
-module.exports = mailer
\ No newline at end of file

routes/routes-project.js → routes/project.ts

-const fs = require('fs')
 //const SamlStrategy = require('passport-saml').Strategy
-const dbconn = require('./dbconn')
-const methods = require('./methods')
-// pwd encryption
-//const bcrypt = require('bcryptjs');
-//const saltRounds = 10;
-//const salt = 64; // salt length
-// forgot pwd
-const async = require('async')
-//const crypto = require('crypto')
-//const mailer = require('./mailer')
+import async from 'async'
+import methods from '../functions/methods'
+import gitlab from '../functions/gitlab'
+import helpers from '../functions/helpers'
 
-const helpers = require('./helpers')
 const pictSizeLimit = 1000000 // 1 MB
-const axios = require('axios')
 
-module.exports = function (app) {
+module.exports = function (app:any, lang:string) {
  
   // ======== APP ROUTES - PROJECT ====================
-  var lang = 'DE'
   
-  app.get('/mailinglists', function (req, res) {
+  app.get('/', function (req:any, res:any) {
+    res.render(lang+'/project/project-simplified', {
+       isUserAuthenticated: req.isAuthenticated(),
+       user: req.user
+    });
+  })
+
+  app.get('/mailinglists', function (req:any, res:any) {
     async.waterfall([
-        function(done) {
-            methods.getAllMailinglists(function(mailinglistOverview, err) {
+      function(done:any) {
+        methods.getAllMailinglists(function(mailinglistOverview:any, err:any) {
           if (!err) {
             done(err, mailinglistOverview)
           }
         })
       },
       // create JSON object of mailinglists for front-end
-        function(mailinglistOverview, done) {
+      function(mailinglistOverview:any) {
         var allMailingLists = []  // JSON object
         for (let i = 0; i < mailinglistOverview.length; i++) {
           // add data to JSON object
@@ -52,68 +49,8 @@ module.exports = function (app) {
       }
     ])
   })
-/*
-  app.get('/project_', function (req, res) {
-    async.waterfall([
-      // get all projects from projectdb
-      function(done) {
-        methods.getAllProjects(function(projectsOverview, err) {
-          if (!err) {
-            done(err, projectsOverview)
-          }
-        })
-      },
-      // create JSON object for front-end
-      function(projectsOverview, done) {
-        var activeProjects = []
-        var nonActiveProjects = []
-
-        for (var i = 0; i < projectsOverview.length; i++) {
-          var project = {
-            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,
-            gitlab: projectsOverview[i].gitlab
-          }
-          if (projectsOverview[i].projectstatus == 0) {
-            nonActiveProjects.push(project)
-          }
-          else if (projectsOverview[i].projectstatus == 1) {
-            activeProjects.push(project)
-          }
-        }
 
-        // render the page
-        if (req.isAuthenticated()) {
-          res.render(lang+'/project/projects', {
-            isUserAuthenticated: true,
-            nonActive: nonActiveProjects,
-            active: activeProjects
-          });
-        }
-        else {
-          res.render(lang+'/project/projects', {
-            isUserAuthenticated: false,
-            nonActive: nonActiveProjects,
-            active: activeProjects
-          });
-        }
-      }
-    ])
-  })
-*/
-  app.get('/', function (req, res) {
-    res.render(lang+'/project/project-simplified', {
-       isUserAuthenticated: req.isAuthenticated(),
-       user: req.user
-    });
-  })
-/*
-  app.get('/addprojectoverview', function (req, res) {
+  app.get('/addprojectoverview', function (req:any, res:any) {
     if (req.isAuthenticated()) {
       res.render(lang+'/project/addProjectOverview')
     }
@@ -122,53 +59,7 @@ module.exports = function (app) {
     }
   })
 
-  app.post('/addprojectoverview__', function (req, res) {
-    if (req.isAuthenticated()) {
-      var wiki = 0
-      if (req.body.wiki)
-        wiki = 1
-
-      var projectTerm = req.body.termForm + " - " + req.body.termTo
-      var projectOverviewData = {
-        pname: req.body.pname,
-        title: req.body.title,
-        onelinesummary: req.body.summary,
-        category: req.body.category,
-        logo: req.body.logo,
-        gitlab: req.body.gitlabURL,
-        wiki: wiki,
-        overview: req.body.overview,
-        question: req.body.question,
-        approach: req.body.approach,
-        result: req.body.result,
-        keywords: req.body.keywords,
-        announcement: req.body.announcement,
-        term: projectTerm,
-        further_details: req.body.furtherDetails,
-        website: req.body.website,
-        src: req.body.src,
-        caption: req.body.caption,
-        contact_lastname: req.body.contactName,
-        contact_email: req.body.contactEmail,
-        leader_lastname: req.body.leaderName,
-        leader_email: req.body.leaderEmail
-      }
-      
-      methods.addProjectOverview(projectOverviewData, function(err){
-        if (err) {
-          //req.flash('error', "Failed")
-          req.flash('error', "Fehlgeschlagen")
-          res.redirect('/addProjectOverview');
-        }
-        else {
-          req.flash('success', 'Your project has been created.')
-          res.redirect('/project');
-        }
-      })
-    }
-  })
-
-  app.post('/addprojectoverview', function (req, res) {
+  app.post('/addprojectoverview', function (req:any, res:any) {
     if (req.isAuthenticated()) {
       var wiki = 0
       if (req.body.wiki)
@@ -234,7 +125,7 @@ module.exports = function (app) {
       
       // save pictures
       if (projectLogo) {
-        projectLogo.mv(projectLogoPath, function(err) {
+        projectLogo.mv(projectLogoPath, function(err:any) {
           if (err) {
             console.error(err)
             res.status(500).render(lang+'/500', {
@@ -244,7 +135,7 @@ module.exports = function (app) {
         });
       }
       if (projectPicture) {
-        projectPicture.mv(projectPicturePath, function(err) {
+        projectPicture.mv(projectPicturePath, function(err:any) {
           if (err) {
             console.error(err)
             res.status(500).render(lang+'/500', {
@@ -254,14 +145,14 @@ module.exports = function (app) {
         });
       }
 
-      // RS: Temporary solution while Project DB is still in early phase.
-      //        When User DB and Project DB are integrated and quite stabil, this operation should be done in 1 transaction.
-      
-      var userId // todo: make this global variable?
+      /* RS: Temporary solution while Project DB is still in early phase.
+              When User DB and Project DB are integrated and quite stabil, this operation should be done in 1 transaction.
+      */
+      var userId:number // todo: make this global variable?
       async.waterfall([
         // get userId by email from userdb
-        function(done) {
-          methods.getUserIdByEmail(req.user.email, function(id, err) {
+        function(done:any) {
+          methods.getUserIdByEmail(req.user.email, function(id:number, err:any) {
             if (!err) {
               userId = id
               done(err)
@@ -269,8 +160,8 @@ module.exports = function (app) {
           })
         },
         // add project overview
-        function(done) {
-          methods.addProjectOverview(projectOverviewData, function(data, err){
+        function(done:any) {
+          methods.addProjectOverview(projectOverviewData, function(data:any, err:any){
             if (err) {
               res.status(500).render(lang+'/500', {
                 error: err
@@ -282,13 +173,13 @@ module.exports = function (app) {
           })
         },
         // assign the created overview to logged-in user
-        function(projectOverviewId, done) {
+        function(projectOverviewId:number, done:any) {
           var userProjectRoleData = {
             project_id: projectOverviewId,
             user_id: userId,
             role_id: 3 // OVERVIEW_CREATOR
           }
-          methods.addUserProjectRole(userProjectRoleData, function(userProjects, err) {
+          methods.addUserProjectRole(userProjectRoleData, function(userProjects:any, err:any) {
             if (err) {
               //req.flash('error', "Failed")
               req.flash('error', "Fehlgeschlagen")
@@ -304,40 +195,36 @@ module.exports = function (app) {
     }
   })
 
-  app.get('/updateprojectoverview', function (req, res) {
+  app.post('/updateprojectoverview', function (req:any, res:any) {
     // only their own project
   })
 
-  app.post('/updateprojectoverview', function (req, res) {
-    // only their own project
-  })
-*/
-  app.get('/projectoverview', function(req, res){
+  app.get('/projectoverview', function(req:any, res:any){
     async.waterfall([
-      function(done) {
-        methods.getProjectOverviewById(req.query.projectID, function(projectOverview, err) {
+      function(done:any) {
+        methods.getProjectOverviewById(req.query.projectID, function(projectOverview:any, err:any) {
           if (!err) {
             done(err, projectOverview)
           }
         })
       },
-      function(projectOverview,done){
-        methods.getProjectImagesById(req.query.projectID, function(projectImages, err) {
+      function(projectOverview:any, done:any){
+        methods.getProjectImagesById(req.query.projectID, function(projectImages:any, err:any) {
           if (!err) {
             done(err, projectImages, projectOverview)
           }
         })
       },
       // render projectOverview page
-      function(projectImages, projectOverview, done) {
-        console.log(projectImages)
-        partnerWebsites = helpers.stringToArray(projectOverview[0].partner_website)
-        partnerNames = helpers.stringToArray(projectOverview[0].partner_name)
-        awardSites = helpers.stringToArray(projectOverview[0].award_website)
-        awardNames = helpers.stringToArray(projectOverview[0].award_name)
-        sponsorWebsites = helpers.stringToArray(projectOverview[0].sponsor_website)
-        sponsorImgs = helpers.stringToArray(projectOverview[0].sponsor_img)
-        sponsorNames = helpers.stringToArray(projectOverview[0].sponsor_name)
+      function(projectImages:any, projectOverview:any) {
+        //console.log(projectImages)
+        let partnerWebsites = helpers.stringToArray(projectOverview[0].partner_website)
+        let partnerNames = helpers.stringToArray(projectOverview[0].partner_name)
+        let awardSites = helpers.stringToArray(projectOverview[0].award_website)
+        let awardNames = helpers.stringToArray(projectOverview[0].award_name)
+        let sponsorWebsites = helpers.stringToArray(projectOverview[0].sponsor_website)
+        let sponsorImgs = helpers.stringToArray(projectOverview[0].sponsor_img)
+        let sponsorNames = helpers.stringToArray(projectOverview[0].sponsor_name)
 
         res.render(lang+'/project/projectOverview', {
           isUserAuthenticated: req.isAuthenticated(),
@@ -356,54 +243,21 @@ module.exports = function (app) {
     ])
   })
 
-  async function getProjectsFromGitlab(perPage, idAfter) {
-    // public projects
-    return await axios.get('https://transfer.hft-stuttgart.de/gitlab/api/v4/projects?visibility=public&pagination=keyset&per_page='+
-      perPage+'&order_by=id&sort=asc&id_after='+idAfter)
-  }
-
-  async function getProjectsRunnersFromGitlab() {
-    // runners
-    // https://github.com/axios/axios/issues/638
-    /*
-    return await axios.get('https://transfer.hft-stuttgart.de/gitlab/api/v4/runners/7',
-      {
-        params:{},
-        headers: { 'Authorization': '33eBjByS2p-Pye8tzY7j' } 
-      })*/
-
-    axios.get('https://transfer.hft-stuttgart.de/gitlab/api/v4/runners/7', { headers: { Authorization: '33eBjByS2p-Pye8tzY7j' } }).then(response => {
-      // If request is good...
-      console.log(response.data);
-    })
-    .catch((error) => {
-      console.log('error 3 ' + error);
-    });
-  }
-
-
-  app.get('/projectlist-onelistforall', async function(req, res){
+  // Projektdaten
+  app.get('/projektdaten', async function(req:any, res:any){
     let projectArr = []
     let isProject = true
     let firstId = 0
 
     while (isProject == true) {
-      //
-      //let runners = await getProjectsRunnersFromGitlab()
-      //console.log(runners)
-      //
-      let projects = await getProjectsFromGitlab(10, firstId)
-      let projectData = projects.data
+      let projects = await gitlab.getProjects(100, firstId)
+      let projectData = projects.data[0]
 
       if (projectData.length == 0) {
         isProject = false
       }
       else {
         for(let i = 0; i < projectData.length; i++){
-          // skip template project
-          if (projectData[i].name == "template_gitlab_page") {
-            continue
-          }
           // M4_LAB logo for all projects that do not have logo
           if (projectData[i].avatar_url == null) {
             projectData[i].avatar_url = "https://m4lab.hft-stuttgart.de/img/footer/M4_LAB_LOGO_Graustufen.png"
@@ -412,28 +266,7 @@ module.exports = function (app) {
           if (projectData[i].description == "") {
             projectData[i].description = "- no description -"
           }
-          // websites
-          if (projectData[i].tag_list.includes('website')) {
-            // customize website name
-            if (projectData[i].name == "Visualization") {
-              projectData[i].web_url = "https://transfer.hft-stuttgart.de/pages/visualization"
-            }
-            else if (projectData[i].name == "IN-Source") {
-              projectData[i].web_url = "https://transfer.hft-stuttgart.de/pages/INsource"
-            }
-            else if (projectData[i].name == "3DS_Visualization_Cesium") {
-              projectData[i].web_url = "https://transfer.hft-stuttgart.de/pages/3ds_visualization_cesium"
-            }
-            else {
-              projectData[i].web_url = "https://transfer.hft-stuttgart.de/pages/"+projectData[i].name
-            }
-
-            // fill in pagesArr
 
-          }
-          else {
-            // fill in projectArr
-          }
           let project = {
             logo: projectData[i].avatar_url,
             name: projectData[i].name,
@@ -443,105 +276,74 @@ module.exports = function (app) {
           }
           projectArr.push(project)
         }
-
         firstId = projectData[projectData.length-1].id
       }
     }
 
     res.render(lang+'/project/projectList', {
       project: projectArr
-      // http://pagination.js.org
-    })
-  })
-
-  app.get('/projectlist', async function(req, res){
-    let projectArr = []
-    let pagesArr = []
-    let isProject = true
-    let firstId = 0
-    let webname = "";
-
-    while (isProject == true) {
-      //
-      //let runners = await getProjectsRunnersFromGitlab()
-      //console.log(runners)
-      //
     })
   })
 
   // Projektinformationen
-  app.get('/projektinformationen', async function(req, res){
+  app.get('/projektinformationen', async function(req:any, res:any){
     let pagesArr = []
     let isProject = true
     let firstId = 0
 
     while (isProject == true) {
-      let projects = await getProjectsFromGitlab(10, firstId)
-      let projectData = projects.data
+      let projects = await gitlab.getProjects(100, firstId)
+      let pagesData = projects.data[1]
 
-      if (projectData.length == 0) {
+      if (pagesData.length == 0) {
         isProject = false
-      }
-      else {
-        for(let i = 0; i < projectData.length; i++){
-          // skip template project
-          if (projectData[i].name == "template_gitlab_page") {
-            continue
-          }
+      } else {
+        for(let i = 0; i < pagesData.length; i++){
+          let status = await gitlab.getLatestPipelineStatus(pagesData[i].id)
+          if (status) {
             // M4_LAB logo for all projects that do not have logo
-          if (projectData[i].avatar_url == null) {
-            projectData[i].avatar_url = "https://m4lab.hft-stuttgart.de/img/footer/M4_LAB_LOGO_Graustufen.png"
+            if (pagesData[i].avatar_url == null) {
+              pagesData[i].avatar_url = "https://m4lab.hft-stuttgart.de/img/footer/M4_LAB_LOGO_Graustufen.png"
             }
             // for all projects that have no description
-          if (projectData[i].description == "") {
-            projectData[i].description = "- no description -"
+            if (pagesData[i].description == "") {
+              pagesData[i].description = "- no description -"
             }
-          // websites
-          if (projectData[i].tag_list.includes('website')) {
-            // customize website name
-            if (projectData[i].name == "Visualization") {
-              projectData[i].web_url = "https://transfer.hft-stuttgart.de/pages/visualization"
+            // customized website name
+            if (pagesData[i].name == "Visualization") {
+              //todo: update URL - user? group?
+              pagesData[i].web_url = "https://transfer.hft-stuttgart.de/pages/visualization"
             }
-            else if (projectData[i].name == "IN-Source") {
-              projectData[i].web_url = "https://transfer.hft-stuttgart.de/pages/INsource"
+            else if (pagesData[i].name == "IN-Source") {
+              //todo: update URL
+              pagesData[i].web_url = "https://transfer.hft-stuttgart.de/pages/INsource"
             }
-            else if (projectData[i].name == "3DS_Visualization_Cesium") {
-              projectData[i].web_url = "https://transfer.hft-stuttgart.de/pages/3ds_visualization_cesium"
+            else if (pagesData[i].name == "3DS_Visualization_Cesium") {
+              //todo: update URL
+              pagesData[i].web_url = "https://transfer.hft-stuttgart.de/pages/3ds_visualization_cesium"
             }
             else {
-              projectData[i].web_url = "https://transfer.hft-stuttgart.de/pages/"+projectData[i].name
+              //todo: update URL
+              pagesData[i].web_url = "https://transfer.hft-stuttgart.de/pages/"+pagesData[i].name
             }
             // remove 'website' from tag list
-            const index = projectData[i].tag_list.indexOf('website');
+            let index = pagesData[i].tag_list.indexOf('website')
             if (index > -1) {
-              projectData[i].tag_list.splice(index, 1);
+              pagesData[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
+              logo: pagesData[i].avatar_url,
+              name: pagesData[i].name,
+              weburl: pagesData[i].web_url,
+              desc: pagesData[i].description,
+              keywords: pagesData[i].tag_list
             }
             pagesArr.push(pages)
-            
-          }
-          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) 
           }
-           
         }
-
-        firstId = projectData[projectData.length-1].id
+        firstId = pagesData[pagesData.length-1].id
       }
     }
 

tsconfig.json

+{
+  "compilerOptions": {
+    "target": "es6",
+    "module": "commonjs",
+    "rootDir": "./",
+    "outDir": "./built",
+    "esModuleInterop": true,
+    "strict": true,
+    "allowJs": true
+  }
+}
\ No newline at end of file

views/DE/project/mailinglists.pug

@@ -11,14 +11,14 @@ html(lang="de")
   body
     div(class="container")
         div(class="row")
-            div(class="col-md-12" style="margin-bottom: 40px;")
+            div(class="col-md-12 margin_bottom_40")
                 img(class="mx-auto" src="/img/Mailinglisten.jpg" width="100%")
     div(class="container")
         div(class="row")
-            div(class="col-md-12" style="margin-bottom: 30px;")
+            div(class="col-md-12 margin_bottom_30")
                 h4(class="text-center") Durch Mailinglisten können Sie interessierten Personen<br/> <strong>regelmäßig Informationen</strong> zu Ihrem Projekt oder Thema zukommen lassen.<br/> Ebenso können Sie über ein Abonnement in einer Mailingliste Mitglied des Verteilers<br/>werden und so <strong>im Austausch</strong> bleiben. <br/>
-            div(class="col-md-12" style="margin-bottom: 30px;")
-                h2(class="text-center" style="color: #708090;") <strong>Aktive Mailinglisten</strong>
+            div(class="col-md-12 margin_bottom_30")
+                h2(class="text-center color_708090") <strong>Aktive Mailinglisten</strong>
                 div(class="table-responsive table-borderless")
                     table(class="table table-striped table-bordered table-hover")
                         thead()
@@ -35,40 +35,40 @@ html(lang="de")
                                         td <a href="#{item.src}">#{item.src}</a>
                                         td <a href='projectoverview?projectID=#{item.id}'>#{item.project_title}</a>
                                         td #{item.keywords}
-    div(id="aboText" style="background-color: #dadada;margin-top: 40px;")
+    div(id="aboText" class="mailingList_aboText")
         div(class="container")
-            div(class="row" style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;")
-                div(class="col-lg-12" style="background-color: #ffffff;")
-                    h2(class="text-center" style="color: #708090;margin-top: 15px;") <strong> Mailingliste abonnieren </strong>
-                div(class="col-md-4 col-lg-6" style="background-color: #ffffff;")
+            div(class="row m_bottom_0 p_top_20 p_bottom_20")
+                div(class="col-lg-12 background_ffffff")
+                    h2(class="text-center color_708090 m_top_15") <strong> Mailingliste abonnieren </strong>
+                div(class="col-md-4 col-lg-6 background_ffffff")
                     p() Das Deutsche Forschungsnetz (DFN) bietet Mailinglisten für Wissenschaft und Forschung an. Mailinglisten sind E-Mail-Verteilerlisten, d.h. Personen, die sich für Ihr Forschungsthema interessieren, können sich über das DFN registrieren und erhalten im Anschluss daran regelmäßig die über die Mailinglisten geteilten Informationen.
                     p() Sie als Verteiler senden die zu versendende Mail folglich nur noch an die festgelegte Mailinglistenadresse und das Programm leitet die Nachricht an alle registrierten Personen weiter.
-                div(class="col-md-4 col-lg-6 justify-content-between flex-wrap" style="background-color: #ffffff;")
-                    div(class="justify-content-between order-2" style="background-color: rgba(255,255,255,0);")
+                div(class="col-md-4 col-lg-6 justify-content-between flex-wrap background_ffffff")
+                    div(class="justify-content-between order-2 background_ffffff")
                         p(class="text-left d-flex d-md-flex flex-row flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-start align-content-start align-self-start flex-wrap order-1 justify-content-md-center align-items-md-start justify-content-lg-start") Oben finden Sie eine Übersicht über die aktiven Mailinglisten. Wenn Sie sich in eine Mailingliste eintragen wollen, dann klicken Sie auf den entsprechend hinterlegten Link.
                         p() Es öffnet sich daraufhin die Hauptseite der Liste. Nach der Auswahl des Buttons "Abonnieren", können Sie Ihre Mailadresse hinterlegen und sich in die Liste eintragen.
-                    a(class="btn btn-primary text-center d-inline-flex d-lg-flex flex-column flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-baseline align-content-center align-self-baseline flex-wrap order-3 justify-content-md-center align-items-md-end align-items-lg-center justify-content-xl-center mx-auto" role="button" style="background-color: #E0001B; margin-top:10px; margin-bottom:10px;" href="/downloads/Handout_Mailinglisten_Abonnieren.pdf") <strong>Erste Schritte (Anleitung als PDF)</strong>
-                    a(class="btn btn-primary text-center d-inline-flex d-lg-flex flex-column flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-baseline align-content-center align-self-baseline flex-wrap mb-auto justify-content-md-center align-items-md-end align-items-lg-center justify-content-xl-center mx-auto" role="button" style="background-color: #E0001B;" href="https://www.listserv.dfn.de/sympa/help") <strong>Weitergehende Dokumentation bei DFN (externer Link)</strong>
+                    a(class="btn btn-primary text-center d-inline-flex d-lg-flex flex-column flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-baseline align-content-center align-self-baseline flex-wrap order-3 justify-content-md-center align-items-md-end align-items-lg-center justify-content-xl-center mx-auto background_e0001b m_top_10" role="button" href="/downloads/Handout_Mailinglisten_Abonnieren.pdf") <strong>Erste Schritte (Anleitung als PDF)</strong>
+                    a(class="btn btn-primary text-center d-inline-flex d-lg-flex flex-column flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-baseline align-content-center align-self-baseline flex-wrap mb-auto justify-content-md-center align-items-md-end align-items-lg-center justify-content-xl-center mx-auto background_e0001b m_top_10" role="button" href="https://www.listserv.dfn.de/sympa/help") <strong>Weitergehende Dokumentation bei DFN (externer Link)</strong>
 
-    div(id="newListText" style="background-color: #dadada;margin-top: 0px;")
+    div(id="newListText" class="mailingList_text")
         div(class="container")
-            div(class="row" style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;")
-                div(class="col-lg-12" style="background-color: #ffffff;")
-                    h2(class="text-center" style="color: #708090;margin-top: 15px;") <strong>Neue Mailingliste erstellen</strong>
-                div(class="col-md-4 col-lg-6" style="background-color: #ffffff;")
+            div(class="row m_bottom_0 p_top_20 p_bottom_20")
+                div(class="col-lg-12 background_ffffff")
+                    h2(class="text-center color_708090 m_top_15") <strong>Neue Mailingliste erstellen</strong>
+                div(class="col-md-4 col-lg-6 background_ffffff")
                     p() Über das Transferportal können Sie selbst eine Liste zu Ihrem Projekt anlegen, um mit Ihren Partnern in Verbindung zu bleiben.
                     p() Folgen Sie hierzu der Anleitung des DFN.
 
-                div(class="col-md-4 col-lg-6 justify-content-between flex-wrap" style="background-color: #ffffff;")
-                    a(class="btn btn-primary text-center d-inline-flex d-lg-flex flex-column flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-baseline align-content-center align-self-baseline flex-wrap order-3 justify-content-md-center align-items-md-end align-items-lg-center justify-content-xl-center mx-auto" role="button" style="background-color: #E0001B; margin-top:10px; margin-top:10px;" href="/downloads/Handout_Mailinglisten_Erstellen.pdf") <strong>Erste Schritte (Anleitung als PDF)</strong>
-                    a(class="btn btn-primary text-center d-inline-flex d-lg-flex flex-column flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-baseline align-content-center align-self-baseline flex-wrap order-3 justify-content-md-center align-items-md-end align-items-lg-center justify-content-xl-center mx-auto" role="button" style="background-color: #E0001B; margin-top:10px; margin-top:10px;" href="https://www.listserv.dfn.de/sympa/help/admin") <strong>Gesamtes Tutorial bei DFN (externer Link)</strong>
+                div(class="col-md-4 col-lg-6 justify-content-between flex-wrap background_ffffff")
+                    a(class="btn btn-primary text-center d-inline-flex d-lg-flex flex-column flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-baseline align-content-center align-self-baseline flex-wrap order-3 justify-content-md-center align-items-md-end align-items-lg-center justify-content-xl-center mx-auto background_e0001b m_top_10" role="button" href="/downloads/Handout_Mailinglisten_Erstellen.pdf") <strong>Erste Schritte (Anleitung als PDF)</strong>
+                    a(class="btn btn-primary text-center d-inline-flex d-lg-flex flex-column flex-grow-1 flex-shrink-1 flex-fill justify-content-between align-items-baseline align-content-center align-self-baseline flex-wrap order-3 justify-content-md-center align-items-md-end align-items-lg-center justify-content-xl-center mx-auto background_e0001b m_top_10" role="button" href="https://www.listserv.dfn.de/sympa/help/admin") <strong>Gesamtes Tutorial bei DFN (externer Link)</strong>
 
-    div(id="addListText" style="background-color: #dadada;margin-top: 0px;")
+    div(id="addListText" class="mailingList_text")
         div(class="container")
-            div(class="row" style="margin-bottom: 0;padding-top: 20px;padding-bottom: 20px;")
-                div(class="col-lg-12" style="background-color: #ffffff;")
-                    h2(class="text-center" style="color: #708090;margin-top: 15px;") <strong>Neue Mailingliste eintragen</strong>
-                div(class="col-xl" style="background-color: #ffffff;")
+            div(class="row m_bottom_0 p_top_20 p_bottom_20")
+                div(class="col-lg-12 background_ffffff")
+                    h2(class="text-center color_708090 m_top_15") <strong>Neue Mailingliste eintragen</strong>
+                div(class="col-xl background_ffffff")
                     p() Um Ihre beim DFN angelegte Mailingliste hier aufzunehmen, schicken Sie uns bitte eine Email an <a href="mailto:support-transfer@hft-stuttgart.de">support-transfer@hft-stuttgart.de</a>
     // jQuery
     script(src="https://code.jquery.com/jquery-3.3.1.min.js")

views/DE/project/pagesList.pug

@@ -4,8 +4,8 @@ html(lang="de")
     title= "Projektinformationen"
     meta(charset="UTF-8")
     meta(name="viewport", content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no")
-    link(rel="stylesheet", type="text/css", href="https://transfer.hft-stuttgart.de/css/bootstrap.min.css")
-    link(rel="stylesheet", type="text/css", href="https://transfer.hft-stuttgart.de/css/m4lab.css")
+    link(rel="stylesheet", type="text/css", href="/css/bootstrap.min.css")
+    link(rel="stylesheet", type="text/css", href="/css/m4lab.css")
     link(rel="stylesheet", href="https://use.fontawesome.com/releases/v5.8.2/css/all.css", integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay", crossorigin="anonymous")
     style.
         .title-container {
@@ -29,7 +29,7 @@ html(lang="de")
   body
     div(class="container")
             div(class="row")
-                div(class="col-md-12" style="margin-bottom: 40px;")
+                div(class="col-md-12 margin_bottom_40")
                     img(class="mx-auto" src="/img/Projektinformationen.png" width="100%")
     div(class="container")
         div(class="pt-4 pb-4 form-row")
@@ -46,7 +46,7 @@ html(lang="de")
             | <div class="row">
             for item in pages
                 div(class="card-deck py-4 col-sm")
-                    div(class="card", style="width: 18rem;")
+                    div(class="card width_18")
                         div(class="title-container")
                             h5(class="card-title-bottom-left") #{item.name}
                             img(class="card-img-top", src=item.logo)
@@ -59,7 +59,7 @@ html(lang="de")
                             div(class="row")
                                 div(class="col-9")
                                     p(class="card-text") #{item.desc}
-                                a(href=item.weburl, style="text-decoration: none;", target="_blank")
+                                a(href=item.weburl, class="no_text_decoration", target="_blank")
                                     div(class="col-3")
                                         svg(class="bi bi-chevron-right", width="32", height="32", viewBox="0 0 20 20", fill="black", xmlns="http://www.w3.org/2000/svg")
                                             | <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>

views/DE/project/project-simplified.pug

@@ -8,43 +8,12 @@ html(lang="de")
     link(rel="stylesheet", type="text/css", href="/css/bootstrap.min.css")
     link(rel="stylesheet", type="text/css", href="/css/m4lab.css")
     link(rel="stylesheet", href="https://use.fontawesome.com/releases/v5.8.2/css/all.css", integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay", crossorigin="anonymous")
-    style.
-      .help .card-title > a:before {
-        float: right !important;
-        content: "-";
-        padding-right: 5px;
-      }
-      .help .card-title > a.collapsed:before {
-          float: right !important;
-          content: "+";
-      }
-      .help h3 > a {
-        color: #708090;
-        text-decoration: none;
-        display: block;
-      }
-      .help a {
-          display: inline;
-      }
-      .help .card > .card-header {
-        color: #fff;
-      }
-      .card-title {
-        margin-bottom: 0.5rem;
-        margin-top: 0.5rem;
-      }
-      #infoicon {
-        color: #708090;
-      }
-      .heading {
-        color: #708090;
-      }
+      
   body
     include project.html
 
 
     // jQuery
-    
     script(src="https://code.jquery.com/jquery-3.3.1.min.js")
     script(src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js", integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1", crossorigin="anonymous")
     // Bootstrap

views/DE/project/project.html

 <div>
     <div class="container">
         <div class="row">
-            <div class="col-md-12" style="margin-bottom: 40px;"><img class="mx-auto" src="/img/Projekte.png"
+            <div class="col-md-12 margin_bottom_40"><img class="mx-auto" src="/img/Projekte.png"
                     width="100%"></div>
         </div>
     </div>
@@ -9,7 +9,7 @@
 <div>
     <div class="container">
         <div class="row">
-            <div class="col-md-12" style="margin-bottom: 30px;">
+            <div class="col-md-12 margin_bottom_30">
                 <h4 class="text-center">Diese Seite bietet den Einstieg zu den Inhalten der unterschiedlichen Projekte,
                     die über das Portal zur Verfügung gestellt werden.</h4>
             </div>
@@ -20,7 +20,7 @@
     <div class="container">
         <div class="row">
             <div class="col-lg-1"></div>
-            <div class="col-md-6 col-lg-4" style="padding-right: 5px;padding-left: 5px;">
+            <div class="col-md-6 col-lg-4 p_left_5 p_right_5">
                 <img class="d-flex d-lg-flex justify-content-center align-items-center align-content-center align-self-center mx-auto"
                     src="/img/Icon_Haken.png" height="150" />
                 <br />
@@ -34,7 +34,7 @@
                 </p>
             </div>
             <div class="col-lg-2"></div>
-            <div class="col-md-6 col-lg-4" style="padding-right: 5px;padding-left: 5px;">
+            <div class="col-md-6 col-lg-4 p_left_5 p_right_5">
                 <img src="/img/Icon_Sandclock.png"
                     class="d-flex d-lg-flex justify-content-center align-items-center align-content-center align-self-center mx-auto"
                     height="150px" />
@@ -69,11 +69,6 @@
     </div>
 </div>
 
-
-
-
-
-
 <div class="container">
     <!-- text: Hilfestellung zu Gitlab / short help about Gitlab -->
     <hr />

views/DE/project/projectList.pug

 doctype html
 html(lang="de")
   head
-<<<<<<< HEAD
-    title= "Project List"
-=======
     title= "Projektdaten"
->>>>>>> a9ea21c0a95c22953b5d5d4081daefcbe58a54d0
     meta(charset="UTF-8")
     meta(name="viewport", content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no")
-    link(rel="stylesheet", type="text/css", href="https://transfer.hft-stuttgart.de/css/bootstrap.min.css")
-    link(rel="stylesheet", type="text/css", href="https://transfer.hft-stuttgart.de/css/m4lab.css")
+    link(rel="stylesheet", type="text/css", href="/css/bootstrap.min.css")
+    link(rel="stylesheet", type="text/css", href="/css/m4lab.css")
     link(rel="stylesheet", href="https://use.fontawesome.com/releases/v5.8.2/css/all.css", integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay", crossorigin="anonymous")
     style.
         .title-container {
@@ -30,94 +26,10 @@ html(lang="de")
             height: 15vw;
             object-fit: cover;
         }
-<<<<<<< HEAD
-
-        .collapsing {
-            color: red;
-            position: absolute !important;
-            z-index: 20;
-            width: 100%;
-            top: 50px;
-        }
-        .collapse.in {
-            display: block;
-            position: absolute;
-            z-index: 20;
-            width: 100%;
-            top: 50px;
-        }
-        .navbar-collapse {
-            max-height: none !important;
-        }
   body
     div(class="container")
-        div(class="pt-4 pb-4 form-row")
-            div(class="form-group col-md-10")
-                //input(id="searchInput", class="form-control form-control-dark w-100", type="text", placeholder="Suchen Sie hier nach Themen und Projekten", onkeyup="searchFunction()")
-                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
-                button(class="btn btn-secondary", type="button", data-toggle="collapse", data-target="#collapseCategory", aria-expanded="false", aria-controls="collapseCategory") Category
-                div(class="collapse", id="collapseCategory")
-                    div(class="form-check")
-                        input(class="form-check-input", type="checkbox", value="", id="1")
-                        label(class="form-check-label", for="defaultCheck1")
-                            Default All
-                    div(class="form-check")
-                        input(class="form-check-input", type="checkbox", value="", id="2")
-                        label(class="form-check-label", for="defaultCheck2")
-                            Disabled Architecture
-                    div(class="form-check")
-                        input(class="form-check-input", type="checkbox", value="", id="3")
-                        label(class="form-check-label", for="defaultCheck2")
-                            Disabled Business Psychologie
-                    div(class="form-check")
-                        input(class="form-check-input", type="checkbox", value="", id="4")
-                        label(class="form-check-label", for="defaultCheck2")
-                            Disabled Computer Science
-                    div(class="form-check")
-                        input(class="form-check-input", type="checkbox", value="", id="5")
-                        label(class="form-check-label", for="defaultCheck2")
-                            Disabled 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")
-            | <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")
-            | <div class="row">
-            for item in project
-                div(class="py-4 col-sm")
-=======
-  body
-    div(class="container")
-            div(class="row")
-                div(class="col-md-12" style="margin-bottom: 40px;")
+                div(class="col-md-12 margin_bottom_40")
                     img(class="mx-auto" src="/img/ProjektcodeDaten.png" width="100%")
     div(class="container")
         div(class="pt-4 pb-4 form-row")
@@ -134,8 +46,7 @@ html(lang="de")
             | <div class="row">
             for item in project
                 div(class="card-deck py-4 col-sm")
->>>>>>> a9ea21c0a95c22953b5d5d4081daefcbe58a54d0
-                    div(class="card", style="width: 18rem;")
+                    div(class="card width_18")
                         div(class="title-container")
                             h5(class="card-title-bottom-left") #{item.name}
                             img(class="card-img-top", src=item.logo)
@@ -148,16 +59,10 @@ html(lang="de")
                             div(class="row")
                                 div(class="col-9")
                                     p(class="card-text") #{item.desc}
-<<<<<<< HEAD
-                                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>
-=======
-                                a(href=item.weburl, style="text-decoration: none;", target="_blank")
+                                a(href=item.weburl, class="no_text_decoration", target="_blank")
                                     div(class="col-3")
                                         svg(class="bi bi-chevron-right", width="32", height="32", viewBox="0 0 20 20", fill="black", xmlns="http://www.w3.org/2000/svg")
                                             | <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>
->>>>>>> a9ea21c0a95c22953b5d5d4081daefcbe58a54d0
             | </div>
 
     // jQuery
@@ -166,28 +71,12 @@ html(lang="de")
     // Bootstrap
     script(src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous")
     // Header
-<<<<<<< HEAD
-    script(src="https://transfer.hft-stuttgart.de/js/headfoot.js")
-
-    // search: https://www.w3schools.com/howto/howto_js_filter_lists.asp
-=======
     script(src="/js/headfoot.js")
->>>>>>> a9ea21c0a95c22953b5d5d4081daefcbe58a54d0
     script.
         function searchFunction() {
             var input = document.getElementById("searchInput")
             var filter = input.value.toUpperCase()
             
-<<<<<<< HEAD
-            var cards = document.getElementsByClassName("col-sm")
-            var cardTitle, cardText, titleValue, textValue
-            
-            var i
-            for (i = 0; i < cards.length; i++) {
-                cardTitle = cards[i].getElementsByClassName("card-title-bottom-left");
-                cardBody = cards[i].getElementsByClassName("card-body");
-                cardText = cards[i].getElementsByClassName("card-text");
-=======
             var cardsCol = document.getElementsByClassName("col-sm")
             var cardTitle, cardText, titleValue, textValue
             
@@ -197,20 +86,12 @@ html(lang="de")
                 cardTitle = cardsCol[i].getElementsByClassName("card-title-bottom-left");
                 cardBody = cardsCol[i].getElementsByClassName("card-body");
                 cardText = cardsCol[i].getElementsByClassName("card-text");
->>>>>>> a9ea21c0a95c22953b5d5d4081daefcbe58a54d0
                 
                 titleValue = cardTitle[0].textContent || cardTitle[0].innerText;
                 bodyValue = cardBody[0].textContent || cardBody[0].innerText;
                 textValue = cardText[0].textContent || cardText[0].innerText;
                 
                 if (titleValue.toUpperCase().indexOf(filter) > -1 || bodyValue.toUpperCase().indexOf(filter) > -1 || textValue.toUpperCase().indexOf(filter) > -1) {
-<<<<<<< HEAD
-                    cards[i].style.display = "block";
-                } else {
-                    cards[i].style.display = "none";
-                }
-            }
-=======
                     cardsCol[i].style.display = "block"
                     counterBlock++
                 } else {
@@ -219,5 +100,4 @@ html(lang="de")
             }
 
             document.getElementById("projectCounter").innerHTML = counterBlock+" Projektdaten werden angezeigt"
->>>>>>> a9ea21c0a95c22953b5d5d4081daefcbe58a54d0
         }
\ No newline at end of file

views/DE/project/projectList_backup.pug

-doctype html
-html(lang="de")
-  head
-    title= "Project List"
-    meta(charset="UTF-8")
-    meta(name="viewport", content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no")
-    link(rel="stylesheet", type="text/css", href="https://transfer.hft-stuttgart.de/css/bootstrap.min.css")
-    link(rel="stylesheet", type="text/css", href="https://transfer.hft-stuttgart.de/css/m4lab.css")
-    link(rel="stylesheet", href="https://use.fontawesome.com/releases/v5.8.2/css/all.css", integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay", crossorigin="anonymous")
-    style.
-        .title-container {
-            position: relative;
-            color: white;
-        }
-        .card-title-bottom-left {
-            position: absolute;
-            bottom: 0px;
-            width: 100%;
-            color: black;
-            font-weight: bold;
-            background: rgb(255, 255, 255, 0.5);
-            text-align: left;
-            padding: 5px
-        }
-        .card-img-top {
-            height: 15vw;
-            object-fit: cover;
-        }
-  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="container")
-            | <div class="row">
-            for item in project
-                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>
-
-    // jQuery
-    script(src="https://code.jquery.com/jquery-3.3.1.min.js")
-    script(src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js", integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1", crossorigin="anonymous")
-    // Bootstrap
-    script(src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous")
-    // Header
-    script(src="https://transfer.hft-stuttgart.de/js/headfoot.js")
-
-    // search: https://www.w3schools.com/howto/howto_js_filter_lists.asp
-    script.
-        function searchFunction() {
-            var input = document.getElementById("searchInput")
-            var filter = input.value.toUpperCase()
-            
-            var cards = document.getElementsByClassName("col-sm")
-            var cardTitle, cardText, titleValue, textValue
-            
-            var i
-            for (i = 0; i < cards.length; i++) {
-                cardTitle = cards[i].getElementsByClassName("card-title-bottom-left");
-                cardBody = cards[i].getElementsByClassName("card-body");
-                cardText = cards[i].getElementsByClassName("card-text");
-                
-                titleValue = cardTitle[0].textContent || cardTitle[0].innerText;
-                bodyValue = cardBody[0].textContent || cardBody[0].innerText;
-                textValue = cardText[0].textContent || cardText[0].innerText;
-                
-                if (titleValue.toUpperCase().indexOf(filter) > -1 || bodyValue.toUpperCase().indexOf(filter) > -1 || textValue.toUpperCase().indexOf(filter) > -1) {
-                    cards[i].style.display = "block";
-                } else {
-                    cards[i].style.display = "none";
-                }
-            }
-        }
\ No newline at end of file

views/DE/project/projectList_card-row.pug

-doctype html
-html(lang="de")
-  head
-    title= "Project List"
-    meta(charset="UTF-8")
-    meta(name="viewport", content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no")
-    link(rel="stylesheet", type="text/css", href="https://transfer.hft-stuttgart.de/css/bootstrap.min.css")
-    link(rel="stylesheet", type="text/css", href="https://transfer.hft-stuttgart.de/css/m4lab.css")
-    link(rel="stylesheet", href="https://use.fontawesome.com/releases/v5.8.2/css/all.css", integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay", crossorigin="anonymous")
-    style.
-        .title-container {
-            position: relative;
-            color: white;
-        }
-
-        .card-title-bottom-left {
-            position: absolute;
-            bottom: 0px;
-            width: 100%;
-            color: black;
-            font-weight: bold;
-            background: rgb(255, 255, 255, 0.5);
-            text-align: left;
-            padding: 5px
-        }
-  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="container")
-            - var colCounter = 0
-            for item in project
-                if colCounter == 0
-                    - colCounter = 1
-                    | <div class="py-4 row">
-                if colCounter <= 3
-                    div(class="col-sm")
-                        div(class="card", style="width: 18rem;")
-                            //img(class="card-img-top", src=item.logo, alt="Project logo")
-                            //h5(class="card-title") #{item.name}
-
-                            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")
-                                    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>
-                    - colCounter++
-                if colCounter == 4
-                    | </div>
-                    - colCounter = 0
-
-    // jQuery
-    script(src="https://code.jquery.com/jquery-3.3.1.min.js")
-    script(src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js", integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1", crossorigin="anonymous")
-    // Bootstrap
-    script(src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous")
-    // Header
-    script(src="https://transfer.hft-stuttgart.de/js/headfoot.js")
-
-    // search: https://www.w3schools.com/howto/howto_js_filter_lists.asp
-    script.
-        function searchFunction() {
-            var input = document.getElementById("searchInput")
-            var filter = input.value.toUpperCase()
-            
-            //var cards = document.getElementsByClassName("card")
-            var cards = document.getElementsByClassName("col-sm")
-            var cardTitle, cardText, titleValue, textValue
-            
-            var i
-            for (i = 0; i < cards.length; i++) {
-                cardTitle = cards[i].getElementsByClassName("card-title-bottom-left");
-                cardText = cards[i].getElementsByClassName("card-text");
-                
-                titleValue = cardTitle[0].textContent || cardTitle[0].innerText;
-                textValue = cardText[0].textContent || cardText[0].innerText;
-                
-                if (titleValue.toUpperCase().indexOf(filter) > -1 || textValue.toUpperCase().indexOf(filter) > -1) {
-                    cards[i].style.display = "block";
-                } else {
-                    cards[i].style.display = "none";
-                }
-            }
-        }
\ No newline at end of file

views/DE/project/projectList_table.pug

-doctype html
-html(lang="de")
-  head
-    title= "Project List"
-    meta(charset="UTF-8")
-    meta(name="viewport", content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no")
-    link(rel="stylesheet", type="text/css", href="https://transfer.hft-stuttgart.de/css/bootstrap.min.css")
-    link(rel="stylesheet", type="text/css", href="https://transfer.hft-stuttgart.de/css/m4lab.css")
-    link(rel="stylesheet", href="https://use.fontawesome.com/releases/v5.8.2/css/all.css", integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay", crossorigin="anonymous")
-
-  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
-        table(class="table table-striped")
-            tbody
-                for item in project
-                    tr
-                        td
-                            img(src=item.logo, width="40", height="40")
-                        td <a href="#{item.weburl}" target="_blank">#{item.name}</a>
-                        td #{item.desc}
-
-    // jQuery
-    script(src="https://code.jquery.com/jquery-3.3.1.min.js")
-    script(src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js", integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1", crossorigin="anonymous")
-    // Bootstrap
-    script(src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous")
-    // Header
-    script(src="https://transfer.hft-stuttgart.de/js/headfoot.js")
-    script.
-        function searchFunction() {
-            var input, filter, rows, col, txtValue;
-            var isFound = true;
-            input = document.getElementById("searchInput");
-            filter = input.value.toUpperCase();
-            
-            rows = document.getElementsByTagName("tr");
-            for (i = 0; i < rows.length; i++) {
-                cols = rows[i].getElementsByTagName("td");
-                // check all cos
-                for (j = 0; j < cols.length; j++) {
-                    txtValue = cols[j].textContent || cols[j].innerText;
-                    if (txtValue.toUpperCase().indexOf(filter) > -1) {
-                        isFound = true;
-                        break;
-                    } else {
-                        isFound = false;
-                    }
-                }
-                if (isFound) {
-                    rows[i].style.display = "block";
-                }
-                else {
-                    rows[i].style.display = "none";
-                }
-            }
-        }
\ No newline at end of file

views/DE/project/projectOverview.pug

@@ -14,9 +14,9 @@ html(lang="de")
             div(class="row")
                 div(class="col-sm-8 pt-3")
                     h1 #{project.title}
-                    div(style="float:right; margin-left:30px; margin-bottom:0px; width:50%;")
+                    div(class="project_overview")
                         img(src=project.src, width="100%")
-                        p(style="text-align:right") #{project.caption}
+                        p(class="text-center mr-5") #{project.caption}
 
                     h2(class="pt-4") Projektüberblick
                     p !{project.overview}
@@ -29,7 +29,7 @@ html(lang="de")
                     p !{project.approach}
                     h2(class="pt-4") Ergebnis und Nutzung
                     p !{project.result}
-                div(class="col-sm-4 pt-3" style="background-color: #f1f1f1")
+                div(class="col-sm-4 pt-3 background_f1f1f1")
                     for image in projectImgs
                         if image.pos == '2' || image.pos == '3'
                             div(class="projectimg")
@@ -115,7 +115,7 @@ html(lang="de")
                             span !{project.further_details}
 
                     if project.pname == 'M4LAB'
-                        div(class="Downloads" style="height:200px;")
+                        div(class="Downloads")
                             h5 Downloads
 
                         div(class="Projektlogos")