Added option to set custom day and month

CHANGELOG.md

@@ -1,5 +1,5 @@
 ### v1.7.4 (TBA)
-- [WIP] Added option to set custom greetings and date ([#103](https://github.com/pawelmalak/flame/issues/103))
+- Added option to set custom greetings and date ([#103](https://github.com/pawelmalak/flame/issues/103))
 - Added iOS "Add to homescreen" icon ([#131](https://github.com/pawelmalak/flame/issues/131))
 - Added 3 new themes
 

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

@@ -1,5 +1,5 @@
 export const getDateTime = (): string => {
-  const days = [
+  const days = localStorage.getItem('daySchema')?.split(';') || [
     'Sunday',
     'Monday',
     'Tuesday',
@@ -8,7 +8,8 @@ export const getDateTime = (): string => {
     'Friday',
     'Saturday',
   ];
-  const months = [
+
+  const months = localStorage.getItem('monthSchema')?.split(';') || [
     'January',
     'February',
     'March',

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

@@ -81,6 +81,7 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
     <form onSubmit={(e) => formSubmitHandler(e)}>
       {/* OTHER OPTIONS */}
       <SettingsHeadline text="Miscellaneous" />
+      {/* PAGE TITLE */}
       <InputGroup>
         <label htmlFor="customTitle">Custom page title</label>
         <input
@@ -92,6 +93,8 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
           onChange={(e) => inputChangeHandler(e)}
         />
       </InputGroup>
+
+      {/* DATE FORMAT */}
       <InputGroup>
         <label htmlFor="useAmericanDate">Date formatting</label>
         <select
@@ -107,6 +110,7 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
 
       {/* BEAHVIOR OPTIONS */}
       <SettingsHeadline text="App Behavior" />
+      {/* PIN APPS */}
       <InputGroup>
         <label htmlFor="pinAppsByDefault">
           Pin new applications by default
@@ -121,6 +125,8 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
           <option value={0}>False</option>
         </select>
       </InputGroup>
+
+      {/* PIN CATEGORIES */}
       <InputGroup>
         <label htmlFor="pinCategoriesByDefault">
           Pin new categories by default
@@ -135,6 +141,8 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
           <option value={0}>False</option>
         </select>
       </InputGroup>
+
+      {/* SORT TYPE */}
       <InputGroup>
         <label htmlFor="useOrdering">Sorting type</label>
         <select
@@ -148,6 +156,8 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
           <option value="orderId">Custom order</option>
         </select>
       </InputGroup>
+
+      {/* APPS OPPENING */}
       <InputGroup>
         <label htmlFor="appsSameTab">Open applications in the same tab</label>
         <select
@@ -160,6 +170,8 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
           <option value={0}>False</option>
         </select>
       </InputGroup>
+
+      {/* BOOKMARKS OPPENING */}
       <InputGroup>
         <label htmlFor="bookmarksSameTab">Open bookmarks in the same tab</label>
         <select
@@ -175,6 +187,7 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
 
       {/* MODULES OPTIONS */}
       <SettingsHeadline text="Modules" />
+      {/* HIDE HEADER */}
       <InputGroup>
         <label htmlFor="hideHeader">Hide greeting and date</label>
         <select
@@ -187,6 +200,8 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
           <option value={0}>False</option>
         </select>
       </InputGroup>
+
+      {/* CUSTOM GREETINGS */}
       <InputGroup>
         <label htmlFor="greetingsSchema">Custom greetings</label>
         <input
@@ -202,6 +217,36 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
           used
         </span>
       </InputGroup>
+
+      {/* CUSTOM DAYS */}
+      <InputGroup>
+        <label htmlFor="daySchema">Custom weekday names</label>
+        <input
+          type="text"
+          id="daySchema"
+          name="daySchema"
+          placeholder="Sunday;Monday;Tuesday"
+          value={formData.daySchema}
+          onChange={(e) => inputChangeHandler(e)}
+        />
+        <span>Names must be separated with semicolon</span>
+      </InputGroup>
+
+      {/* CUSTOM MONTHS */}
+      <InputGroup>
+        <label htmlFor="monthSchema">Custom month names</label>
+        <input
+          type="text"
+          id="monthSchema"
+          name="monthSchema"
+          placeholder="January;February;March"
+          value={formData.monthSchema}
+          onChange={(e) => inputChangeHandler(e)}
+        />
+        <span>Names must be separated with semicolon</span>
+      </InputGroup>
+
+      {/* HIDE APPS */}
       <InputGroup>
         <label htmlFor="hideApps">Hide applications</label>
         <select
@@ -214,6 +259,8 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
           <option value={0}>False</option>
         </select>
       </InputGroup>
+
+      {/* HIDE CATEGORIES */}
       <InputGroup>
         <label htmlFor="hideCategories">Hide categories</label>
         <select
@@ -229,6 +276,7 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
 
       {/* DOCKER SETTINGS */}
       <SettingsHeadline text="Docker" />
+      {/* CUSTOM DOCKER SOCKET HOST */}
       <InputGroup>
         <label htmlFor="dockerHost">Docker Host</label>
         <input
@@ -240,6 +288,8 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
           onChange={(e) => inputChangeHandler(e)}
         />
       </InputGroup>
+
+      {/* USE DOCKER API */}
       <InputGroup>
         <label htmlFor="dockerApps">Use Docker API</label>
         <select
@@ -252,6 +302,8 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
           <option value={0}>False</option>
         </select>
       </InputGroup>
+
+      {/* UNPIN DOCKER APPS */}
       <InputGroup>
         <label htmlFor="unpinStoppedApps">
           Unpin stopped containers / other apps
@@ -269,6 +321,7 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
 
       {/* KUBERNETES SETTINGS */}
       <SettingsHeadline text="Kubernetes" />
+      {/* USE KUBERNETES */}
       <InputGroup>
         <label htmlFor="kubernetesApps">Use Kubernetes Ingress API</label>
         <select

client/src/interfaces/Config.ts

@@ -22,4 +22,6 @@ export interface Config {
   useAmericanDate: boolean;
   disableAutofocus: boolean;
   greetingsSchema: string;
+  daySchema: string;
+  monthSchema: string;
 }

client/src/interfaces/Forms.ts

@@ -28,4 +28,6 @@ export interface OtherSettingsForm {
   unpinStoppedApps: boolean;
   useAmericanDate: boolean;
   greetingsSchema: string;
+  daySchema: string;
+  monthSchema: string;
 }

client/src/store/actions/config.ts

@@ -3,6 +3,7 @@ import { Dispatch } from 'redux';
 import { ActionTypes } from './actionTypes';
 import { Config, ApiResponse, Query } from '../../interfaces';
 import { CreateNotificationAction } from './notification';
+import { storeUIConfig } from '../../utility';
 
 export interface GetConfigAction {
   type: ActionTypes.getConfig;
@@ -22,8 +23,15 @@ export const getConfig = () => async (dispatch: Dispatch) => {
     document.title = res.data.data.customTitle;
 
     // Store settings for priority UI elements
-    localStorage.setItem('useAmericanDate', `${res.data.data.useAmericanDate}`);
+    const keys: (keyof Config)[] = [
-    localStorage.setItem('greetingsSchema', `${res.data.data.greetingsSchema}`);
+      'useAmericanDate',
+      'greetingsSchema',
+      'daySchema',
+      'monthSchema',
+    ];
+    for (let key of keys) {
+      storeUIConfig(key, res.data.data);
+    }
   } catch (err) {
     console.log(err);
   }
@@ -52,8 +60,15 @@ export const updateConfig = (formData: any) => async (dispatch: Dispatch) => {
     });
 
     // Store settings for priority UI elements
-    localStorage.setItem('useAmericanDate', `${res.data.data.useAmericanDate}`);
+    const keys: (keyof Config)[] = [
-    localStorage.setItem('greetingsSchema', `${res.data.data.greetingsSchema}`);
+      'useAmericanDate',
+      'greetingsSchema',
+      'daySchema',
+      'monthSchema',
+    ];
+    for (let key of keys) {
+      storeUIConfig(key, res.data.data);
+    }
   } catch (err) {
     console.log(err);
   }

client/src/store/reducers/config.ts

@@ -10,7 +10,7 @@ export interface State {
 
 const initialState: State = {
   loading: true,
-  config: configTemplate,
+  config: { ...configTemplate },
   customQueries: [],
 };
 

client/src/utility/index.ts

@@ -6,3 +6,4 @@ export * from './searchParser';
 export * from './redirectUrl';
 export * from './templateObjects';
 export * from './inputHandler';
+export * from './storeUIConfig';

client/src/utility/storeUIConfig.ts

@@ -0,0 +1,8 @@
+import { Config } from '../interfaces';
+
+export const storeUIConfig = <K extends keyof Config>(
+  key: K,
+  config: Config
+) => {
+  localStorage.setItem(key, `${config[key]}`);
+};

client/src/utility/templateObjects/configTemplate.ts

@@ -24,4 +24,7 @@ export const configTemplate: Config = {
   useAmericanDate: false,
   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',
 };

client/src/utility/templateObjects/settingsTemplate.ts

@@ -16,6 +16,9 @@ export const otherSettingsTemplate: OtherSettingsForm = {
   unpinStoppedApps: true,
   useAmericanDate: 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',
 };
 
 export const weatherSettingsTemplate: WeatherForm = {

utils/init/initialConfig.json

@@ -21,5 +21,7 @@
   "unpinStoppedApps": false,
   "useAmericanDate": false,
   "disableAutofocus": false,
-  "greetingsSchema": "Good evening!;Good afternoon!;Good morning!;Good night!"
+  "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"
 }