Add 27-day outlook

4 files changed, 180 insertions, 1 deletions

diff --git a/src/components/Forecast/ForecastDrawer.svelte b/src/components/Forecast/ForecastDrawer.svelte
index b47a810..9f69f17 100644
--- a/src/components/Forecast/ForecastDrawer.svelte
+++ b/src/components/Forecast/ForecastDrawer.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import OneHourForecast from "./OneHourForecast/OneHourForecast.svelte";
     import ThreeDayForecast from "./ThreeDayForecast/ThreeDayForecast.svelte";
+    import OutlookTwentySevenDay from "./OutlookTwentySevenDay/OutlookTwentySevenDay.svelte";
 
     import { earth_weather, space_weather } from "../../stores.ts";
 
@@ -96,6 +97,7 @@
             <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 class:selected={selected_version == OutlookTwentySevenDay} on:click={() => selected_version = OutlookTwentySevenDay}>Long time</div>
             </div>
     	</div>
         <svelte:component this={selected_version} />
diff --git a/src/components/Forecast/OneHourForecast/OneHourForecast.svelte b/src/components/Forecast/OneHourForecast/OneHourForecast.svelte
index 3222dc8..062ffbd 100644
--- a/src/components/Forecast/OneHourForecast/OneHourForecast.svelte
+++ b/src/components/Forecast/OneHourForecast/OneHourForecast.svelte
@@ -37,10 +37,15 @@
                 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())) > (3600 * 5 * 1000)) {
+                            weatherData = false;
+                            return;
+                        }
                         closestDate = predDate;
                         temp = (earth_pred["data"]["instant"]["details"]["air_temperature"]);
                         clouds = earth_pred["data"]["instant"]["details"]["cloud_area_fraction"];
@@ -48,7 +53,7 @@
                 });
 
                 predictions[i] = {
-                    ...predictions[i], "temp": temp, "clouds": clouds
+                    ...predictions[i], "temp": temp, "clouds": clouds, "hasNOMETData": weatherData
                 }
             });
         }
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>