hover + bug

.zed/settings.json

@@ -0,0 +1,5 @@
+{
+    "file_types": {
+        "HTML": ["**/*.handlebars"]
+    }
+}

index.ts

@@ -1,6 +1,6 @@
 import Handlebars from "handlebars";
 import { Database } from "bun:sqlite";
-import { differenceInDays, startOfToday, startOfDay, format } from "date-fns";
+import { differenceInDays, startOfToday, startOfDay, format, formatDate, subDays } from "date-fns";
 import { tz } from "@date-fns/tz";
 
 const db = new Database("database.db");
@@ -31,16 +31,26 @@ Bun.serve({
 
             const allCollisions = db.query<ServiceAlert, []>("SELECT * FROM service_alerts WHERE is_collision ORDER BY date ASC").all()
 
-            const last60Days = new Array(60).fill(false)
+            let last60Days = new Array<{ collision: boolean; renderedDate: string; }>(60).fill({
+                collision: false,
+                renderedDate: "",
+            })
+
+            last60Days = last60Days.map((v, index) => {
+                return {
+                    ...v,
+                    renderedDate: format(subDays(new Date(), index), "LLL d, yyyy", { in: tz("America/Denver") }),
+                }
+            })
 
             for (const collision of allCollisions) {
                 const collisionDay = startOfDay(new Date(collision.date), { in: tz("America/Denver") })
                 const difference = differenceInDays(startOfToday({ in: tz("America/Denver") }), collisionDay)
-                if (difference > 60) {
+                if (difference >= 60) {
                     continue
                 }
 
-                last60Days[difference] = true
+                last60Days[difference].collision = true
             }
 
             last60Days.reverse()

templates/home.handlebars

@@ -29,20 +29,33 @@
             <pre class="font-sans text-wrap border border-gray-500 border-t-0 rounded-b-lg p-2">{{ latestCollision.content }}</pre>
         </div>
 
-        <div class="flex justify-between max-w-96 mx-auto h-8">
+        <div class="flex justify-between max-w-96 mx-auto h-8" id="the-box">
             {{#each last90Days }}
-                {{#if this}}
-                    <div class="h-full w-0.5 sm:w-1 bg-red-400"></div>
+                {{#if collision}}
+                    <div class="h-full w-0.5 sm:w-1 bg-red-400" data-date="{{ renderedDate }}"></div>
                 {{else}}
-                    <div class="h-full w-0.5 sm:w-1 bg-green-400"></div>
+                    <div class="h-full w-0.5 sm:w-1 bg-green-400" data-date="{{ renderedDate }}"></div>
                 {{/if}}
             {{/each}}
         </div>
 
         <div class="max-w-96 mx-auto flex justify-between">
-            <div class="text-gray-600 text-sm">60 days ago</div>
-            <div class="text-gray-600 text-sm">Today</div>
+            <div class="text-gray-400 text-sm basis-0 grow">60 days ago</div>
+            <div class="text-sm basis-0 grow text-center" id="selected-date"></div>
+            <div class="text-gray-400 text-sm basis-0 grow text-end">Today</div>
         </div>
 
+        <script>
+            for (const bar of document.querySelectorAll("[data-date]")) {
+                bar.addEventListener("mouseenter", function () {
+                    document.getElementById("selected-date").innerText = this.dataset["date"];
+                });
+            }
+
+            document.getElementById("the-box").addEventListener("mouseleave", function () {
+                document.getElementById("selected-date").innerText = "";
+            });
+        </script>
+
     </body>
 </html>