feat: add 12 hour time as an option for timetable

src/SEQTA.ts

@@ -1275,6 +1275,20 @@ function CheckUnmarkedAttendance(lessonattendance: any) {
   return lesson
 }
 
+function convertTo12HourFormat(time: string): string {
+  let [hours, minutes] = time.split(':').map(Number);
+  let period = 'AM';
+
+  if (hours >= 12) {
+      period = 'PM';
+      if (hours > 12) hours -= 12;
+  } else if (hours === 0) {
+      hours = 12;
+  }
+
+  return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')} ${period}`;
+}
+
 function callHomeTimetable(date: string, change?: any) {
   // Creates a HTTP Post Request to the SEQTA page for the students timetable
   var xhr = new XMLHttpRequest()
@@ -1321,6 +1335,11 @@ function callHomeTimetable(date: string, change?: any) {
               lessonArray[i].from = lessonArray[i].from.substring(0, 5)
               lessonArray[i].until = lessonArray[i].until.substring(0, 5)
 
+              if (settingsState.timeFormat === '12') {
+                lessonArray[i].from = convertTo12HourFormat(lessonArray[i].from)
+                lessonArray[i].until = convertTo12HourFormat(lessonArray[i].until)
+              }
+
               // Checks if attendance is unmarked, and sets the string to " ".
               lessonArray[i].attendanceTitle = CheckUnmarkedAttendance(
                 lessonArray[i].attendance,
@@ -1864,10 +1883,7 @@ export async function loadHomePage() {
   document.title = 'Home ― SEQTA Learn'
   const element = document.querySelector('[data-key=home]')
 
-  await new Promise((resolve) => {
-    // Delay to prevent SEQTA from removing the UI elements
-    setTimeout(resolve, 8)
-  })
+  await delay(8)
 
   // Apply the active class to indicate clicked on home button
   element!.classList.add('active')
@@ -1875,11 +1891,11 @@ export async function loadHomePage() {
   // Remove all current elements in the main div to add new elements
   const main = document.getElementById('main')
   
-  main!.innerHTML = ''
-
   if (!main) {
     console.error('Main element not found.')
     return
+  } else {
+    main!.innerHTML = ''
   }
 
   const icon = document.querySelector('link[rel*="icon"]')! as HTMLLinkElement
@@ -1901,12 +1917,27 @@ export async function loadHomePage() {
   const date = new Date()
 
   // Creates the shortcut container into the home container
-  const Shortcut = stringToHTML('<div class="shortcut-container border" style="opacity: 0;"><div class="shortcuts border" id="shortcuts"></div></div>')
+  const Shortcut = stringToHTML(/* html */`
+    <div class="shortcut-container border" style="opacity: 0;">
+      <div class="shortcuts border" id="shortcuts"></div>
+    </div>`)
+
   // Appends the shortcut container into the home container
   document.getElementById('home-container')?.append(Shortcut?.firstChild!)
   
   // Creates the container div for the timetable portion of the home page
-  const Timetable = stringToHTML('<div class="timetable-container border" style="opacity: 0;"><div class="home-subtitle"><h2 id="home-lesson-subtitle">Today\'s Lessons</h2><div class="timetable-arrows"><svg width="24" height="24" viewBox="0 0 24 24" style="transform: scale(-1,1)" id="home-timetable-back"><g style="fill: currentcolor;"><path d="M8.578 16.359l4.594-4.594-4.594-4.594 1.406-1.406 6 6-6 6z"></path></g></svg><svg width="24" height="24" viewBox="0 0 24 24" id="home-timetable-forward"><g style="fill: currentcolor;"><path d="M8.578 16.359l4.594-4.594-4.594-4.594 1.406-1.406 6 6-6 6z"></path></g></svg></div></div><div class="day-container" id="day-container"></div></div>')
+  const Timetable = stringToHTML(/* html */`
+    <div class="timetable-container border" style="opacity: 0;">
+      <div class="home-subtitle">
+        <h2 id="home-lesson-subtitle">Today\'s Lessons</h2>
+        <div class="timetable-arrows">
+          <svg width="24" height="24" viewBox="0 0 24 24" style="transform: scale(-1,1)" id="home-timetable-back"><g style="fill: currentcolor;"><path d="M8.578 16.359l4.594-4.594-4.594-4.594 1.406-1.406 6 6-6 6z"></path></g></svg>
+          <svg width="24" height="24" viewBox="0 0 24 24" id="home-timetable-forward"><g style="fill: currentcolor;"><path d="M8.578 16.359l4.594-4.594-4.594-4.594 1.406-1.406 6 6-6 6z"></path></g></svg>
+        </div>
+      </div>
+      <div class="day-container" id="day-container"></div>
+    </div>`)
+  
   // Appends the timetable container into the home container
   document.getElementById('home-container')?.append(Timetable?.firstChild!)
   

src/interface/hooks/settingsState.ts

@@ -2,6 +2,7 @@ import browser from 'webextension-polyfill'
 import { useEffect, useMemo } from "react";
 import { SettingsProps } from "../types/SettingsProps";
 import { MainConfig, SettingsState } from "../types/AppProps";
+import { SettingsState as StorageSettingsState } from '../../types/storage';
 
 let RanOnce = false;
 let previousSettingsState: SettingsState
@@ -12,7 +13,7 @@ const useSettingsState = ({ settingsState, setSettingsState }: SettingsProps) =>
     RanOnce = true;
 
     // @ts-expect-error - TODO: Fix this
-    browser.storage.local.get().then((result: MainConfig) => {
+    browser.storage.local.get().then((result: StorageSettingsState) => {
       setSettingsState({
         notificationCollector: result.notificationcollector,
         lessonAlerts: result.lessonalert,
@@ -23,7 +24,8 @@ const useSettingsState = ({ settingsState, setSettingsState }: SettingsProps) =>
         shortcuts: result.shortcuts,
         customshortcuts: result.customshortcuts,
         transparencyEffects: result.transparencyEffects,
-        selectedTheme: result.selectedTheme
+        selectedTheme: result.selectedTheme,
+        timeFormat: result.timeFormat
       });
     });
   });
@@ -38,7 +40,8 @@ const useSettingsState = ({ settingsState, setSettingsState }: SettingsProps) =>
     "shortcuts": "shortcuts",
     "customshortcuts": "customshortcuts",
     "transparencyEffects": "transparencyEffects",
-    "selectedTheme": "selectedTheme"
+    "selectedTheme": "selectedTheme",
+    "timeFormat": "timeFormat"
   }), []);
   
   const storageChangeListener = (changes: browser.Storage.StorageChange) => {

src/interface/pages/SettingsPage/Settings.tsx

@@ -11,10 +11,10 @@ import { memo } from 'react';
 const Settings: React.FC = () => {
   const { settingsState, setSettingsState } = useSettingsContext();
 
-  const switchChange = (key: string, isOn: boolean) => {
+  const switchChange = (key: string, value: boolean | string) => {
     setSettingsState({
       ...settingsState,
-      [key]: isOn,
+      [key]: value,
     });
   };
 
@@ -61,6 +61,11 @@ const Settings: React.FC = () => {
       description: "Sends a native browser notification ~5 minutes prior to lessons.",
       modifyElement: <Switch state={settingsState.lessonAlerts} onChange={(isOn: boolean) => switchChange('lessonAlerts', isOn)} />
     },
+    {
+      title: "12 Hour Time",
+      description: "Prefer 12 hour time format for SEQTA",
+      modifyElement: <Switch state={settingsState.timeFormat == "12"} onChange={(isOn: boolean) => switchChange('timeFormat', isOn ? "12" : "24")} />
+    },
     {
       title: "BetterSEQTA+",
       description: "Enables BetterSEQTA+ features",

src/interface/types/AppProps.ts

@@ -9,6 +9,7 @@ export interface SettingsState {
   shortcuts: Shortcut[];
   customshortcuts: CustomShortcut[];
   transparencyEffects: boolean;
+  timeFormat?: string;
 }
 
 interface ToggleItem {

src/types/storage.ts

@@ -32,7 +32,8 @@ export interface SettingsState {
   shortcuts: Shortcut[];
   subjectfilters: Record<string, any>;
   transparencyEffects: boolean;
-  justupdated?: boolean | null;
+  justupdated?: boolean;
+  timeFormat?: string;
 }
 
 interface ToggleItem {