fix some styling, add languages

This commit is contained in:
Sina Blattmann 2023-07-06 11:02:31 +02:00
parent ca85fc17e5
commit 80f1f5e81c
7 changed files with 188 additions and 197 deletions

View File

@ -1,135 +1,47 @@
{ {
"Information": { "Information": "Information",
"defaultMessage": "Information" "addNewChild": "Add new child",
}, "addNewDialogButton": "Add new dialog button",
"addNewChild": { "addUser": "Create user",
"defaultMessage": "Add new child" "alarms": "Alarms",
}, "applyChanges": "Apply changes",
"addNewDialogButton": { "country": "Country",
"defaultMessage": "Add new dialog button" "createNewFolder": "Create new folder",
}, "createNewUser": "Create new user",
"addUser": { "customerName": "Customer",
"defaultMessage": "Create user" "email": "Email",
}, "english": "English",
"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"
},
"error": {}, "error": {},
"folder": { "folder": "Folder",
"defaultMessage": "Folder" "german": "German",
}, "groupTabs": "Group tabs",
"german": { "groupTree": "Group tree",
"defaultMessage": "German" "information": "Information",
}, "inheritedAccess": "Inherited access from",
"groupTabs": { "installation": "Installation",
"defaultMessage": "Group tabs" "installationTabs": "Installation tabs",
}, "installations": "Installations",
"groupTree": { "lastWeek": "Last week",
"defaultMessage": "Group tree" "location": "Location",
}, "log": "Log",
"information": { "logout": "Logout",
"defaultMessage": "Information" "makeASelection": "Please make a selection on the left",
}, "manageAccess": "Manage access",
"inheritedAccess": { "move": "Move",
"defaultMessage": "Inherited access from" "moveTo": "Move to",
}, "moveTree": "Move tree",
"installation": { "name": "Name",
"defaultMessage": "Installation" "navigationTabs": "Navigation tabs",
}, "orderNumbers": "Order number",
"installationTabs": { "region": "Region",
"defaultMessage": "Installation tabs" "requiredLocation": "Location is required",
}, "requiredName": "Name is required",
"installations": { "requiredRegion": "Region is required",
"defaultMessage": "Installations" "search": "Search",
}, "submit": "Submit",
"lastWeek": { "updateFolderErrorMessage": "Couldn't update folder, an error occured",
"defaultMessage": "Last week" "updatedSuccessfully": "Updated successfully",
}, "user": "User",
"location": { "userTabs": "user tabs",
"defaultMessage": "Location" "users": "Users"
},
"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"
}
} }

View File

@ -4,10 +4,11 @@ import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
import { Container, Grid, colors } from "@mui/material"; import { Container, Grid, colors } from "@mui/material";
import routes from "./routes.json"; import routes from "./routes.json";
import { IntlProvider } from "react-intl"; import { IntlProvider, MessageFormatElement } from "react-intl";
import { useContext, useState } from "react"; import { useContext, useState } from "react";
import en from "./lang/en.json"; import en from "./lang/en.json";
import de from "./lang/de.json"; import de from "./lang/de.json";
import fr from "./lang/fr.json";
import LanguageSelect from "./components/Layout/LanguageSelect"; import LanguageSelect from "./components/Layout/LanguageSelect";
import LogoutButton from "./components/Layout/LogoutButton"; import LogoutButton from "./components/Layout/LogoutButton";
import Users from "./components/Users/Users"; import Users from "./components/Users/Users";
@ -16,7 +17,6 @@ import InstallationPage from "./components/Installations/InstallationPage";
import { UserContext } from "./components/Context/UserContextProvider"; import { UserContext } from "./components/Context/UserContextProvider";
import ResetPassword from "./ResetPassword"; import ResetPassword from "./ResetPassword";
import innovenergyLogo from "./resources/test.gif"; import innovenergyLogo from "./resources/test.gif";
import { Background } from "reactflow";
const App = () => { const App = () => {
const { token, setToken, removeToken } = useToken(); const { token, setToken, removeToken } = useToken();
@ -25,10 +25,14 @@ const App = () => {
const { getCurrentUser } = useContext(UserContext); const { getCurrentUser } = useContext(UserContext);
const getTranslations = () => { const getTranslations = () => {
if (language === "DE") { switch (language) {
return de; case "DE":
return de;
case "EN":
return en;
case "FR":
return fr;
} }
return en;
}; };
if (!token) { if (!token) {

View File

@ -30,7 +30,7 @@ const InnovenergyTabs = (props: AntTabsProps) => {
"& .MuiTabs-indicator": { "& .MuiTabs-indicator": {
display: "flex", display: "flex",
justifyContent: "center", justifyContent: "center",
backgroundColor: "red", backgroundColor: "inherit",
}, },
"&.MuiTabs-root": { "&.MuiTabs-root": {
width: "100%", width: "100%",

View File

@ -5,6 +5,7 @@ interface LanguageSelectProps {
language: string; language: string;
setLanguage: (language: string) => void; setLanguage: (language: string) => void;
} }
const LanguageSelect = (props: LanguageSelectProps) => { const LanguageSelect = (props: LanguageSelectProps) => {
return ( return (
<Select <Select
@ -20,6 +21,9 @@ const LanguageSelect = (props: LanguageSelectProps) => {
<MenuItem id="german-menu-item" value="DE"> <MenuItem id="german-menu-item" value="DE">
<FormattedMessage id="german" defaultMessage="German" /> <FormattedMessage id="german" defaultMessage="German" />
</MenuItem> </MenuItem>
<MenuItem id="german-menu-item" value="FR">
<FormattedMessage id="french" defaultMessage="French" />
</MenuItem>
</Select> </Select>
); );
}; };

View File

@ -3,68 +3,67 @@ import ReactDOM from "react-dom/client";
import "./index.css"; import "./index.css";
import App from "./App"; import App from "./App";
import reportWebVitals from "./reportWebVitals"; import reportWebVitals from "./reportWebVitals";
import { createTheme, ThemeProvider } from "@mui/material"; import {createTheme, ThemeProvider} from "@mui/material";
import UserContextProvider from "./components/Context/UserContextProvider"; import UserContextProvider from "./components/Context/UserContextProvider";
import { orange } from "@mui/material/colors";
const root = ReactDOM.createRoot( const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement document.getElementById("root") as HTMLElement
); );
export const colors = { export const colors = {
black: "#000000", black: "#000000",
blueBlack: "#2b3e54", blueBlack: "#2b3e54",
borderColor: "#a8b0be", borderColor: "#a8b0be",
background: "#f3f4f7", background: "#f3f4f7",
//change this color in index.css too //change this color in index.css too
greyDark: "#d1d7de", greyDark: "#d1d7de",
greyLight: "#e1e4e7", greyLight: "#e1e4e7",
orangeSelected: "#ffd280", orangeSelected: "#ffd280",
orangeHover: "#ffe4b3", orangeHover: "#ffe4b3",
orangeDark: "#ffc04d", orangeDark: "#ffc04d",
}; };
const theme = createTheme({ const theme = createTheme({
components: { components: {
MuiButtonBase: { MuiButtonBase: {
defaultProps: { defaultProps: {
disableRipple: true, disableRipple: true,
}, },
},
}, },
}, palette: {
palette: { text: {
text: { primary: colors.blueBlack,
primary: colors.blueBlack, secondary: "#000000",
secondary: "#000000", disabled: colors.borderColor,
disabled: colors.borderColor, },
primary: {
main: colors.background,
light: colors.greyLight,
dark: colors.greyDark,
},
secondary: {
main: colors.orangeSelected,
light: colors.orangeHover,
dark: colors.orangeDark,
},
}, },
primary: { typography: {
main: colors.background, fontFamily: `"Ubuntu", sans-serif`,
light: colors.greyLight, fontWeightRegular: 300,
dark: colors.greyDark,
}, },
secondary: {
main: colors.orangeSelected,
light: colors.orangeHover,
dark: colors.orangeDark,
},
},
typography: {
fontFamily: `"Ubuntu", sans-serif`,
fontWeightRegular: 300,
},
}); });
root.render( root.render(
<ThemeProvider theme={theme}> <ThemeProvider theme={theme}>
<UserContextProvider> <UserContextProvider>
<App /> <App/>
</UserContextProvider> </UserContextProvider>
</ThemeProvider> </ThemeProvider>
); );
// If you want to start measuring performance in your app, pass a function // If you want to start measuring performance in your app, pass a function

View File

@ -1,22 +1,47 @@
{ {
"liveView": "Live Ansicht", "information": "Information",
"allInstallations": "Alle Installationen", "addNewChild": "Neues Kind hinzufügen",
"applyChanges": "Änderungen übernehmen", "addNewDialogButton": "Neue Dialogschaltfläche hinzufügen",
"addUser": "Nutzer erstellen",
"alarms": "Alarme",
"applyChanges": "Änderungen speichern",
"country": "Land", "country": "Land",
"createNewFolder": "Neuen Ordner erstellen",
"createNewUser": "Neuen Nutzer erstellen",
"customerName": "Kundenname", "customerName": "Kundenname",
"email": "Email",
"english": "Englisch", "english": "Englisch",
"german": "Deutsch", "error": "Fehler",
"installation": "Installation",
"location": "Ort",
"log": "Log",
"orderNumbers": "Bestellnummern",
"region": "Region",
"search": "Suche",
"users": "Benutzer",
"logout": "Logout",
"updatedSuccessfully": "Erfolgreich aktualisiert",
"groups": "Gruppen",
"group": "Gruppe",
"folder": "Ordner", "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"
} }

View File

@ -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"
}