add modal explaining wave data

Austionian · Oct 18, 2024 · 3d93ed2 · 3d93ed2
1 parent 3c498f4
commit 3d93ed2
Show file tree

Hide file tree

Showing 7 changed files with 141 additions and 18 deletions.
diff --git a/assets/static/index.min.js b/assets/static/index.min.js
diff --git a/assets/styles.css b/assets/styles.css
diff --git a/client/parsers/realtime.js b/client/parsers/realtime.js
@@ -21,6 +21,7 @@ import {
  * @property {?string} wave_direction
  * @property {?string} wave_period
  * @property {string} as_of
+ * @property {boolean} loaded_from_fallback - Wether the latest data used a bouy or land data.
  */
 
 /**
@@ -83,6 +84,10 @@ export function parseRealtime(data) {
   removeHidden("wave-icon-container");
   removeStyle("as-of-container", "animate-pulse");
   removeHidden("wave-quality");
+
+  if (data.loaded_from_fallback) {
+    removeHidden("wave-fallback-icon");
+  }
 }
 
 /**

diff --git a/src/realtime.rs b/src/realtime.rs
@@ -23,6 +23,7 @@ pub struct Realtime {
     pub wave_height: Option<String>,
     pub wave_period: Option<u8>,
     pub wave_direction: Option<u16>,
+    pub loaded_from_fallback: bool,
 }
 
 impl Realtime {
@@ -31,6 +32,8 @@ impl Realtime {
 
         let data = Self::get_latest_data(&spot, realtime_url).await?;
 
+        let mut loaded_from_fallback = !spot.has_bouy;
+
         let latest = data.lines().collect::<Vec<_>>();
         let line = latest.get(2).unwrap();
 
@@ -41,15 +44,32 @@ impl Realtime {
         // Check if the bouy data is older than a day, if so fallback to other path.
         if Utc::now() - as_of > TimeDelta::days(1) {
             let data = Self::get_fallback_data(&spot, realtime_url, FALLBACK_BOUY).await?;
+            loaded_from_fallback = true;
             let latest = data.lines().collect::<Vec<_>>();
             let line = latest.get(2).unwrap();
 
             let (as_of, measurements) = line.split_at(16);
             let as_of = Self::parse_as_of(as_of)?;
-            return Self::parse_data(measurements, &latest, &as_of, &spot, realtime_url).await;
+            return Self::parse_data(
+                measurements,
+                &latest,
+                &as_of,
+                &spot,
+                realtime_url,
+                loaded_from_fallback,
+            )
+            .await;
         }
 
-        Self::parse_data(measurements, &latest, &as_of, &spot, realtime_url).await
+        Self::parse_data(
+            measurements,
+            &latest,
+            &as_of,
+            &spot,
+            realtime_url,
+            loaded_from_fallback,
+        )
+        .await
     }
 
     async fn parse_data(
@@ -58,6 +78,7 @@ impl Realtime {
         as_of: &DateTime<Utc>,
         spot: &Spot,
         realtime_url: &str,
+        loaded_from_fallback: bool,
     ) -> anyhow::Result<Self> {
         // MID Lake bouy is in the water yeat round
         // const MID_LAKE_BOUY: &str = "https://www.ndbc.noaa.gov/data/realtime2/45214.txt";
@@ -149,6 +170,7 @@ impl Realtime {
             wave_height,
             wave_period,
             wave_direction,
+            loaded_from_fallback,
         })
     }
 

diff --git a/src/spot.rs b/src/spot.rs
@@ -23,6 +23,7 @@ pub struct Spot {
     pub location: Location,
     pub live_feed_url: Option<&'static str>,
     pub name: &'static str,
+    pub has_bouy: bool,
 }
 
 fn get_status_query(id: &str) -> String {
@@ -62,7 +63,8 @@ impl From<SpotParam> for Spot {
                 fallback_realtime_path: None,
                 location: Location::Bradford,
                 live_feed_url: None,
-                name: "Bradford"
+                name: "Bradford",
+                has_bouy: false,
             },
             Location::PortWashington => Spot {
                 forecast_path: PORT_WASHINGTON_PATH,
@@ -72,7 +74,8 @@ impl From<SpotParam> for Spot {
                 fallback_realtime_path: None,
                 location: Location::PortWashington,
                 live_feed_url: None,
-                name: "Port Washington"
+                name: "Port Washington",
+                has_bouy: false,
             },
             Location::Sheboygan => Spot {
                 forecast_path: SHEBOYGAN_PATH,
@@ -82,7 +85,8 @@ impl From<SpotParam> for Spot {
                 fallback_realtime_path: Some(SHEBOYGAN_FALLBACK_REALTIME_PATH),
                 location: Location::Sheboygan,
                 live_feed_url: Some("https://www.youtube-nocookie.com/embed/p780CkCgNVE?si=qBa_a4twCnOprcG1&amp;controls=0"),
-                name: "Sheboygan - North"
+                name: "Sheboygan - North",
+                has_bouy: true,
             },
             Location::SheboyganSouth => Spot {
                 forecast_path: SHEBOYGAN_SOUTH_PATH,
@@ -92,7 +96,8 @@ impl From<SpotParam> for Spot {
                 fallback_realtime_path: Some(SHEBOYGAN_FALLBACK_REALTIME_PATH),
                 location: Location::SheboyganSouth,
                 live_feed_url: Some("https://www.youtube.com/embed/M0Ion4MpsgU?si=yCi2OVy3RIbY_5kC&amp;controls=0"),
-                name: "Sheboygan - South"
+                name: "Sheboygan - South",
+                has_bouy: true,
             },
             Location::Racine => Spot {
                 forecast_path: RACINE_PATH,
@@ -102,7 +107,8 @@ impl From<SpotParam> for Spot {
                 fallback_realtime_path: Some(RACINE_FALLBACK_REALTIME_PATH),
                 location: Location::Racine,
                 live_feed_url: None,
-                name: "Racine"
+                name: "Racine",
+                has_bouy: true,
             },
             Location::Atwater => Spot {
                 forecast_path: ATWATER_PATH,
@@ -113,6 +119,7 @@ impl From<SpotParam> for Spot {
                 location: Location::Atwater,
                 live_feed_url: None,
                 name: "Atwater",
+                has_bouy: true,
             },
         }
     }

diff --git a/templates/base.html b/templates/base.html
@@ -37,20 +37,20 @@
       rel="stylesheet"
     />
 
-    <link rel="preload" href="/assets/styles.css?version=124" as="style" />
+    <link rel="preload" href="/assets/styles.css?version=126" as="style" />
     <link
       rel="preload"
       href="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"
       as="script"
     />
     <link
       rel="preload"
-      href="/assets/static/index.min.js?version=127"
+      href="/assets/static/index.min.js?version=129"
       as="script"
     />
 
     <link
-      href="/assets/styles.css?version=124"
+      href="/assets/styles.css?version=126"
       rel="stylesheet"
       type="text/css"
     />
@@ -66,7 +66,7 @@
     @keyup.escape="showLiveFeed = false; showNav = false;"
     :class="{ 'overflow-hidden': showNav || showLiveFeed }"
   >
-    <script src="/assets/static/index.min.js?version=127"></script>
+    <script src="/assets/static/index.min.js?version=129"></script>
     {% block body %} {% endblock %} {% include "includes/footer.html" %} {% if
     live_reload %}
     <script>

diff --git a/templates/includes/latest.html b/templates/includes/latest.html
@@ -23,12 +23,101 @@
   </div>
 
   <!-- Stats -->
-  <div class="grid grid-cols-2 bg-gray-700/10 lg:grid-cols-3">
+  <div
+    class="grid grid-cols-2 bg-gray-700/10 lg:grid-cols-3"
+    x-data="{ showFallbackModal: false }"
+  >
     <div class="border-t border-white/5 px-4 py-3 sm:p-3 lg:px-8">
-      <p class="text-sm font-medium leading-6 text-gray-400">Waves<span>
-        <svg class="fill-yellow-500 h-2 w-2" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 24 24">
-    <path d="M 12 2 C 6.4889971 2 2 6.4889971 2 12 C 2 17.511003 6.4889971 22 12 22 C 17.511003 22 22 17.511003 22 12 C 22 6.4889971 17.511003 2 12 2 z M 12 4 C 16.430123 4 20 7.5698774 20 12 C 20 16.430123 16.430123 20 12 20 C 7.5698774 20 4 16.430123 4 12 C 4 7.5698774 7.5698774 4 12 4 z M 11 7 L 11 9 L 13 9 L 13 7 L 11 7 z M 11 11 L 11 17 L 13 17 L 13 11 L 11 11 z"></path>
-</svg></span></p>
+      <p class="flex items-center text-sm font-medium leading-6 text-gray-400">
+        Waves
+        <span
+          id="wave-fallback-icon"
+          class="hidden ml-2 cursor-pointer"
+          @click="showFallbackModal = !showFallbackModal"
+        >
+          <svg
+            class="fill-yellow-400 hover:fill-yellow-600 h-4 w-4"
+            xmlns="http://www.w3.org/2000/svg"
+            x="0px"
+            y="0px"
+            width="100"
+            height="100"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M 12 2 C 6.4889971 2 2 6.4889971 2 12 C 2 17.511003 6.4889971 22 12 22 C 17.511003 22 22 17.511003 22 12 C 22 6.4889971 17.511003 2 12 2 z M 12 4 C 16.430123 4 20 7.5698774 20 12 C 20 16.430123 16.430123 20 12 20 C 7.5698774 20 4 16.430123 4 12 C 4 7.5698774 7.5698774 4 12 4 z M 11 7 L 11 9 L 13 9 L 13 7 L 11 7 z M 11 11 L 11 17 L 13 17 L 13 11 L 11 11 z"
+            ></path></svg
+        ></span>
+      </p>
+      <div :class="{ 'hidden': !showFallbackModal }" x-cloak>
+        <div
+          class="relative z-40"
+          aria-labelledby="modal-title"
+          role="dialog"
+          aria-modal="true"
+        >
+          <div class="fixed inset-0 bg-black/10 backdrop-blur-md"></div>
+          <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
+            <div
+              class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"
+            >
+              <div
+                class="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg"
+              >
+                <div class="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
+                  <div class="sm:flex sm:items-start">
+                    <div
+                      class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-yellow-100 sm:mx-0 sm:h-10 sm:w-10"
+                    >
+                      <svg
+                        class="h-6 w-6 fill-yellow-400"
+                        xmlns="http://www.w3.org/2000/svg"
+                        x="0px"
+                        y="0px"
+                        width="100"
+                        height="100"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M 12 2 C 6.4889971 2 2 6.4889971 2 12 C 2 17.511003 6.4889971 22 12 22 C 17.511003 22 22 17.511003 22 12 C 22 6.4889971 17.511003 2 12 2 z M 12 4 C 16.430123 4 20 7.5698774 20 12 C 20 16.430123 16.430123 20 12 20 C 7.5698774 20 4 16.430123 4 12 C 4 7.5698774 7.5698774 4 12 4 z M 11 7 L 11 9 L 13 9 L 13 7 L 11 7 z M 11 11 L 11 17 L 13 17 L 13 11 L 11 11 z"
+                        ></path>
+                      </svg>
+                    </div>
+                    <div class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
+                      <h3
+                        class="text-base font-semibold leading-6 text-gray-900"
+                        id="modal-title"
+                      >
+                        Realtime Wave Data
+                      </h3>
+                      <div class="mt-2">
+                        <p class="text-sm text-gray-500">
+                          The local bouy has been retrived for the winter or
+                          doesn't exsist. This is the forecasted wave height.
+                          Other realtime values are from a land based weather
+                          station near this beach. The water temperature is from
+                          a bouy in the center of the lake.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6"
+                >
+                  <button
+                    type="button"
+                    class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
+                    @click="showFallbackModal = false"
+                  >
+                    OK
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
       <div class="mt-2 flex items-baseline gap-x-2">
         <div
           style="