From 5d679ea38777e986051a6905f5a1c3400bfbb694 Mon Sep 17 00:00:00 2001 From: Yusef Ouda Date: Wed, 3 Jul 2024 15:16:17 -0500 Subject: [PATCH] Adds support for 12hr time format --- .../Home/Header/functions/getDateTime.ts | 12 ++++++++++-- .../Settings/AppDetails/AuthForm/AuthForm.tsx | 2 +- .../components/Settings/UISettings/UISettings.tsx | 14 ++++++++++++++ client/src/interfaces/Config.ts | 1 + client/src/interfaces/Forms.ts | 1 + client/src/store/action-creators/config.ts | 1 + client/src/utility/decodeToken.ts | 11 ++++++++++- .../src/utility/templateObjects/configTemplate.ts | 1 + .../utility/templateObjects/settingsTemplate.ts | 1 + utils/init/initialConfig.json | 1 + 10 files changed, 41 insertions(+), 4 deletions(-) diff --git a/client/src/components/Home/Header/functions/getDateTime.ts b/client/src/components/Home/Header/functions/getDateTime.ts index 45ffc9d5..295be59a 100644 --- a/client/src/components/Home/Header/functions/getDateTime.ts +++ b/client/src/components/Home/Header/functions/getDateTime.ts @@ -29,6 +29,7 @@ export const getDateTime = (): string => { const now = new Date(); const useAmericanDate = localStorage.useAmericanDate === 'true'; + const useAmericanTime = localStorage.useAmericanTime === 'true'; const showTime = localStorage.showTime === 'true'; const hideDate = localStorage.hideDate === 'true'; @@ -50,11 +51,18 @@ export const getDateTime = (): string => { // Time const p = parseTime; let timeEl = ''; + let timePeriod = ''; if (showTime) { - const time = `${p(now.getHours())}:${p(now.getMinutes())}:${p( + let hours = now.getHours(); + if (useAmericanTime) { + timePeriod = hours >= 12 ? ' PM' : ' AM'; + hours = hours % 12 || 12; + } + + const time = `${p(hours)}:${p(now.getMinutes())}:${p( now.getSeconds() - )}`; + )}${timePeriod}`; timeEl = time; } diff --git a/client/src/components/Settings/AppDetails/AuthForm/AuthForm.tsx b/client/src/components/Settings/AppDetails/AuthForm/AuthForm.tsx index d0f64665..68bbaf49 100644 --- a/client/src/components/Settings/AppDetails/AuthForm/AuthForm.tsx +++ b/client/src/components/Settings/AppDetails/AuthForm/AuthForm.tsx @@ -99,7 +99,7 @@ export const AuthForm = (): JSX.Element => { ) : (

- You are logged in. Your session will expire{' '} + You are logged in. Your session will expire on{' '} {tokenExpires}

diff --git a/client/src/components/Settings/UISettings/UISettings.tsx b/client/src/components/Settings/UISettings/UISettings.tsx index 35b575aa..964da9f2 100644 --- a/client/src/components/Settings/UISettings/UISettings.tsx +++ b/client/src/components/Settings/UISettings/UISettings.tsx @@ -162,6 +162,20 @@ export const UISettings = (): JSX.Element => { + {/* TIME FORMAT */} + + + + + {/* CUSTOM GREETINGS */} diff --git a/client/src/interfaces/Config.ts b/client/src/interfaces/Config.ts index ff527213..cfd11940 100644 --- a/client/src/interfaces/Config.ts +++ b/client/src/interfaces/Config.ts @@ -23,6 +23,7 @@ export interface Config { kubernetesApps: boolean; unpinStoppedApps: boolean; useAmericanDate: boolean; + useAmericanTime: boolean; disableAutofocus: boolean; greetingsSchema: string; daySchema: string; diff --git a/client/src/interfaces/Forms.ts b/client/src/interfaces/Forms.ts index 9d8e567a..35c66ebb 100644 --- a/client/src/interfaces/Forms.ts +++ b/client/src/interfaces/Forms.ts @@ -25,6 +25,7 @@ export interface UISettingsForm { hideApps: boolean; hideCategories: boolean; useAmericanDate: boolean; + useAmericanTime: boolean; greetingsSchema: string; daySchema: string; monthSchema: string; diff --git a/client/src/store/action-creators/config.ts b/client/src/store/action-creators/config.ts index d0198763..33b8d53d 100644 --- a/client/src/store/action-creators/config.ts +++ b/client/src/store/action-creators/config.ts @@ -15,6 +15,7 @@ import { ConfigFormData } from '../../types'; const keys: (keyof Config)[] = [ 'useAmericanDate', + 'useAmericanTime', 'greetingsSchema', 'daySchema', 'monthSchema', diff --git a/client/src/utility/decodeToken.ts b/client/src/utility/decodeToken.ts index 0c1fe457..6f1d470b 100644 --- a/client/src/utility/decodeToken.ts +++ b/client/src/utility/decodeToken.ts @@ -13,7 +13,16 @@ export const parseTokenExpire = (expiresIn: number): string => { const p = parseTime; const useAmericanDate = localStorage.useAmericanDate === 'true'; - const time = `${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())}`; + const useAmericanTime = localStorage.useAmericanTime === 'true'; + + let hours = d.getHours(); + let timePeriod = ''; + if (useAmericanTime) { + timePeriod = hours >= 12 ? ' PM' : ' AM'; + hours = hours % 12 || 12; + } + + const time = `${p(hours)}:${p(d.getMinutes())}:${p(d.getSeconds())}${timePeriod}`; if (useAmericanDate) { return `${d.getMonth() + 1}/${d.getDate()}/${d.getFullYear()} ${time}`; diff --git a/client/src/utility/templateObjects/configTemplate.ts b/client/src/utility/templateObjects/configTemplate.ts index 89e7814c..091575dd 100644 --- a/client/src/utility/templateObjects/configTemplate.ts +++ b/client/src/utility/templateObjects/configTemplate.ts @@ -23,6 +23,7 @@ export const configTemplate: Config = { kubernetesApps: false, unpinStoppedApps: false, useAmericanDate: false, + useAmericanTime: false, disableAutofocus: false, greetingsSchema: 'Good evening!;Good afternoon!;Good morning!;Good night!', daySchema: 'Sunday;Monday;Tuesday;Wednesday;Thursday;Friday;Saturday', diff --git a/client/src/utility/templateObjects/settingsTemplate.ts b/client/src/utility/templateObjects/settingsTemplate.ts index 9bfdd61f..4f782aa7 100644 --- a/client/src/utility/templateObjects/settingsTemplate.ts +++ b/client/src/utility/templateObjects/settingsTemplate.ts @@ -12,6 +12,7 @@ export const uiSettingsTemplate: UISettingsForm = { hideApps: false, hideCategories: false, useAmericanDate: false, + useAmericanTime: false, greetingsSchema: 'Good evening!;Good afternoon!;Good morning!;Good night!', daySchema: 'Sunday;Monday;Tuesday;Wednesday;Thursday;Friday;Saturday', monthSchema: diff --git a/utils/init/initialConfig.json b/utils/init/initialConfig.json index 929b2fe9..42c262bf 100644 --- a/utils/init/initialConfig.json +++ b/utils/init/initialConfig.json @@ -21,6 +21,7 @@ "kubernetesApps": false, "unpinStoppedApps": false, "useAmericanDate": false, + "useAmericanTime": false, "disableAutofocus": false, "greetingsSchema": "Good evening!;Good afternoon!;Good morning!;Good night!", "daySchema": "Sunday;Monday;Tuesday;Wednesday;Thursday;Friday;Saturday",