* Close button color is much dimmer and changes color appropriately i…

…n the color view * HIDE_CLOCK_CLOSEBUTTON setting to hide the button altogether (set to TRUE or ON to hide buttons altogether) * Fix CSS for toolbar positioning in the main view * Fix documentation on the clock URLs and add mention of the setting
vojtaholik · Jul 24, 2019 · 3373c27 · 3373c27
1 parent c9b7e5c
commit 3373c27
Show file tree

Hide file tree

Showing 8 changed files with 80 additions and 23 deletions.
diff --git a/README.md b/README.md
@@ -303,12 +303,13 @@ To learn more about the Nightscout API, visit https://YOUR-SITE.com/api-docs.htm
   * `SECURE_CSP` (`false`) - Add Content Security Policy headers. Possible values `false`, or `true`.
   * `SECURE_CSP_REPORT_ONLY` (`false`) - If set to `true` allows to experiment with policies by monitoring (but not enforcing) their effects. Possible values `false`, or `true`.
 
-  ### Views
+### Views
 
   There are a few alternate web views available that display a simplified BG stream. Append any of these to your Nightscout URL:
-  * `/clock.html` - Shows current BG. Grey text on a black background.
-  * `/bgclock.html` - Shows current BG, trend arrow, and time of day. Grey text on a black background.
-  * `/clock-color.html` - Shows current BG and trend arrow. White text on a background that changes color to indicate current BG threshold (green = in range; blue = below range; yellow = above range; red = urgent below/above).
+  * `/clock/clock` - Shows current BG. Grey text on a black background.
+  * `/clock/bgclock` - Shows current BG, trend arrow, and time of day. Grey text on a black background.
+  * `/clock/clock-color` - Shows current BG and trend arrow. White text on a background that changes color to indicate current BG threshold (green = in range; blue = below range; yellow = above range; red = urgent below/above).
+  * Optional configuration: set `HIDE_CLOCK_CLOSEBUTTON` (`false`) to `true` to hide the small X button to close the views
 
 ### Plugins
 

diff --git a/lib/client/clock-client.js b/lib/client/clock-client.js
@@ -65,6 +65,10 @@ client.render = function render (xhr) {
   if (m < 10) m = "0" + m;
   $('#clock').text(h + ":" + m);
 
+  if (window.serverSettings.settings.hideClockClosebutton) {
+    $('#close').css('display', 'none');
+  }
+
   // defined in the template this is loaded into
   // eslint-disable-next-line no-undef
   if (clockFace == 'clock-color') {
@@ -82,6 +86,11 @@ client.render = function render (xhr) {
     var green = 'rgba(134,207,70,1)';
     var blue = 'rgba(78,143,207,1)';
 
+    var darkRed = 'rgba(183,9,21,1)';
+    var darkYellow = 'rgba(214,168,0,1)';
+    var darkGreen = 'rgba(110,192,70,1)';
+    var darkBlue = 'rgba(78,143,187,1)';
+
     var elapsedMins = Math.round(((now - last) / 1000) / 60);
 
     // Insert the BG stale time text.
@@ -90,18 +99,28 @@ client.render = function render (xhr) {
     // Threshold background coloring.
     if (bgNum < bgLow) {
       $('body').css('background-color', red);
+      $('#close').css('border-color', darkRed);
+      $('#close').css('color', darkRed);
     }
     if ((bgLow <= bgNum) && (bgNum < bgTargetBottom)) {
       $('body').css('background-color', blue);
+      $('#close').css('border-color', darkBlue);
+      $('#close').css('color', darkBlue);
     }
     if ((bgTargetBottom <= bgNum) && (bgNum < bgTargetTop)) {
       $('body').css('background-color', green);
+      $('#close').css('border-color', darkGreen);
+      $('#close').css('color', darkGreen);
     }
     if ((bgTargetTop <= bgNum) && (bgNum < bgHigh)) {
       $('body').css('background-color', yellow);
+      $('#close').css('border-color', darkYellow);
+      $('#close').css('color', darkYellow);
     }
     if (bgNum >= bgHigh) {
       $('body').css('background-color', red);
+      $('#close').css('border-color', darkRed);
+      $('#close').css('color', darkRed);
     }
 
     // Restyle body bg, and make the "x minutes ago" visible too.

diff --git a/lib/settings.js b/lib/settings.js
@@ -3,7 +3,7 @@
 var _ = require('lodash');
 var levels = require('./levels');
 
-function init ( ) {
+function init () {
 
   var settings = {
     units: 'mg/dL'
@@ -41,12 +41,13 @@ function init ( ) {
       , bgTargetTop: 180
       , bgTargetBottom: 80
       , bgLow: 55
-    },
-    insecureUseHttp: false,
-    secureHstsHeader: true,
-    secureHstsHeaderIncludeSubdomains: false,
-    secureHstsHeaderPreload: false,
-    secureCsp: false
+    }
+    , insecureUseHttp: false
+    , secureHstsHeader: true
+    , secureHstsHeaderIncludeSubdomains: false
+    , secureHstsHeaderPreload: false
+    , secureCsp: false
+    , hideClockClosebutton: false
   };
 
   var valueMappers = {
@@ -67,7 +68,7 @@ function init ( ) {
     , insecureUseHttp: mapTruthy
     , secureHstsHeader: mapTruthy
     , secureCsp: mapTruthy
-
+    , hideClockClosebutton: mapTruthy
   };
 
   function mapNumberArray (value) {
@@ -77,7 +78,7 @@ function init ( ) {
 
     if (isNaN(value)) {
       var rawValues = value && value.split(' ') || [];
-      return _.map(rawValues, function (num) {
+      return _.map(rawValues, function(num) {
         return isNaN(num) ? null : Number(num);
       });
     } else {
@@ -153,18 +154,18 @@ function init ( ) {
     }
 
     function anyEnabled (features) {
-      return _.findIndex(features, function (feature) {
+      return _.findIndex(features, function(feature) {
         return enable.indexOf(feature) > -1;
       }) > -1;
     }
 
-    function prepareAlarmTypes ( ) {
+    function prepareAlarmTypes () {
       var alarmTypes = _.filter(getAndPrepare('alarmTypes'), function onlyKnownTypes (type) {
         return type === 'predict' || type === 'simple';
       });
 
       if (alarmTypes.length === 0) {
-        var thresholdWasSet = _.findIndex(wasSet, function (name) {
+        var thresholdWasSet = _.findIndex(wasSet, function(name) {
           return name.indexOf('bg') === 0;
         }) > -1;
         alarmTypes = thresholdWasSet ? ['simple'] : ['predict'];
@@ -209,7 +210,7 @@ function init ( ) {
     adjustShownPlugins();
   }
 
-  function verifyThresholds() {
+  function verifyThresholds () {
     var thresholds = settings.thresholds;
 
     if (thresholds.bgTargetBottom >= thresholds.bgTargetTop) {
@@ -234,7 +235,7 @@ function init ( ) {
     }
   }
 
-  function adjustShownPlugins ( ) {
+  function adjustShownPlugins () {
     var showPluginsUnset = settings.showPlugins && 0 === settings.showPlugins.length;
 
     settings.showPlugins += ' delta direction upbat';
@@ -245,7 +246,7 @@ function init ( ) {
     if (showPluginsUnset) {
       //assume all enabled features are plugins and they should be shown for now
       //it would be better to use the registered plugins, but it's not loaded yet...
-      _.forEach(settings.enable, function showFeature(feature) {
+      _.forEach(settings.enable, function showFeature (feature) {
         if (isEnabled(feature)) {
           settings.showPlugins += ' ' + feature;
         }
@@ -289,7 +290,7 @@ function init ( ) {
     var snoozeTime;
 
     if (notify.eventName === 'high' && notify.level === levels.URGENT && settings.alarmUrgentHigh) {
-     snoozeTime = settings.alarmUrgentHighMins;
+      snoozeTime = settings.alarmUrgentHighMins;
     } else if (notify.eventName === 'high' && settings.alarmHigh) {
       snoozeTime = settings.alarmHighMins;
     } else if (notify.eventName === 'low' && notify.level === levels.URGENT && settings.alarmUrgentLow) {

diff --git a/views/clockviews/bgclock.css b/views/clockviews/bgclock.css
@@ -20,6 +20,18 @@ main {
   height: 100vh;
 }
 
+#close {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  color: #333;
+  border-radius: 5px;
+  border: 2px solid #333;
+  padding: 5px;
+  width: 20px;
+  height: 20px;
+}
+
 .inner {
   width: 100%;
   -webkit-transform: translateY(-2%);

diff --git a/views/clockviews/clock-color.css b/views/clockviews/clock-color.css
@@ -20,6 +20,18 @@ main {
   height: 100vh;
 }
 
+#close {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  color: grey;
+  border-radius: 5px;
+  border: 2px solid grey;
+  padding: 5px;
+  width: 20px;
+  height: 20px;
+}
+
 .inner {
   width: 100%;
   -webkit-transform: translateY(-5%);

diff --git a/views/clockviews/clock.css b/views/clockviews/clock.css
@@ -20,6 +20,18 @@ main {
   height: 100vh;
 }
 
+#close {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  color: #333;
+  border-radius: 5px;
+  border: 2px solid #333;
+  padding: 5px;
+  width: 20px;
+  height: 20px;
+}
+
 .inner {
   width: 100%;
   -webkit-transform: translateY(-5%);
@@ -51,4 +63,4 @@ main {
 
 #clock {
   display: none;
-}
+}
diff --git a/views/clockviews/shared.html b/views/clockviews/shared.html
@@ -25,7 +25,7 @@
 </head>
 
 <body>
-    <a href="/"><div style="position: absolute; top: 10px; right: 10px; color: grey; border-radius: 5px; border: 2px solid grey; padding: 5px; width: 20px; height: 20px; ">X</div></a>
+  <a href="/"><div id="close">X</div></a>
   <main>
     <div class="inner">
       <div id="trend">

diff --git a/views/index.html b/views/index.html
@@ -116,7 +116,7 @@
     	</div>
         <div class="container loading" id="container">
             <div id="toolbar">
-                <div id="buttonbar" style="margin-right: 15px;" role="navigation" aria-label="Menu" >
+                <div id="buttonbar" style="margin-right: 0px;" role="navigation" aria-label="Menu" >
                     <a id="editbutton" class="tip" original-title="Edit Mode" aria-label="Edit Mode" href="#" style="display:none;"><i class="icon-edit"></i></a>
                     <a id="testAlarms" class="tip" original-title="Alarm Test / Smartphone Enable" aria-label="Alarm Test / Smartphone Enable" href="#"><i class="icon-volume"></i></a>
                     <a id="drawerToggle" class="tip" original-title="Settings" aria-label="Settings" href="#"><i class="icon-menu"></i></a>