From 46581b33c9f684572a425f854f06e121f697f97e Mon Sep 17 00:00:00 2001 From: Tudor Stanciu Date: Mon, 27 Mar 2023 01:08:55 +0300 Subject: [PATCH] settings page changes --- public/locales/en/translations.json | 6 +++ public/locales/ro/translations.json | 6 +++ src/components/layout/AppRoutes.js | 2 +- src/features/settings/SettingsContainer.js | 49 +++++++++++++++++++ .../AppearanceContainer.js} | 4 +- .../ThemeSettings.js | 0 .../language/LanguageComponent.js | 0 .../language/LanguageContainer.js | 0 .../notifications/NotificationsContainer.js | 13 +++++ 9 files changed, 77 insertions(+), 3 deletions(-) create mode 100644 src/features/settings/SettingsContainer.js rename src/features/settings/{components/SettingsContainer.js => appearance/AppearanceContainer.js} (75%) rename src/features/settings/{components => appearance}/ThemeSettings.js (100%) rename src/features/settings/{components => appearance}/language/LanguageComponent.js (100%) rename src/features/settings/{components => appearance}/language/LanguageContainer.js (100%) create mode 100644 src/features/settings/notifications/NotificationsContainer.js diff --git a/public/locales/en/translations.json b/public/locales/en/translations.json index 4c67fa5..6f54e06 100644 --- a/public/locales/en/translations.json +++ b/public/locales/en/translations.json @@ -61,6 +61,12 @@ "Advanced": "Advanced" } }, + "Settings": { + "Navigation": { + "Appearance": "Appearance", + "Notifications": "Notifications" + } + }, "About": { "Navigation": { "System": "System", diff --git a/public/locales/ro/translations.json b/public/locales/ro/translations.json index b54b91b..135429b 100644 --- a/public/locales/ro/translations.json +++ b/public/locales/ro/translations.json @@ -52,6 +52,12 @@ "Advanced": "Avansat" } }, + "Settings": { + "Navigation": { + "Appearance": "Aspect", + "Notifications": "Notificări" + } + }, "About": { "Navigation": { "System": "Sistem", diff --git a/src/components/layout/AppRoutes.js b/src/components/layout/AppRoutes.js index 6935a82..43e83bb 100644 --- a/src/components/layout/AppRoutes.js +++ b/src/components/layout/AppRoutes.js @@ -2,7 +2,7 @@ import React from "react"; import { Route, Switch } from "react-router-dom"; import PageNotFound from "./PageNotFound"; import NetworkContainer from "../../features/network/components/NetworkContainer"; -import SettingsContainer from "../../features/settings/components/SettingsContainer"; +import SettingsContainer from "../../features/settings/SettingsContainer"; import DashboardContainer from "../../features/dashboard/components/DashboardContainer"; import UserProfileContainer from "../../features/user/profile/components/UserProfileContainer"; import AboutContainer from "../../features/about/AboutContainer"; diff --git a/src/features/settings/SettingsContainer.js b/src/features/settings/SettingsContainer.js new file mode 100644 index 0000000..8e1ace8 --- /dev/null +++ b/src/features/settings/SettingsContainer.js @@ -0,0 +1,49 @@ +import React, { useState, useMemo } from "react"; +import BrushIcon from "@material-ui/icons/Brush"; +import NotificationsIcon from "@material-ui/icons/Notifications"; +import { useTranslation } from "react-i18next"; +import PageTitle from "../../components/common/PageTitle"; +import NavigationButtons from "../../components/common/NavigationButtons"; +import AppearanceContainer from "./appearance/AppearanceContainer"; +import NotificationsContainer from "./notifications/NotificationsContainer"; + +const NavigationTabs = { + APPEARANCE: "Settings.Navigation.Appearance", + NOTIFICATIONS: "Settings.Navigation.Notifications" +}; + +const tabs = [ + { + code: NavigationTabs.APPEARANCE, + icon: BrushIcon + }, + { + code: NavigationTabs.NOTIFICATIONS, + icon: NotificationsIcon + } +]; + +const SettingsContainer = () => { + const [tab, setTab] = useState(NavigationTabs.APPEARANCE); + const { t } = useTranslation(); + + const navigationTabs = useMemo( + () => tabs.map(z => ({ ...z, tooltip: t(z.code) })), + [t] + ); + + return ( + <> + + } + /> + {tab === NavigationTabs.APPEARANCE && } + {tab === NavigationTabs.NOTIFICATIONS && } + + ); +}; + +export default SettingsContainer; diff --git a/src/features/settings/components/SettingsContainer.js b/src/features/settings/appearance/AppearanceContainer.js similarity index 75% rename from src/features/settings/components/SettingsContainer.js rename to src/features/settings/appearance/AppearanceContainer.js index bace773..868b2e0 100644 --- a/src/features/settings/components/SettingsContainer.js +++ b/src/features/settings/appearance/AppearanceContainer.js @@ -2,7 +2,7 @@ import React from "react"; import LanguageContainer from "./language/LanguageContainer"; import ThemeSettings from "./ThemeSettings"; -const SettingsContainer = () => { +const AppearanceContainer = () => { return ( <> @@ -11,4 +11,4 @@ const SettingsContainer = () => { ); }; -export default SettingsContainer; +export default AppearanceContainer; diff --git a/src/features/settings/components/ThemeSettings.js b/src/features/settings/appearance/ThemeSettings.js similarity index 100% rename from src/features/settings/components/ThemeSettings.js rename to src/features/settings/appearance/ThemeSettings.js diff --git a/src/features/settings/components/language/LanguageComponent.js b/src/features/settings/appearance/language/LanguageComponent.js similarity index 100% rename from src/features/settings/components/language/LanguageComponent.js rename to src/features/settings/appearance/language/LanguageComponent.js diff --git a/src/features/settings/components/language/LanguageContainer.js b/src/features/settings/appearance/language/LanguageContainer.js similarity index 100% rename from src/features/settings/components/language/LanguageContainer.js rename to src/features/settings/appearance/language/LanguageContainer.js diff --git a/src/features/settings/notifications/NotificationsContainer.js b/src/features/settings/notifications/NotificationsContainer.js new file mode 100644 index 0000000..5195ed3 --- /dev/null +++ b/src/features/settings/notifications/NotificationsContainer.js @@ -0,0 +1,13 @@ +import React from "react"; + +const NotificationsContainer = () => { + return ( +
+ Enable/Disable email notifications (for each one separately - when + starting the machine, when stopping) You can go even further and have an + advanced site where you can configure each individual machine. +
+ ); +}; + +export default NotificationsContainer;