From 5dc48738e6f2800fde963a7581e200bd4de18463 Mon Sep 17 00:00:00 2001
From: Jakob Stendahl <jakob.stendahl@outlook.com>
Date: Thu, 28 Apr 2022 10:51:09 +0200
Subject: Add 27-day outlook

---
 .../OutlookTwentySevenDay.svelte                   | 81 +++++++++++++++++++
 .../OutlookTwentySevenDay/PredictionItem.svelte    | 91 ++++++++++++++++++++++
 2 files changed, 172 insertions(+)
 create mode 100644 src/components/Forecast/OutlookTwentySevenDay/OutlookTwentySevenDay.svelte
 create mode 100644 src/components/Forecast/OutlookTwentySevenDay/PredictionItem.svelte

(limited to 'src/components/Forecast/OutlookTwentySevenDay')

diff --git a/src/components/Forecast/OutlookTwentySevenDay/OutlookTwentySevenDay.svelte b/src/components/Forecast/OutlookTwentySevenDay/OutlookTwentySevenDay.svelte
new file mode 100644
index 0000000..824433d
--- /dev/null
+++ b/src/components/Forecast/OutlookTwentySevenDay/OutlookTwentySevenDay.svelte
@@ -0,0 +1,81 @@
+<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.outlook_27_day.filter(x => x.time >= new Date());
+        predictions = forecast.map(
+            pred => ({
+                "time": pred.time,
+                "kp": pred.kindex,
+                "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 weatherData = true;
+
+                $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())) {
+                        if ((Math.abs(predDate.getTime() - pred.time.getTime())) > (86400 * 1000)) {
+                            weatherData = false;
+                            return;
+                        }
+                        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, "hasNOMETData": weatherData
+                }
+            });
+        }
+
+    }
+
+</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/OutlookTwentySevenDay/PredictionItem.svelte b/src/components/Forecast/OutlookTwentySevenDay/PredictionItem.svelte
new file mode 100644
index 0000000..201c4f5
--- /dev/null
+++ b/src/components/Forecast/OutlookTwentySevenDay/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>
-- 
cgit v1.2.3