More settings page improvements

app/index.js

@@ -1,12 +1,51 @@
+import { me } from "appbit";
 import clock from 'clock';
 import document from 'document';
 import { today } from 'user-activity';
 import { HeartRateSensor } from "heart-rate";
 import { preferences } from 'user-settings';
-import { language_names, weekday_names, month_names } from './localDates'
+import * as fs from "fs";
+import * as messaging from 'messaging';
+import { language_names, weekday_names, month_names } from './localDates';
 import * as util from '../common/utils';
 
-// Update the clock every minute
+// BEGIN settings nonsense
+
+const SETTINGS_TYPE = "cbor";
+const SETTINGS_FILE = "settings.cbor";
+
+let settings = loadSettings();
+console.log("the settings are...")
+console.log(JSON.stringify(settings));
+
+me.onunload = saveSettings;
+
+function loadSettings() {
+    try {
+        return fs.readFileSync(SETTINGS_FILE, SETTINGS_TYPE);
+    } catch (ex) {
+        // Defaults
+        return {
+            hideLeadingZero: 'false',
+            fakeDefaults: 'true',
+        }
+    }
+}
+
+function saveSettings() {
+    fs.writeFileSync(SETTINGS_FILE, settings, SETTINGS_TYPE);
+}
+
+// END settings nonsense
+
+
+messaging.peerSocket.onmessage = (evt) => {
+  settings[evt.data.key] = evt.data.newValue;
+  //myElement.style.fill = evt.data.value;
+  // redo settings...i guess?
+}
+
+// Update the clock every second
 clock.granularity = 'seconds';
 
 let hrm = new HeartRateSensor();
@@ -47,10 +86,10 @@ const stairs_text = document.getElementById('stairs_text');
 clock.ontick = (evt) => {
   const now = evt.date;
   const hours = util.zeroPad(
-    (preferences.clockDisplay === '12h')
+    (preferences.clockDisplay === '24h')
       ? now.getHours()
       : now.getHours() % 12 || 12
-  );
+  , settings.hideLeadingZero === 'true' ? ' ' : '0');
 
   const mins = util.zeroPad(now.getMinutes());
 
@@ -72,3 +111,4 @@ clock.ontick = (evt) => {
 
   hrm.start();
 }
+

common/utils.js

@@ -1,7 +1,7 @@
 // Add zero in front of numbers < 10
-export function zeroPad(i) {
+export function zeroPad(i, spacer = '0') {
   if (i < 10) {
-    i = "0" + i;
+    i = spacer + i;
   }
   return "" + i;
 }

companion/index.js

@@ -2,11 +2,16 @@ import { settingsStorage } from "settings";
 import * as messaging from "messaging";
 
 settingsStorage.onchange = function(evt) {
-  console.log(`${evt.key} : ${evt.newValue}`);
+  console.log("warning setting recvd");
+  console.log(JSON.stringify(evt));
   if (messaging.peerSocket.readyState === messaging.peerSocket.OPEN) {
-    if (evt.key === "theme") {
-      let data = JSON.parse(evt.newValue);
-      messaging.peerSocket.send(data["values"][0].value);
-    }
+    // uh
+    messaging.peerSocket.send(evt);
+
+
+    // if (evt.key === "theme") {
+    //   let data = JSON.parse(evt.newValue);
+    //   messaging.peerSocket.send(data["values"][0].value);
+    // }
   }
 }

package.json

@@ -51,5 +51,8 @@
         "name": "TimeStyle"
       }
     }
+  },
+  "devDependencies": {
+    "@fitbit/sdk": "~1.0.0"
   }
 }

settings/components/SuperColorSelect.jsx

@@ -0,0 +1,43 @@
+import { pebbleColors, colorNames, sneakySpacer } from '../pebbleColors';
+import { getColorPreviewSVG, getThemePreviewSVG } from '../previewGenerators';
+
+const SuperColorSelect = ({ title, settingsKey, currentSelection, currentTheme }) => {
+  return (
+    <Select
+      label={
+        <TextImageRow
+          label={title}
+          sublabel={colorNames[currentSelection]}
+          icon={getColorPreviewSVG(currentSelection)}
+        />
+      }
+      selectViewTitle={title}
+      options={pebbleColors}
+      settingsKey={settingsKey}
+      renderItem={
+        (option) => {
+          const previewSVG = currentTheme ?
+            getThemePreviewSVG({
+              timeColor:
+                currentTheme.timeColor ? currentTheme.timeColor : option.color,
+              sidebarColor:
+                currentTheme.sidebarColor ? currentTheme.sidebarColor : option.color,
+              backgroundColor:
+                currentTheme.backgroundColor ? currentTheme.backgroundColor : option.color,
+            })
+            :
+            getColorPreviewSVG(option.color);
+
+          return (
+            <TextImageRow
+              label={ colorNames[option.color] }
+              icon={ previewSVG }
+            />
+          );
+        }
+      }
+    />
+  );
+};
+
+export default SuperColorSelect;