Compare

src/app/index.js

@@ -201,23 +201,67 @@ app.route('/experiments/:id')
 
 app.route('/compare')
   .get((req, res, next) => {
-    // Load experiments list
-    fetch(`${api}/experiments`, standardGet)
-      .then((response) => {
-        if (response.status === 200) { return response.json() }
-      })
-      .then((experiments) => {
-        for (let i = 0; i < experiments.length; i++) {
-          experiments[i].start_time = format('hh:mm - dd/MM/yy', new Date(experiments[i].start_time))
-        }
-        res.render('compare', {
-          meta: {
-            title: 'Eksperimenter',
-            style: ['experiments']
-          },
-          experiments: experiments
+    if (req.query.ids) {
+      const ids = req.query.ids
+      // Load all experiments from db
+      fetch(`${api}/experiments`, standardGet)
+        .then((response) => {
+          if (response.status === 200) { return response.json() }
         })
-      })
+        .then((experimentsList) => {
+          let experiments = []
+          for (let i = 0; i < ids.length; i++) {
+            for (let n = 0; n < experimentsList.length; n++) {
+              if (ids[i] === experimentsList[n].id) {
+                experiments[i] = experimentsList[n]
+              }
+            }
+          }
+          for (let i = 0; i < experiments.length; i++) {
+            experiments[i].start_time = format('hh:mm - dd/MM/yy', new Date(experiments[i].start_time))
+          }
+          let issues = []
+          let requestList = []
+          for (let i = 0; i < ids.length; i++) {
+            requestList[i] = fetch(`${api}/experiments/${ids[i]}/issues`, standardGet).then((response) => { if (response.status === 200) { return response.json() } })
+          }
+          Promise.all(requestList)
+            .then((response) => {
+              for (let i = 0; i < response.length; i++) {
+                issues[i] = response[i]
+              }
+            })
+            .then(() => {
+              console.log(experiments)
+              console.log(issues)
+              res.render('issCompare', {
+                meta: {
+                  title: 'Sammenligning af problemer'
+                },
+                issues: issues,
+                experiments: experiments
+              })
+            })
+        })
+    } else {
+      // Load experiments list
+      fetch(`${api}/experiments`, standardGet)
+        .then((response) => {
+          if (response.status === 200) { return response.json() }
+        })
+        .then((experiments) => {
+          for (let i = 0; i < experiments.length; i++) {
+            experiments[i].start_time = format('hh:mm - dd/MM/yy', new Date(experiments[i].start_time))
+          }
+          res.render('compare', {
+            meta: {
+              title: 'Sammenlign forsøg',
+              style: ['experiments']
+            },
+            experiments: experiments
+          })
+        })
+    }
   })
 
 // 404 handling, keep at bottom

src/public/js/chart.js

 const chartCtx = document.querySelector('#issues-chart')
 
 function makeData (data) {
-  const labels = []
-  const issues = []
+  let labels = []
+  let issues = []
+
+  let avgTime = []
 
-  const avgTime = []
   let totalStepTime = {}
   let issueCounter = {}
 
@@ -27,7 +28,7 @@ function makeData (data) {
   for (let step in issueCounter) {
     issues.push(issueCounter[step])
     avgTime.push((totalStepTime[step] / issueCounter[step]) / 60000)
-    labels.push(step)
+    labels.push(`Trin ${step}`)
   }
   return { labels, issues, avgTime }
 }
@@ -40,16 +41,15 @@ function makeChart (data) {
     data: {
       labels: dataset.labels,
       datasets: [{
-        label: 'Antal problemer',
-        data: dataset.issues,
-        backgroundColor: 'gold'
-      }, {
         label: 'Gennemsnitlig tid (Min)',
         data: dataset.avgTime,
         type: 'line',
         backgroundColor: '#113657',
-        fill: false,
-        hidden: true
+        fill: false
+      }, {
+        label: 'Antal problemer',
+        data: dataset.issues,
+        backgroundColor: 'gold'
       }]
     },
 

src/public/js/compare.js

+function redirect () {
+  // Get all compare checkboxes
+  const checkboxes = document.querySelectorAll('input[type="checkbox"]')
+
+  // Get ids of all checked compare checkboxes
+  let ids = []
+  for (let i = 0; i < checkboxes.length; i++) {
+    if (checkboxes[i].checked) {
+      ids.push(checkboxes[i].value)
+    }
+  }
+
+  // Create comparison query
+  let compareQuery = ''
+  for (let i = 0; i < ids.length; i++) {
+    if (i !== 0) {
+      compareQuery += '&'
+    }
+    compareQuery += `ids[]=${ids[i]}`
+  }
+
+  // Redirect to comparrison if compare query exist and there are at least 2 ids
+  if (compareQuery && ids.length >= 2) {
+    const host = window.location.host
+    window.location.href = `http://${host}/compare?${compareQuery}`
+  }
+}

src/public/js/compareChart.js

+const chartCtx = document.querySelector('#issues-chart')
+
+function randomColor () {
+  const letters = '0123456789ABCDEF'.split('')
+  let color = '#'
+
+  for (let i = 0; i < 6; i++) {
+    color += letters[Math.floor(Math.random() * 16)]
+  }
+
+  return color
+}
+
+function makeData (data) {
+  let labels = []
+  let issues = []
+  let avgStepTime = []
+
+  // Process each experiment individually
+  for (let i = 0; i < data.length; i++) {
+    issues[i] = []
+    avgStepTime[i] = []
+
+    const dataset = data[i]
+    let issueCounter = []
+    let totalStepTime = []
+
+    // Process each issue in the experiment
+    for (let n = 0; n < dataset.length; n++) {
+      const step = dataset[n].step
+      const startTime = new Date(dataset[n].start_time)
+      const endTime = new Date(dataset[n].end_time)
+
+      // Ensure labels up to and including max step of the experiment exist
+      if (step >= labels.length) {
+        for (let m = labels.length; m <= step; m++) {
+          labels[m] = `Trin ${m}`
+        }
+      }
+
+      // Add to issue counter and total time
+      if (step >= issueCounter.length) {
+        for (let m = issueCounter.length; m <= step; m++) {
+          issueCounter[m] = 0
+          totalStepTime[m] = 0
+        }
+        issueCounter[step]++
+        totalStepTime[step] += endTime - startTime
+      } else {
+        issueCounter[step]++
+        totalStepTime[step] += endTime - startTime
+      }
+    }
+
+    // Add the processes experiment data to the
+    for (let n = 0; n < issueCounter.length; n++) {
+      issues[i].push(issueCounter[n])
+      avgStepTime[i].push((totalStepTime[n] / issueCounter[n]) / 60000)
+    }
+  }
+
+  return { labels, issues, avgStepTime }
+}
+
+function makeChart (issueData, experimentNames) {
+  const data = makeData(issueData)
+  console.log(data)
+
+  let chartDatasets = []
+  let colors = []
+  for (let i = 0; i < experimentNames.length; i++) {
+    colors[i] = randomColor()
+  }
+  for (let i = 0; i < data.avgStepTime.length; i++) {
+    chartDatasets.push({
+      label: `${experimentNames[i]} - Tid`,
+      data: data.avgStepTime[i],
+      backgroundColor: colors[i],
+      type: 'line',
+      fill: false
+    })
+  }
+  for (let i = 0; i < data.issues.length; i++) {
+    chartDatasets.push({
+      label: `${experimentNames[i]} - Problemer`,
+      data: data.issues[i],
+      backgroundColor: colors[i]
+    })
+  }
+
+  let chart = new Chart(chartCtx, {
+    type: 'bar',
+    data: {
+      labels: data.labels,
+      datasets: chartDatasets
+    },
+    options: {
+      responsive: true
+    }
+  })
+}

src/public/style/experiments.css

@@ -17,7 +17,7 @@
 
 .experiment a {
     text-decoration: none;
-    color: #ffffff;
+    color: #000000;
 }
 
 .experiment-header {
@@ -33,5 +33,5 @@
 .experiment-information span {
     margin: 0px -5px;
     padding: 0px 20px;
-    border-top: 2px solid var(--secondary-color);
+    border-top: 2px solid #ffffff;
 }
\ No newline at end of file

src/views/compare.hbs

-<h1>Sammenlign</h1>
-
-<table>
-    <thead>
-        <tr>
-            <th>Valgt</th>
-            <th>Navn</th>
-            <th>Lærer</th>
-            <th>Start tidspunkt</th>
-            <th>Slut tidspunkt</th>
-        </tr>
-    </thead>
-    <tbody>
+<h1>Eksperimenter</h1>
+{{#if experiments}}
+    <button onclick="redirect()">Sammenlign</button>
+    <ul class="experiments-list">
         {{#each experiments}}
-        <tr>
-            <td><input type="checkbox" name="compare" id="compare"></td>
-            <td><a href="/experiments/{{this.id}}">{{this.name}}</a></td>
-            <td>{{this.user_name}}</td>
-            <td>{{this.start_time}}</td>
-            <td>{{this.end_time}}</td>
-        </tr>
+            <li class="experiment">
+                <label for="compare{{@index}}">
+                    <div class="experiment-header">
+                        <input type="checkbox" name="compare" id="compare{{@index}}" value="{{this.id}}">
+                        <span>{{this.name}}</span>
+                    </div>
+                    <div class="experiment-information">
+                        <span>{{this.user_name}}</span>
+                        <span>{{this.start_time}}</span>
+                    </div>
+                </label>
+            </li>
         {{/each}}
-    </tbody>
-</table>
-
-<button type="submit">Sammenlign</button>
\ No newline at end of file
+    </ul>
+    <button onclick="redirect()">Sammenlign</button>
+    <script src="/js/compare.js"></script>
+{{else}}
+    <p>Det ser desværre ud til at der ikke er nogen eksperimenter at sammenligne.</p>
+{{/if}}
\ No newline at end of file

src/views/issCompare.hbs

+<h1>Sammenligning af eksperimenterne:</h1>
+<h2>{{#each experiments}}{{#if @first}}{{this.name}}{{else if @last}} & {{this.name}}{{else}}, {{this.name}}{{/if}}{{/each}}</h2>
+
+{{#if issues}}
+<div style="position: relative; height:38vh; width:78vw">
+    <canvas id="issues-chart"></canvas>
+</div>
+
+<script src="/js/Chart.min.js"></script>
+<script src="/js/compareChart.js"></script>
+<script>
+    let data = []
+    let expNames = []
+    {{#each issues}}
+    data[{{@index}}] = [{{#each this}}{ id: '{{this.id}}', experiment_id: '{{this.experiment_id}}', hardware_id: '{{this.hardware_id}}', step: {{this.step}}, start_time: '{{this.start_time}}', end_time: '{{this.end_time}}' }{{#unless @last}}, {{/unless}}{{/each}}]
+    {{/each}}
+    {{#each experiments}}
+    expNames[{{@index}}] = "{{{this.name}}}"
+    {{/each}}
+    makeChart(data, expNames)
+</script>
+{{else}}
+<br><br><br><br>
+<p>Det ser ud til at der ikke var nogen problemer under eksperimentets forløb.</p>
+{{/if}}
\ No newline at end of file