diff options
Diffstat (limited to 'src/components/PredictedSpaceWeather.svelte')
| -rw-r--r-- | src/components/PredictedSpaceWeather.svelte | 114 |
1 files changed, 55 insertions, 59 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> |