From ea57dbf75010c284d693dc7a3eac24ebc609e4e7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Malak?= Date: Wed, 10 Nov 2021 14:19:41 +0100 Subject: [PATCH] Added current time to header --- .../Home/Header/functions/getDateTime.ts | 15 ++++++++++++-- .../Settings/OtherSettings/OtherSettings.tsx | 20 +++++++++++++++++-- client/src/interfaces/Config.ts | 1 + client/src/interfaces/Forms.ts | 1 + client/src/store/action-creators/config.ts | 20 ++++++++----------- client/src/utility/index.ts | 1 + client/src/utility/parseTime.ts | 11 ++++++++++ .../utility/templateObjects/configTemplate.ts | 1 + .../templateObjects/settingsTemplate.ts | 1 + utils/init/initialConfig.json | 3 ++- 10 files changed, 57 insertions(+), 17 deletions(-) create mode 100644 client/src/utility/parseTime.ts diff --git a/client/src/components/Home/Header/functions/getDateTime.ts b/client/src/components/Home/Header/functions/getDateTime.ts index db79c69..69cd78b 100644 --- a/client/src/components/Home/Header/functions/getDateTime.ts +++ b/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}`; } }; diff --git a/client/src/components/Settings/OtherSettings/OtherSettings.tsx b/client/src/components/Settings/OtherSettings/OtherSettings.tsx index 3ec317f..85b9f06 100644 --- a/client/src/components/Settings/OtherSettings/OtherSettings.tsx +++ b/client/src/components/Settings/OtherSettings/OtherSettings.tsx @@ -172,8 +172,8 @@ export const OtherSettings = (): JSX.Element => { - {/* MODULES OPTIONS */} - + {/* HEADER OPTIONS */} + {/* HIDE HEADER */} @@ -233,6 +233,22 @@ export const OtherSettings = (): JSX.Element => { Names must be separated with semicolon + {/* SHOW TIME */} + + + + + + {/* MODULES OPTIONS */} + {/* HIDE APPS */} diff --git a/client/src/interfaces/Config.ts b/client/src/interfaces/Config.ts index 8ac37e5..7302d36 100644 --- a/client/src/interfaces/Config.ts +++ b/client/src/interfaces/Config.ts @@ -24,4 +24,5 @@ export interface Config { greetingsSchema: string; daySchema: string; monthSchema: string; + showTime: boolean; } diff --git a/client/src/interfaces/Forms.ts b/client/src/interfaces/Forms.ts index 9f3847a..66f4136 100644 --- a/client/src/interfaces/Forms.ts +++ b/client/src/interfaces/Forms.ts @@ -30,4 +30,5 @@ export interface OtherSettingsForm { greetingsSchema: string; daySchema: string; monthSchema: string; + showTime: boolean; } diff --git a/client/src/store/action-creators/config.ts b/client/src/store/action-creators/config.ts index 67eeac2..7522ec8 100644 --- a/client/src/store/action-creators/config.ts +++ b/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) => { try { const res = await axios.get>('/api/config'); @@ -32,12 +40,6 @@ export const getConfig = () => async (dispatch: Dispatch) => { 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); } diff --git a/client/src/utility/index.ts b/client/src/utility/index.ts index 6afc05c..fb975bc 100644 --- a/client/src/utility/index.ts +++ b/client/src/utility/index.ts @@ -8,3 +8,4 @@ export * from './templateObjects'; export * from './inputHandler'; export * from './storeUIConfig'; export * from './validators'; +export * from './parseTime'; diff --git a/client/src/utility/parseTime.ts b/client/src/utility/parseTime.ts new file mode 100644 index 0000000..7c86736 --- /dev/null +++ b/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(); +}; diff --git a/client/src/utility/templateObjects/configTemplate.ts b/client/src/utility/templateObjects/configTemplate.ts index 1422bb7..6f51305 100644 --- a/client/src/utility/templateObjects/configTemplate.ts +++ b/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, }; diff --git a/client/src/utility/templateObjects/settingsTemplate.ts b/client/src/utility/templateObjects/settingsTemplate.ts index 575289e..981ffba 100644 --- a/client/src/utility/templateObjects/settingsTemplate.ts +++ b/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 = { diff --git a/utils/init/initialConfig.json b/utils/init/initialConfig.json index 5c3573d..8f9b2f8 100644 --- a/utils/init/initialConfig.json +++ b/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 }