change template name to realtime, update root for clearer context loc…

…k, add forecast error state

client/fallback.js

@@ -0,0 +1,20 @@
+import { removeElement, appendElements } from "./utilities";
+
+/**
+ * @param {Error} e
+ */
+export function forecastFailed(e) {
+  removeElement("forecast-container");
+
+  appendElements(
+    "forecast-error",
+    `
+    <div class="p-12 flex flex-col items-center align-middle justify-center text-center">
+      <h2 class="text-xl font-mono">
+      Error loading forecast data - please refresh the page or try again later.
+      </h2>
+      <p>${e}</p>
+    </div>
+    `,
+  );
+}

client/index.js

@@ -3,6 +3,7 @@ import {
   parseRealtime,
   parseForecast,
 } from "./parsers/index";
+import { forecastFailed } from "./fallback";
 import { nonNull } from "./utilities";
 
 // Select the node that will be observed for mutations
@@ -19,22 +20,24 @@ const config = { attributes: true, childList: true, subtree: true };
 const observerCallback = (mutationList) => {
   for (const mutation of mutationList) {
     if (mutation.target instanceof HTMLElement) {
-      if (mutation.target.id === "latest-data") {
+      if (mutation.target.id === "realtime-data") {
         parseRealtime(JSON.parse(mutation.target.innerText));
       }
       if (mutation.target.id === "water-quality-data") {
         parseWaterQuality(JSON.parse(mutation.target.innerText));
       }
       if (mutation.target.id === "forecast-data") {
         try {
-          const data = JSON.parse(mutation.target.innerText);
-          parseForecast(data);
+          parseForecast(JSON.parse(mutation.target.innerText));
         } catch {
           console.log("failed to parse forecast, trying again.");
           setTimeout(() => {
             if (mutation.target instanceof HTMLElement) {
-              const data = JSON.parse(mutation.target.innerText);
-              parseForecast(data);
+              try {
+                parseForecast(JSON.parse(mutation.target.innerText));
+              } catch(e) {
+                forecastFailed(e);
+              }
             }
           }, 100);
         }

client/utilities.js

@@ -100,3 +100,13 @@ export function removeStyle(id, style) {
 export function removeHidden(id) {
   removeStyle(id, "hidden");
 }
+
+/**
+ * Appends an HTML string to the innerHTML of the given element
+ *
+ * @param {string} id
+ * @param {string} html
+ */
+export function appendElements(id, html) {
+  nonNull(document.getElementById(id)).innerHTML = html;
+}

src/routes/root.rs

@@ -6,7 +6,7 @@ use axum::{
     http::StatusCode,
     response::{IntoResponse, Response},
 };
-use std::{convert::Infallible, ops::Deref, sync::Arc};
+use std::{convert::Infallible, sync::Arc};
 use tokio::sync::{mpsc, Mutex};
 
 /// Handler to return the website's index
@@ -21,25 +21,21 @@ pub async fn root(
 
     let spot: Arc<Spot> = Arc::new(selected_spot.0.into());
 
-    // Get the context lock.
-    let initial_context = context.clone();
-    let mut initial_context = initial_context.lock().await;
+    // Add the initial context to the page for the loading state
+    {
+        let mut context = context.lock().await;
 
-    // Update with inital values.
-    initial_context.insert("spot", &*spot);
-    initial_context.insert("breaks", &state.breaks);
-    #[cfg(debug_assertions)]
-    initial_context.insert("live_reload", &true);
-    #[cfg(not(debug_assertions))]
-    initial_context.insert("live_reload", &false);
+        // Update with inital values.
+        context.insert("spot", &*spot);
+        context.insert("breaks", &state.breaks);
+        #[cfg(debug_assertions)]
+        context.insert("live_reload", &true);
+        #[cfg(not(debug_assertions))]
+        context.insert("live_reload", &false);
 
-    // Drop the lock
-    drop(initial_context);
-
-    tx.send(Ok(
-        TEMPLATES.render("index.html", context.lock().await.deref())?
-    ))
-    .await?;
+        tx.send(Ok(TEMPLATES.render("index.html", &context)?))
+            .await?;
+    }
 
     let realtime_tx = tx.clone();
     let realtime_context = context.clone();
@@ -49,10 +45,10 @@ pub async fn root(
         match Realtime::try_get(realtime_spot, realtime_state.realtime_url).await {
             Ok(realtime) => {
                 let mut context = realtime_context.lock().await;
-                context.insert("latest_json", &serde_json::to_string(&realtime).unwrap());
+                context.insert("realtime_json", &serde_json::to_string(&realtime).unwrap());
 
                 realtime_tx
-                    .send(Ok(TEMPLATES.render("latest.html", &context).unwrap()))
+                    .send(Ok(TEMPLATES.render("realtime.html", &context).unwrap()))
                     .await
                     .unwrap();
             }

templates/base.html

@@ -12,20 +12,20 @@
     <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png" />
     <link rel="manifest" href="/assets/site.webmanifest" />
 
-    <link rel="preload" href="/assets/styles.css?version=63" as="style" />
+    <link rel="preload" href="/assets/styles.css?version=66" as="style" />
     <link
       rel="preload"
       href="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"
       as="script"
     />
     <link
       rel="preload"
-      href="/assets/static/index.min.js?version=66"
+      href="/assets/static/index.min.js?version=69"
       as="script"
     />
 
     <link
-      href="/assets/styles.css?version=63"
+      href="/assets/styles.css?version=66"
       rel="stylesheet"
       type="text/css"
     />
@@ -41,7 +41,7 @@
     @keyup.escape="showLiveFeed = false; showNav = false;"
     :class="{ 'overflow-hidden': showNav || showLiveFeed }"
   >
-    <script src="/assets/static/index.min.js?version=66"></script>
+    <script src="/assets/static/index.min.js?version=69"></script>
     {% block body %} {% endblock %} {% include "includes/footer.html" %} {% if
     live_reload %}
     <script>

templates/realtime.html

@@ -0,0 +1 @@
+<script type="application/json" id="realtime-data">{{ realtime_json | safe }}</script>