From edb9e94a98458fbac00075a3a407246668123eb4 Mon Sep 17 00:00:00 2001
From: Mitsuo Tokumori <mitsuo@tokumori.xyz>
Date: Sun, 9 Mar 2025 20:30:25 +0900
Subject: Add world clocks to block_time

---
 app/static/block_time.js | 85 ++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 79 insertions(+), 6 deletions(-)

(limited to 'app/static/block_time.js')

diff --git a/app/static/block_time.js b/app/static/block_time.js
index d6510ae..8841e7b 100644
--- a/app/static/block_time.js
+++ b/app/static/block_time.js
@@ -1,13 +1,86 @@
 function init() {
-  initTimeVisualizer('timeVisualizer');
+  initTimeVisualizer("time-timeVisualizer");
 }
 
 export function updateTime() {
-  fetch("/time")
-    .then(res => res.json())
-    .then(data => {
-      document.getElementById("weatherSummary").innerText = data.time;
-    });
+  const cities = [
+    { name: "Tokyo", tz: "Asia/Tokyo", note: "JST" },
+    { name: "Berlin", tz: "Europe/Berlin", note: "CET, CEST from last Sunday in March at 02:00 to last Sunday in October at 03:00" },
+    { name: "London", tz: "Europe/London", note: "GMT, BST from last Sunday of March to last Sunday of October" },
+    { name: "Lima", tz: "America/Lima", note: "aka: \"PET\""},
+    { name: "Santiago", tz: "America/Santiago", note: "aka: \"CLT\""},
+    { name: "New York", tz: "America/New_York", note: "EST, EDT from second Sunday in March at 02:00 to first Sunday in November at 02:00" },
+    { name: "Chicago", tz: "America/Chicago", note: "CST, CDT from second Sunday in March at 02:00 to first Sunday in November at 02:00" },
+    { name: "Denver", tz: "America/Denver", note: "MST, MDT from second Sunday in March at 02:00 to first Sunday in November at 02:00" },
+    { name: "Los Angeles", tz: "America/Los_Angeles", note: "PST, PDT from second Sunday in March at 02:00 to first Sunday in November at 02:00" },
+    { name: "Arizona", tz: "America/Denver", note: "MST" },
+    { name: "Anchorage", tz: "America/Anchorage", note: "AKST, AKDT from second Sunday in March at 02:00 to first Sunday in November at 02:00" },
+    { name: "Honolulu", tz: "Pacific/Honolulu", note: "HST" },
+  ];
+
+  const escapeHtml = str => str.replace(/[&<>"']/g, c => `&#${c.charCodeAt(0)};`);
+
+  const now = new Date();
+  const locale = "en-US";
+  let output = "<ul>";
+
+  // Tokyo datetime header
+  const tokyoDate = new Intl.DateTimeFormat("ja-JP", {
+    calendar: 'japanese', era: 'long',
+    year: "numeric", month: "numeric", day: "numeric", weekday: "long",
+    hour: "2-digit", minute: "2-digit", hour12: false,
+    timeZone: "Asia/Tokyo"
+  }).format(now);
+  const qw = getDateInfo(now);  // quarter and ISO8601 week
+  let s = `Tokyo: (Q${qw.quarter}) (W${qw.isoWeek.toString().padStart(2, '0')}) ${tokyoDate}\n`;
+  document.getElementById("time-localClock").innerText = s;
+
+  // Time in other cities
+  cities.forEach(city => {
+    const formatter = new Intl.DateTimeFormat(locale, {
+      year: "numeric", month: "2-digit", day: "2-digit", weekday: "short",
+      hour: "2-digit", minute: "2-digit", hour12: false,
+      timeZoneName: "shortOffset",
+      timeZone: city.tz
+    })
+    const parts = formatter.formatToParts(now);
+    const t = {
+      time: parts.slice(8, -1).map(part => part.value).join('').trim(),
+      offset: parts.find(part => part.type === "timeZoneName")?.value.replace("GMT", "UTC"),
+      timeZoneName: new Intl.DateTimeFormat(locale, { timeZoneName: 'long', timeZone: city.tz })
+        .formatToParts(now).find(part => part.type === "timeZoneName")?.value,
+    }
+    t.dst = ["Daylight", "Summer"].some(sub => t.timeZoneName.includes(sub));
+    //const timeData = parts.reduce((obj, part) => { obj[part.type] = obj[part.value]; return obj; }, {})
+    const offsetAndDST = `${t.offset}` + (t.dst ? "+1" : "");
+    output += `<li>${city.name}: ${t.time} (<span title="${escapeHtml(city.note)}">${offsetAndDST}</span>) </li>`;
+  });
+  output += "</ul>"
+
+  document.getElementById("time-worldClock").innerHTML = output.trim();
+}
+
+function getQuarter(date) {
+  const month = date.getMonth(); // 0-11 (January is 0)
+  return Math.floor(month / 3) + 1; // Returns 1-4
+}
+
+function getISOWeek(date) {
+  const tempDate = new Date(date);
+  tempDate.setHours(0, 0, 0, 0);
+  tempDate.setDate(tempDate.getDate() + 3 - ((tempDate.getDay() + 6) % 7)); // Move to nearest Thursday
+  const firstThursday = new Date(tempDate.getFullYear(), 0, 4); // First Thursday of the year
+  firstThursday.setDate(firstThursday.getDate() + 3 - ((firstThursday.getDay() + 6) % 7));
+  const weekNumber = Math.round(((tempDate - firstThursday) / 86400000) / 7) + 1;
+  return weekNumber;
+}
+
+function getDateInfo(date) {
+  return {
+    quarter: getQuarter(date),
+    isoWeek: getISOWeek(date),
+    year: date.getFullYear()
+  };
 }
 
 function initTimeVisualizer(containerId) {
-- 
cgit v1.2.3