Added histogram page

controllers/total/templates/histogram.pug

@@ -0,0 +1,11 @@
+extends ./total.pug
+
+block mistake
+    p.
+        If you think there is a mistake in this histogram, feel free to <a
+        href="mailto:thomas@forgione.fr">send me a mail</a> exaplaining what
+        are the problem so I can fix it. Thanks!
+
+block extrajs
+    script(src="/static/chart/Chart.min.js")
+    script(src="/static/js/histogram.js")

controllers/total/templates/total.pug

@@ -20,6 +20,7 @@ block content
             .col-2
     #result
 
+    block mistake
         p.
             If you think there is a mistake in this table, feel free to
             <a href="mailto:thomas@forgione.fr">send me a mail</a>

controllers/total/urls.js

@@ -5,4 +5,6 @@ module.exports = [
     url('/total-by-course/', 'totalByCourse', 'totalByCourse'),
     url('/total-table', 'totalTable', 'totalTable'),
     url('/total-table-by-course', 'totalTableByCourse', 'totalTableByCourse'),
+    url('/histogram', 'histogram', 'histogram'),
+    url('/histogram-data', 'histogramData', 'histogramData'),
 ]

controllers/total/views.js

@@ -3,6 +3,14 @@ const cal = require('calendar');
 const redirectIfNotLogged = require('auth/views').redirectIfNotLogged;
 const getUrl = require('create-url').getUrl;
 
+function compareStrings(a, b) {
+    if (a < b)
+        return -1;
+    if (a > b)
+        return 1;
+    return 0;
+}
+
 function computeUserTable(user, callback) {
 
     let result = {};
@@ -134,3 +142,54 @@ module.exports.totalTableByCourse = function(req, res, render, next) {
         render('totalTableByCourse.pug');
     });
 }
+
+module.exports.histogram = redirectIfNotLogged('histogram', function(req, res, render) {
+    render('histogram.pug');
+});
+
+module.exports.histogramData = function(req, res, render, next) {
+    if (req.session.user === undefined) {
+        res.status(404);
+
+        res.setHeader('Content-Type', 'text/html');
+
+        res.render(config.BASE_DIR + '/templates/404.pug', res.locals, function(err, result) {
+            if (err)
+                console.log(err);
+            res.send(result);
+        });
+        return;
+    }
+
+    cal.getCalendar(req.session.user, new Date(2000, 1, 1), new Date(3000, 1, 1), (calendar) => {
+
+        let histogram = {};
+
+        for (let event of calendar.events) {
+            let hours = event.startTime.getHours();
+            if (hours % 2 === 0) {
+                hours += 2;
+            } else {
+                hours += 1;
+            }
+            hours = hours.toString().padStart(2, '0');
+            let minutes = event.startTime.getMinutes().toString().padStart(2, '0');
+            let key = hours + ':' + minutes;
+
+            histogram[key] = histogram[key] || 0;
+            histogram[key]++;
+        }
+
+        let histogramArray = [];
+        for (let key in histogram) {
+            histogramArray.push({
+                time: key,
+                count: histogram[key],
+            });
+        }
+
+        histogramArray.sort((a, b) => compareStrings(a.time, b.time));
+        res.send(JSON.stringify(histogramArray));
+    });
+
+}

static/js/histogram.js

@@ -0,0 +1,75 @@
+var loadingDiv = document.getElementById('loading');
+var errorDiv = document.getElementById('error');
+var resultDiv = document.getElementById('result');
+const timeout = 10000;
+
+function getHistogram() {
+    // Send XHR to totalTable
+    loadingDiv.style.display = "";
+    errorDiv.style.display = "none";
+
+    let xhr = new XMLHttpRequest();
+    xhr.timeout = timeout;
+    xhr.onreadystatechange = function() {
+        if (xhr.readyState === XMLHttpRequest.DONE) {
+            if (xhr.status === 200) {
+                setData(JSON.parse(xhr.responseText));
+            } else {
+                setError();
+            }
+        }
+    };
+    xhr.open('GET', '/histogram-data', true);
+    xhr.send();
+}
+
+function setData(data) {
+    loadingDiv.style.display = "none";
+    errorDiv.style.display = "none";
+
+    var barChartData = {
+        labels: [],
+        datasets: [{
+            backgroundColor: 'rgba(54, 162, 235, 0.5)',
+            borderColor: 'rgb(54, 162, 235, 1.0)',
+            borderWidth: 1,
+            label: 'Your lessons',
+            data: [],
+        }],
+    };
+
+    for (let key in data) {
+        barChartData.labels.push(data[key].time);
+        barChartData.datasets[0].data.push(data[key].count);
+    }
+
+    let canvas = document.createElement('canvas');
+    let ctx = canvas.getContext('2d');
+
+    document.getElementById('result').appendChild(canvas);
+
+    new Chart(ctx, {
+        type: 'bar',
+        data: barChartData,
+        options: {
+            responsive: true,
+            legend: {
+                position: 'top',
+            },
+            title: {
+                display: true,
+                text: 'Histogram of times of lessons'
+            }
+        }
+    }).update();
+
+    console.log(barChartData);
+}
+
+function setError() {
+    loadingDiv.style.display = "none";
+    errorDiv.style.display = "";
+}
+
+document.getElementById('tryAgain').addEventListener('click', getHistogram);
+getHistogram();

templates/base.pug

@@ -31,6 +31,8 @@ html
                                 a.nav-link(href=getUrl("total")) Total
                             li.nav-item
                                 a.nav-link(href=getUrl("totalByCourse")) Total by course
+                            li.nav-item
+                                a.nav-link(href=getUrl("histogram")) Histogram
                     ul.navbar-nav.ml-auto
                         if session.user === undefined
                             li.nav-item