Adds support for 12hr time format

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;
   }

client/src/components/Settings/AppDetails/AuthForm/AuthForm.tsx

@@ -99,7 +99,7 @@ export const AuthForm = (): JSX.Element => {
       ) : (
         <div>
           <p className={classes.text}>
-            You are logged in. Your session will expire{' '}
+            You are logged in. Your session will expire on{' '}
             <span>{tokenExpires}</span>
           </p>
           <Button click={logout}>Logout</Button>

client/src/components/Settings/UISettings/UISettings.tsx

@@ -162,6 +162,20 @@ export const UISettings = (): JSX.Element => {
         </select>
       </InputGroup>
 
+      {/* TIME FORMAT */}
+      <InputGroup>
+        <label htmlFor="useAmericanTime">Time formatting</label>
+        <select
+          id="useAmericanTime"
+          name="useAmericanTime"
+          value={formData.useAmericanTime ? 1 : 0}
+          onChange={(e) => inputChangeHandler(e, { isBool: true })}
+        >
+          <option value={1}>01:30 PM</option>
+          <option value={0}>13:30</option>
+        </select>
+      </InputGroup>
+
       {/* CUSTOM GREETINGS */}
       <InputGroup>
         <label htmlFor="greetingsSchema">Custom greetings</label>

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;

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;

client/src/store/action-creators/config.ts

@@ -15,6 +15,7 @@ import { ConfigFormData } from '../../types';
 
 const keys: (keyof Config)[] = [
   'useAmericanDate',
+  'useAmericanTime',
   'greetingsSchema',
   'daySchema',
   'monthSchema',

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

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',

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:

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",