From 9dc247a861be845ff79ce38430ace2591d187975 Mon Sep 17 00:00:00 2001
From: Jakob Stendahl <jakob.stendahl@outlook.com>
Date: Wed, 27 Apr 2022 00:32:41 +0200
Subject: Move all data fetching to a store, add spinner for loading

---
 src/components/PredictedSpaceWeather.svelte      | 101 ++++++---------
 src/components/PredictedSpaceWeatherThing.svelte |  13 +-
 src/components/Spinner/SpinnerRoller.svelte      |  88 +++++++++++++
 src/components/WeatherCurrent.svelte             | 153 ++++++-----------------
 4 files changed, 174 insertions(+), 181 deletions(-)
 create mode 100644 src/components/Spinner/SpinnerRoller.svelte

(limited to 'src/components')

diff --git a/src/components/PredictedSpaceWeather.svelte b/src/components/PredictedSpaceWeather.svelte
index b350d3c..35f1a84 100644
--- a/src/components/PredictedSpaceWeather.svelte
+++ b/src/components/PredictedSpaceWeather.svelte
@@ -1,90 +1,59 @@
 <script lang="ts">
     import PredictedSpaceWeatherThing from './PredictedSpaceWeatherThing.svelte';
+
     import { onMount } from 'svelte';
+    import { earth_weather, space_weather } from '../stores';
 
     const monthNames = ["January", "February", "March", "April", "May", "June",
       "July", "August", "September", "October", "November", "December"
     ];
 
-    let longitude;
-    let latitude;
-    let locationSupported = false;
-    let dataLoading = true;
-
     let predictions;
 
-    async function getWeather(longitude, latitude) {
-        let yr_data;
-        if (locationSupported) {
-            yr_data = await fetch(`https://api.met.no/weatherapi/locationforecast/2.0/compact?lat=${latitude}&lon=${longitude}`).then(res => res.json());
+    space_weather.subscribe(assembleWeatherData);
+    earth_weather.subscribe(assembleWeatherData);
+
+    async function assembleWeatherData() {
+        if ($space_weather.updating || $earth_weather.updating) {
+            predictions = null;
+            return;
         }
-        let kp_data = await fetch("https://services.swpc.noaa.gov/products/noaa-planetary-k-index-forecast.json").then(res => res.json());
-        kp_data.shift();
 
-        let updatedPredictions = [];
-        kp_data.forEach((pred, i) => {
-            if (pred[2] != "observed") {
+        // First just reorganize the space_weather data
+        predictions = $space_weather.usnoaa_data_raw.noaa_planetary_k_index_forecast.map(
+            pred => ({
+                "time": pred.time,
+                "kp": pred.kp,
+                "temp": null,
+                "clouds": null,
+                "hasNOMETData": $earth_weather.available
+            })
+        );
+
+        // Add earth weather data if it is available
+        if ($earth_weather.available) {
+            predictions.forEach((pred, i) => {
+                let closestDate = new Date(0,0,0);
                 let temp;
                 let clouds;
-                let cDate = new Date(pred[0]);
-                let closestDate = new Date(0,0,0);
-
-                if (locationSupported) {
-                    yr_data["properties"]["timeseries"].forEach((pred, i) => {
-                        let predDate = new Date(pred["time"]);
-                        if (Math.abs(predDate.getTime() - cDate.getTime()) < Math.abs(closestDate.getTime() - cDate.getTime())) {
-                            closestDate = predDate;
-                            temp = (pred["data"]["instant"]["details"]["air_temperature"]);
-                            clouds = pred["data"]["instant"]["details"]["cloud_area_fraction"];
-                        }
-                    });
-                }
 
-                updatedPredictions.push({
-                    "time": pred[0],
-                    "kp": pred[1],
-                    "temp": temp,
-                    "clouds": clouds,
-                    "hasNOMETData": locationSupported
+                $earth_weather.yr_data_raw.properties.timeseries.forEach((earth_pred, i) => {
+                    let predDate = new Date(earth_pred.time);
+                    if (Math.abs(predDate.getTime() - pred.time.getTime()) < Math.abs(closestDate.getTime() - pred.time.getTime())) {
+                        closestDate = predDate;
+                        temp = (earth_pred["data"]["instant"]["details"]["air_temperature"]);
+                        clouds = earth_pred["data"]["instant"]["details"]["cloud_area_fraction"];
+                    }
                 });
-            }
-        });
-        predictions = updatedPredictions;
-    }
 
-    function getLocation() {
-        if (navigator.geolocation) {
-            dataLoading = true
-            locationSupported = true
-            navigator.geolocation.getCurrentPosition(setLocation, locationError)
-        } else {
-            locationSupported = false
-            noLocation()
+                predictions[i] = {
+                    ...predictions[i], "temp": temp, "clouds": clouds
+                }
+            });
         }
-    }
-
-    function setLocation(position) {
-        longitude = position.coords.longitude
-        latitude = position.coords.latitude
-        getWeather(longitude, latitude)
-    }
 
-    function locationError(err) {
-        locationSupported = false
-        noLocation()
-    }
-
-    function noLocation() {
-        longitude = 28.283333
-        latitude = -15.416667
-        getWeather(0, 0);
-        toggleLoading()
-    }
-    function toggleLoading() {
-        dataLoading = !dataLoading
     }
 
-    onMount(getLocation);
 </script>
 
 <style>
diff --git a/src/components/PredictedSpaceWeatherThing.svelte b/src/components/PredictedSpaceWeatherThing.svelte
index 5c4cb5b..7c343e9 100644
--- a/src/components/PredictedSpaceWeatherThing.svelte
+++ b/src/components/PredictedSpaceWeatherThing.svelte
@@ -5,10 +5,17 @@
       "July", "August", "September", "October", "November", "December"
     ];
 
+    function zpad(value, n=2) {
+        let r = value;
+        for (let i = 0; i < n - value.length; i++) {
+            r = "0" + r;
+        }
+        return r;
+    }
+
     let kp = prediction["kp"];
-    let dateTime = prediction["time"].split(" ");
-    let date = Number(dateTime[0].split("-")[2]) + ". " + monthNames[Number(dateTime[0].split("-")[1])];
-    let time = dateTime[1].substring(0,5);
+    let date = prediction["time"].getDate()  + ". " + monthNames[prediction["time"].getMonth()];
+    let time = zpad(prediction["time"].getHours().toString()) + ":" + zpad(prediction["time"].getMinutes().toString());
     let temp = prediction["temp"];
     let clouds = prediction["clouds"];
     let hasNOMETData = prediction["hasNOMETData"];
diff --git a/src/components/Spinner/SpinnerRoller.svelte b/src/components/Spinner/SpinnerRoller.svelte
new file mode 100644
index 0000000..b2b1ef9
--- /dev/null
+++ b/src/components/Spinner/SpinnerRoller.svelte
@@ -0,0 +1,88 @@
+<style>
+    .lds-roller {
+      display: inline-block;
+      position: relative;
+      width: 80px;
+      height: 80px;
+    }
+    .lds-roller div {
+      animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+      transform-origin: 40px 40px;
+    }
+    .lds-roller div:after {
+      content: " ";
+      display: block;
+      position: absolute;
+      width: 7px;
+      height: 7px;
+      border-radius: 50%;
+      background: #fff;
+      margin: -4px 0 0 -4px;
+    }
+    .lds-roller div:nth-child(1) {
+      animation-delay: -0.036s;
+    }
+    .lds-roller div:nth-child(1):after {
+      top: 63px;
+      left: 63px;
+    }
+    .lds-roller div:nth-child(2) {
+      animation-delay: -0.072s;
+    }
+    .lds-roller div:nth-child(2):after {
+      top: 68px;
+      left: 56px;
+    }
+    .lds-roller div:nth-child(3) {
+      animation-delay: -0.108s;
+    }
+    .lds-roller div:nth-child(3):after {
+      top: 71px;
+      left: 48px;
+    }
+    .lds-roller div:nth-child(4) {
+      animation-delay: -0.144s;
+    }
+    .lds-roller div:nth-child(4):after {
+      top: 72px;
+      left: 40px;
+    }
+    .lds-roller div:nth-child(5) {
+      animation-delay: -0.18s;
+    }
+    .lds-roller div:nth-child(5):after {
+      top: 71px;
+      left: 32px;
+    }
+    .lds-roller div:nth-child(6) {
+      animation-delay: -0.216s;
+    }
+    .lds-roller div:nth-child(6):after {
+      top: 68px;
+      left: 24px;
+    }
+    .lds-roller div:nth-child(7) {
+      animation-delay: -0.252s;
+    }
+    .lds-roller div:nth-child(7):after {
+      top: 63px;
+      left: 17px;
+    }
+    .lds-roller div:nth-child(8) {
+      animation-delay: -0.288s;
+    }
+    .lds-roller div:nth-child(8):after {
+      top: 56px;
+      left: 12px;
+    }
+    @keyframes lds-roller {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
+    }    
+</style>
+
+<div class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
diff --git a/src/components/WeatherCurrent.svelte b/src/components/WeatherCurrent.svelte
index 7ca6ac4..45bfe11 100644
--- a/src/components/WeatherCurrent.svelte
+++ b/src/components/WeatherCurrent.svelte
@@ -1,100 +1,11 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
+    import SpinnerRoller from './Spinner/SpinnerRoller.svelte';
 
+    import { onMount } from 'svelte';
+    import { navigator_location, earth_weather, space_weather } from '../stores';
     const monthNames = ["January", "February", "March", "April", "May", "June",
       "July", "August", "September", "October", "November", "December"
     ];
-
-    let longitude;
-	let latitude;
-	let locationSupported;
-	let dataLoading = true;
-
-    let location = "-";
-    let date = "-";
-    let kp_now = "-";
-    let kp_min = "-";
-    let kp_max = "-";
-    let bz = "-";
-    let clouds = "-";
-    let temp = "-";
-
-    async function getMETNorData(longitude, latitude) {
-        let yr_data = await fetch(`https://api.met.no/weatherapi/locationforecast/2.0/compact?lat=${latitude}&lon=${longitude}`).then(res => res.json());
-        clouds = yr_data["properties"]["timeseries"][0]["data"]["instant"]["details"]["cloud_area_fraction"];
-        temp =  yr_data["properties"]["timeseries"][0]["data"]["instant"]["details"]["air_temperature"];
-    }
-
-    async function getLocation(longitude, latitude) {
-        console.log(`https://geocode.xyz/${longitude},${latitude}?geoit=json`);
-        let locDat = await fetch(`https://geocode.xyz/${latitude},${longitude}?geoit=json`).then(r => r.json());
-        console.log(locDat);
-        location = locDat["city"];
-    }
-
-    async function getUSNOAAData() {
-        bz = (await fetch("https://services.swpc.noaa.gov/products/summary/solar-wind-mag-field.json").then(res => res.json()))["Bz"];
-        let kp_data = (await fetch('https://services.swpc.noaa.gov/products/noaa-planetary-k-index-forecast.json').then(res => res.json()));
-        kp_data.shift();
-
-        let cDate = new Date();
-        let closestDate = new Date(0,0,0);
-        let minkp = 1000; // Just a larger number than any plausable value
-        let maxkp = 0;
-
-        kp_data.forEach((pred, i) => {
-            if (pred[1] > maxkp) {
-                maxkp = pred[1];
-            }
-            if (pred[1] < minkp) {
-                minkp = pred[1];
-            }
-            let predDate = new Date(pred[0]);
-            if (Math.abs(predDate.getTime() - cDate.getTime()) < Math.abs(closestDate.getTime() - cDate.getTime())) {
-                closestDate = predDate;
-                kp_now = pred[1];
-            }
-        });
-        kp_min = minkp.toString();
-        kp_max = maxkp.toString();
-
-        date = closestDate.getDay() + ". " + monthNames[closestDate.getMonth()] + " " + closestDate.getHours() + ":" + closestDate.getMinutes();
-    }
-
-	function fetchData() {
-        getUSNOAAData();
-
-		if (navigator.geolocation) {
-			dataLoading = true
-			locationSupported = true
-			navigator.geolocation.getCurrentPosition(setLocation, locationError)
-		} else {
-    		locationSupported = false
-			noLocation()
-		}
-	}
-
-	function setLocation(position) {
-		longitude = position.coords.longitude
-		latitude = position.coords.latitude
-		getMETNorData(longitude, latitude)
-        getLocation(longitude, latitude);
-	}
-
-	function locationError(err) {
-		noLocation()
-	}
-
-	function noLocation() {
-		longitude = 28.283333
-		latitude = -15.416667
-		toggleLoading()
-	}
-	function toggleLoading() {
-		dataLoading = !dataLoading
-	}
-
-    onMount(fetchData);
 </script>
 
 <style>
@@ -138,6 +49,7 @@
         display: flex;
         justify-content: center;
         align-content: center;
+        align-items: flex-end;
     }
 
     .weatherCurrent-data-location .symbol {
@@ -181,35 +93,52 @@
 <div class="weatherCurrent-wrapper">
     <div class="weatherCurrent-data">
         <div class="weatherCurrent-data-location">
-            <i class="symbol fas fa-map-marker-alt"></i>
-            <h1>{location}</h1>
+            {#if !$navigator_location.updating && $navigator_location.available}
+                <i class="symbol fas fa-map-marker-alt"></i>
+                <h1>{$navigator_location.city}</h1>
+            {/if}
         </div>
 
         <div class="weatherCurrent-data-date">
-            <p>{date}</p>
+        {#if $earth_weather.updating || $space_weather.updating}
+        {:else}
+            {#if Math.abs($earth_weather.updated - $space_weather.updated) > 60*10*1000}
+                <p>There is more than 10 minutes difference between data updates</p>
+            {:else}
+                <p>{$earth_weather.updated.toLocaleString("no-NO", {dateStyle: "medium", timeStyle: "short"})}</p>
+            {/if}
+        {/if}
         </div>
 
         <div class="weatherCurrent-data-kp">
-            <h2>KP {kp_now}</h2>
-            <p>
-                <span className="pr-2">&uarr; KP {kp_max}</span>
-                <span className="pl-2">&darr; KP {kp_min}</span>
-            </p>
+            {#if $space_weather.updating || $earth_weather.updating}
+                <SpinnerRoller />
+            {:else}
+                <h2>KP {$space_weather.now.kp}</h2>
+                <p>
+                    <span className="pr-2">&uarr; KP {$space_weather.now.kp_max}</span>
+                    <span className="pl-2">&darr; KP {$space_weather.now.kp_min}</span>
+                </p>
+            {/if}
         </div>
 
         <div class="current-details">
-            <div>
-                <p>BZ</p>
-                <p>{bz}</p>
-            </div>
-            <div>
-                <p>Temp</p>
-                <p>{temp}°C</p>
-            </div>
-            <div>
-                <p>Clouds</p>
-                <p>{clouds}%</p>
-            </div>
+            {#if !$space_weather.updating && !$earth_weather.updating}
+                <div>
+                    <p>BZ</p>
+                    <p>{$space_weather.now.bz}</p>
+                </div>
+                {#if $earth_weather.available}
+                <div>
+                    <p>Temp</p>
+                    <p>{$earth_weather.now.temp}°C</p>
+                </div>
+                <div>
+                    <p>Clouds</p>
+                    <p>{$earth_weather.now.clouds}%</p>
+                </div>
+                {/if}
+            {/if}
         </div>
 
     </div>
-- 
cgit v1.2.3