feat: clock view code refactor (nightscout#4639)

* * Full refactor of the clockface code. Clocks now get their own small javascript bundle that contains the bare minimum client (from /lib/client/clock-client.js)
* Clocks no longer have separate HTML files but each has unique CSS definitions
* Fixed the bug where a finger measurement showed NaN in the clock

* Update shrinkwrap to match package.json

* Revert accidental index.html changes

* Bunch of minor fixes (nightscout#4641)

* Add triple arrows

* remove time

* grey arrows on bgclock

* try again on arrow fill

* Update bgclock.css

* fix double-mmol-conversion

* Update clock-client.js

* tabs to spaces everywhere

* Refactors based on Jason's comments

* Remove the clock bundle generation from app.js

app.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var _get = require('lodash/get');
-var express = require('express');
-var compression = require('compression');
-var bodyParser = require('body-parser');
-var prettyjson = require('prettyjson');
+const _get = require('lodash/get');
+const express = require('express');
+const compression = require('compression');
+const bodyParser = require('body-parser');
+const prettyjson = require('prettyjson');
 
-var path = require('path');
-var fs = require('fs');
+const path = require('path');
+const fs = require('fs');
 
 function create(env, ctx) {
     var app = express();
@@ -122,6 +122,9 @@ function create(env, ctx) {
         }
     }));
 
+    const clockviews = require('./lib/server/clocks.js')(env, ctx);
+    app.use("/clock", clockviews);
+
     app.get("/", (req, res) => {
         res.render("index.html", {
             locals: app.locals

bundle/bundle.clocks.source.js

@@ -0,0 +1,9 @@
+
+$ = require("jquery");
+
+window.Nightscout = {
+    client: require('../lib/client/clock-client'),
+    units: require('../lib/units')(),
+};
+
+console.info('Nightscout clock bundle ready');

lib/client/clock-client.js

@@ -0,0 +1,124 @@
+'use strict';
+
+const browserSettings = require('./browser-settings');
+
+var client = {};
+
+client.settings = browserSettings(client, window.serverSettings, $);
+
+// console.log('settings', client.settings);
+// client.settings now contains all settings
+
+client.query = function query() {
+  console.log('query');
+  $.ajax('/api/v1/entries.json?count=3', {
+    success: client.render
+  });
+}
+
+client.render = function render(xhr) {
+  console.log('got data', xhr);
+
+  let rec;
+
+  xhr.some(element => {
+    if (element.sgv) {
+      rec = element;
+      return true;
+    }
+  });
+
+  let last = new Date(rec.date);
+  let now = new Date();
+
+  // Convert BG to mmol/L if necessary.
+  if (window.serverSettings.settings.units == 'mmol') {
+    var displayValue = Nightscout.units.mgdlToMMOL(rec.sgv);
+  } else {
+    var displayValue = rec.sgv;
+  }
+
+  // Insert the BG value text.
+  $('#bgnow').html(displayValue);
+
+  // Insert the trend arrow.
+  $('#arrow').attr('src', '/images/' + rec.direction + '.svg');
+
+  // Time before data considered stale.
+  let staleMinutes = 13;
+  let threshold = 1000 * 60 * staleMinutes;
+
+  // Toggle stale if necessary.
+  $('#bgnow').toggleClass('stale', (now - last > threshold));
+
+  // Generate and insert the clock.
+  let timeDivisor = (client.settings.timeFormat) ? client.settings.timeFormat : 12;
+  let today = new Date(),
+    h = today.getHours() % timeDivisor;
+  if (timeDivisor == 12) {
+    h = (h == 0) ? 12 : h; // In the case of 00:xx, change to 12:xx for 12h time
+  }
+  if (timeDivisor == 24) {
+    h = (h < 10) ? ("0" + h) : h; // Pad the hours with a 0 in 24h time
+  }
+  let m = today.getMinutes();
+  if (m < 10) m = "0" + m;
+  $('#clock').text(h + ":" + m);
+
+  if (clockFace == 'clock-color') {
+
+    var bgHigh = window.serverSettings.settings.thresholds.bgHigh;
+    var bgLow = window.serverSettings.settings.thresholds.bgLow;
+    var bgTargetBottom = window.serverSettings.settings.thresholds.bgTargetBottom;
+    var bgTargetTop = window.serverSettings.settings.thresholds.bgTargetTop;
+
+    var bgNum = parseFloat(rec.sgv);
+
+    // These are the particular shades of red, yellow, green, and blue.
+    var red = 'rgba(213,9,21,1)';
+    var yellow = 'rgba(234,168,0,1)';
+    var green = 'rgba(134,207,70,1)';
+    var blue = 'rgba(78,143,207,1)';
+
+    var elapsedMins = Math.round(((now - last) / 1000) / 60);
+
+    // Insert the BG stale time text.
+    $('#staleTime').text(elapsedMins + ' minutes ago');
+
+    // Threshold background coloring.
+    if (bgNum < bgLow) {
+      $('body').css('background-color', red);
+    }
+    if ((bgLow <= bgNum) && (bgNum < bgTargetBottom)) {
+      $('body').css('background-color', blue);
+    }
+    if ((bgTargetBottom <= bgNum) && (bgNum < bgTargetTop)) {
+      $('body').css('background-color', green);
+    }
+    if ((bgTargetTop <= bgNum) && (bgNum < bgHigh)) {
+      $('body').css('background-color', yellow);
+    }
+    if (bgNum >= bgHigh) {
+      $('body').css('background-color', red);
+    }
+
+    // Restyle body bg, and make the "x minutes ago" visible too.
+    if (now - last > threshold) {
+      $('body').css('background-color', 'grey');
+      $('body').css('color', 'black');
+      $('#staleTime').css('display', 'block');
+      $('#arrow').css('filter', 'brightness(0%)');
+    } else {
+      $('#staleTime').css('display', 'none');
+      $('body').css('color', 'white');
+    }
+  }
+}
+
+client.init = function init() {
+  console.log('init');
+  client.query();
+  setInterval(client.query, 1 * 60 * 1000);
+}
+
+module.exports = client;

lib/server/clocks.js

@@ -0,0 +1,28 @@
+'use strict';
+
+const express = require('express');
+const path = require('path');
+
+function clockviews(env, ctx) {
+
+  const app = new express();
+
+  app.set('view engine', 'ejs');
+  app.engine('html', require('ejs').renderFile);
+  app.set("views", path.join(__dirname, "../../views/clockviews/"));
+
+  app.get('/:face', (req, res) => {
+
+    const face = req.params.face;
+    console.log('Clockface requested:', face);
+
+    res.render('shared.html', {
+      face
+    });
+
+  });
+
+  return app;
+}
+
+module.exports = clockviews;