From 57c5a27e8590bf1e847842ae6c9e8c82e959ccd3 Mon Sep 17 00:00:00 2001
From: Jakob Stendahl <jakobste@uio.no>
Date: Wed, 14 Oct 2020 13:19:39 +0200
Subject: Clean up some js, and make the UI a bit prettier

---
 src/components/PredictedSpaceWeather.svelte      | 114 +++++++++++------------
 src/components/PredictedSpaceWeatherThing.svelte |   3 +
 src/components/WeatherCurrent.svelte             |  48 +++++-----
 src/routes/index.svelte                          |   6 +-
 4 files changed, 84 insertions(+), 87 deletions(-)

diff --git a/src/components/PredictedSpaceWeather.svelte b/src/components/PredictedSpaceWeather.svelte
index 9194447..27fd02d 100644
--- a/src/components/PredictedSpaceWeather.svelte
+++ b/src/components/PredictedSpaceWeather.svelte
@@ -1,43 +1,26 @@
 <script lang="ts">
-    // import { onMount } from 'svelte';
     import PredictedSpaceWeatherThing from './PredictedSpaceWeatherThing.svelte';
-
-    let predictions;
-    // async function haschange() {
-    //     let data = await fetch(`https://api.met.no/weatherapi/locationforecast/2.0/compact?lat=${latitude}&lon=${longitude}`).then(res => res.json());
-    //     let data = await fetch("https://services.swpc.noaa.gov/products/noaa-planetary-k-index-forecast.json").then(res => res.json());
-    //     data.shift();
-    //     let updatedPredictions = [];
-    //     data.forEach((pred, i) => {
-    //         if (pred[2] != "observed") {
-    //             updatedPredictions.push(pred);
-    //         }
-    //     });
-    //     predictions = updatedPredictions;
-    // }
-    //
-    // onMount(haschange);
-
-
-
     import { onMount } from 'svelte';
+
     const monthNames = ["January", "February", "March", "April", "May", "June",
       "July", "August", "September", "October", "November", "December"
     ];
 
     let longitude;
     let latitude;
-    let locationSupported;
+    let locationSupported = false;
     let dataLoading = true;
-    let defaultLocation = false;
-    let weather;
-    let days = Array();
 
-    async function getWeather(longitude, latitude) {
-        let yr_data = await fetch(`https://api.met.no/weatherapi/locationforecast/2.0/compact?lat=${latitude}&lon=${longitude}`).then(res => res.json());
+    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());
+        }
         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") {
@@ -45,33 +28,30 @@
                 let clouds;
                 let cDate = new Date(pred[0]);
                 let closestDate = new Date(0,0,0);
-                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"];
-                    }
-                })
+
+                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
+                    "clouds": clouds,
+                    "hasNOMETData": locationSupported
                 });
             }
         });
         predictions = updatedPredictions;
     }
-    function getDays(daily) {
-        var data = daily.data.slice(0,5)
-        data.forEach(element => {
-            var a = new Date(element.time*1000)
-            var dayStrings = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
-            days.push(dayStrings[a.getDay()])
-        });
-    }
+
     function getLocation() {
         if (navigator.geolocation) {
             dataLoading = true
@@ -96,19 +76,20 @@
     function noLocation() {
         longitude = 28.283333
         latitude = -15.416667
+        getWeather(0, 0);
         toggleLoading()
     }
     function toggleLoading() {
         dataLoading = !dataLoading
     }
-    function toggleDefault() {
-        defaultLocation = !defaultLocation
-    }
+
     onMount(getLocation);
 </script>
 
 <style>
     .predicted-weather {
+        border-top-left-radius: 2rem;
+        border-top-right-radius: 2rem;
         --bg-opacity: 1;
         background-color: #f7fafc;
         background-color: rgba(247, 250, 252, var(--bg-opacity));
@@ -118,10 +99,7 @@
         color: rgba(26, 32, 44, var(--text-opacity));
         height: 100%;
         overflow: hidden;
-
-        /* border-top-left-radius: 1rem;
-        border-top-right-radius: 1rem;
-        transform: translatey(-1rem); */
+        align-self: stretch;
     }
 
     @media (min-width: 640px), (min-height: 720px) {
@@ -156,19 +134,37 @@
     .prediction-table::-webkit-scrollbar {
         display: none;
     }
+
+    .no-data {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        color: grey;
+
+    }
+
+    .no-data {
+        margin-top: 1rem;
+    }
 </style>
 
 <div class="predicted-weather">
-	<div className="flex flex-row justify-between items-top">
-		<h2>Predicted</h2>
-	</div>
-    <div class="prediction-table">
-        {#if predictions}
+    {#if predictions}
+    	<div className="flex flex-row justify-between items-top">
+    		<h2>Predicted</h2>
+    	</div>
+        <div class="prediction-table">
             {#each predictions as prediction, i}
                 <PredictedSpaceWeatherThing {prediction}/>
             {/each}
-        {:else}
-            Cannot connect to NOAA
-        {/if}
-    </div>
+        </div>
+    {:else}
+        <div class="no-data">
+            <i class="fas fa-7x fa-exclamation-triangle"></i>
+            <p>No prediction data</p>
+        </div>
+    {/if}
 </div>
diff --git a/src/components/PredictedSpaceWeatherThing.svelte b/src/components/PredictedSpaceWeatherThing.svelte
index 0a40e79..5c4cb5b 100644
--- a/src/components/PredictedSpaceWeatherThing.svelte
+++ b/src/components/PredictedSpaceWeatherThing.svelte
@@ -11,6 +11,7 @@
     let time = dateTime[1].substring(0,5);
     let temp = prediction["temp"];
     let clouds = prediction["clouds"];
+    let hasNOMETData = prediction["hasNOMETData"];
 </script>
 
 <style>
@@ -56,9 +57,11 @@
     </div>
     <div class="data">
         <h2>{kp}</h2>
+        {#if hasNOMETData}
         <div>
             <p><i class="fas fa-thermometer-half"></i> {temp}°C</p>
             <p><i class="fas fa-cloud"></i> {clouds}%</p>
         </div>
+        {/if}
     </div>
 </div>
diff --git a/src/components/WeatherCurrent.svelte b/src/components/WeatherCurrent.svelte
index 93dbbd6..ef67171 100644
--- a/src/components/WeatherCurrent.svelte
+++ b/src/components/WeatherCurrent.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { onMount } from 'svelte';
+
     const monthNames = ["January", "February", "March", "April", "May", "June",
       "July", "August", "September", "October", "November", "December"
     ];
@@ -8,9 +9,6 @@
 	let latitude;
 	let locationSupported;
 	let dataLoading = true;
-	let defaultLocation = false;
-	let weather;
-	let days = Array();
 
     let location = "The earth";
     let date = "-";
@@ -19,14 +17,19 @@
     let kp_max = "-";
     let bz = "-";
     let clouds = "-";
+    let temp = "-";
 
-	async function getWeather(longitude, latitude) {
+    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 getUSNOAAData() {
         bz = (await fetch("https://services.swpc.noaa.gov/products/summary/solar-wind-mag-field.json").then(res => res.json()))["Bz"];
-        //console.log (await fetch(`http://maps.googleapis.com/maps/api/geocode/json?latlng=${latitude},${longitude}&sensor=true`).then(res => res.json()));
-        let kp_data = await fetch('https://services.swpc.noaa.gov/products/noaa-planetary-k-index-forecast.json').then(res => res.json());
+        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
@@ -48,17 +51,12 @@
         kp_min = minkp.toString();
         kp_max = maxkp.toString();
 
-        date = cDate.getDay() + ". " + monthNames[cDate.getMonth()] + " " + cDate.getHours() + ":" + cDate.getMinutes();
-	}
-	function getDays(daily) {
-		var data = daily.data.slice(0,5)
-		data.forEach(element => {
-			var a = new Date(element.time*1000)
-			var dayStrings = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
-			days.push(dayStrings[a.getDay()])
-		});
-	}
-	function getLocation() {
+        date = closestDate.getDay() + ". " + monthNames[closestDate.getMonth()] + " " + closestDate.getHours() + ":" + closestDate.getMinutes();
+    }
+
+	function fetchData() {
+        getUSNOAAData();
+
 		if (navigator.geolocation) {
 			dataLoading = true
 			locationSupported = true
@@ -72,7 +70,7 @@
 	function setLocation(position) {
 		longitude = position.coords.longitude
 		latitude = position.coords.latitude
-		getWeather(longitude, latitude)
+		getMETNorData(longitude, latitude)
 	}
 
 	function locationError(err) {
@@ -87,16 +85,15 @@
 	function toggleLoading() {
 		dataLoading = !dataLoading
 	}
-	function toggleDefault() {
-		defaultLocation = !defaultLocation
-	}
-    onMount(getLocation);
+
+    onMount(fetchData);
 </script>
 
 <style>
 
     .weatherCurrent-wrapper {
-        height: 100%;
+        height: calc(100% + 2rem);
+        align-self: stretch;
         font-family: Roboto, sans-serif;
         font-size: 1rem;
         letter-spacing: 0.05em;
@@ -162,6 +159,7 @@
         grid-template-columns: repeat(3, minmax(0, 1fr));
         grid-gap: 1rem;
         gap: 1rem;
+        padding-bottom: 0.5rem;
         text-shadow: 1px 1px 2px rgba(0,0,0,.75);
     }
 
@@ -197,8 +195,8 @@
                 <p>{bz}</p>
             </div>
             <div>
-                <p>Probability</p>
-                <p>10%</p>
+                <p>Temp</p>
+                <p>{temp}°C</p>
             </div>
             <div>
                 <p>Clouds</p>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 655f0c4..bf54b6a 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -6,9 +6,9 @@
 
 <style>
     .homescreen {
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
+        display: grid;
+        grid-template-rows: 40vh auto;
+        grid-row-gap: 0;
         height: 100%;
         --bg-opacity: 1;
         background-color: #1a202c;
-- 
cgit v1.2.3