Added current time to header

client/src/components/Home/Header/functions/getDateTime.ts

@@ -1,3 +1,5 @@
+import { parseTime } from '../../../../utility';
+
 export const getDateTime = (): string => {
   const days = localStorage.getItem('daySchema')?.split(';') || [
     'Sunday',
@@ -27,14 +29,23 @@ export const getDateTime = (): string => {
   const now = new Date();
 
   const useAmericanDate = localStorage.useAmericanDate === 'true';
+  const showTime = localStorage.showTime === 'true';
+
+  const p = parseTime;
+
+  const time = `${p(now.getHours())}:${p(now.getMinutes())}:${p(
+    now.getSeconds()
+  )}`;
+
+  const timeEl = showTime ? ` - ${time}` : '';
 
   if (!useAmericanDate) {
     return `${days[now.getDay()]}, ${now.getDate()} ${
       months[now.getMonth()]
-    } ${now.getFullYear()}`;
+    } ${now.getFullYear()}${timeEl}`;
   } else {
     return `${days[now.getDay()]}, ${
       months[now.getMonth()]
-    } ${now.getDate()} ${now.getFullYear()}`;
+    } ${now.getDate()} ${now.getFullYear()}${timeEl}`;
   }
 };

client/src/components/Settings/OtherSettings/OtherSettings.tsx

@@ -172,8 +172,8 @@ export const OtherSettings = (): JSX.Element => {
         </select>
       </InputGroup>
 
-      {/* MODULES OPTIONS */}
-      <SettingsHeadline text="Modules" />
+      {/* HEADER OPTIONS */}
+      <SettingsHeadline text="Header" />
       {/* HIDE HEADER */}
       <InputGroup>
         <label htmlFor="hideHeader">Hide greeting and date</label>
@@ -233,6 +233,22 @@ export const OtherSettings = (): JSX.Element => {
         <span>Names must be separated with semicolon</span>
       </InputGroup>
 
+      {/* SHOW TIME */}
+      <InputGroup>
+        <label htmlFor="showTime">Show time</label>
+        <select
+          id="showTime"
+          name="showTime"
+          value={formData.showTime ? 1 : 0}
+          onChange={(e) => inputChangeHandler(e, { isBool: true })}
+        >
+          <option value={1}>True</option>
+          <option value={0}>False</option>
+        </select>
+      </InputGroup>
+
+      {/* MODULES OPTIONS */}
+      <SettingsHeadline text="Modules" />
       {/* HIDE APPS */}
       <InputGroup>
         <label htmlFor="hideApps">Hide applications</label>

client/src/interfaces/Config.ts

@@ -24,4 +24,5 @@ export interface Config {
   greetingsSchema: string;
   daySchema: string;
   monthSchema: string;
+  showTime: boolean;
 }

client/src/interfaces/Forms.ts

@@ -30,4 +30,5 @@ export interface OtherSettingsForm {
   greetingsSchema: string;
   daySchema: string;
   monthSchema: string;
+  showTime: boolean;
 }

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

@@ -19,6 +19,14 @@ import {
 import { ActionType } from '../action-types';
 import { storeUIConfig } from '../../utility';
 
+const keys: (keyof Config)[] = [
+  'useAmericanDate',
+  'greetingsSchema',
+  'daySchema',
+  'monthSchema',
+  'showTime',
+];
+
 export const getConfig = () => async (dispatch: Dispatch<GetConfigAction>) => {
   try {
     const res = await axios.get<ApiResponse<Config>>('/api/config');
@@ -32,12 +40,6 @@ export const getConfig = () => async (dispatch: Dispatch<GetConfigAction>) => {
     document.title = res.data.data.customTitle;
 
     // Store settings for priority UI elements
-    const keys: (keyof Config)[] = [
-      'useAmericanDate',
-      'greetingsSchema',
-      'daySchema',
-      'monthSchema',
-    ];
     for (let key of keys) {
       storeUIConfig(key, res.data.data);
     }
@@ -66,12 +68,6 @@ export const updateConfig =
       });
 
       // Store settings for priority UI elements
-      const keys: (keyof Config)[] = [
-        'useAmericanDate',
-        'greetingsSchema',
-        'daySchema',
-        'monthSchema',
-      ];
       for (let key of keys) {
         storeUIConfig(key, res.data.data);
       }

client/src/utility/index.ts

@@ -8,3 +8,4 @@ export * from './templateObjects';
 export * from './inputHandler';
 export * from './storeUIConfig';
 export * from './validators';
+export * from './parseTime';

client/src/utility/parseTime.ts

@@ -0,0 +1,11 @@
+export const parseTime = (time: number, ms = false) => {
+  if (ms) {
+    if (time >= 10 && time < 100) {
+      return `0${time}`;
+    } else if (time < 10) {
+      return `00${time}`;
+    }
+  }
+
+  return time < 10 ? `0${time}` : time.toString();
+};

client/src/utility/templateObjects/configTemplate.ts

@@ -27,4 +27,5 @@ export const configTemplate: Config = {
   daySchema: 'Sunday;Monday;Tuesday;Wednesday;Thursday;Friday;Saturday',
   monthSchema:
     'January;February;March;April;May;June;July;August;September;October;November;December',
+  showTime: false,
 };

client/src/utility/templateObjects/settingsTemplate.ts

@@ -19,6 +19,7 @@ export const otherSettingsTemplate: OtherSettingsForm = {
   daySchema: 'Sunday;Monday;Tuesday;Wednesday;Thursday;Friday;Saturday',
   monthSchema:
     'January;February;March;April;May;June;July;August;September;October;November;December',
+  showTime: false,
 };
 
 export const weatherSettingsTemplate: WeatherForm = {

utils/init/initialConfig.json

@@ -23,5 +23,6 @@
   "disableAutofocus": false,
   "greetingsSchema": "Good evening!;Good afternoon!;Good morning!;Good night!",
   "daySchema": "Sunday;Monday;Tuesday;Wednesday;Thursday;Friday;Saturday",
-  "monthSchema": "January;February;March;April;May;June;July;August;September;October;November;December"
+  "monthSchema": "January;February;March;April;May;June;July;August;September;October;November;December",
+  "showTime": false
 }