Convert all date strings to ISO861, do some minor design fixes

5 files changed, 98 insertions, 13 deletions

diff --git a/src/components/Forecast/ForecastDrawer.svelte b/src/components/Forecast/ForecastDrawer.svelte
index 16ed509..6540a81 100644
--- a/src/components/Forecast/ForecastDrawer.svelte
+++ b/src/components/Forecast/ForecastDrawer.svelte
@@ -63,11 +63,11 @@
     }
 
     .version-picker .selected {
-        background-color: #c2c2c2;
+        background-color: var(--elevation-1, #c2c2c2);
         padding: 3px 5px;
         box-sizing: border-box;
         border-radius: 10px;
-        color: black;
+        color: var(--on-elevation-1, #000000);
     }
 
     .no-data {
@@ -93,7 +93,7 @@
             <div class="version-picker">
                 <div class:selected={selected_version == OneHourForecast} on:click={() => selected_version = OneHourForecast}>hour</div>
                 <div class:selected={selected_version == ThreeDayForecast} on:click={() => selected_version = ThreeDayForecast}>3 day</div>
-                <div class:selected={selected_version == OutlookTwentySevenDay} on:click={() => selected_version = OutlookTwentySevenDay}>Long time</div>
+                <div class:selected={selected_version == OutlookTwentySevenDay} on:click={() => selected_version = OutlookTwentySevenDay}>Longterm</div>
             </div>
     	</div>
         <svelte:component this={selected_version} />
diff --git a/src/components/WeatherCurrent.svelte b/src/components/WeatherCurrent.svelte
index 8578692..9c47873 100644
--- a/src/components/WeatherCurrent.svelte
+++ b/src/components/WeatherCurrent.svelte
@@ -95,7 +95,11 @@
         <div class="weatherCurrent-data-location">
             {#if !$navigator_location.updating && $navigator_location.available && !$earth_weather.updating && !$space_weather.updating}
                 <i class="symbol fas fa-map-marker-alt"></i>
-                <h1>{$navigator_location.city}</h1>
+                {#if $navigator_location.city !== undefined}
+                    <h1>{$navigator_location.city}</h1>
+                {:else}
+                    <h1>long: {$navigator_location.longitude}<br />lat: {$navigator_location.latitude}</h1>
+                {/if}
             {/if}
         </div>
 
diff --git a/src/lib/DateUtils.js b/src/lib/DateUtils.js
new file mode 100644
index 0000000..cf3e4da
--- /dev/null
+++ b/src/lib/DateUtils.js
@@ -0,0 +1,66 @@
+/* LUT for date-number from month name. */
+const MonthNumber = {
+    "January": 1, "Feb": 2, "March": 3, "April": 4, "May": 5, "June": 6, "July": 7, "August": 8, "September": 9, "October": 10, "November": 11, "December": 12
+}
+
+/**
+ * Padds a string (or number) with leading zeroes.
+ * @param  {string}     number The string to be padded.
+ * @param  {number} [2] n      The minimum width of the returned string.
+ * @return {string}            Zero-padded string.
+ */
+function zpad(number, n=2) {
+    let ret = number.toString();
+    while (n - ret.length > 0) {
+        ret = "0" + ret;
+    }
+    return ret
+}
+
+/**
+ * Attempts to recognize date-string pattern and convert into ISO861.
+ * @param  {string} dateStr A String representing the time, UTC will be assumed
+ *                          unless it is valid ISO861 with a different timezone.
+ * @return {string}         dateStr as ISO861. If no pattern was found (or it
+ *                          already is valid ISO861. The string will be returned
+ *                          with no changes.
+ */
+function toISO861UTC(dateStr) {
+    // yyyy-mm-ddThh:mm:ssZ
+    if (/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}Z$/.test(dateStr)) {
+        //console.log(`yyyy-mm-ddThh:mm:ssZ <- ${dateStr}`);
+        return dateStr;
+    }
+
+    // yyyy MMMM dd
+    if (/^\d{4}\s[a-z,A-Z]+\s\d{2}$/.test(dateStr)) {
+        //console.log(`yyyy MMM dd <- ${dateStr}`);
+        let parts = dateStr.split(" ");
+        dateStr = (`${parts[0]}-${zpad(MonthNumber[parts[1]])}-${parts[2]}T00:00:00Z`);
+        return dateStr;
+    }
+
+    // yyyy mm dd hh:mm:ss
+    if (/^\d{4}-\d{2}-\d{2}\s\d{2}:\d{2}:\d{2}/.test(dateStr)) {
+        return dateStr.replace(" ", "T") + "Z";
+    }
+
+    // yyyy mm dd hh:mm:ss.msm
+    if (/^\d{4}-\d{2}-\d{2}\s\d{2}:\d{2}:\d{2}.\d{4}/.test(dateStr)) {
+        return dateStr.replace(" ", "T").split(".")[0] + "Z";
+    }
+
+    console.warn(dateStr);
+    return dateStr;
+}
+
+/**
+ * Returns a date object from a date-string.
+ * @param {string} dateStr A String representing the time, UTC will be assumed
+ *                         unless it is valid ISO861 with a different timezone.
+ * @return {Date}          The date object representing the date-string.
+ */
+export function parseDateAsUTC(dateStr) {
+    dateStr = toISO861UTC(dateStr);
+    return new Date(dateStr);
+}
diff --git a/src/stores.ts b/src/stores.ts
index 468efca..928cc11 100644
--- a/src/stores.ts
+++ b/src/stores.ts
@@ -1,4 +1,5 @@
 import { writable, readable, get } from 'svelte/store';
+import { parseDateAsUTC } from './lib/DateUtils';
 
 // Choose dark or light mode.
 export const theme = writable('light');
@@ -36,6 +37,19 @@ updateNavigatorLocation();
 navigator_location.subscribe(updateEarthWeather);
 updateSpaceWeather();
 
+// Save data
+const saveToLocalstorage = (name, value) => {
+    if (typeof window === "undefined") { return; }
+    localStorage.setItem(name, JSON.stringify(value));
+}
+const getFromLocalstorage = (name) => {
+    if (typeof window === "undefined") { return; }
+    return JSON.parse(localStorage.getItem(name));
+};
+navigator_location.subscribe(v => saveToLocalstorage("navigator_location", v));
+earth_weather.subscribe(v => saveToLocalstorage("earth_weather", v));
+space_weather.subscribe(v => saveToLocalstorage("space_weather", v));
+
 /**
  * Will update the store "navigator_location" with the users geolocation if 
  * possible.
@@ -110,7 +124,7 @@ async function updateEarthWeather(location=null) {
         current_weather.clouds = yr_data["properties"]["timeseries"][0]["data"]["instant"]["details"]["cloud_area_fraction"];
         current_weather.temp = yr_data["properties"]["timeseries"][0]["data"]["instant"]["details"]["air_temperature"];
 
-        yr_data["properties"]["timeseries"] = yr_data["properties"]["timeseries"].map(x => ({...x, "time": new Date(x.time)}));
+        yr_data["properties"]["timeseries"] = yr_data["properties"]["timeseries"].map(x => ({...x, "time": parseDateAsUTC(x.time)}));
     } catch (e) {}
 
     earth_weather.update(v => ({
@@ -158,14 +172,14 @@ async function getSpaceWeather() {
     let tmp;
     let res = await fetch("https://services.swpc.noaa.gov/products/summary/solar-wind-mag-field.json");
     ret.usnoaa_data_raw.solar_wind_mag_field = await res.json();
-    ret.usnoaa_data_raw.solar_wind_mag_field.TimeStamp = new Date(ret.usnoaa_data_raw.solar_wind_mag_field.TimeStamp + " UTC");
+    ret.usnoaa_data_raw.solar_wind_mag_field.TimeStamp = parseDateAsUTC(ret.usnoaa_data_raw.solar_wind_mag_field.TimeStamp);
     ret.now.bz = ret.usnoaa_data_raw.solar_wind_mag_field["Bz"];
     ret.now.bt = ret.usnoaa_data_raw.solar_wind_mag_field["Bt"];
 
     res = await fetch("https://services.swpc.noaa.gov/json/geospace/geospace_pred_est_kp_1_hour.json");
     tmp = await res.json();
     tmp = tmp.map(x => ({
-        ...x, "model_prediction_time": new Date(x.model_prediction_time)
+        ...x, "model_prediction_time": parseDateAsUTC(x.model_prediction_time)
     }));
     ret.usnoaa_data_raw.geospace_pred_est_kp_1_hour = tmp
 
@@ -174,7 +188,7 @@ async function getSpaceWeather() {
     tmp = [...tmp.matchAll(
         /^(?<time>\d{4}\s.{3}\s\d{2})\s+(?<flux107>\d+)\s+(?<aindex>\d+)\s+(?<kindex>\d+)$/gm
     )];
-    tmp = tmp.map(x => ({...x.groups, "time": new Date(x.groups.time + " UTC")}));
+    tmp = tmp.map(x => ({...x.groups, "time": parseDateAsUTC(x.groups.time)}));
     ret.usnoaa_data_raw.outlook_27_day = tmp;
 
     res = await fetch("https://services.swpc.noaa.gov/products/noaa-planetary-k-index-forecast.json")
@@ -194,7 +208,7 @@ async function getSpaceWeather() {
             minkp = pred[1];
         }
         
-        let predDate = new Date(pred[0] + " UTC");
+        let predDate = parseDateAsUTC(pred[0]);
 
         if (Math.abs(predDate.getTime() - cDate.getTime()) < Math.abs(closestDate.getTime() - cDate.getTime())) {
             closestDate = predDate;
diff --git a/static/theme.css b/static/theme.css
index 7e0d6fc..d76d865 100644
--- a/static/theme.css
+++ b/static/theme.css
@@ -3,6 +3,8 @@ body {
     --surface: #f7fafc;
     --on-surface: #1a202c;
     --elevation-1-shadow: 0px -6px 7px 0px black;
+    --elevation-1: #c2c2c2;
+    --on-elevation-1: #000000;
 
     --divider: #e2e8f0;
     --gradient-1: linear-gradient(90deg, #84fab0, #8fd3f4 51%, #84fab0) 100% / 200%;
@@ -16,11 +18,10 @@ body.dark {
     --surface: #161616;
     --on-surface: #a5a5a5;
     --elevation-1-shadow: none;
+    --elevation-1: #3b3b3b;
+    --on-elevation-1: #afafaf;
 
     --divider: #363636;
     --gradient-1: linear-gradient(90deg, #0c5f2b, #0a2531 51%, #1e6439) 100% / 200%;
-    --gradient-2: linear-gradient(90deg, rgb(110 0 96) 20%,
-                                         rgb(27 142 43) 60%,
-                                         rgb(42 70 61) 85%,
-                                         var(--surface) 100%);
+    --gradient-2: linear-gradient(to right, rgb(110, 0, 96) 11.34%, rgb(27, 142, 43) 51.68%, rgb(11, 73, 41) 76.05%, #161616 96.22%)
 }