From 80f1f5e81cced5c72fd5bcb6bee4c8b454ba5d27 Mon Sep 17 00:00:00 2001 From: Sina Blattmann Date: Thu, 6 Jul 2023 11:02:31 +0200 Subject: [PATCH] fix some styling, add languages --- typescript/Frontend/lang/en.json | 176 +++++------------- typescript/Frontend/src/App.tsx | 14 +- .../src/components/Layout/InnovenergyTabs.tsx | 2 +- .../src/components/Layout/LanguageSelect.tsx | 4 + typescript/Frontend/src/index.tsx | 85 +++++---- typescript/Frontend/src/lang/de.json | 57 ++++-- typescript/Frontend/src/lang/fr.json | 47 +++++ 7 files changed, 188 insertions(+), 197 deletions(-) create mode 100644 typescript/Frontend/src/lang/fr.json diff --git a/typescript/Frontend/lang/en.json b/typescript/Frontend/lang/en.json index ccc3888a1..57cfe6a64 100644 --- a/typescript/Frontend/lang/en.json +++ b/typescript/Frontend/lang/en.json @@ -1,135 +1,47 @@ { - "Information": { - "defaultMessage": "Information" - }, - "addNewChild": { - "defaultMessage": "Add new child" - }, - "addNewDialogButton": { - "defaultMessage": "Add new dialog button" - }, - "addUser": { - "defaultMessage": "Create user" - }, - "alarms": { - "defaultMessage": "Alarms" - }, - "applyChanges": { - "defaultMessage": "Apply changes" - }, - "country": { - "defaultMessage": "Country" - }, - "createNewFolder": { - "defaultMessage": "Create new folder" - }, - "createNewUser": { - "defaultMessage": "Create new user" - }, - "customerName": { - "defaultMessage": "Customer" - }, - "email": { - "defaultMessage": "Email" - }, - "english": { - "defaultMessage": "English" - }, + "Information": "Information", + "addNewChild": "Add new child", + "addNewDialogButton": "Add new dialog button", + "addUser": "Create user", + "alarms": "Alarms", + "applyChanges": "Apply changes", + "country": "Country", + "createNewFolder": "Create new folder", + "createNewUser": "Create new user", + "customerName": "Customer", + "email": "Email", + "english": "English", "error": {}, - "folder": { - "defaultMessage": "Folder" - }, - "german": { - "defaultMessage": "German" - }, - "groupTabs": { - "defaultMessage": "Group tabs" - }, - "groupTree": { - "defaultMessage": "Group tree" - }, - "information": { - "defaultMessage": "Information" - }, - "inheritedAccess": { - "defaultMessage": "Inherited access from" - }, - "installation": { - "defaultMessage": "Installation" - }, - "installationTabs": { - "defaultMessage": "Installation tabs" - }, - "installations": { - "defaultMessage": "Installations" - }, - "lastWeek": { - "defaultMessage": "Last week" - }, - "location": { - "defaultMessage": "Location" - }, - "log": { - "defaultMessage": "Log" - }, - "logout": { - "defaultMessage": "Logout" - }, - "makeASelection": { - "defaultMessage": "Please make a selection on the left" - }, - "manageAccess": { - "defaultMessage": "Manage access" - }, - "move": { - "defaultMessage": "Move" - }, - "moveTo": { - "defaultMessage": "Move to" - }, - "moveTree": { - "defaultMessage": "Move tree" - }, - "name": { - "defaultMessage": "Name" - }, - "navigationTabs": { - "defaultMessage": "Navigation tabs" - }, - "orderNumbers": { - "defaultMessage": "Order number" - }, - "region": { - "defaultMessage": "Region" - }, - "requiredLocation": { - "defaultMessage": "Location is required" - }, - "requiredName": { - "defaultMessage": "Name is required" - }, - "requiredRegion": { - "defaultMessage": "Region is required" - }, - "search": { - "defaultMessage": "Search" - }, - "submit": { - "defaultMessage": "Submit" - }, - "updateFolderErrorMessage": { - "defaultMessage": "Couldn't update folder, an error occured" - }, - "updatedSuccessfully": { - "defaultMessage": "Updated successfully" - }, - "user": { - "defaultMessage": "User" - }, - "userTabs": { - "defaultMessage": "user tabs" - }, - "users": { - "defaultMessage": "Users" - } + "folder": "Folder", + "german": "German", + "groupTabs": "Group tabs", + "groupTree": "Group tree", + "information": "Information", + "inheritedAccess": "Inherited access from", + "installation": "Installation", + "installationTabs": "Installation tabs", + "installations": "Installations", + "lastWeek": "Last week", + "location": "Location", + "log": "Log", + "logout": "Logout", + "makeASelection": "Please make a selection on the left", + "manageAccess": "Manage access", + "move": "Move", + "moveTo": "Move to", + "moveTree": "Move tree", + "name": "Name", + "navigationTabs": "Navigation tabs", + "orderNumbers": "Order number", + "region": "Region", + "requiredLocation": "Location is required", + "requiredName": "Name is required", + "requiredRegion": "Region is required", + "search": "Search", + "submit": "Submit", + "updateFolderErrorMessage": "Couldn't update folder, an error occured", + "updatedSuccessfully": "Updated successfully", + "user": "User", + "userTabs": "user tabs", + "users": "Users" } diff --git a/typescript/Frontend/src/App.tsx b/typescript/Frontend/src/App.tsx index da884d261..067d09af0 100644 --- a/typescript/Frontend/src/App.tsx +++ b/typescript/Frontend/src/App.tsx @@ -4,10 +4,11 @@ import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom"; import { Container, Grid, colors } from "@mui/material"; import routes from "./routes.json"; -import { IntlProvider } from "react-intl"; +import { IntlProvider, MessageFormatElement } from "react-intl"; import { useContext, useState } from "react"; import en from "./lang/en.json"; import de from "./lang/de.json"; +import fr from "./lang/fr.json"; import LanguageSelect from "./components/Layout/LanguageSelect"; import LogoutButton from "./components/Layout/LogoutButton"; import Users from "./components/Users/Users"; @@ -16,7 +17,6 @@ import InstallationPage from "./components/Installations/InstallationPage"; import { UserContext } from "./components/Context/UserContextProvider"; import ResetPassword from "./ResetPassword"; import innovenergyLogo from "./resources/test.gif"; -import { Background } from "reactflow"; const App = () => { const { token, setToken, removeToken } = useToken(); @@ -25,10 +25,14 @@ const App = () => { const { getCurrentUser } = useContext(UserContext); const getTranslations = () => { - if (language === "DE") { - return de; + switch (language) { + case "DE": + return de; + case "EN": + return en; + case "FR": + return fr; } - return en; }; if (!token) { diff --git a/typescript/Frontend/src/components/Layout/InnovenergyTabs.tsx b/typescript/Frontend/src/components/Layout/InnovenergyTabs.tsx index 109782b91..714afad3d 100644 --- a/typescript/Frontend/src/components/Layout/InnovenergyTabs.tsx +++ b/typescript/Frontend/src/components/Layout/InnovenergyTabs.tsx @@ -30,7 +30,7 @@ const InnovenergyTabs = (props: AntTabsProps) => { "& .MuiTabs-indicator": { display: "flex", justifyContent: "center", - backgroundColor: "red", + backgroundColor: "inherit", }, "&.MuiTabs-root": { width: "100%", diff --git a/typescript/Frontend/src/components/Layout/LanguageSelect.tsx b/typescript/Frontend/src/components/Layout/LanguageSelect.tsx index d30b7fd9e..593c7a030 100644 --- a/typescript/Frontend/src/components/Layout/LanguageSelect.tsx +++ b/typescript/Frontend/src/components/Layout/LanguageSelect.tsx @@ -5,6 +5,7 @@ interface LanguageSelectProps { language: string; setLanguage: (language: string) => void; } + const LanguageSelect = (props: LanguageSelectProps) => { return ( ); }; diff --git a/typescript/Frontend/src/index.tsx b/typescript/Frontend/src/index.tsx index 32d58d287..9f610827c 100644 --- a/typescript/Frontend/src/index.tsx +++ b/typescript/Frontend/src/index.tsx @@ -3,68 +3,67 @@ import ReactDOM from "react-dom/client"; import "./index.css"; import App from "./App"; import reportWebVitals from "./reportWebVitals"; -import { createTheme, ThemeProvider } from "@mui/material"; +import {createTheme, ThemeProvider} from "@mui/material"; import UserContextProvider from "./components/Context/UserContextProvider"; -import { orange } from "@mui/material/colors"; const root = ReactDOM.createRoot( - document.getElementById("root") as HTMLElement + document.getElementById("root") as HTMLElement ); export const colors = { - black: "#000000", - blueBlack: "#2b3e54", - borderColor: "#a8b0be", + black: "#000000", + blueBlack: "#2b3e54", + borderColor: "#a8b0be", - background: "#f3f4f7", - //change this color in index.css too + background: "#f3f4f7", + //change this color in index.css too - greyDark: "#d1d7de", - greyLight: "#e1e4e7", + greyDark: "#d1d7de", + greyLight: "#e1e4e7", - orangeSelected: "#ffd280", - orangeHover: "#ffe4b3", + orangeSelected: "#ffd280", + orangeHover: "#ffe4b3", - orangeDark: "#ffc04d", + orangeDark: "#ffc04d", }; const theme = createTheme({ - components: { - MuiButtonBase: { - defaultProps: { - disableRipple: true, - }, + components: { + MuiButtonBase: { + defaultProps: { + disableRipple: true, + }, + }, }, - }, - palette: { - text: { - primary: colors.blueBlack, - secondary: "#000000", - disabled: colors.borderColor, + palette: { + text: { + primary: colors.blueBlack, + secondary: "#000000", + disabled: colors.borderColor, + }, + primary: { + main: colors.background, + light: colors.greyLight, + dark: colors.greyDark, + }, + secondary: { + main: colors.orangeSelected, + light: colors.orangeHover, + dark: colors.orangeDark, + }, }, - primary: { - main: colors.background, - light: colors.greyLight, - dark: colors.greyDark, + typography: { + fontFamily: `"Ubuntu", sans-serif`, + fontWeightRegular: 300, }, - secondary: { - main: colors.orangeSelected, - light: colors.orangeHover, - dark: colors.orangeDark, - }, - }, - typography: { - fontFamily: `"Ubuntu", sans-serif`, - fontWeightRegular: 300, - }, }); root.render( - - - - - + + + + + ); // If you want to start measuring performance in your app, pass a function diff --git a/typescript/Frontend/src/lang/de.json b/typescript/Frontend/src/lang/de.json index 295b87a34..56edefed1 100644 --- a/typescript/Frontend/src/lang/de.json +++ b/typescript/Frontend/src/lang/de.json @@ -1,22 +1,47 @@ { - "liveView": "Live Ansicht", - "allInstallations": "Alle Installationen", - "applyChanges": "Änderungen übernehmen", + "information": "Information", + "addNewChild": "Neues Kind hinzufügen", + "addNewDialogButton": "Neue Dialogschaltfläche hinzufügen", + "addUser": "Nutzer erstellen", + "alarms": "Alarme", + "applyChanges": "Änderungen speichern", "country": "Land", + "createNewFolder": "Neuen Ordner erstellen", + "createNewUser": "Neuen Nutzer erstellen", "customerName": "Kundenname", + "email": "Email", "english": "Englisch", - "german": "Deutsch", - "installation": "Installation", - "location": "Ort", - "log": "Log", - "orderNumbers": "Bestellnummern", - "region": "Region", - "search": "Suche", - "users": "Benutzer", - "logout": "Logout", - "updatedSuccessfully": "Erfolgreich aktualisiert", - "groups": "Gruppen", - "group": "Gruppe", + "error": "Fehler", "folder": "Ordner", - "updateFolderErrorMessage": "Der Ordner konnte nicht aktualisiert werden, ein Fehler ist aufgetreten" + "german": "Deutsch", + "groupTabs": "Gruppen", + "groupTree": "Gruppenbaum", + "information": "Information", + "inheritedAccess": "Vererbter Zugriff von", + "installation": "Installation", + "installationTabs": "Installationen", + "installations": "Installationen", + "lastWeek": "Letzte Woche", + "location": "Standort", + "log": "Logbuch", + "logout": "Abmelden", + "makeASelection": "Bitte wählen Sie links eine Auswahl", + "manageAccess": "Zugriff verwalten", + "move": "Verschieben", + "moveTo": "Verschieben zu", + "moveTree": "Baum verschieben", + "name": "Name", + "navigationTabs": "Navigation", + "orderNumbers": "Bestellnummer", + "region": "Region", + "requiredLocation": "Standort ist erforderlich", + "requiredName": "Name ist erforderlich", + "requiredRegion": "Region ist erforderlich", + "search": "Suche", + "submit": "Senden", + "updateFolderErrorMessage": "Fehler, Ordner kann nicht aktualisiert werden", + "updatedSuccessfully": "Erfolgreich aktualisiert", + "user": "Nutzer", + "userTabs": "Nutzer", + "users": "Nutzer" } diff --git a/typescript/Frontend/src/lang/fr.json b/typescript/Frontend/src/lang/fr.json new file mode 100644 index 000000000..f7834a5fe --- /dev/null +++ b/typescript/Frontend/src/lang/fr.json @@ -0,0 +1,47 @@ +{ + "information": "Informations", + "addNewChild": "Ajouter un nouvel enfant", + "addNewDialogButton": "Ajouter un nouveau bouton de dialogue", + "addUser": "Créer un utilisateur", + "alarms": "Alarmes", + "applyChanges": "Appliquer les modifications", + "country": "Pays", + "createNewFolder": "Créer un nouveau dossier", + "createNewUser": "Créer un nouvel utilisateur", + "customerName": "Nom du client", + "email": "E-mail", + "english": "Anglais", + "error": "Erreur", + "folder": "Dossier", + "german": "Allemand", + "groupTabs": "Onglets de groupe", + "groupTree": "Arbre de groupe", + "information": "Informations", + "inheritedAccess": "Accès hérité de", + "installation": "Installation", + "installationTabs": "Onglets d'installation", + "installations": "Installations", + "lastWeek": "La semaine dernière", + "location": "Localisation", + "log": "Journal", + "logout": "Déconnexion", + "makeASelection": "Veuillez faire une sélection à gauche", + "manageAccess": "Gérer l'accès", + "move": "Déplacer", + "moveTo": "Déplacer à", + "moveTree": "Déplacer l'arbre", + "name": "Nom", + "navigationTabs": "Onglets de navigation", + "orderNumbers": "Numéro de commande", + "region": "Région", + "requiredLocation": "L'emplacement est requis", + "requiredName": "Le nom est obligatoire", + "requiredRegion": "La région est obligatoire", + "search": "Recherche", + "submit": "Soumettre", + "updateFolderErrorMessage": "Une erreur s'est produite, impossible de mettre à jour le dossier.", + "updatedSuccessfully": "Mise à jour réussie", + "user": "Utilisateur", + "userTabs": "Onglets utilisateurs", + "users": "Utilisateurs" +}