From 66b7df7cdef1d8e93e4eba2386c1f9b8de64415a Mon Sep 17 00:00:00 2001
From: Harvey Tindall <hrfee@protonmail.ch>
Date: Wed, 7 Apr 2021 15:09:44 +0100
Subject: [PATCH] use selected language for time format, add manual selector

You can now choose between 12h and 24h time in the top left language
menu. Your preference is stored by the browser for future visits.
---
 html/admin.html        | 11 +++++++++-
 ts/modules/accounts.ts |  5 +++++
 ts/modules/common.ts   | 17 +++++++++++---
 ts/modules/invites.ts  |  4 ++++
 ts/modules/lang.ts     | 50 ++++++++++++++++++++++++++++--------------
 5 files changed, 67 insertions(+), 20 deletions(-)

diff --git a/html/admin.html b/html/admin.html
index 1af8d8b..73e813e 100644
--- a/html/admin.html
+++ b/html/admin.html
@@ -276,7 +276,16 @@
                 <span class="ml-1 chev"></span>
             </span>
             <div class="dropdown-display">
-                <div class="card ~neutral !low" id="lang-list">
+                <div class="card ~neutral !low">
+                    <label class="switch pb-1">
+                        <input type="radio" name="lang-time" id="lang-12h">
+                        <span>{{ .strings.time12h }}</span>
+                    </label>
+                    <label class="switch pb-1">
+                        <input type="radio" name="lang-time" id="lang-24h">
+                        <span>{{ .strings.time24h }}</span>
+                    </label>
+                    <div id="lang-list"></div>
                 </div>
             </div>
         </span>
diff --git a/ts/modules/accounts.ts b/ts/modules/accounts.ts
index 274abe5..20a8b08 100644
--- a/ts/modules/accounts.ts
+++ b/ts/modules/accounts.ts
@@ -142,6 +142,11 @@ class user implements User {
         };
 
         this.update(user);
+        
+        document.addEventListener("timefmt-change", () => {
+            this.expiry = this.expiry;
+            this.last_active = this.last_active;
+        });
     }
 
     private _updateEmail = () => {
diff --git a/ts/modules/common.ts b/ts/modules/common.ts
index 9028995..d2d5d16 100644
--- a/ts/modules/common.ts
+++ b/ts/modules/common.ts
@@ -7,11 +7,22 @@ export function createEl(html: string): HTMLElement {
 }
 
 export function toDateString(date: Date): string {
-    const locale = (window as any).navigator.userLanguage || window.navigator.language;
-    return date.toLocaleDateString(locale) + " " + date.toLocaleString(locale, {
+    const locale = window.language || (window as any).navigator.userLanguage || window.navigator.language;
+    const t12 = document.getElementById("lang-12h") as HTMLInputElement;
+    const t24 = document.getElementById("lang-24h") as HTMLInputElement;
+    let args1 = {};
+    let args2 = {
         hour: "2-digit",
         minute: "2-digit"
-    })
+    };
+    if (t12.checked) {
+        args1["hour12"] = true;
+        args2["hour12"] = true;
+    } else if (t24.checked) {
+        args1["hour12"] = false;
+        args2["hour12"] = false;
+    }
+    return date.toLocaleDateString(locale, args1) + " " + date.toLocaleString(locale, args2);
 }
 
 export function serializeForm(id: string): Object {
diff --git a/ts/modules/invites.ts b/ts/modules/invites.ts
index 42eff2b..6bddf6f 100644
--- a/ts/modules/invites.ts
+++ b/ts/modules/invites.ts
@@ -363,6 +363,10 @@ export class DOMInvite implements Invite {
         this.update(invite);
 
         document.addEventListener("profileLoadEvent", () => { this.loadProfiles(); }, false);
+        document.addEventListener("timefmt-change", () => {
+            this.created = this.created;
+            this.usedBy = this.usedBy;
+        });
     }
 
     update = (invite: Invite) => {
diff --git a/ts/modules/lang.ts b/ts/modules/lang.ts
index c729d28..ebface0 100644
--- a/ts/modules/lang.ts
+++ b/ts/modules/lang.ts
@@ -47,21 +47,39 @@ export class lang implements Lang {
     }
 }
 
-export const loadLangSelector = (page: string) => _get("/lang/" + page, null, (req: XMLHttpRequest) => {
-    if (req.readyState == 4) {
-        if (req.status != 200) {
-            document.getElementById("lang-dropdown").remove();
-            return;
+export const loadLangSelector = (page: string) => {
+    if (page == "admin") {
+        const ev = new CustomEvent("timefmt-change");
+        const setTimefmt = (fmt: string) => {
+            document.dispatchEvent(ev);
+            localStorage.setItem("timefmt", fmt);
+        };
+        const t12 = document.getElementById("lang-12h") as HTMLInputElement;
+        t12.onchange = () => setTimefmt("12h");
+        const t24 = document.getElementById("lang-24h") as HTMLInputElement;
+        t24.onchange = () => setTimefmt("24h");
+
+        const preference = localStorage.getItem("timefmt");
+        if (preference == "12h") {
+            t12.checked = true;
+            t24.checked = false;
+        } else if (preference == "24h") {
+            t24.checked = true;
+            t12.checked = false;
         }
-        const list = document.getElementById("lang-list") as HTMLDivElement;
-        let innerHTML = '';
-        for (let code in req.response) {
-            innerHTML += `<a href="?lang=${code}" class="button input ~neutral field mb-half lang-link">${req.response[code]}</a>`;
-        }
-        list.innerHTML = innerHTML;
     }
-});
-
-
-
-
+    _get("/lang/" + page, null, (req: XMLHttpRequest) => {
+        if (req.readyState == 4) {
+            if (req.status != 200) {
+                document.getElementById("lang-dropdown").remove();
+                return;
+            }
+            const list = document.getElementById("lang-list") as HTMLDivElement;
+            let innerHTML = '';
+            for (let code in req.response) {
+                innerHTML += `<a href="?lang=${code}" class="button input ~neutral field mb-half lang-link">${req.response[code]}</a>`;
+            }
+            list.innerHTML = innerHTML;
+        }
+    });
+};