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

@@ -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>

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 = () => {

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 {

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) => {

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;
-        }
-        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>`;
+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;
         }
-        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;
+        }
+    });
+};