add proper window open/close dates

src/data.rs

@@ -512,7 +512,7 @@ impl Filters {
     pub fn filter<'a>(
         &'a self,
         fish: Vec<&'a CombinedFish>,
-        caught_fish_ids: &Vec<i32>,
+        caught_fish_ids: &[i32],
     ) -> Vec<&'a CombinedFish> {
         fish.into_iter()
             .filter(|fish| {

src/templates.rs

@@ -77,12 +77,27 @@ pub fn main_page(
                 }
                 .when {
                     @if let Some(window) = fish.windows.first() {
-                        @if fish.is_up || fish.is_always_up {
+                        @if fish.is_up {
                             "closes " (window.display_end_time())
                         } @else {
                             "opens " (window.display_start_time())
                         }
+                        br;
+                        @if fish.is_up {
+                            .date data-ts=(clock::to_earth_time(window.start_time + window.duration).timestamp_millis()) {
+                                .inner id=(format!("date-{}", fish.entry.id)) hx-preserve {
+                                    (clock::to_earth_time(window.start_time + window.duration).format("%c %Z"))
+                                }
+                            }
+                        } @else {
+                            .date data-ts=(clock::to_earth_time(window.start_time).timestamp_millis()) {
+                                .inner id=(format!("date-{}", fish.entry.id)) hx-preserve {
+                                    (clock::to_earth_time(window.start_time).format("%c %Z"))
+                                }
+                            }
+                        }
                     }
+
                 }
                 .how {
                     @for item_id in &fish.entry.best_catch_path {
@@ -127,6 +142,8 @@ pub fn main_page(
                 }
             }
         }
+
+        script src="/static/scripts/dates.js" type="text/javascript" {}
     };
 
     let template = html! {
@@ -173,7 +190,7 @@ pub fn main_page(
                 }
             }
         }
-        div hx-get="" hx-trigger="every 10s" hx-swap="innerHTML" hx-target="this" {
+        div id="list" hx-get="" hx-trigger="every 10s" hx-swap="innerHTML" hx-target="this" hx-on="changeDates" {
             (list)
         }
     };

static/scripts/dates.js

@@ -0,0 +1,40 @@
+// Converts server dates to local time.
+function changeDates() {
+  const dateEls = document.querySelectorAll(".date");
+  const today = new Date();
+  const tomorrow = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate() + 1,
+  );
+  dateEls.forEach((el) => {
+    const date = new Date(Number(el.dataset.ts)); // This is UTC
+    const inner = el.querySelector(".inner");
+    // Fallback: Normal date string representation
+    let string = date.toString();
+    const intl = new Intl.DateTimeFormat(undefined, {
+      month: "2-digit",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+    const intlTimeOnly = new Intl.DateTimeFormat(undefined, {
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+    if (date.getDate() - today.getDate() == 0) {
+      // If today
+      string = `Today, ${intlTimeOnly.format(date)}`;
+    } else if (date.getDate() - tomorrow.getDate() == 0) {
+      // If tomorrow
+      string = `Tomorrow, ${intlTimeOnly.format(date)}`;
+    } else {
+      // Use a proper formatted string
+      string = intl.format(date);
+    }
+
+    inner.innerHTML = string;
+  });
+}
+
+changeDates();

static/style.css

@@ -52,6 +52,11 @@ select {
     text-align: center;
 }
 
+.when .date {
+    color: gray;
+    font-size: 14px;
+}
+
 section.up {
     background-color: greenyellow;
 }