Add chip showing that value is estimated, and add bt value

5 files changed, 51 insertions, 8 deletions

diff --git a/src/components/Basic/Chip.svelte b/src/components/Basic/Chip.svelte
new file mode 100644
index 0000000..b8697ae
--- /dev/null
+++ b/src/components/Basic/Chip.svelte
@@ -0,0 +1,13 @@
+<style>
+    .chip {
+        padding: 3px 5px;
+        box-sizing: border-box;
+        border-radius: 20px;
+        background: linear-gradient(90deg, #84fab0, #8fd3f4 51%, #84fab0) 100% / 200%;
+        color: white;
+    }
+</style>
+
+<div class="chip">
+    <slot></slot>
+</div>
diff --git a/src/components/PredictedSpaceWeather.svelte b/src/components/PredictedSpaceWeather.svelte
index 35f1a84..2282a40 100644
--- a/src/components/PredictedSpaceWeather.svelte
+++ b/src/components/PredictedSpaceWeather.svelte
@@ -20,10 +20,12 @@
         }
 
         // First just reorganize the space_weather data
-        predictions = $space_weather.usnoaa_data_raw.noaa_planetary_k_index_forecast.map(
+        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
diff --git a/src/components/PredictedSpaceWeatherThing.svelte b/src/components/PredictedSpaceWeatherThing.svelte
index 7c343e9..13bf1c2 100644
--- a/src/components/PredictedSpaceWeatherThing.svelte
+++ b/src/components/PredictedSpaceWeatherThing.svelte
@@ -1,4 +1,6 @@
 <script>
+    import Chip from "./Basic/Chip.svelte";
+
     export let prediction;
 
     const monthNames = ["January", "February", "March", "April", "May", "June",
@@ -24,12 +26,12 @@
 <style>
     .prediction-details {
       display: flex;
-      justify-content: space-between;
       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 {
@@ -37,6 +39,14 @@
       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;
@@ -54,6 +64,13 @@
         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>
 
@@ -62,12 +79,17 @@
         <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> {temp}°C</p>
-            <p><i class="fas fa-cloud"></i> {clouds}%</p>
+            <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>
diff --git a/src/components/WeatherCurrent.svelte b/src/components/WeatherCurrent.svelte
index 45bfe11..8578692 100644
--- a/src/components/WeatherCurrent.svelte
+++ b/src/components/WeatherCurrent.svelte
@@ -76,7 +76,7 @@
 
     .current-details {
         display: grid;
-        grid-template-columns: repeat(3, minmax(0, 1fr));
+        grid-template-columns: repeat(4, minmax(0, 1fr));
         grid-gap: 1rem;
         gap: 1rem;
         padding-bottom: 1.5rem;
@@ -93,15 +93,14 @@
 <div class="weatherCurrent-wrapper">
     <div class="weatherCurrent-data">
         <div class="weatherCurrent-data-location">
-            {#if !$navigator_location.updating && $navigator_location.available}
+            {#if !$navigator_location.updating && $navigator_location.available && !$earth_weather.updating && !$space_weather.updating}
                 <i class="symbol fas fa-map-marker-alt"></i>
                 <h1>{$navigator_location.city}</h1>
             {/if}
         </div>
 
         <div class="weatherCurrent-data-date">
-        {#if $earth_weather.updating || $space_weather.updating}
-        {:else}
+        {#if !$earth_weather.updating && !$space_weather.updating}
             {#if Math.abs($earth_weather.updated - $space_weather.updated) > 60*10*1000}
                 <p>There is more than 10 minutes difference between data updates</p>
             {:else}
@@ -128,6 +127,10 @@
                     <p>BZ</p>
                     <p>{$space_weather.now.bz}</p>
                 </div>
+                <div>
+                    <p>BT</p>
+                    <p>{$space_weather.now.bt}</p>
+                </div>
                 {#if $earth_weather.available}
                 <div>
                     <p>Temp</p>
diff --git a/src/stores.ts b/src/stores.ts
index 459473d..05da19b 100644
--- a/src/stores.ts
+++ b/src/stores.ts
@@ -127,6 +127,7 @@ async function getSpaceWeather() {
     let ret = {
         "now": {
             "bz": "-",
+            "bt": "-",
             "kp": "-",
             "kp_min": "-",
             "kp_max": "-"
@@ -141,6 +142,7 @@ async function getSpaceWeather() {
     ret.usnoaa_data_raw.solar_wind_mag_field = await res.json();
     ret.usnoaa_data_raw.solar_wind_mag_field.TimeStamp = new Date(ret.usnoaa_data_raw.solar_wind_mag_field.TimeStamp + " UTC");
     ret.now.bz = ret.usnoaa_data_raw.solar_wind_mag_field["Bz"];
+    ret.now.bt = ret.usnoaa_data_raw.solar_wind_mag_field["Bt"];
 
     res = await fetch("https://services.swpc.noaa.gov/products/noaa-planetary-k-index-forecast.json")
     ret.usnoaa_data_raw.noaa_planetary_k_index_forecast = await res.json()
@@ -174,6 +176,7 @@ async function getSpaceWeather() {
     ret.now.kp_min = minkp.toString();
     ret.now.kp_max = maxkp.toString();
 
+    console.log(ret);
     return ret;
 }