From 55cd53f4e6b1e13d2866a84a9631be8f89651cf2 Mon Sep 17 00:00:00 2001
From: Jakob Stendahl <jakob.stendahl@outlook.com>
Date: Thu, 28 Apr 2022 01:32:54 +0200
Subject: Add one hour forecast

---
 src/components/Forecast/ForecastDrawer.svelte      | 108 +++++++++++++++++++++
 .../OneHourForecast/OneHourForecast.svelte         |  76 +++++++++++++++
 .../Forecast/OneHourForecast/PredictionItem.svelte |  91 +++++++++++++++++
 .../ThreeDayForecast/PredictionItem.svelte         |  96 ++++++++++++++++++
 .../ThreeDayForecast/ThreeDayForecast.svelte       |  77 +++++++++++++++
 5 files changed, 448 insertions(+)
 create mode 100644 src/components/Forecast/ForecastDrawer.svelte
 create mode 100644 src/components/Forecast/OneHourForecast/OneHourForecast.svelte
 create mode 100644 src/components/Forecast/OneHourForecast/PredictionItem.svelte
 create mode 100644 src/components/Forecast/ThreeDayForecast/PredictionItem.svelte
 create mode 100644 src/components/Forecast/ThreeDayForecast/ThreeDayForecast.svelte

(limited to 'src/components/Forecast')

diff --git a/src/components/Forecast/ForecastDrawer.svelte b/src/components/Forecast/ForecastDrawer.svelte
new file mode 100644
index 0000000..b47a810
--- /dev/null
+++ b/src/components/Forecast/ForecastDrawer.svelte
@@ -0,0 +1,108 @@
+<script lang="ts">
+    import OneHourForecast from "./OneHourForecast/OneHourForecast.svelte";
+    import ThreeDayForecast from "./ThreeDayForecast/ThreeDayForecast.svelte";
+
+    import { earth_weather, space_weather } from "../../stores.ts";
+
+    let selected_version = ThreeDayForecast;
+
+</script>
+
+<style>
+    .drawer {
+        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) {
+        .drawer {
+            padding: 2rem;
+            padding-top: 1.5rem;
+        }
+    }
+
+    @media (min-width: 640px) {
+        .drawer {
+            border-bottom-right-radius: 1rem;
+            border-bottom-left-radius: 1rem;
+        }
+    }
+
+    .drawer .header {
+        display: flex;
+        align-items: flex-start;
+    }
+
+    .drawer h2 {
+        text-transform: uppercase;
+        font-size: 0.875rem;
+        letter-spacing: 0.1em;
+        font-weight: 700;
+        margin-top: 0.25rem;
+        margin-bottom: 0.5rem;
+        margin-right: auto;
+    }
+
+    .version-picker {
+        display: flex;
+        font-size: 0.875rem;
+        gap: 0.5rem;
+        align-items: center;
+        color: #616161;
+    }
+    .version-picker > * {
+        transition: all 0.1s ease;
+    }
+
+    .version-picker .selected {
+        background-color: #c2c2c2;
+        padding: 3px 5px;
+        box-sizing: border-box;
+        border-radius: 10px;
+        color: black;
+    }
+
+    .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="drawer">
+    {#if !$earth_weather.updating && !$space_weather.updating}
+        <div class="header">
+    		<h2>Forecast</h2>
+            <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>
+    	</div>
+        <svelte:component this={selected_version} />
+    {: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/Forecast/OneHourForecast/OneHourForecast.svelte b/src/components/Forecast/OneHourForecast/OneHourForecast.svelte
new file mode 100644
index 0000000..3222dc8
--- /dev/null
+++ b/src/components/Forecast/OneHourForecast/OneHourForecast.svelte
@@ -0,0 +1,76 @@
+<script lang="ts">
+    import PredictionItem from './PredictionItem.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.geospace_pred_est_kp_1_hour.filter(x => x.model_prediction_time >= new Date());
+        predictions = forecast.map(
+            pred => ({
+                "time": pred.model_prediction_time,
+                "kp": Math.round(pred.k),
+                "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>
+    .prediction-table {
+        height: 100%;
+        overflow-y: scroll;
+        padding-bottom: 1rem;
+    }
+
+    .prediction-table::-webkit-scrollbar {
+        display: none;
+    }
+</style>
+
+<div class="prediction-table">
+    {#each predictions as prediction, i}
+        <PredictionItem {prediction}/>
+    {/each}
+</div>
diff --git a/src/components/Forecast/OneHourForecast/PredictionItem.svelte b/src/components/Forecast/OneHourForecast/PredictionItem.svelte
new file mode 100644
index 0000000..201c4f5
--- /dev/null
+++ b/src/components/Forecast/OneHourForecast/PredictionItem.svelte
@@ -0,0 +1,91 @@
+<script>
+    import Chip from "../../Basic/Chip.svelte";
+
+    export let prediction;
+
+    const monthNames = ["January", "February", "March", "April", "May", "June",
+      "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 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"];
+</script>
+
+<style>
+    .prediction-details {
+      display: flex;
+      border-bottom-width: 1px;
+      padding-top: 0.5rem;
+      padding-bottom: 0.5rem;
+      font-size: 0.75rem;
+      letter-spacing: 0.05em;
+      align-items: center;
+    }
+
+    .prediction-details:last-of-type {
+      border-width: 0;
+      padding-bottom: 0;
+    }
+
+    .prediction-details > * {
+      margin: 5px;
+    }
+
+    .prediction-details div:last-child {
+      margin-left: auto;
+    }
+
+    .prediction-details h3 {
+      font-size: 0.875rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      margin-right: 0.5rem;
+    }
+
+    .prediction-details .data {
+        display: flex;
+        flex-direction: row;
+    }
+
+    .prediction-details .data h2 {
+        margin-right: 1rem;
+        font-size: 1.5rem;
+    }
+    .prediction-details .data p {
+        min-width: 3.3rem;
+    }
+    .prediction-details .data i {
+        width: 1rem;
+        text-align: center;
+    }
+
+</style>
+
+<div class="prediction-details">
+    <div>
+        <h3>{time}</h3>
+        <p>{date}</p>
+    </div>
+    <div class="data">
+        <h2>{kp}</h2>
+        {#if hasNOMETData}
+        <div>
+            <p><i class="fas fa-thermometer-half"></i> {Math.round(temp)}°C</p>
+            <p><i class="fas fa-cloud"></i> {Math.round(clouds)}%</p>
+        </div>
+        {/if}
+    </div>
+</div>
diff --git a/src/components/Forecast/ThreeDayForecast/PredictionItem.svelte b/src/components/Forecast/ThreeDayForecast/PredictionItem.svelte
new file mode 100644
index 0000000..0d4a94d
--- /dev/null
+++ b/src/components/Forecast/ThreeDayForecast/PredictionItem.svelte
@@ -0,0 +1,96 @@
+<script>
+    import Chip from "../../Basic/Chip.svelte";
+
+    export let prediction;
+
+    const monthNames = ["January", "February", "March", "April", "May", "June",
+      "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 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"];
+</script>
+
+<style>
+    .prediction-details {
+      display: flex;
+      border-bottom-width: 1px;
+      padding-top: 0.5rem;
+      padding-bottom: 0.5rem;
+      font-size: 0.75rem;
+      letter-spacing: 0.05em;
+      align-items: center;
+    }
+
+    .prediction-details:last-of-type {
+      border-width: 0;
+      padding-bottom: 0;
+    }
+
+    .prediction-details > * {
+      margin: 5px;
+    }
+
+    .prediction-details div:last-child {
+      margin-left: auto;
+    }
+
+    .prediction-details h3 {
+      font-size: 0.875rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      margin-right: 0.5rem;
+    }
+
+    .prediction-details .data {
+        display: flex;
+        flex-direction: row;
+    }
+
+    .prediction-details .data h2 {
+        margin-right: 1rem;
+        font-size: 1.5rem;
+    }
+    .prediction-details .data p {
+        min-width: 3.3rem;
+    }
+    .prediction-details .data i {
+        width: 1rem;
+        text-align: center;
+    }
+
+</style>
+
+<div class="prediction-details">
+    <div>
+        <h3>{time}</h3>
+        <p>{date}</p>
+    </div>
+    {#if prediction.observed != "predicted"}
+        <div>
+            <Chip>{prediction.observed}</Chip>
+        </div>
+    {/if}
+    <div class="data">
+        <h2>{kp}</h2>
+        {#if hasNOMETData}
+        <div>
+            <p><i class="fas fa-thermometer-half"></i> {Math.round(temp)}°C</p>
+            <p><i class="fas fa-cloud"></i> {Math.round(clouds)}%</p>
+        </div>
+        {/if}
+    </div>
+</div>
diff --git a/src/components/Forecast/ThreeDayForecast/ThreeDayForecast.svelte b/src/components/Forecast/ThreeDayForecast/ThreeDayForecast.svelte
new file mode 100644
index 0000000..7e13c2b
--- /dev/null
+++ b/src/components/Forecast/ThreeDayForecast/ThreeDayForecast.svelte
@@ -0,0 +1,77 @@
+<script lang="ts">
+    import PredictionItem from './PredictionItem.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>
+    .prediction-table {
+        height: 100%;
+        overflow-y: scroll;
+        padding-bottom: 1rem;
+    }
+
+    .prediction-table::-webkit-scrollbar {
+        display: none;
+    }
+</style>
+
+<div class="prediction-table">
+    {#each predictions as prediction, i}
+        <PredictionItem {prediction}/>
+    {/each}
+</div>
-- 
cgit v1.2.3