Merge pull request #4799 from nightscout/plugin_pref_ui

feat: browser setting for openaps color lines

README.md

@@ -484,6 +484,7 @@ To learn more about the Nightscout API, visit https://YOUR-SITE.com/api-docs.htm
   * `OPENAPS_PRED_ACOB_COLOR` (`#FB8C0080`) - The color to use for ACOB prediction lines. Same format as above.
   * `OPENAPS_PRED_ZT_COLOR` (`#00d2d2`) - The color to use for ZT prediction lines. Same format as above.
   * `OPENAPS_PRED_UAM_COLOR` (`#c9bd60`) - The color to use for UAM prediction lines. Same format as above.
+  * `OPENAPS_COLOR_PREDICTION_LINES` (`true`) - Enables / disables the colored lines vs the classic purple color.
 
 
  Also see [Pushover](#pushover) and [IFTTT Maker](#ifttt-maker).

lib/client/browser-settings.js

@@ -79,6 +79,9 @@ function init (client, serverSettings, $) {
 
     var showPluginsSettings = $('#show-plugins');
     var hasPluginsToShow = false;
+
+    const pluginPrefs = [];
+
     client.plugins.eachEnabledPlugin(function each (plugin) {
       if (client.plugins.specialPlugins.indexOf(plugin.name) > -1) {
         //ignore these, they are always on for now
@@ -89,10 +92,48 @@ function init (client, serverSettings, $) {
         dd.find('input').prop('checked', settings.showPlugins.indexOf(plugin.name) > -1);
         hasPluginsToShow = true;
       }
+
+      if (plugin.getClientPrefs) {
+        const prefs = plugin.getClientPrefs();
+        pluginPrefs.push({
+          plugin
+          , prefs
+        })
+      }
     });
 
     showPluginsSettings.toggle(hasPluginsToShow);
 
+    const bs = $('.browserSettings');
+    const toggleCheckboxes = [];
+
+    if (pluginPrefs.length > 0) {
+      pluginPrefs.forEach(function(e) {
+        // Only show settings if plugin is visible
+        if (settings.showPlugins.indexOf(e.plugin.name) > -1) {
+          const label = e.plugin.label;
+          const dl = $('<dl>');
+          dl.append(`<dt class="translate">${label}</dt>`);
+          e.prefs.forEach(function(p) {
+            const id = e.plugin.name + "-" + p.id;
+            const label = p.label;
+            if (p.type == 'boolean') {
+              const html = $(`<dd><input type="checkbox" id="${id}" value="true" /><label for="${id}r" class="translate">${label}</label></dd>`);
+              dl.append(html);
+              if (storage.get(id) == true) {
+                toggleCheckboxes.push(id);
+              }
+            }
+          });
+          bs.append(dl);
+        }
+      });
+    }
+
+    toggleCheckboxes.forEach(function(cb) {
+      $('#' + cb).prop('checked', true);
+    });
+
     $('#editprofilelink').toggle(settings.isEnabled('iob') || settings.isEnabled('cob') || settings.isEnabled('bwp') || settings.isEnabled('basal'));
 
   }
@@ -116,6 +157,20 @@ function init (client, serverSettings, $) {
         return checkedPlugins.join(' ');
       }
 
+      client.plugins.eachEnabledPlugin(function each (plugin) {
+        if (plugin.getClientPrefs) {
+          const prefs = plugin.getClientPrefs();
+
+          prefs.forEach(function(p) {
+            const id = plugin.name + "-" + p.id;
+            if (p.type == 'boolean') {
+              const val = $("#" + id).prop('checked');
+              storage.set(id, val);
+            }
+          });
+        }
+      });
+
       function storeInBrowser (data) {
         Object.keys(data).forEach(k => {
           storage.set(k, data[k]);
@@ -198,6 +253,7 @@ function init (client, serverSettings, $) {
 
     var stored = storage.get('basalrender');
     settings.extendedSettings.basal.render = stored !== null ? stored : settings.extendedSettings.basal.render;
+
   } catch (err) {
     console.error(err);
     showLocalstorageError();
@@ -208,6 +264,30 @@ function init (client, serverSettings, $) {
     wireForm();
   };
 
+  init.loadPluginSettings = function loadPluginSettings (client) {
+
+    client.plugins.eachEnabledPlugin(function each (plugin) {
+      if (plugin.getClientPrefs) {
+        const prefs = plugin.getClientPrefs();
+
+        if (!settings.extendedSettings[plugin.name]) {
+          settings.extendedSettings[plugin.name] = {};
+        }
+
+        const settingsBase = settings.extendedSettings[plugin.name];
+
+        prefs.forEach(function(p) {
+          const id = plugin.name + "-" + p.id;
+          const stored = storage.get(id);
+          if (stored !== null) {
+            settingsBase[p.id] = stored;
+          }
+        });
+      }
+    });
+
+  }
+
   return settings;
 }
 

lib/client/index.js

@@ -143,9 +143,12 @@ client.load = function load (serverSettings, callback) {
 
   client.plugins = require('../plugins/')({
     settings: client.settings
+    , extendedSettings: client.settings.extendedSettings
     , language: language
   }).registerClientDefaults();
 
+  browserSettings.loadPluginSettings(client);
+
   client.utils = require('../utils')({
     settings: client.settings
     , language: language

lib/plugins/openaps.js

@@ -17,6 +17,14 @@ function init (ctx) {
   var translate = ctx.language.translate;
   var firstPrefs = true;
 
+  openaps.getClientPrefs = function getClientPrefs() {
+    return ([{
+      label: "Color prediction lines",
+      id: "colorPredictionLines",
+      type: "boolean"
+    }]);
+  }
+
   openaps.getPrefs = function getPrefs (sbx) {
 
     function cleanList (value) {
@@ -27,23 +35,26 @@ function init (ctx) {
       return _.isEmpty(list) || _.isEmpty(list[0]);
     }
 
-    var fields = cleanList(sbx.extendedSettings.fields);
+    const settings = sbx.extendedSettings || {};
+
+    var fields = cleanList(settings.fields);
     fields = isEmpty(fields) ? ['status-symbol', 'status-label', 'iob', 'meal-assist', 'rssi'] : fields;
 
-    var retroFields = cleanList(sbx.extendedSettings.retroFields);
+    var retroFields = cleanList(settings.retroFields);
     retroFields = isEmpty(retroFields) ? ['status-symbol', 'status-label', 'iob', 'meal-assist', 'rssi'] : retroFields;
 
     var prefs = {
       fields: fields
       , retroFields: retroFields
-      , warn: sbx.extendedSettings.warn ? sbx.extendedSettings.warn : 30
-      , urgent: sbx.extendedSettings.urgent ? sbx.extendedSettings.urgent : 60
-      , enableAlerts: sbx.extendedSettings.enableAlerts
-      , predIOBColor: sbx.extendedSettings.predIobColor ? sbx.extendedSettings.predIobColor : '#1e88e5'
-      , predCOBColor: sbx.extendedSettings.predCobColor ? sbx.extendedSettings.predCobColor : '#FB8C00FF'
-      , predACOBColor: sbx.extendedSettings.predAcobColor ? sbx.extendedSettings.predAcobColor : '#FB8C0080'
-      , predZTColor: sbx.extendedSettings.predZtColor ? sbx.extendedSettings.predZtColor : '#00d2d2'
-      , predUAMColor: sbx.extendedSettings.predUamColor ? sbx.extendedSettings.predUamColor : '#c9bd60'
+      , warn: settings.warn ? settings.warn : 30
+      , urgent: settings.urgent ? settings.urgent : 60
+      , enableAlerts: settings.enableAlerts
+      , predIOBColor: settings.predIobColor ? settings.predIobColor : '#1e88e5'
+      , predCOBColor: settings.predCobColor ? settings.predCobColor : '#FB8C00FF'
+      , predACOBColor: settings.predAcobColor ? settings.predAcobColor : '#FB8C0080'
+      , predZTColor: settings.predZtColor ? settings.predZtColor : '#00d2d2'
+      , predUAMColor: settings.predUamColor ? settings.predUamColor : '#c9bd60'
+      , colorPredictionLines: settings.colorPredictionLines
     };
 
     if (firstPrefs) {
@@ -381,7 +392,7 @@ function init (ctx) {
           
           return {
             mgdl: value
-            , color: colors[forecastType]
+            , color: prefs.colorPredictionLines ? colors[forecastType] : '#ff00ff'
             , mills: prop.lastPredBGs.moment.valueOf() + times.mins(5 * index).msecs + offset
             , noFade: true
             , forecastType: forecastType

views/index.html

@@ -179,7 +179,7 @@
                   	<a id="clocklink" href="/clock/clock" class="translate multilink">Simple</a>
                   </li>
                 </ul>
-                <fieldset class="browserSettings">
+                <fieldset class="browserSettings" id="browserSettings">
                     <legend class="translate icon-cog">Settings</legend>
                     <dl class="radio">
                         <dt class="translate">Units</dt>