resolved mergeconflict

.gitignore

-/node_modules
-sp-project-metadata.xml
-sp-project-metadata-m4lab.xml
+/built
+/node_modules
\ No newline at end of file

.gitlab-ci.yml

 pages-testing:    
   stage: deploy
   script:
-    - cat $configfiledev > ./config/config.js
     - npm install
+    - npm run clean
+    - npm run build
+    - rm -rf ./built/views
+    - cp -R ./views ./built
+    - cat $configfiledev > ./built/config/config.js
     - "pm2 delete --silent project || :"
-    - pm2 start ./app.js --name=project
+    - pm2 start ./built/app.js --name=project
     - pm2 save
   tags: 
     - testing
@@ -22,4 +26,4 @@ pages-production:
   tags: 
     - production
   only: 
-    - master
\ No newline at end of file
+    - master

__test/gitlab.test.ts

+const gitlab = require('../functions/gitlab')
+
+describe('GitLab API', () => {
+    test('get all projects', async () => {
+        let projects = await gitlab.getProjects(10, 0)
+        expect(projects).not.toBeNull()
+    })
+    test('get latest pipeline status of a project', async () => {
+        let status = await gitlab.getLatestPipelineStatus(81)
+        expect(status).not.toBeNull()
+    })
+})
\ No newline at end of file

__test/methods.test.ts

+const methods = require('../functions/methods')
+
+describe('DB methods', () => {
+    test('all mailinglists', async () => {
+        let lists = await methods.getAllMailinglists(0)
+        expect(lists).not.toBeNull()
+    })
+    test('project overview', async () => {
+        let overview = await methods.getProjectOverviewById(81)
+        expect(overview).not.toBeNull()
+    })
+    test('project images', async () => {
+        let images = await methods.getProjectImagesById(81)
+        expect(images).not.toBeNull()
+    })
+})
\ No newline at end of file

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 || 'production'
+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.contentSecurityPolicy({
+        useDefaults: true,
+        directives: {
+            "font-src": ["'self'", "https://use.fontawesome.com"],
+            "img-src": ["'self'", "https://transfer.hft-stuttgart.de"],
+            "script-src": ["'self'", "https://code.jquery.com/jquery-3.3.1.min.js", "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js", "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"],
+            "style-src": ["'self'", "https://use.fontawesome.com/releases/v5.8.2/css/all.css"],
+            "frame-src": ["'self'"]
+        },
+        reportOnly: true,
+    })
+);
 app.use(compression())
 app.use(morgan('combined'))
 app.use(cookieParser())
 app.use(bodyParser.json())
 app.use(bodyParser.urlencoded({extended: false}))
 app.use(express.static(path.join(__dirname, 'public')))
-app.use(session(
+/*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(flash())
+app.use(passport.session()) */
+/*app.use(flash())
 app.use((req, res, next) => {
     res.locals.errors = req.flash("error")
     res.locals.successes = req.flash("success")
     next()
-})
+}) */
 // enable files upload
-app.use(fileUpload({
+/*app.use(fileUpload({
     createParentPath: true,
     limits: { 
       fileSize: 1000000 // 1 MB max. file size
     }
-}))
+})) */
 // caching disabled for every route
 // NOTE: Works in Firefox and Opera. Does not work in Edge
 app.use(function(req, res, next) {
@@ -55,22 +68,21 @@ app.use(function(req, res, next) {
     next()
 })
   
-require('./routes/routes-project')(app, config, passport)
+require('./routes/project')(app, lang)
   
 // Handle 404
-app.use(function (req, res, next) {
-    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
     })
 })
   
 app.listen(app.get('port'), function () {
     console.log('Project Page listening on port ' + app.get('port'))
-    console.log(__dirname)
 })
\ No newline at end of file

config/config.js → config/config.ts

@@ -4,16 +4,8 @@ module.exports = {
       name: 'Project Page Manager',
       port: process.env.PORT || 8888
     },
-    passport: {
-      strategy: 'saml',
-      saml: {
-        path: process.env.SAML_PATH || '/saml/SSO',
-        entryPoint: process.env.SAML_ENTRY_POINT || 'saml entry URL',
-        issuer: 'saml issuer URL',
-        logoutUrl: 'saml Logout URL'
-      }
-    },
     database: {
+      host: 'localhost',
       user: 'usernamedb',          // DB username
       password: 'passworddb',  // DB password
       port: 3306,                 // MySQL port
@@ -21,15 +13,6 @@ module.exports = {
       host_project: 'localhost', // local
       dbProject: 'projectdb'     // Project DB
     },
-    mailer: {
-      host: 'mailhost',  // hostname
-      secureConnection: false,        // TLS requires secureConnection to be false
-      port: 587,                      // port for secure SMTP
-      authUser: 'usernamemail',
-      authPass: 'passwordmail',
-      tlsCiphers: 'SSLv3',
-      from: 'email_from',
-    },
     gitlab: {
       token_readWriteProjects: 'putyourtokenhere'
     }
@@ -39,16 +22,8 @@ module.exports = {
       name: 'Project Page Manager',
       port: process.env.PORT || 8888
     },
-    passport: {
-      strategy: 'saml',
-      saml: {
-        path: process.env.SAML_PATH || '/saml/SSO',
-        entryPoint: process.env.SAML_ENTRY_POINT || 'saml entry URL',
-        issuer: 'saml issuer URL',
-        logoutUrl: 'saml Logout URL'
-      }
-    },
     database: {
+      host: 'localhost',
       user: 'usernamedb',          // DB username
       password: 'passworddb',  // DB password
       port: 3306,                 // MySQL port
@@ -56,15 +31,6 @@ module.exports = {
       host_project: 'localhost', // local
       dbProject: 'projectdb'     // Project DB
     },
-    mailer: {
-      host: 'mailhost',  // hostname
-      secureConnection: false,        // TLS requires secureConnection to be false
-      port: 587,                      // port for secure SMTP
-      authUser: 'usernamemail',
-      authPass: 'passwordmail',
-      tlsCiphers: 'SSLv3',
-      from: 'email_from',
-    },
     gitlab: {
       token_readWriteProjects: 'putyourtokenhere'
     }

routes/dbconn.js → config/dbconn.ts

-const mysql = require('mysql')
+import mysql from 'mysql2'
 
-var env = process.env.NODE_ENV || 'production';
-const config = require('../config/config')[env]
+var env = process.env.NODE_ENV || 'testing';
+const config = require('./config')[env]
 
 // ==== USER ACOOUNT DB CONNECTION ====
-var userConnection = mysql.createConnection({
+const userConnection = mysql.createPool({
     host: config.database.host,
     user: config.database.user,
     password: config.database.password,
     port: config.database.port,
     database: config.database.dbUser,
-    multipleStatements: true
+    waitForConnections: true,
+    connectionLimit: 10,
+    queueLimit: 0
 })
 
-userConnection.connect(function(err) {
-    if (err) throw err;
-})
 userConnection.query('USE '+config.database.dbUser)
-    
-// user db connection test
-userConnection.query('SELECT 1 + 5 AS solution', function (err, rows, fields) {
-    if (err) throw err
-    console.log('Solution = ', rows[0].solution)
-})
-//userConnection.end()
 
 // ==== PROJECT DB CONNECTION ====
-var projectConnection = mysql.createConnection({
+const projectConnection = mysql.createPool({
     host: config.database.host_project,
     user: config.database.user,
     password: config.database.password,
     port: config.database.port,
-    database: config.database.dbProject
+    database: config.database.dbProject,
+    waitForConnections: true,
+    connectionLimit: 10,
+    queueLimit: 0
 })
 
-projectConnection.connect(function(err) {
-    if (err) throw err;
-})
 projectConnection.query('USE '+config.database.dbProject)
-    
-// projectdb connection test
-projectConnection.query('SELECT 10 + 5 AS project', function (err, rows, fields) {
-    if (err) throw err
-    console.log('Project = ', rows[0].project)
-})
-//projectConnection.end()
 
-var connection = {
+const connection = {
     user: userConnection,
     project: projectConnection
 }
 
-module.exports = connection
\ No newline at end of file
+export = connection
\ No newline at end of file

routes/gitlab.js → functions/gitlab.ts

-const axios = require('axios')
+import axios from 'axios'
 
 var gitlab = {
-    getProjects: async function(perPage, idAfter) {
+    getProjects: async function(perPage:number, idAfter:number) {
         try {
             let projects = await axios({
                 method: 'get',
@@ -30,7 +30,7 @@ var gitlab = {
                 data: err}
         }
     },
-    getLatestPipelineStatus: async function(projectId) {
+    getLatestPipelineStatus: async function(projectId:number) {
         return axios({
             method: 'get',
             url: 'https://transfer.hft-stuttgart.de/gitlab/api/v4/projects/'+projectId+'/pipelines'
@@ -40,4 +40,4 @@ var gitlab = {
     }
 }
 
-module.exports = gitlab
\ No newline at end of file
+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

functions/methods.ts

+const dbconn = require('../config/dbconn');
+
+var methods = {
+    getAllMailinglists: async function() {
+        try {
+            let rows:any = await dbconn.project.promise().query('CALL getAllLists')
+            if (rows[0][0]) {
+                return rows[0][0]
+            } else { return null }
+        } catch (err) {
+            console.error(err)
+        }
+        return null
+    },
+    getProjectOverviewById: async function(projectId:number) {
+        try {
+            let rows:any = await dbconn.project.promise().query('CALL GetProjectInformationByProjectID(' + projectId+ ')')
+            if (rows[0][0]) {
+                return rows[0][0]
+            } else { return null }
+        } catch (err) {
+            console.error(err)
+        }
+        return null
+    },
+    getProjectImagesById: async function(projectId:number) {
+        try {
+            let rows:any = await dbconn.project.promise().query('CALL getImagesByProjectID(' + projectId+ ')')
+            if (rows[0][0]) {
+                return rows[0][0]
+            } else { return null }
+        } catch (err) {
+            console.error(err)
+        }
+        return null
+    }
+};
+
+export = methods;
\ No newline at end of file

jest.config.js

+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+};
\ No newline at end of file

package.json

@@ -14,8 +14,10 @@
     "url": "https://transfer.hft-stuttgart.de/gitlab/m4lab_tv1/project-page.git"
   },
   "scripts": {
-    "start": "nodemon app.js",
-    "test": ""
+    "start": "nodemon app.ts",
+    "build": "tsc -build",
+    "clean": "tsc -build --clean",
+    "test": "jest"
   },
   "dependencies": {
     "async": "^3.2.0",
@@ -23,21 +25,31 @@
     "body-parser": "^1.19.0",
     "compression": "^1.7.4",
     "cookie-parser": "1.4.3",
-    "errorhandler": "1.4.3",
     "express": "^4.17.1",
-    "express-fileupload": "^1.1.7-alpha.2",
-    "express-flash": "0.0.2",
-    "express-session": "^1.17.1",
-    "fs": "0.0.1-security",
-    "helmet": "^3.23.3",
+    "helmet": "^4.6.0",
     "morgan": "^1.10.0",
-    "mysql": "^2.18.1",
-    "passport": "0.3.2",
-    "passport-saml": "^2.0.6",
+    "mysql2": "^2.2.5",
     "pug": "^3.0.2"
   },
   "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/jest": "^26.0.24",
+    "@types/morgan": "^1.9.2",
+    "@types/passport": "^1.0.6",
+    "jest": "^27.0.6",
+    "nodemon": "^2.0.9",
+    "ts-jest": "^27.0.3",
+    "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/methods.js

-const dbconn = require('./dbconn');
-
-var methods = {
-    // test method
-	currentDate: function() {
-		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) {
-            if (err) {
-                throw err;
-            }
-            else {
-                if ( rows.length > 0) {
-                    userId = rows[0].id;
-                }
-            }
-            callback(userId, err);
-        });
-    },
-/*
-    getUserProjectRole: function(userId, callback) {
-        dbconn.user.query('SELECT project_id, role_id FROM user_project_role WHERE user_id = "' +userId+'"', function (err, rows, fields) {
-            if (err) throw err;
-            callback(rows, err);
-        });
-    },
-    */
-    addUserProjectRole: function(data, callback) {
-        dbconn.user.query('INSERT INTO user_project_role SET ?', data, function (err, results, fields){
-            if (err) throw err;
-            callback(err);
-        })
-    },
-    // ======================= project db =======================
-    getAllProjects: function(callback) {
-        dbconn.project.query('CALL getAllprojects', function (err, rows, fields){
-            if (err) throw err;
-            callback(rows[0], err);
-        })
-    },
-    getAllMailinglists: function(callback) {
-        dbconn.project.query('CALL getAllLists', function (err, rows, fields){
-            if (err) throw err;
-            callback(rows[0], err);
-	    })
-    },
-    getProjectOverviewById: function(projectId, callback) {
-        dbconn.project.query('CALL GetProjectInformationByProjectID(' + projectId+ ')', function (err, rows, fields){
-            if (err) throw err;
-            callback(rows[0], err);
-    	})
-    },
-    getProjectImagesById: function(projectId, callback) {
-        dbconn.project.query('CALL getImagesByProjectID(' + projectId+ ')', function (err, rows, fields){
-            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){
-            if (err) {
-                console.error(err);
-            }
-            callback(results, err);
-        })
-    }
-};
-
-module.exports = methods;
\ No newline at end of file

routes/project.ts

+//const SamlStrategy = require('passport-saml').Strategy
+import methods from '../functions/methods'
+import gitlab from '../functions/gitlab'
+import helpers from '../functions/helpers'
+import https from 'https'
+
+module.exports = function (app:any, lang:string) {
+ 
+  // ======== APP ROUTES - PROJECT ====================
+  
+  app.get('/', function (req:any, res:any) {
+    res.render(lang+'/project/project-simplified')
+  })
+
+  app.get('/mailinglists', async function (req:any, res:any) {
+    let mailList = await methods.getAllMailinglists()
+    if (mailList) {
+      let allMailingLists = []  // JSON object
+      for (let i = 0; i < mailList.length; i++) {
+        // add data to JSON object
+        allMailingLists.push({
+          id: mailList[i].id,
+          name: mailList[i].name,
+          src: mailList[i].src,
+          projectstatus: mailList[i].projectstatus,
+          project_title: mailList[i].project_title,
+          keywords: mailList[i].keywords
+        });
+      }
+
+      res.render(lang+'/project/mailinglists', {
+        //isUserAuthenticated: req.isAuthenticated(),
+        //user: req.user,
+        mailinglists: allMailingLists
+      });
+    } else {
+      res.render(lang+'/project/mailinglists', {
+        //isUserAuthenticated: req.isAuthenticated(),
+        //user: req.user,
+        mailinglists: null
+      })
+    }
+  })
+
+  app.get('/projectoverview', async function(req:any, res:any){
+    let projectOverview = await methods.getProjectOverviewById(req.query.projectID)
+    if (projectOverview.length > 0) {
+      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)
+
+      let projectImages = await methods.getProjectImagesById(req.query.projectID)
+      res.render(lang+'/project/projectOverview', {
+        //isUserAuthenticated: req.isAuthenticated(),
+        //user: req.user,
+        projectOV: projectOverview,
+        projectImgs: projectImages,
+        partnerWS: partnerWebsites,
+        partnerN: partnerNames,
+        awardWS: awardSites,
+        awardN: awardNames,
+        sponsorWS: sponsorWebsites,
+        sponsorIMG: sponsorImgs,
+        sponsorN: sponsorNames
+      });
+    } else {
+      res.redirect('/')
+    }
+  })
+
+  // Projektdaten
+  app.get('/projektdaten', async function(req:any, res:any){
+    let projectArr = []
+    let isProject = true
+    let firstId = 0
+    let orderKeyword = req.query.sort
+
+    while (isProject == true) {
+      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++){
+          // 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/body/M4_LAB_LOGO_NO_TEXT.png"
+          }
+          // for all projects that have no description
+          if (projectData[i].description == "") {
+            projectData[i].description = "- no description -"
+          }
+
+          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,
+            createdAt: projectData[i].created_at,
+            lastUpdatedAt: projectData[i].last_activity_at
+          }
+          projectArr.push(project)
+        }
+        firstId = projectData[projectData.length-1].id
+      }
+
+      // MLAB-576
+      if (orderKeyword == "created_at") {
+        projectArr.sort((a, b) => {
+          let aDate:any = new Date(a.createdAt)
+          let bDate:any = new Date(b.createdAt)
+          return bDate - aDate
+        });
+      } else if (orderKeyword == "updated_at") {
+        projectArr.sort((a, b) => {
+          let aDate:any = new Date(a.lastUpdatedAt)
+          let bDate:any = new Date(b.lastUpdatedAt)
+          return bDate - aDate
+        });
+      } else { // default, sorted by name
+        projectArr.sort((a, b) => {
+          let fa = a.name.toLowerCase(),
+              fb = b.name.toLowerCase();
+      
+          if (fa < fb) return -1;
+          if (fa > fb) return 1;
+          return 0;
+        });
+      }
+    }
+
+    res.render(lang+'/project/projectList', {
+      project: projectArr
+    })
+  })
+
+  // Projektinformationen
+  app.get('/projektinformationen', async function(req:any, res:any){
+    let pagesArr: { logo: any; name: any; weburl: any; desc: any; keywords: any; createdAt: any; lastUpdatedAt: any; }[] = []
+    let isProject = true
+    let firstId = 0
+    let orderKeyword = req.query.sort
+
+    while (isProject == true) {
+      let projects = await gitlab.getProjects(100, firstId)
+      let pagesData = projects.data[1]
+
+      if (pagesData.length == 0) {
+        isProject = false
+      } 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 (pagesData[i].avatar_url == null) {
+              pagesData[i].avatar_url = "https://m4lab.hft-stuttgart.de/img/body/M4_LAB_LOGO_NO_TEXT.png"
+            }
+            // for all projects that have no description
+            if (pagesData[i].description == "") {
+              pagesData[i].description = "- no description -"
+            }
+            // https://transfer.hft-stuttgart.de/pages/EIGENTUEMER/PROJEKTNAME/
+            pagesData[i].web_url = "https://transfer.hft-stuttgart.de/pages/"+pagesData[i].namespace.path+"/"+pagesData[i].name+"/"
+            // remove 'website' from tag list
+            let index = pagesData[i].tag_list.indexOf('website')
+            if (index > -1) {
+              pagesData[i].tag_list.splice(index, 1)
+            }
+
+            // fill in pagesArr
+            let pages = {
+              logo: pagesData[i].avatar_url,
+              name: pagesData[i].name,
+              weburl: pagesData[i].web_url,
+              desc: pagesData[i].description,
+              keywords: pagesData[i].tag_list,
+              createdAt: pagesData[i].created_at,
+              lastUpdatedAt: pagesData[i].last_activity_at
+            }
+
+            https.get(pagesData[i].web_url, function (response:any) {
+              if (response.statusCode >= 200 && response.statusCode <= 299) {
+                pagesArr.push(pages)
+              }
+            })
+          }
+        }
+        firstId = pagesData[pagesData.length-1].id
+      }
+
+      // MLAB-576
+      if (orderKeyword == "created_at") {
+        pagesArr.sort((a, b) => {
+          let aDate:any = new Date(a.createdAt)
+          let bDate:any = new Date(b.createdAt)
+          return bDate - aDate
+        });
+      } else if (orderKeyword == "updated_at") {
+        pagesArr.sort((a, b) => {
+          let aDate:any = new Date(a.lastUpdatedAt)
+          let bDate:any = new Date(b.lastUpdatedAt)
+          return bDate - aDate
+        });
+      } else { // default, sorted by name
+        pagesArr.sort((a, b) => {
+          let fa = a.name.toLowerCase(),
+              fb = b.name.toLowerCase();
+      
+          if (fa < fb) return -1;
+          if (fa > fb) return 1;
+          return 0;
+        });
+      }
+
+    }
+
+    res.render(lang+'/project/pagesList', {
+      pages: pagesArr
+    })
+  })
+
+};
\ No newline at end of file

routes/routes-project.js

-//const SamlStrategy = require('passport-saml').Strategy
-const methods = require('./methods')
-const gitlab = require('./gitlab')
-// 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')
-const helpers = require('./helpers')
-const pictSizeLimit = 1000000 // 1 MB
-
-module.exports = function (app) {
- 
-  // ======== APP ROUTES - PROJECT ====================
-  var lang = 'DE'
-
-  app.get('/mailinglists', function (req, res) {
-    async.waterfall([
-        function(done) {
-            methods.getAllMailinglists(function(mailinglistOverview, err) {
-                if (!err) {
-                    done(err, mailinglistOverview)
-                }
-            })
-        },
-        // create JSON object of mailinglists for front-end
-        function(mailinglistOverview, done) {
-            var allMailingLists = []  // JSON object
-            for (let i = 0; i < mailinglistOverview.length; i++) {
-                // add data to JSON object
-                allMailingLists.push({
-                    id: mailinglistOverview[i].id,
-                    name: mailinglistOverview[i].name,
-                    src: mailinglistOverview[i].src,
-                    projectstatus: mailinglistOverview[i].projectstatus,
-                    project_title: mailinglistOverview[i].project_title,
-                    keywords: mailinglistOverview[i].keywords
-                });
-            }
-
-            res.render(lang+'/project/mailinglists', {
-                isUserAuthenticated: req.isAuthenticated(),
-                user: req.user,
-                mailinglists: allMailingLists
-            });
-        }
-    ])
-  })
-
-  app.get('/', function (req, res) {
-    res.render(lang+'/project/project-simplified', {
-       isUserAuthenticated: req.isAuthenticated(),
-       user: req.user
-    });
-  })
-
-  app.get('/addprojectoverview', function (req, res) {
-    if (req.isAuthenticated()) {
-      res.render(lang+'/project/addProjectOverview')
-    }
-    else {
-      res.redirect('/login')
-    }
-  })
-
-  app.post('/addprojectoverview', function (req, res) {
-    if (req.isAuthenticated()) {
-      var wiki = 0
-      if (req.body.wiki)
-        wiki = 1
-
-      var projectLogo = req.files.logo
-      var projectPicture = req.files.src
-      var projectLogoPath, projectPicturePath
-      
-      if (projectLogo) {
-        // raise error if size limit is exceeded
-        if (projectLogo.size === pictSizeLimit) {
-          req.flash('error', 'Projektlogo exceeds 1 MB');
-          res.redirect('/addprojectoverview');
-        }
-        else {
-          // TEST PATH FOR DEVELOPMENT (LOCALHOST)
-          projectLogoPath = './folder-in-server-to-save-projektlogo/'+req.body.pname+'/'+projectLogo.name
-          // PATH FOR TEST/LIVE SERVER
-          // var projectLogoPath = to-be-defined
-        }
-      }
-      if (projectPicture) {
-        // raise error if size limit is exceeded
-        if (projectPicture.size === pictSizeLimit) {
-          req.flash('error', 'Projektbild exceeds 1 MB');
-          res.redirect('/addprojectoverview');
-        }
-        else {
-          // TEST PATH FOR DEVELOPMENT (LOCALHOST)
-          projectPicturePath = './folder-in-server-to-save-projektbild/'+req.body.pname+'/'+projectPicture.name
-          // PATH FOR TEST/LIVE SERVER
-          // var projectPicturePath = to-be-defined
-        }
-        
-      }
-      
-      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: projectLogoPath,
-        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: projectPicturePath,
-        caption: req.body.caption,
-        contact_lastname: req.body.contactName,
-        contact_email: req.body.contactEmail,
-        leader_lastname: req.body.leaderName,
-        leader_email: req.body.leaderEmail
-      }
-      
-      // save pictures
-      if (projectLogo) {
-        projectLogo.mv(projectLogoPath, function(err) {
-          if (err) {
-            console.error(err)
-            res.status(500).render(lang+'/500', {
-              error: err
-            })
-          }
-        });
-      }
-      if (projectPicture) {
-        projectPicture.mv(projectPicturePath, function(err) {
-          if (err) {
-            console.error(err)
-            res.status(500).render(lang+'/500', {
-              error: err
-            })
-          }
-        });
-      }
-
-      /* 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?
-      async.waterfall([
-        // get userId by email from userdb
-        function(done) {
-          methods.getUserIdByEmail(req.user.email, function(id, err) {
-            if (!err) {
-              userId = id
-              done(err)
-            }
-          })
-        },
-        // add project overview
-        function(done) {
-          methods.addProjectOverview(projectOverviewData, function(data, err){
-            if (err) {
-              res.status(500).render(lang+'/500', {
-                error: err
-              })
-            }
-            else {
-              done(err, data.insertId)
-            }
-          })
-        },
-        // assign the created overview to logged-in user
-        function(projectOverviewId, done) {
-          var userProjectRoleData = {
-            project_id: projectOverviewId,
-            user_id: userId,
-            role_id: 3 // OVERVIEW_CREATOR
-          }
-          methods.addUserProjectRole(userProjectRoleData, function(userProjects, 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('/updateprojectoverview', function (req, res) {
-    // only their own project
-  })
-
-  app.get('/projectoverview', function(req, res){
-    async.waterfall([
-      function(done) {
-        methods.getProjectOverviewById(req.query.projectID, function(projectOverview, err) {
-          if (!err) {
-            done(err, projectOverview)
-          }
-        })
-      },
-      function(projectOverview,done){
-        methods.getProjectImagesById(req.query.projectID, function(projectImages, err) {
-          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)
-
-        res.render(lang+'/project/projectOverview', {
-          isUserAuthenticated: req.isAuthenticated(),
-          user: req.user,
-          projectOV: projectOverview,
-          projectImgs: projectImages,
-          partnerWS: partnerWebsites,
-          partnerN: partnerNames,
-          awardWS: awardSites,
-          awardN: awardNames,
-          sponsorWS: sponsorWebsites,
-          sponsorIMG: sponsorImgs,
-          sponsorN: sponsorNames
-        });
-      }
-    ])
-  })
-
-  // Projektdaten
-  app.get('/projektdaten', async function(req, res){
-    let projectArr = []
-    let isProject = true
-    let firstId = 0
-
-    while (isProject == true) {
-      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++){
-          // 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"
-          }
-          // for all projects that have no description
-          if (projectData[i].description == "") {
-            projectData[i].description = "- no description -"
-          }
-
-          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
-      }
-    }
-
-    res.render(lang+'/project/projectList', {
-      project: projectArr
-    })
-  })
-
-  // Projektinformationen
-  app.get('/projektinformationen', async function(req, res){
-    let pagesArr = []
-    let isProject = true
-    let firstId = 0
-
-    while (isProject == true) {
-      let projects = await gitlab.getProjects(100, firstId)
-      let pagesData = projects.data[1]
-
-      if (pagesData.length == 0) {
-        isProject = false
-      } 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 (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 (pagesData[i].description == "") {
-              pagesData[i].description = "- no description -"
-            }
-            // 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 (pagesData[i].name == "IN-Source") {
-              //todo: update URL
-              pagesData[i].web_url = "https://transfer.hft-stuttgart.de/pages/INsource"
-            }
-            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 {
-              //todo: update URL
-              pagesData[i].web_url = "https://transfer.hft-stuttgart.de/pages/"+pagesData[i].name
-            }
-            // remove 'website' from tag list
-            let index = pagesData[i].tag_list.indexOf('website')
-            if (index > -1) {
-              pagesData[i].tag_list.splice(index, 1)
-            }
-
-            // fill in pagesArr
-            let pages = {
-              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)
-          }
-        }
-        firstId = pagesData[pagesData.length-1].id
-      }
-    }
-
-    res.render(lang+'/project/pagesList', {
-      pages: pagesArr
-    })
-  })
-
-};
\ No newline at end of file

tsconfig.json

+{
+  "exclude": ["node_modules", "__test", "jest.config.js"],
+  "compilerOptions": {
+    "target": "es6",
+    "module": "commonjs",
+    "strict": true,
+    "outDir": "./built",
+    "rootDir": "./",
+    "esModuleInterop": true,
+    "allowJs": true
+  }
+}
\ No newline at end of file

views/DE/project/addProjectOverview.pug

-doctype html
-html(lang="de")
-  head
-    title= "Add Project Overview"
-    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")
-    // jQuery UI - Datepicker
-    link(rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css")
-    style.
-        .warning {
-            color: red;
-            font-size: 11px;
-        }
-  body
-    div(class="container-fluid")
-        div(class="row")
-            div(class="col-md-6 offset-md-2")
-                h4(class="mb-3 font-weight-bold") Neues Projekt
-            div(class="col-md-6 offset-md-3")
-                if errors
-                    for error, i in errors
-                        div.alert.alert-danger.alert-dismissible.fade.show #{ error }
-                            a(class="close", href="#", data-dismiss="alert", aria-label="close") ×
-                form(method="POST" encType="multipart/form-data")
-                    div(class='form-row')
-                        div(class='form-group col-md-12')
-                            input#inputPname(name="title" class="form-control" type="text" placeholder="Projekttitel*" required)
-                        div(class="form-group col-md-12")
-                            input#inputTitle(name="pname" class="form-control" type="text" placeholder="Akronym*" required)
-                        div(class="form-group col-md-12")
-                            input#inputSummary(name="summary" class="form-control" type="text" placeholder="Kurzbeschreibung")
-                        div(class='form-group col-md-12')
-                            select#inputCategory(name="category", class="form-control")
-                                option(value="") - Projektkategorie -
-                                option(value="Experten-Gruppe") Experten-Gruppe
-                                option(value="Student-Projekt") Student-Projekt
-                                option(value="Lehr Projekt") Lehr Projekt
-                                option(value="Transfer-projekt") Transfer-projekt
-                        div(class="form-group col-md-12")
-                            div(class='form-group row')
-                                label(for="projectLogo" class="col-sm-3 col-form-label") Projektlogo (max. 1 MB)
-                                div(class="col-md-9")
-                                    input#inputLogo(name="logo" class="form-control" type="file")
-                        div(class="form-group col-md-12")
-                            div(class="input-group mb-3")
-                                input#inputGitlabURL(name="gitlabURL" type="text" class="form-control" placeholder="M4_LAB GitLab Project URL, z.B. https://transfer.hft-stuttgart.de/gitlab/username/projectname")
-                                div(class="input-group-prepend")
-                                    div(class="input-group-text")
-                                        input#inputWiki(name="wiki" type="checkbox")
-                                        |   Wiki
-                                
-                    h5(class="mb-3 font-weight-bold") Inhalte
-                    div(class='form-row')
-                        div(class='form-group col-md-12')
-                            textarea#inputOverview(name="overview" class="form-control" type="text" rows="5" placeholder="Projektüberblick")
-                        div(class="form-group col-md-12")
-                            textarea#inputQuestion(name="question" class="form-control" type="text" rows="5" placeholder="Fragestellung")
-                        div(class='form-group col-md-12')
-                            textarea#inputApproach(name="approach" class="form-control" type="text" rows="5" placeholder="Vorgehensweise")
-                        div(class="form-group col-md-12")
-                            textarea#inputResult(name="result" class="form-control" type="text" rows="5" placeholder="Ergebnis und Nutzung")
-                        div(class="form-group col-md-12")
-                            input#inputKeywords(name="keywords" class="form-control" type="text" placeholder="keywords")
-                    h5(class="mb-3 font-weight-bold") Projektinformationen
-                    div(class='form-row')
-                        div(class='form-group col-md-12')
-                            input#inputAnnouncement(name="announcement" class="form-control" type="text" rows="5" placeholder="Ausschreibung")
-                        div(class="form-group col-md-12")
-                            div(class='form-group row')
-                                label(for="projectLogo" class="col-sm-2 col-form-label") Laufzeit
-                                div(class="col-md-5")
-                                    input#inputTermFrom(name="termForm" class="form-control" type="text" placeholder="von (dd.mm.yyyy)")
-                                div(class="col-md-5")
-                                    input#inputTermTo(name="termTo" class="form-control" type="text" placeholder="bis (dd.mm.yyyy)")
-                        div(class='form-group col-md-12')
-                            textarea#inputFurtherDetails(name="furtherDetails" class="form-control" type="text" rows="5" placeholder="Weitere Informationen (bspw. Links zu Berichten)")
-                        div(class="form-group col-md-12")
-                            input#inputWebsite(name="website" class="form-control" type="text" placeholder="Projekt-Website")
-                    h5(class="mb-3 font-weight-bold") Bilder
-                    div(class='form-row')
-                        div(class="form-group col-md-12")
-                            div(class='form-group row')
-                                label(for="projectPicture" class="col-sm-3 col-form-label") Projektbild (max. 1 MB)
-                                div(class="col-md-9")
-                                    input#inputSrc(name="src" class="form-control" type="file")
-                        div(class="form-group col-md-12")
-                            input#inputCaption(name="caption" class="form-control" type="text" placeholder="Bildunterschrift/Bildquelle")
-                    h5(class="mb-3 font-weight-bold") Kontakt
-                    div(class='form-row')
-                        div(class="form-group col-md-2")
-                            <p class="font-weight-normal">Ansprechperson</p>
-                        div(class="form-group col-md-5")
-                            input#inputContactName(name="contactName" class="form-control" type="text" placeholder="Anrede, Titel, Vorname, Nachname")
-                        div(class="form-group col-md-5")
-                            input#inputContactEmail(name="contactEmail" class="form-control" type="email" placeholder="E-Mail-Adresse")
-                        div(class="form-group col-md-2")
-                            <p class="font-weight-normal">Projektleitung</p>
-                        div(class="form-group col-md-5")
-                            input#inputLeaderName(name="leaderName" class="form-control" type="text" placeholder="Anrede, Titel, Vorname, Nachname")
-                        div(class="form-group col-md-5")
-                            input#inputLeaderEmail(name="leaderEmail" class="form-control" type="email" placeholder="E-Mail-Adresse")
-                    p <em><small>* Pflichtfeld</small></em>
-                    input#submitBtn(type="submit", class="btn btn-outline-dark btn-block", value="Projekt Anlegen")
-
-    // 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")
-    // jQuery UI - Datepicker
-    script(src="https://code.jquery.com/ui/1.12.1/jquery-ui.js")
-    script(src="/js/jquery-ui/i18n/datepicker-de.js")
-    //script(src="i18n/datepicker-de.js")
-    // 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="/js/headfoot.js")
-    script.
-        $( function() {
-            $.datepicker.setDefaults( $.datepicker.regional["de"] );
-            $("#inputTermFrom").datepicker();
-            $("#inputTermTo").datepicker();
-        });
\ No newline at end of file

views/DE/project/mailinglists.pug

@@ -5,6 +5,7 @@ html(lang="de")
     meta(name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no")
     link(rel="stylesheet", type="text/css", href="/css/bootstrap.min.css")
     link(rel="stylesheet", type="text/css", href="/css/m4lab.css")
+    link(rel="stylesheet", type="text/css", href="/css/m4lab-mobile.css")
     link(rel="stylesheet", href="https://use.fontawesome.com/releases/v5.8.2/css/all.css", integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay", crossorigin="anonymous")
     link(rel="stylesheet" href="/fonts/ionicons.min.css")
     link(rel="stylesheet" href="/css/Testimonials.css")
@@ -20,21 +21,24 @@ html(lang="de")
             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()
-                            tr()
-                                th Name
-                                th Zum Abonnement der Mailingliste
-                                th Zum zugehörigen Projekt
-                                th Keywords
-                        tbody()
-                            for item in mailinglists
-                                if item.projectstatus == '1'
-                                    tr
-                                        td #{item.name}
-                                        td <a href="#{item.src}">#{item.src}</a>
-                                        td <a href='projectoverview?projectID=#{item.id}'>#{item.project_title}</a>
-                                        td #{item.keywords}
+                    if !mailinglists
+                        p There is no active mailing list at the moment
+                    else
+                        table(class="table table-striped table-bordered table-hover")
+                            thead()
+                                tr()
+                                    th Name
+                                    th Zum Abonnement der Mailingliste
+                                    th Zum zugehörigen Projekt
+                                    th Keywords
+                            tbody()
+                                for item in mailinglists
+                                    if item.projectstatus == '1'
+                                        tr
+                                            td #{item.name}
+                                            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" class="mailingList_aboText")
         div(class="container")
             div(class="row m_bottom_0 p_top_20 p_bottom_20")
@@ -76,4 +80,5 @@ 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
-    script(src="/js/headfoot.js")
\ No newline at end of file
+    script(src="/js/headfoot.js")
+    script(src="/js/mobile.js")
\ No newline at end of file