Merge branch 'main' of https://git.innov.energy/Innovenergy/git_trunk
This commit is contained in:
Sina Blattmann
commit
ca85fc17e5
|
|
@ -0,0 +1,136 @@
|
|||
{
|
||||
"Information": {
|
||||
"defaultMessage": "Information"
|
||||
},
|
||||
"addNewChild": {
|
||||
"defaultMessage": "Neues Kind hinzufügen"
|
||||
},
|
||||
"addNewDialogButton": {
|
||||
"defaultMessage": "Neue Dialogschaltfläche hinzufügen"
|
||||
},
|
||||
"addUser": {
|
||||
"defaultMessage": "Nutzer erstellen"
|
||||
},
|
||||
"alarms": {
|
||||
"defaultMessage": "Alarme"
|
||||
},
|
||||
"applyChanges": {
|
||||
"defaultMessage": "Änderungen speichern"
|
||||
},
|
||||
"country": {
|
||||
"defaultMessage": "Land"
|
||||
},
|
||||
"createNewFolder": {
|
||||
"defaultMessage": "Neuen Ordner erstellen"
|
||||
},
|
||||
"createNewUser": {
|
||||
"defaultMessage": "Neuen Nutzer erstellen"
|
||||
},
|
||||
"customerName": {
|
||||
"defaultMessage": "Kundenname"
|
||||
},
|
||||
"email": {
|
||||
"defaultMessage": "Email"
|
||||
},
|
||||
"english": {
|
||||
"defaultMessage": "Englisch"
|
||||
},
|
||||
"error": {
|
||||
},
|
||||
"folder": {
|
||||
"defaultMessage": "Ordner"
|
||||
},
|
||||
"german": {
|
||||
"defaultMessage": "Deutsch"
|
||||
},
|
||||
"groupTabs": {
|
||||
"defaultMessage": "Gruppen"
|
||||
},
|
||||
"groupTree": {
|
||||
"defaultMessage": "Gruppenbaum"
|
||||
},
|
||||
"information": {
|
||||
"defaultMessage": "Information"
|
||||
},
|
||||
"inheritedAccess": {
|
||||
"defaultMessage": "Vererbter Zugriff von"
|
||||
},
|
||||
"installation": {
|
||||
"defaultMessage": "Installation"
|
||||
},
|
||||
"installationTabs": {
|
||||
"defaultMessage": "Installationen"
|
||||
},
|
||||
"installations": {
|
||||
"defaultMessage": "Installationen"
|
||||
},
|
||||
"lastWeek": {
|
||||
"defaultMessage": "Letzte Woche"
|
||||
},
|
||||
"location": {
|
||||
"defaultMessage": "Standort"
|
||||
},
|
||||
"log": {
|
||||
"defaultMessage": "Logbuch"
|
||||
},
|
||||
"logout": {
|
||||
"defaultMessage": "Abmelden"
|
||||
},
|
||||
"makeASelection": {
|
||||
"defaultMessage": "Bitte wählen Sie links eine Auswahl"
|
||||
},
|
||||
"manageAccess": {
|
||||
"defaultMessage": "Zugriff verwalten"
|
||||
},
|
||||
"move": {
|
||||
"defaultMessage": "Verschieben"
|
||||
},
|
||||
"moveTo": {
|
||||
"defaultMessage": "Verschieben zu"
|
||||
},
|
||||
"moveTree": {
|
||||
"defaultMessage": "Baum verschieben"
|
||||
},
|
||||
"name": {
|
||||
"defaultMessage": "Name"
|
||||
},
|
||||
"navigationTabs": {
|
||||
"defaultMessage": "Navigation"
|
||||
},
|
||||
"orderNumbers": {
|
||||
"defaultMessage": "Bestellnummer"
|
||||
},
|
||||
"region": {
|
||||
"defaultMessage": "Region"
|
||||
},
|
||||
"requiredLocation": {
|
||||
"defaultMessage": "Standort ist erforderlich"
|
||||
},
|
||||
"requiredName": {
|
||||
"defaultMessage": "Name ist erforderlich"
|
||||
},
|
||||
"requiredRegion": {
|
||||
"defaultMessage": "Region ist erforderlich"
|
||||
},
|
||||
"search": {
|
||||
"defaultMessage": "Suche"
|
||||
},
|
||||
"submit": {
|
||||
"defaultMessage": "Senden"
|
||||
},
|
||||
"updateFolderErrorMessage": {
|
||||
"defaultMessage": "Fehler, Ordner kann nicht aktualisiert werden"
|
||||
},
|
||||
"updatedSuccessfully": {
|
||||
"defaultMessage": "Erfolgreich aktualisiert"
|
||||
},
|
||||
"user": {
|
||||
"defaultMessage": "Nutzer"
|
||||
},
|
||||
"userTabs": {
|
||||
"defaultMessage": "Nutzer"
|
||||
},
|
||||
"users": {
|
||||
"defaultMessage": "Nutzer"
|
||||
}
|
||||
}
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
"defaultMessage": "Create new user"
|
||||
},
|
||||
"customerName": {
|
||||
"defaultMessage": "Customer name"
|
||||
"defaultMessage": "Customer"
|
||||
},
|
||||
"email": {
|
||||
"defaultMessage": "Email"
|
||||
|
|
@ -35,8 +35,7 @@
|
|||
"english": {
|
||||
"defaultMessage": "English"
|
||||
},
|
||||
"error": {
|
||||
},
|
||||
"error": {},
|
||||
"folder": {
|
||||
"defaultMessage": "Folder"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,136 @@
|
|||
{
|
||||
"Information": {
|
||||
"defaultMessage": "Informations"
|
||||
},
|
||||
"addNewChild": {
|
||||
"defaultMessage": "Ajouter un nouvel enfant"
|
||||
},
|
||||
"addNewDialogButton": {
|
||||
"defaultMessage": "Ajouter un nouveau bouton de dialogue"
|
||||
},
|
||||
"addUser": {
|
||||
"defaultMessage": "Créer un utilisateur"
|
||||
},
|
||||
"alarms": {
|
||||
"defaultMessage": "Alarmes"
|
||||
},
|
||||
"applyChanges": {
|
||||
"defaultMessage": "Appliquer les modifications"
|
||||
},
|
||||
"country": {
|
||||
"defaultMessage": "Pays"
|
||||
},
|
||||
"createNewFolder": {
|
||||
"defaultMessage": "Créer un nouveau dossier"
|
||||
},
|
||||
"createNewUser": {
|
||||
"defaultMessage": "Créer un nouvel utilisateur"
|
||||
},
|
||||
"customerName": {
|
||||
"defaultMessage": "Nom du client"
|
||||
},
|
||||
"email": {
|
||||
"defaultMessage": "E-mail"
|
||||
},
|
||||
"english": {
|
||||
"defaultMessage": "Anglais"
|
||||
},
|
||||
"error": {
|
||||
},
|
||||
"folder": {
|
||||
"defaultMessage": "Dossier"
|
||||
},
|
||||
"german": {
|
||||
"defaultMessage": "Allemand"
|
||||
},
|
||||
"groupTabs": {
|
||||
"defaultMessage": "Onglets de groupe"
|
||||
},
|
||||
"groupTree": {
|
||||
"defaultMessage": "Arbre de groupe"
|
||||
},
|
||||
"information": {
|
||||
"defaultMessage": "Informations"
|
||||
},
|
||||
"inheritedAccess": {
|
||||
"defaultMessage": "Accès hérité de"
|
||||
},
|
||||
"installation": {
|
||||
"defaultMessage": "Installation"
|
||||
},
|
||||
"installationTabs": {
|
||||
"defaultMessage": "Onglets d'installation"
|
||||
},
|
||||
"installations": {
|
||||
"defaultMessage": "Installations"
|
||||
},
|
||||
"lastWeek": {
|
||||
"defaultMessage": "La semaine dernière"
|
||||
},
|
||||
"location": {
|
||||
"defaultMessage": "Localisation"
|
||||
},
|
||||
"log": {
|
||||
"defaultMessage": "Journal"
|
||||
},
|
||||
"logout": {
|
||||
"defaultMessage": "Déconnexion"
|
||||
},
|
||||
"makeASelection": {
|
||||
"defaultMessage": "Veuillez faire une sélection à gauche"
|
||||
},
|
||||
"manageAccess": {
|
||||
"defaultMessage": "Gérer l'accès"
|
||||
},
|
||||
"move": {
|
||||
"defaultMessage": "Déplacer"
|
||||
},
|
||||
"moveTo": {
|
||||
"defaultMessage": "Déplacer à"
|
||||
},
|
||||
"moveTree": {
|
||||
"defaultMessage": "Déplacer l'arbre"
|
||||
},
|
||||
"name": {
|
||||
"defaultMessage": "Nom"
|
||||
},
|
||||
"navigationTabs": {
|
||||
"defaultMessage": "Onglets de navigation"
|
||||
},
|
||||
"orderNumbers": {
|
||||
"defaultMessage": "Numéro de commande"
|
||||
},
|
||||
"region": {
|
||||
"defaultMessage": "Région"
|
||||
},
|
||||
"requiredLocation": {
|
||||
"defaultMessage": "L'emplacement est requis"
|
||||
},
|
||||
"requiredName": {
|
||||
"defaultMessage": "Le nom est obligatoire"
|
||||
},
|
||||
"requiredRegion": {
|
||||
"defaultMessage": "La région est obligatoire"
|
||||
},
|
||||
"search": {
|
||||
"defaultMessage": "Recherche"
|
||||
},
|
||||
"submit": {
|
||||
"defaultMessage": "Soumettre"
|
||||
},
|
||||
"updateFolderErrorMessage": {
|
||||
"defaultMessage": "Une erreur s'est produite, impossible de mettre à jour le dossier."
|
||||
},
|
||||
"updatedSuccessfully": {
|
||||
"defaultMessage": "Mise à jour réussie"
|
||||
},
|
||||
"user": {
|
||||
"defaultMessage": "Utilisateur"
|
||||
},
|
||||
"userTabs": {
|
||||
"defaultMessage": "Onglets utilisateurs"
|
||||
},
|
||||
"users": {
|
||||
"defaultMessage": "Utilisateurs"
|
||||
}
|
||||
}
|
||||
|
|
@ -9,7 +9,6 @@
|
|||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"@aws-sdk/client-s3": "^3.316.0",
|
||||
"@emotion/react": "^11.10.5",
|
||||
"@emotion/styled": "^11.10.5",
|
||||
"@minoru/react-dnd-treeview": "^3.4.1",
|
||||
"@mui/icons-material": "^5.11.0",
|
||||
|
|
@ -3541,6 +3540,7 @@
|
|||
"version": "11.10.5",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.10.5.tgz",
|
||||
"integrity": "sha512-TZs6235tCJ/7iF6/rvTaOH4oxQg2gMAcdHemjwLKIjKz4rRuYe1HJ2TQJKnAcRAfOUDdU8XoDadCe1rl72iv8A==",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.18.3",
|
||||
"@emotion/babel-plugin": "^11.10.5",
|
||||
|
|
@ -27667,6 +27667,7 @@
|
|||
"version": "11.10.5",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.10.5.tgz",
|
||||
"integrity": "sha512-TZs6235tCJ/7iF6/rvTaOH4oxQg2gMAcdHemjwLKIjKz4rRuYe1HJ2TQJKnAcRAfOUDdU8XoDadCe1rl72iv8A==",
|
||||
"peer": true,
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.18.3",
|
||||
"@emotion/babel-plugin": "^11.10.5",
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
"private": true,
|
||||
"dependencies": {
|
||||
"@aws-sdk/client-s3": "^3.316.0",
|
||||
"@emotion/react": "^11.10.5",
|
||||
"@emotion/styled": "^11.10.5",
|
||||
"@minoru/react-dnd-treeview": "^3.4.1",
|
||||
"@mui/icons-material": "^5.11.0",
|
||||
|
|
|
|||
|
|
@ -47,13 +47,15 @@ const App = () => {
|
|||
<Container maxWidth="xl" sx={{ marginTop: 2, height: "100vh" }}>
|
||||
<Grid container maxHeight="20vh">
|
||||
<Grid item xs={3} container justifyContent="flex-start">
|
||||
<img
|
||||
src={innovenergyLogo}
|
||||
alt="innovenergy logo"
|
||||
height="100"
|
||||
/>
|
||||
<img src={innovenergyLogo} alt="innovenergy logo" height="100" />
|
||||
</Grid>
|
||||
<Grid item xs={9} container justifyContent="flex-end" style={{ height: 30 }}>
|
||||
<Grid
|
||||
item
|
||||
xs={9}
|
||||
container
|
||||
justifyContent="flex-end"
|
||||
style={{ height: 30 }}
|
||||
>
|
||||
<LanguageSelect language={language} setLanguage={setLanguage} />
|
||||
<LogoutButton removeToken={removeToken} />
|
||||
</Grid>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,10 @@ import { I_Folder } from "../../util/types";
|
|||
import { GroupContext } from "../Context/GroupContextProvider";
|
||||
import InnovenergySnackbar from "../InnovenergySnackbar";
|
||||
import InnovenergyButton from "../Layout/InnovenergyButton";
|
||||
import InnovenergyTextfield from "../Layout/InnovenergyTextfield";
|
||||
import InnovenergyTextfield, {
|
||||
I_InnovenergyTextfieldProps,
|
||||
IePropertyGrid,
|
||||
} from "../Layout/InnovenergyTextfield";
|
||||
import { UserContext } from "../Context/UserContextProvider";
|
||||
|
||||
interface I_CustomerFormProps {
|
||||
|
|
@ -54,33 +57,39 @@ const FolderForm = (props: I_CustomerFormProps) => {
|
|||
});
|
||||
const theme = useTheme();
|
||||
|
||||
const rows: I_InnovenergyTextfieldProps[] = [
|
||||
{
|
||||
id: "folder-name-textfield",
|
||||
disabled: readOnly,
|
||||
label: intl.formatMessage({
|
||||
id: "name",
|
||||
defaultMessage: "Name",
|
||||
}),
|
||||
name: "name",
|
||||
value: formik.values.name,
|
||||
handleChange: formik.handleChange,
|
||||
},
|
||||
{
|
||||
id: "folder-information-textfield",
|
||||
disabled: readOnly,
|
||||
label: intl.formatMessage({
|
||||
id: "information",
|
||||
defaultMessage: "Information",
|
||||
}),
|
||||
name: "information",
|
||||
value: formik.values.information,
|
||||
handleChange: formik.handleChange,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<form onSubmit={formik.handleSubmit}>
|
||||
<InnovenergyTextfield
|
||||
id="folder-name-textfield"
|
||||
disabled={readOnly}
|
||||
label={intl.formatMessage({
|
||||
id: "name",
|
||||
defaultMessage: "Name",
|
||||
})}
|
||||
name="name"
|
||||
value={formik.values.name}
|
||||
handleChange={formik.handleChange}
|
||||
/>
|
||||
<InnovenergyTextfield
|
||||
id="folder-information-textfield"
|
||||
disabled={readOnly}
|
||||
label={intl.formatMessage({
|
||||
id: "information",
|
||||
defaultMessage: "Information",
|
||||
})}
|
||||
name="information"
|
||||
value={formik.values.information}
|
||||
handleChange={formik.handleChange}
|
||||
/>
|
||||
<IePropertyGrid rows={rows} />
|
||||
<Grid container justifyContent="flex-end" sx={{ pt: 1 }}>
|
||||
{loading && <CircularProgress sx={{color: theme.palette.secondary.main}} />}
|
||||
{loading && (
|
||||
<CircularProgress sx={{ color: theme.palette.secondary.main }} />
|
||||
)}
|
||||
{!readOnly &&
|
||||
additionalButtons &&
|
||||
additionalButtons.map((button) => button)}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,10 @@ import { I_Installation } from "../../util/types";
|
|||
import { InstallationsContext } from "../Context/InstallationsContextProvider";
|
||||
import MoveDialog from "../Groups/Tree/MoveDialog";
|
||||
import InnovenergyButton from "../Layout/InnovenergyButton";
|
||||
import InnovenergyTextfield from "../Layout/InnovenergyTextfield";
|
||||
import InnovenergyTextfield, {
|
||||
I_InnovenergyTextfieldProps,
|
||||
IePropertyGrid,
|
||||
} from "../Layout/InnovenergyTextfield";
|
||||
import { UserContext } from "../Context/UserContextProvider";
|
||||
import * as Yup from "yup";
|
||||
|
||||
|
|
@ -74,79 +77,80 @@ const InstallationForm = (props: I_InstallationFormProps) => {
|
|||
setOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={formik.handleSubmit}>
|
||||
<InnovenergyTextfield
|
||||
disabled={readOnly}
|
||||
id="installation-name-textfield"
|
||||
label={intl.formatMessage({
|
||||
const rows: I_InnovenergyTextfieldProps[] = [
|
||||
{
|
||||
disabled: readOnly,
|
||||
id: "installation-name-textfield",
|
||||
label: intl.formatMessage({
|
||||
id: "customerName",
|
||||
defaultMessage: "Customer name",
|
||||
})}
|
||||
name="name"
|
||||
value={formik.values.name}
|
||||
handleChange={formik.handleChange}
|
||||
helperText={
|
||||
formik.errors.name && formik.touched.name ? formik.errors.name : ""
|
||||
}
|
||||
error={!!formik.errors.name && formik.touched.name}
|
||||
/>
|
||||
<InnovenergyTextfield
|
||||
disabled={readOnly}
|
||||
id="installation-region-textfield"
|
||||
label={intl.formatMessage({
|
||||
}),
|
||||
name: "name",
|
||||
value: formik.values.name,
|
||||
handleChange: formik.handleChange,
|
||||
helperText:
|
||||
formik.errors.name && formik.touched.name ? formik.errors.name : "",
|
||||
error: !!formik.errors.name && formik.touched.name,
|
||||
},
|
||||
{
|
||||
disabled: readOnly,
|
||||
id: "installation-region-textfield",
|
||||
label: intl.formatMessage({
|
||||
id: "region",
|
||||
defaultMessage: "Region",
|
||||
})}
|
||||
name="region"
|
||||
value={formik.values.region}
|
||||
handleChange={formik.handleChange}
|
||||
helperText={
|
||||
}),
|
||||
name: "region",
|
||||
value: formik.values.region,
|
||||
handleChange: formik.handleChange,
|
||||
helperText:
|
||||
formik.errors.region && formik.touched.region
|
||||
? formik.errors.region
|
||||
: ""
|
||||
}
|
||||
error={!!formik.errors.region && formik.touched.region}
|
||||
/>
|
||||
<InnovenergyTextfield
|
||||
disabled={readOnly}
|
||||
id="installation-location-textfield"
|
||||
label={intl.formatMessage({
|
||||
: "",
|
||||
error: !!formik.errors.region && formik.touched.region,
|
||||
},
|
||||
{
|
||||
disabled: readOnly,
|
||||
id: "installation-location-textfield",
|
||||
label: intl.formatMessage({
|
||||
id: "location",
|
||||
defaultMessage: "Location",
|
||||
})}
|
||||
name="location"
|
||||
value={formik.values.location}
|
||||
handleChange={formik.handleChange}
|
||||
helperText={
|
||||
}),
|
||||
name: "location",
|
||||
value: formik.values.location,
|
||||
handleChange: formik.handleChange,
|
||||
helperText:
|
||||
formik.errors.location && formik.touched.location
|
||||
? formik.errors.location
|
||||
: ""
|
||||
}
|
||||
error={!!formik.errors.location && formik.touched.location}
|
||||
/>
|
||||
<InnovenergyTextfield
|
||||
disabled={readOnly}
|
||||
id="installation-country-textfield"
|
||||
label={intl.formatMessage({
|
||||
: "",
|
||||
error: !!formik.errors.location && formik.touched.location,
|
||||
},
|
||||
{
|
||||
disabled: readOnly,
|
||||
id: "installation-country-textfield",
|
||||
label: intl.formatMessage({
|
||||
id: "country",
|
||||
defaultMessage: "Country",
|
||||
})}
|
||||
name="country"
|
||||
value={formik.values.country}
|
||||
handleChange={formik.handleChange}
|
||||
/>
|
||||
<InnovenergyTextfield
|
||||
disabled={readOnly}
|
||||
id="installation-orderNumbers-textfield"
|
||||
label={intl.formatMessage({
|
||||
}),
|
||||
name: "country",
|
||||
value: formik.values.country,
|
||||
handleChange: formik.handleChange,
|
||||
},
|
||||
{
|
||||
disabled: readOnly,
|
||||
id: "installation-orderNumbers-textfield",
|
||||
label: intl.formatMessage({
|
||||
id: "orderNumbers",
|
||||
defaultMessage: "Order number",
|
||||
})}
|
||||
name="orderNumbers"
|
||||
value={formik.values.orderNumbers}
|
||||
handleChange={formik.handleChange}
|
||||
/>
|
||||
}),
|
||||
name: "orderNumbers",
|
||||
value: formik.values.orderNumbers,
|
||||
handleChange: formik.handleChange,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<form onSubmit={formik.handleSubmit}>
|
||||
<IePropertyGrid rows={rows} />
|
||||
<Grid container justifyContent="flex-end" sx={{ pt: 1 }}>
|
||||
{hasMoveButton && !readOnly && <MoveDialog values={values} />}
|
||||
{!readOnly && (
|
||||
|
|
|
|||
|
|
@ -75,11 +75,12 @@ const InstallationList = (props: InstallationListProps) => {
|
|||
overflow: "auto",
|
||||
py: 0,
|
||||
mt: 1,
|
||||
borderRadius: 1.5,
|
||||
height:
|
||||
routeMatch?.pattern.path ===
|
||||
routes.installations + routes.list + routes.log + ":id"
|
||||
? "130px"
|
||||
: "500px",
|
||||
: "367px",
|
||||
}}
|
||||
component="nav"
|
||||
aria-labelledby="nested-list-subheader"
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import routes from "../../routes.json";
|
|||
import useRouteMatch from "../../hooks/useRouteMatch";
|
||||
import { useIntl } from "react-intl";
|
||||
import InnovenergyTab from "../Layout/InnovenergyTab";
|
||||
import InnovenergyTabBorder from "../Layout/InnovenergyTab";
|
||||
import InnovenergyTabs from "components/Layout/InnovenergyTabs";
|
||||
import { useTheme } from "@mui/material";
|
||||
import { red } from "@mui/material/colors";
|
||||
|
|
@ -23,14 +24,12 @@ const InstallationTabs = () => {
|
|||
|
||||
if (id) {
|
||||
return (
|
||||
<Box sx={{ width: "100%", }}>
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<Box sx={{}}>
|
||||
<InnovenergyTabs
|
||||
|
||||
id="installation-tabs"
|
||||
value={routeMatch?.pattern?.path ?? routes.installation + ":id"}
|
||||
>
|
||||
|
||||
<InnovenergyTab
|
||||
sx={{
|
||||
"&.Mui-selected": {
|
||||
|
|
@ -38,8 +37,9 @@ const InstallationTabs = () => {
|
|||
backgroundColor: theme.palette.primary.dark,
|
||||
borderColor: theme.palette.text.disabled,
|
||||
borderBottom: 0,
|
||||
mb:-1/8,
|
||||
}}}
|
||||
mb: -1 / 8,
|
||||
},
|
||||
}}
|
||||
id={"installation-tab-installation"}
|
||||
label={intl.formatMessage({
|
||||
id: "installation",
|
||||
|
|
@ -52,9 +52,6 @@ const InstallationTabs = () => {
|
|||
to={routes.installation + id}
|
||||
/>
|
||||
|
||||
|
||||
|
||||
|
||||
<InnovenergyTab
|
||||
sx={{
|
||||
"&.Mui-selected": {
|
||||
|
|
@ -62,8 +59,9 @@ const InstallationTabs = () => {
|
|||
backgroundColor: "white",
|
||||
borderColor: theme.palette.text.disabled,
|
||||
borderBottom: 0,
|
||||
mb:-1/8,
|
||||
}}}
|
||||
mb: -1 / 8,
|
||||
},
|
||||
}}
|
||||
id={"installation-tab-liveView"}
|
||||
label={intl.formatMessage({
|
||||
id: "liveView",
|
||||
|
|
@ -82,8 +80,9 @@ const InstallationTabs = () => {
|
|||
backgroundColor: theme.palette.primary.main,
|
||||
borderColor: theme.palette.text.disabled,
|
||||
borderBottom: 0,
|
||||
mb:-1/8,
|
||||
}}}
|
||||
mb: -1 / 8,
|
||||
},
|
||||
}}
|
||||
id={"installation-tab-log"}
|
||||
label={intl.formatMessage({
|
||||
id: "log",
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import { styled, SxProps, Tab, Tabs, Theme, useTheme } from "@mui/material";
|
|||
import { TabProps } from "@mui/material/Tab/Tab";
|
||||
import { colors } from "index";
|
||||
|
||||
|
||||
const InnovenergyTab = (props: any) => {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
|
|
@ -36,4 +35,38 @@ const InnovenergyTab = (props: any) => {
|
|||
);
|
||||
};
|
||||
|
||||
const InnovenergyTabBorder = (props: any) => {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<Tab
|
||||
{...props}
|
||||
disableRipple
|
||||
sx={{
|
||||
textTransform: "none",
|
||||
...props.sx,
|
||||
bottom: 0,
|
||||
fontWeight: theme.typography.fontWeightRegular,
|
||||
fontSize: theme.typography.pxToRem(14),
|
||||
marginRight: theme.spacing(1),
|
||||
background: "0 0",
|
||||
border: "2px solid",
|
||||
borderColor: "#c0c6d0",
|
||||
bgcolor: theme.palette.primary.light,
|
||||
borderTopLeftRadius: "0.3rem",
|
||||
borderTopRightRadius: "0.3rem",
|
||||
padding: ".5rem 1rem",
|
||||
textDecoration: "none",
|
||||
transition: `color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out`,
|
||||
"&.Mui-selected": {
|
||||
color: colors.black,
|
||||
borderColor: theme.palette.text.disabled,
|
||||
marginTop: "1px",
|
||||
bottom: -1,
|
||||
...(props.sx ? props.sx["&.Mui-selected"] : {}),
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default InnovenergyTab;
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@ interface AntTabsProps {
|
|||
children: ReactNode;
|
||||
}
|
||||
|
||||
|
||||
const InnovenergyTabs = (props: AntTabsProps) => {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
|
|
@ -31,7 +30,7 @@ const InnovenergyTabs = (props: AntTabsProps) => {
|
|||
"& .MuiTabs-indicator": {
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
backgroundColor: "transparent",
|
||||
backgroundColor: "red",
|
||||
},
|
||||
"&.MuiTabs-root": {
|
||||
width: "100%",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,18 @@
|
|||
import { Grid, InputLabel, TextField, useTheme } from "@mui/material";
|
||||
import {
|
||||
Grid,
|
||||
InputLabel,
|
||||
Paper,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableContainer,
|
||||
TableHead,
|
||||
TableRow,
|
||||
TextField,
|
||||
useTheme,
|
||||
} from "@mui/material";
|
||||
|
||||
interface I_InnovenergyTextfieldProps {
|
||||
export interface I_InnovenergyTextfieldProps {
|
||||
id: string;
|
||||
label: string;
|
||||
value: string;
|
||||
|
|
@ -13,15 +25,79 @@ interface I_InnovenergyTextfieldProps {
|
|||
error?: boolean;
|
||||
}
|
||||
|
||||
export const IePropertyGrid = (props: {
|
||||
rows: I_InnovenergyTextfieldProps[];
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
|
||||
const findLongestLength = () => {
|
||||
return (
|
||||
11 *
|
||||
props.rows.reduce(
|
||||
(acc, curr) => (acc > curr.label.length ? acc : curr.label.length),
|
||||
0
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ display: "flex", flexDirection: "row" }}>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-around",
|
||||
marginRight: "20px",
|
||||
}}
|
||||
>
|
||||
{props.rows.map((prop) => (
|
||||
<InputLabel>{prop.label}</InputLabel>
|
||||
))}
|
||||
</div>
|
||||
<div>
|
||||
{props.rows.map((element) => {
|
||||
return (
|
||||
<TextField
|
||||
color="secondary"
|
||||
id={element.id}
|
||||
variant="outlined"
|
||||
name={element.name}
|
||||
type={element.type}
|
||||
fullWidth
|
||||
sx={{
|
||||
input: {
|
||||
bgcolor: "white",
|
||||
border: 0.5,
|
||||
borderRadius: 1,
|
||||
height: 15,
|
||||
},
|
||||
my: 0.5,
|
||||
borderColor: "red",
|
||||
}}
|
||||
value={element.value || ""}
|
||||
onChange={element.handleChange}
|
||||
InputProps={{
|
||||
readOnly: element.readOnly,
|
||||
}}
|
||||
disabled={element.disabled}
|
||||
helperText={element.helperText}
|
||||
error={element.error}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const InnovenergyTextfield = (props: I_InnovenergyTextfieldProps) => {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<Grid container direction="row" alignItems="center" spacing={2}>
|
||||
<Grid item xs={2}>
|
||||
<Grid item xs={3}>
|
||||
<InputLabel>{props.label}</InputLabel>
|
||||
|
||||
</Grid>
|
||||
<Grid item xs={10}>
|
||||
<Grid item xs={9}>
|
||||
<TextField
|
||||
color="secondary"
|
||||
id={props.id}
|
||||
|
|
@ -36,6 +112,7 @@ const InnovenergyTextfield = (props: I_InnovenergyTextfieldProps) => {
|
|||
borderRadius: 1,
|
||||
},
|
||||
my: 0.5,
|
||||
borderColor: "red",
|
||||
}}
|
||||
value={props.value || ""}
|
||||
onChange={props.handleChange}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@ const ModeButtons = () => {
|
|||
const routeMatch = useRouteMatch([
|
||||
routes.installations + routes.tree + "*",
|
||||
routes.installations + routes.list + "*",
|
||||
|
||||
]);
|
||||
|
||||
return (
|
||||
|
|
@ -20,21 +19,35 @@ const ModeButtons = () => {
|
|||
color="primary"
|
||||
value={routeMatch?.pattern?.path}
|
||||
exclusive
|
||||
sx={{ mb: 1, bgcolor: theme.palette.primary.main,}}
|
||||
sx={{
|
||||
mb: 1,
|
||||
bgcolor: theme.palette.primary.light,
|
||||
}}
|
||||
size="small"
|
||||
>
|
||||
<ToggleButton
|
||||
color="secondary"
|
||||
sx={{
|
||||
color: "#707071",
|
||||
"&.Mui-selected": {
|
||||
bgcolor: theme.palette.primary.dark,
|
||||
color: "#707071",
|
||||
},
|
||||
}}
|
||||
id="mode-toggle-button-list"
|
||||
value={routes.installations + routes.list + "*"}
|
||||
component={Link}
|
||||
to={routes.list}
|
||||
|
||||
>
|
||||
<ListIcon id="mode-toggle-button-list-icon" />
|
||||
</ToggleButton>
|
||||
<ToggleButton
|
||||
color="secondary"
|
||||
sx={{
|
||||
color: "#707071",
|
||||
"&.Mui-selected": {
|
||||
bgcolor: theme.palette.primary.dark,
|
||||
color: "#707071",
|
||||
},
|
||||
}}
|
||||
id="mode-toggle-button-tree"
|
||||
value={routes.installations + routes.tree + "*"}
|
||||
component={Link}
|
||||
|
|
|
|||
|
|
@ -17,19 +17,20 @@ const NavigationButtons = () => {
|
|||
return (
|
||||
<>
|
||||
<InnovenergyTabs
|
||||
sx={{paddingTop:0}}
|
||||
sx={{ paddingTop: 0 }}
|
||||
id="navigation-buttons-tabs"
|
||||
value={routeMatch?.pattern?.path}
|
||||
>
|
||||
<InnovenergyTab
|
||||
sx={{
|
||||
bgcolor:theme.palette.primary.main,
|
||||
bgcolor: theme.palette.primary.main,
|
||||
"&.Mui-selected": {
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
borderColor: theme.palette.text.disabled,
|
||||
borderBottom: 0,
|
||||
mb:-1/8,
|
||||
}}}
|
||||
mb: -1 / 8,
|
||||
},
|
||||
}}
|
||||
id="navigation-tab-installations"
|
||||
value={routes.installations + "*"}
|
||||
component={Link}
|
||||
|
|
@ -43,13 +44,14 @@ const NavigationButtons = () => {
|
|||
/>
|
||||
<InnovenergyTab
|
||||
sx={{
|
||||
bgcolor:theme.palette.primary.main,
|
||||
bgcolor: theme.palette.primary.main,
|
||||
"&.Mui-selected": {
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
borderColor: theme.palette.text.disabled,
|
||||
borderBottom: 0,
|
||||
mb:-1/8,
|
||||
}}}
|
||||
mb: -1 / 8,
|
||||
},
|
||||
}}
|
||||
id="navigation-tab-users"
|
||||
value={routes.users + "*"}
|
||||
component={Link}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,20 @@
|
|||
import { Alert, CircularProgress, Grid, Snackbar, useTheme } from "@mui/material";
|
||||
import {
|
||||
Alert,
|
||||
CircularProgress,
|
||||
Grid,
|
||||
Snackbar,
|
||||
useTheme,
|
||||
} from "@mui/material";
|
||||
import { AxiosError, AxiosResponse } from "axios";
|
||||
import { useFormik } from "formik";
|
||||
import { useContext, useState } from "react";
|
||||
import { FormattedMessage, useIntl } from "react-intl";
|
||||
import { I_User } from "../../util/user.util";
|
||||
import InnovenergyButton from "../Layout/InnovenergyButton";
|
||||
import InnovenergyTextfield from "../Layout/InnovenergyTextfield";
|
||||
import InnovenergyTextfield, {
|
||||
I_InnovenergyTextfieldProps,
|
||||
IePropertyGrid,
|
||||
} from "../Layout/InnovenergyTextfield";
|
||||
import { UserContext } from "../Context/UserContextProvider";
|
||||
import { UsersContext } from "../Context/UsersContextProvider";
|
||||
|
||||
|
|
@ -53,43 +62,49 @@ const UserForm = (props: I_UserFormProps) => {
|
|||
setOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={formik.handleSubmit}>
|
||||
<InnovenergyTextfield
|
||||
id="name-textfield"
|
||||
label={intl.formatMessage({
|
||||
const rows: I_InnovenergyTextfieldProps[] = [
|
||||
{
|
||||
id: "name-textfield",
|
||||
label: intl.formatMessage({
|
||||
id: "name",
|
||||
defaultMessage: "Name",
|
||||
})}
|
||||
name="name"
|
||||
value={formik.values.name}
|
||||
handleChange={formik.handleChange}
|
||||
disabled={readOnly}
|
||||
/>
|
||||
<InnovenergyTextfield
|
||||
id="email-textfield"
|
||||
label={intl.formatMessage({
|
||||
}),
|
||||
name: "name",
|
||||
value: formik.values.name,
|
||||
handleChange: formik.handleChange,
|
||||
disabled: readOnly,
|
||||
},
|
||||
{
|
||||
id: "email-textfield",
|
||||
label: intl.formatMessage({
|
||||
id: "email",
|
||||
defaultMessage: "Email",
|
||||
})}
|
||||
name="email"
|
||||
value={formik.values.email}
|
||||
handleChange={formik.handleChange}
|
||||
disabled={readOnly}
|
||||
/>
|
||||
<InnovenergyTextfield
|
||||
id="information-textfield"
|
||||
label={intl.formatMessage({
|
||||
}),
|
||||
name: "email",
|
||||
value: formik.values.email,
|
||||
handleChange: formik.handleChange,
|
||||
disabled: readOnly,
|
||||
},
|
||||
{
|
||||
id: "information-textfield",
|
||||
label: intl.formatMessage({
|
||||
id: "Information",
|
||||
defaultMessage: "Information",
|
||||
})}
|
||||
name="information"
|
||||
value={formik.values.information}
|
||||
handleChange={formik.handleChange}
|
||||
disabled={readOnly}
|
||||
/>
|
||||
}),
|
||||
name: "information",
|
||||
value: formik.values.information,
|
||||
handleChange: formik.handleChange,
|
||||
disabled: readOnly,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<form onSubmit={formik.handleSubmit}>
|
||||
<IePropertyGrid rows={rows} />
|
||||
<Grid container justifyContent="flex-end" sx={{ pt: 1 }}>
|
||||
{loading && <CircularProgress sx={{color: theme.palette.secondary.main}} />}
|
||||
{loading && (
|
||||
<CircularProgress sx={{ color: theme.palette.secondary.main }} />
|
||||
)}
|
||||
{currentUser.hasWriteAccess && (
|
||||
<InnovenergyButton type="submit">
|
||||
<FormattedMessage id="submit" defaultMessage="Submit" />
|
||||
|
|
|
|||
|
|
@ -13,20 +13,20 @@ const root = ReactDOM.createRoot(
|
|||
|
||||
export const colors = {
|
||||
black: "#000000",
|
||||
blueBlack: '#2b3e54',
|
||||
borderColor: '#c0c6d0',
|
||||
blueBlack: "#2b3e54",
|
||||
borderColor: "#a8b0be",
|
||||
|
||||
background: '#f3f4f7',
|
||||
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: {
|
||||
|
|
@ -51,7 +51,6 @@ const theme = createTheme({
|
|||
main: colors.orangeSelected,
|
||||
light: colors.orangeHover,
|
||||
dark: colors.orangeDark,
|
||||
|
||||
},
|
||||
},
|
||||
typography: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue