Merge branch 'master' of gitlab.au.dk:ITPDP2019/gain.fam/web-server

src/app/index.js

@@ -86,6 +86,15 @@ app.get('/', (req, res, next) => {
   })
 })
 
+// Issues
+app.get('/issues', (req, res, next) => {
+  res.render('issues', {
+    meta: {
+      title: 'Problemer'
+    }
+  })
+})
+
 // List all experiments
 app.get('/experiments', (req, res, next) => {
   fetch(`http://${apiIp}:${apiPort}${apiPath}/experiments`, {

src/public/js/main.js

@@ -3,23 +3,14 @@
 
 let myChartCtx = document.querySelector('#myChart')
 
-// Load page on startup.
-updateChart()
-
-setInterval(function () {
-  updateChart()
-}, 10000)
-
-function updateChart () {
-  fetch(`http://${process.env.API_IP}:${process.env.API_PORT}${process.env.API_PATH}/api/experiments/bdce27fa-718a-11e9-9695-d07e350e43bd/issues`, {
+function getData () {
+  fetch(`http://10.122.6.21:3000/api/experiments/bdce27fa-718a-11e9-9695-d07e350e43bd/issues`, {
     method: 'get',
     headers: {
       'Accept': 'application/json'
     } }).then((response) => {
     response.json().then((data) => {
       // Clear chart before reloading.
-      document.getElementById('chart-container').innerHTML = ''
-      document.getElementById('chart-container').innerHTML = '<canvas id="myChart"></canvas>'
       myChartCtx = document.getElementById('myChart').getContext('2d')
       makeMyChart(data)
     })
@@ -31,19 +22,19 @@ function makeMyData (data) {
   const labels = []
   const issues = []
   let counter
-  let usedstep
+  let usedSteps = []
   for (let i of data) {
     // Iterate and group data
-    if (i.step !== usedstep) {
-      counter = 0
-      usedstep = i.step
-      labels.push(i.step)
+    if (!usedSteps.includes(i.step)) {
       for (let j of data) {
-        if (usedstep === j.step) {
+        if (i.step === j.step) {
           counter++
         }
       }
+      labels.push(i.step)
       issues.push(counter)
+      counter = 0
+      usedSteps.add(i.step)
     }
   }
   return { labels, issues }
@@ -51,8 +42,8 @@ function makeMyData (data) {
 
 function makeMyChart (data) {
   const myData = makeMyData(data)
-  const myChart = new Chart(myChartCtx, {
-    type: 'horizontalBar',
+  let myChart = new Chart(myChartCtx, {
+    type: 'bar',
     data: {
       labels: myData.labels,
       datasets: [{
@@ -78,3 +69,5 @@ function makeMyChart (data) {
     }
   })
 }
+
+getData()

src/views/partials/nav.hbs

 <nav class="nav-content">
     <a href="/" class="nav-item">Forside</a>
     <a href="/experiments" class="nav-item">Eksperimenter</a>
+    <a href="/issues" class="nav-item">Problemer</a>
 </nav>
\ No newline at end of file