show when the forecast hasn't been updated in a long time as well

Austionian · Oct 19, 2024 · c84eaf5 · c84eaf5
1 parent d6d4b6c
commit c84eaf5
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 13 deletions.
diff --git a/assets/static/index.min.js b/assets/static/index.min.js
diff --git a/client/parsers/forecast.js b/client/parsers/forecast.js
@@ -6,6 +6,7 @@ import {
   removeElement,
   removeElements,
   asButton,
+  outOfDate,
 } from "../utilities";
 
 const FLAT_COLOR = "#a8a29e";
@@ -215,6 +216,11 @@ export function parseForecast(data) {
   setText("forecast-as-of", `Updated ${data.as_of}`);
   setText("forecast-as-of-2", `Updated ${data.as_of}`);
 
+  let oneDayMs = 60 * 60 * 24 * 1_000;
+  if (new Date(data.as_of) < new Date() - oneDayMs) {
+    outOfDate(["forecast-as-of-container-2", "forecast-as-of-container"]);
+  }
+
   removeElements(".loader");
   removeHidden("forecast");
   removeHidden("wave-quality");

diff --git a/client/parsers/realtime.js b/client/parsers/realtime.js
@@ -7,6 +7,7 @@ import {
   removeStyle,
   removeHidden,
   setAttribute,
+  outOfDate,
 } from "../utilities";
 
 /**
@@ -92,14 +93,7 @@ export function parseRealtime(data) {
 
   let oneDayMs = 60 * 60 * 24 * 1_000;
   if (new Date(data.as_of) < new Date() - oneDayMs) {
-    setStyleAttribute(
-      "as-of-container",
-      "background-color: #facc15; color: #000; display: flex; align-items: center; flex-direction: row-reverse; gap: 8px",
-    );
-    document.getElementById("as-of-container").innerHTML +=
-      `<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
-              </svg>`;
+    outOfDate("as-of-container");
   }
 }
 

diff --git a/client/utilities.js b/client/utilities.js
@@ -110,3 +110,35 @@ export function removeHidden(id) {
 export function appendElements(id, html) {
   nonNull(document.getElementById(id)).innerHTML = html;
 }
+
+/**
+ * Appends the caution svg to an element's innerHTML
+ *
+ * @param {string} id
+ */
+function appendCaution(id) {
+  document.getElementById(id).innerHTML +=
+    `<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
+              </svg>`;
+}
+
+/**
+ * Updates the as of container to show it is out of date
+ *
+ * @param {string | string[]} id
+ */
+export function outOfDate(id) {
+  setStyleAttribute(
+    id,
+    "background-color: #facc15; color: #000; display: flex; align-items: center; flex-direction: row-reverse; gap: 8px",
+  );
+
+  if (id instanceof Array) {
+    id.forEach((i) => {
+      appendCaution(i);
+    });
+  } else {
+    appendCaution(id);
+  }
+}
diff --git a/templates/base.html b/templates/base.html
@@ -37,20 +37,20 @@
       rel="stylesheet"
     />
 
-    <link rel="preload" href="/assets/styles.css?version=128" as="style" />
+    <link rel="preload" href="/assets/styles.css?version=129" 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=131"
+      href="/assets/static/index.min.js?version=132"
       as="script"
     />
 
     <link
-      href="/assets/styles.css?version=128"
+      href="/assets/styles.css?version=129"
       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=131"></script>
+    <script src="/assets/static/index.min.js?version=132"></script>
     {% block body %} {% endblock %} {% include "includes/footer.html" %} {% if
     live_reload %}
     <script>