aboutsummaryrefslogtreecommitdiff
path: root/src/components/PredictedSpaceWeather.svelte
diff options
context:
space:
mode:
authorJakob Stendahl <jakob.stendahl@outlook.com>2022-04-28 01:32:54 +0200
committerJakob Stendahl <jakob.stendahl@outlook.com>2022-04-28 01:33:08 +0200
commit55cd53f4e6b1e13d2866a84a9631be8f89651cf2 (patch)
tree5b77ffc3311b490d4f979055e97823011280aace /src/components/PredictedSpaceWeather.svelte
parentae52909d00cdcda30d6ed07e302c0a50abe70b75 (diff)
downloadAurora-data-55cd53f4e6b1e13d2866a84a9631be8f89651cf2.tar.gz
Aurora-data-55cd53f4e6b1e13d2866a84a9631be8f89651cf2.zip
Add one hour forecast
Diffstat (limited to 'src/components/PredictedSpaceWeather.svelte')
-rw-r--r--src/components/PredictedSpaceWeather.svelte143
1 files changed, 0 insertions, 143 deletions
diff --git a/src/components/PredictedSpaceWeather.svelte b/src/components/PredictedSpaceWeather.svelte
deleted file mode 100644
index 2282a40..0000000
--- a/src/components/PredictedSpaceWeather.svelte
+++ /dev/null
@@ -1,143 +0,0 @@
-<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 predictions;
-
- space_weather.subscribe(assembleWeatherData);
- earth_weather.subscribe(assembleWeatherData);
-
- async function assembleWeatherData() {
- if ($space_weather.updating || $earth_weather.updating) {
- predictions = null;
- return;
- }
-
- // First just reorganize the space_weather data
- let forecast = $space_weather.usnoaa_data_raw.noaa_planetary_k_index_forecast.filter(x => x.observed !== "observed");
- predictions = forecast.map(
- pred => ({
- "time": pred.time,
- "kp": pred.kp,
- "observed": pred.observed,
- "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;
-
- $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[i] = {
- ...predictions[i], "temp": temp, "clouds": clouds
- }
- });
- }
-
- }
-
-</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));
- padding: 1.5rem;
- --text-opacity: 1;
- color: #1a202c;
- color: rgba(26, 32, 44, var(--text-opacity));
- height: 100%;
- overflow: hidden;
- align-self: stretch;
- box-shadow: 0px -6px 7px 0px black;
- }
-
- @media (min-width: 640px), (min-height: 720px) {
- .predicted-weather {
- padding: 2rem;
- padding-top: 1.5rem;
- }
- }
-
- @media (min-width: 640px) {
- .predicted-weather {
- border-bottom-right-radius: 1rem;
- border-bottom-left-radius: 1rem;
- }
- }
-
- .predicted-weather h2 {
- text-transform: uppercase;
- font-size: 0.875rem;
- letter-spacing: 0.1em;
- font-weight: 700;
- margin-top: 0.25rem;
- margin-bottom: 0.5rem;
- }
-
- .prediction-table {
- height: 100%;
- overflow-y: scroll;
- padding-bottom: 1rem;
- }
-
- .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">
- {#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}
- </div>
- {:else}
- <div class="no-data">
- <i class="fas fa-7x fa-exclamation-triangle"></i>
- <p>No prediction data</p>
- </div>
- {/if}
-</div>