Working on custom.html

apps/travelwatch/app.js

@@ -27,11 +27,14 @@ const dows =
     "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"
 ];
 
-var zones = require("Storage").readJSON("timezones.json", 1) ||
-[
-    { "name": "SFO", "offset": -480, "current_offset": 0, "next_change": 0, "is_dst": false, "dst_month": 3, "dst_date":  8, "dst_dow": 0, "dst_hour": 2, "std_month": 11, "std_date":  1, "std_dow": 0, "std_hour": 2 },
-    { "name": "LON", "offset":    0, "current_offset": 0, "next_change": 0, "is_dst": false, "dst_month": 3, "dst_date": -7, "dst_dow": 0, "dst_hour": 1, "std_month": 10, "std_date": -7, "std_dow": 0, "std_hour": 2 },
-];
+var zones = require("Storage").readJSON("timezones.json", 1);
+if (!zones || zones.length < 2)
+{
+    zones = [
+        { "name": "SFO", "offset": -480, "current_offset": -28800000, "next_change": 0, "is_dst": false, "dst_month": 3, "dst_date":  8, "dst_dow": 0, "dst_hour": 2, "std_month": 11, "std_date":  1, "std_dow": 0, "std_hour": 2 },
+        { "name": "LON", "offset":    0, "current_offset":         0, "next_change": 0, "is_dst": false, "dst_month": 3, "dst_date": -7, "dst_dow": 0, "dst_hour": 1, "std_month": 10, "std_date": -7, "std_dow": 0, "std_hour": 2 },
+    ];
+}
 
 // We use GetDate() to get dates for rendering, since it takes care of both the various timezones in use, and automatic switching between
 // daylight and standard times.  Rather than rely on the TZ offset stored in the watch, we start by removing that, and then applying our

apps/travelwatch/custom.html

@@ -52,34 +52,40 @@
           {
               offsets = JSON.parse(stored);
           }
-          if (!offsets || offsets.length != 4)
+          if (!offsets || offsets.length != 5)
           {
               throw "Offsets invalid";
           }
       }
       catch(e)
       {
           offsets = [
-                [true,  "LON", "europe/london"    ],
-                [true,  "ZRC", "europe/berlin"    ],
-                [false, "JER", "asia/jerusalem"   ],
-                [false, "SYD", "australia/sydney" ],
+                [true,  "SFO",  2 ],
+                [true,  "LON",  8 ],
+                [true,  "ZRC", 10 ],
+                [false, "JER", 13 ],
+                [false, "SYD", 15 ],
            ];
         }
       console.log(offsets);
       var tbl = document.getElementById("travelwatch-offsets");
-      for (var i = 0; i < 4; i++)
+      for (var i = 0; i < 5; i++)
       {
           var $offset = document.createElement('tr')
           var innerHTML = `
               <td><input type="checkbox" id="enabled_${i}" ${offsets[i][0]? "checked" : ""}></td>
               <td><input type="text" id="name_${i}" value="${offsets[i][1]}"></td>
-              <td><select name="zone" id="zone_${i}">`
+              <td><select name="zone_${i}" id="zone_${i}">`
           for (var j = 0; j < timeZones.length; j++)
           {
-              innerHTML = innerHTML + '<option value="${j}">${timeZones[j].name}</option>';
+              innerHTML += '<option value="${j}"'
+              if (offsets[i][2] == j)
+              {
+                  innetHTML += ' selected=true'
+              }
+              innerHTML += '>${timeZones[j].name}</option>';
           }
-          innerHTML = innerHTML + '</select>';
+          innerHTML += '</select>';
           $offset.innerHTML = innerHTML;
           tbl.append($offset);
       }
@@ -88,12 +94,25 @@
       document.getElementById("upload").addEventListener("click", function() {
           var storage_offsets=[];
           var app_offsets=[];
-          for (var i=0; i<4; i++) {
-              var checked=document.getElementById("enabled_"+i).checked;
-              var name=document.getElementById("name_"+i).value;
-              var offset=document.getElementById("offset_"+i).value;
-              if (checked) {
-                  app_offsets.push({"name":name,"offset":offset]);
+          for (var i = 0; i < 5; i++)
+          {
+              // Always send the first two entries through.  Otherwise the watch face won't work right.
+              var checked = (i == 0 || i == 1) && document.getElementById("enabled_" + i).checked;
+              var name = document.getElementById("name_" + i).value;
+              var zone = document.getElementById("zone_" + i).value;
+              if (checked)
+              {
+                  // Deep copy with JSON stringification and parsing.  This is because timeZones
+                  // is const and I need to modify zoneData
+                  var zoneData = JSON.parse(JSON.stringify(timeZones[zone]));
+                  zoneData.name = name;
+                  // This might be slightly wrong if the watch face is started up really close
+                  // to a DST / STD change.  Hopefully this won't happen since they generally
+                  // take place in the early hours of the morning.
+                  zoneData.current_offset = zoneData.offset * 60000;
+                  zoneData.next_change = 0;
+                  zoneData.is_dst = false;
+                  app_offsets.push(zoneData);
               }
               storage_offsets.push([checked,name,offset]);
           }

apps/travelwatch/metadata.json

@@ -1,7 +1,7 @@
 { "id": "travelwatch",
   "name": "Travel Watch",
   "icon": "app.png",
-  "version":"1.01",
+  "version":"1.02",
   "description": "Watch face that shows world wide time for travelers",
   "tags": "clock",
   "type": "clock",