Innovenergy
/
Innovenergy_trunk
2
1
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Fixed bugs on user section

This commit is contained in:
Noe 2024-01-25 21:57:53 +01:00
parent c8210f601c
commit 668f1fe7d4
6 changed files with 259 additions and 219 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
typescript/frontend-marios2/src/content/dashboards/Installations/Installation.tsx
View File

@ -197,7 +197,7 @@ function Installation(props: singleInstallationProps) {
{openModalDeleteInstallation && ( {openModalDeleteInstallation && (
<Modal <Modal
open={openModalDeleteInstallation} open={openModalDeleteInstallation}
onClose={() => setOpenModalDeleteInstallation(false)} onClose={deleteInstallationModalHandleCancel}
aria-labelledby="error-modal" aria-labelledby="error-modal"
aria-describedby="error-modal-description" aria-describedby="error-modal-description"
> >

2
typescript/frontend-marios2/src/content/dashboards/Overview/chartOptions.tsx
View File

@ -82,7 +82,7 @@ export const getChartOptions = (
} }
}, },
{ {
seriesName: 'Pv Production', seriesName: 'Grid Power',
show: false, show: false,
min: min:
chartInfo.min >= 0 chartInfo.min >= 0

406
typescript/frontend-marios2/src/content/dashboards/Overview/overview.tsx
View File

@ -1,6 +1,6 @@
import { Box, Card, Container, Grid, Modal, Typography } from '@mui/material'; import { Box, Card, Container, Grid, Modal, Typography } from '@mui/material';
import ReactApexChart from 'react-apexcharts'; import ReactApexChart from 'react-apexcharts';
import React, { useEffect, useState } from 'react'; import React, { useContext, useEffect, useState } from 'react';
import { I_S3Credentials } from 'src/interfaces/S3Types'; import { I_S3Credentials } from 'src/interfaces/S3Types';
import { getChartOptions } from './chartOptions'; import { getChartOptions } from './chartOptions';
import { import {
@ -17,6 +17,7 @@ import { TimeSpan, UnixTime } from '../../../dataCache/time';
import { DateTimePicker, LocalizationProvider } from '@mui/x-date-pickers'; import { DateTimePicker, LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { UserContext } from '../../../contexts/userContext';
interface OverviewProps { interface OverviewProps {
s3Credentials: I_S3Credentials; s3Credentials: I_S3Credentials;
@ -39,6 +40,9 @@ const computeLast7Days = (): string[] => {
}; };
function Overview(props: OverviewProps) { function Overview(props: OverviewProps) {
const context = useContext(UserContext);
const { currentUser, setUser } = context;
const [dailyData, setDailyData] = useState(true); const [dailyData, setDailyData] = useState(true);
const [weeklyData, setWeeklyData] = useState(false); const [weeklyData, setWeeklyData] = useState(false);
const [weeklybalance, setWeeklyBalance] = useState([]); const [weeklybalance, setWeeklyBalance] = useState([]);
@ -676,7 +680,7 @@ function Overview(props: OverviewProps) {
color: '#ff9900' color: '#ff9900'
}, },
{ {
name: 'Balance', name: 'Net Energy',
color: '#666666', color: '#666666',
type: 'line', type: 'line',
data: weeklybalance data: weeklybalance
@ -713,7 +717,7 @@ function Overview(props: OverviewProps) {
type: 'bar' type: 'bar'
}, },
{ {
name: 'Balance', name: 'Net Energy',
type: 'line', type: 'line',
data: monthlybalance, data: monthlybalance,
color: '#666666' color: '#666666'
@ -727,6 +731,7 @@ function Overview(props: OverviewProps) {
</Grid> </Grid>
</Grid> </Grid>
)} )}
<Grid <Grid
container container
direction="row" direction="row"
@ -942,217 +947,220 @@ function Overview(props: OverviewProps) {
</Grid> </Grid>
</Grid> </Grid>
<Grid {currentUser.hasWriteAccess && (
container <Grid
direction="row" container
justifyContent="center" direction="row"
alignItems="stretch" justifyContent="center"
spacing={3} alignItems="stretch"
> spacing={3}
<Grid item md={6} xs={12}> >
<Card <Grid item md={6} xs={12}>
sx={{ <Card
overflow: 'visible',
marginTop: '30px',
marginBottom: '30px'
}}
>
<Box
sx={{ sx={{
marginLeft: '20px' overflow: 'visible',
marginTop: '30px',
marginBottom: '30px'
}} }}
> >
<Box display="flex" alignItems="center">
<Box>
<Typography variant="subtitle1" noWrap>
<FormattedMessage
id="pv_production"
defaultMessage="PV Production"
/>
</Typography>
</Box>
</Box>
<Box <Box
sx={{ sx={{
display: 'flex', marginLeft: '20px'
alignItems: 'center',
justifyContent: 'flex-start',
pt: 3
}} }}
></Box> >
</Box> <Box display="flex" alignItems="center">
<Box>
<Typography variant="subtitle1" noWrap>
<FormattedMessage
id="pv_production"
defaultMessage="PV Production"
/>
</Typography>
</Box>
</Box>
<Box
sx={{
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-start',
pt: 3
}}
></Box>
</Box>
{dailyData && ( {dailyData && (
<ReactApexChart <ReactApexChart
options={{ options={{
...getChartOptions( ...getChartOptions(
dailyDataArray[chartState].chartOverview dailyDataArray[chartState].chartOverview
.pvProduction, .pvProduction,
'daily', 'daily',
[] []
), ),
chart: { chart: {
events: { events: {
beforeZoom: handleBeforeZoom beforeZoom: handleBeforeZoom
}
}
}}
series={[
dailyDataArray[chartState].chartData.pvProduction
]}
type="area"
height={400}
/>
)}
{weeklyData && (
<ReactApexChart
options={{
...getChartOptions(
weeklyDataArray.chartOverview.pvProduction,
'weekly',
weeklyDateList
)
}}
series={[
{
...weeklyDataArray.chartData.pvProduction,
color: '#ff9900'
}
]}
type="bar"
height={400}
/>
)}
{monthlyData && (
<ReactApexChart
options={{
...getChartOptions(
monthlyDataArray.chartOverview.pvProduction,
'monthly',
monthlyDateList
)
}}
series={[
{
...monthlyDataArray.chartData.pvProduction,
color: '#ff9900'
}
]}
type="bar"
height={400}
/>
)}
</Card>
</Grid>
<Grid item md={6} xs={12}>
<Card
sx={{
overflow: 'visible',
marginTop: '30px',
marginBottom: '30px'
}}
>
<Box
sx={{
marginLeft: '20px'
}}
>
<Box display="flex" alignItems="center">
<Box>
<Typography variant="subtitle1" noWrap>
<FormattedMessage
id="grid_power"
defaultMessage={
dailyData ? 'Grid Power' : 'Grid Energy'
} }
/> }
</Typography> }}
</Box> series={[
</Box> dailyDataArray[chartState].chartData.pvProduction
]}
type="area"
height={400}
/>
)}
{weeklyData && (
<ReactApexChart
options={{
...getChartOptions(
weeklyDataArray.chartOverview.pvProduction,
'weekly',
weeklyDateList
)
}}
series={[
{
...weeklyDataArray.chartData.pvProduction,
color: '#ff9900'
}
]}
type="bar"
height={400}
/>
)}
{monthlyData && (
<ReactApexChart
options={{
...getChartOptions(
monthlyDataArray.chartOverview.pvProduction,
'monthly',
monthlyDateList
)
}}
series={[
{
...monthlyDataArray.chartData.pvProduction,
color: '#ff9900'
}
]}
type="bar"
height={400}
/>
)}
</Card>
</Grid>
<Grid item md={6} xs={12}>
<Card
sx={{
overflow: 'visible',
marginTop: '30px',
marginBottom: '30px'
}}
>
<Box <Box
sx={{ sx={{
display: 'flex', marginLeft: '20px'
alignItems: 'center',
justifyContent: 'flex-start',
pt: 3
}} }}
></Box> >
</Box> <Box display="flex" alignItems="center">
{dailyData && ( <Box>
<ReactApexChart <Typography variant="subtitle1" noWrap>
options={{ <FormattedMessage
...getChartOptions( id="grid_power"
dailyDataArray[chartState].chartOverview.gridPower, defaultMessage={
'daily', dailyData ? 'Grid Power' : 'Grid Energy'
[] }
), />
chart: { </Typography>
events: { </Box>
beforeZoom: handleBeforeZoom </Box>
<Box
sx={{
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-start',
pt: 3
}}
></Box>
</Box>
{dailyData && (
<ReactApexChart
options={{
...getChartOptions(
dailyDataArray[chartState].chartOverview
.gridPower,
'daily',
[]
),
chart: {
events: {
beforeZoom: handleBeforeZoom
}
} }
} }}
}} series={[
series={[ dailyDataArray[chartState].chartData.gridPower
dailyDataArray[chartState].chartData.gridPower ]}
]} type="area"
type="area" height={400}
height={400} />
/> )}
)} {weeklyData && (
{weeklyData && ( <ReactApexChart
<ReactApexChart options={{
options={{ ...getChartOptions(
...getChartOptions( weeklyDataArray.chartOverview.gridPower,
weeklyDataArray.chartOverview.gridPower, 'weekly',
'weekly', weeklyDateList
weeklyDateList )
) }}
}} series={[
series={[ {
{ ...weeklyDataArray.chartData.gridImportPower,
...weeklyDataArray.chartData.gridImportPower, color: '#b30000'
color: '#b30000' },
}, {
{ ...weeklyDataArray.chartData.gridExportPower,
...weeklyDataArray.chartData.gridExportPower, color: '#ff3333'
color: '#ff3333' }
} ]}
]} type="bar"
type="bar" height={400}
height={400} />
/> )}
)}
{monthlyData && ( {monthlyData && (
<ReactApexChart <ReactApexChart
options={{ options={{
...getChartOptions( ...getChartOptions(
monthlyDataArray.chartOverview.gridPower, monthlyDataArray.chartOverview.gridPower,
'monthly', 'monthly',
monthlyDateList monthlyDateList
) )
}} }}
series={[ series={[
{ {
...monthlyDataArray.chartData.gridImportPower, ...monthlyDataArray.chartData.gridImportPower,
color: '#b30000' color: '#b30000'
}, },
{ {
...monthlyDataArray.chartData.gridExportPower, ...monthlyDataArray.chartData.gridExportPower,
color: '#ff3333' color: '#ff3333'
} }
]} ]}
type="bar" type="bar"
height={400} height={400}
/> />
)} )}
</Card> </Card>
</Grid>
</Grid> </Grid>
</Grid> )}
{dailyData && ( {dailyData && currentUser.hasWriteAccess && (
<Grid <Grid
container container
direction="row" direction="row"

50
typescript/frontend-marios2/src/content/dashboards/Users/User.tsx
View File

@ -38,12 +38,32 @@ function User(props: singleUserProps) {
const tokencontext = useContext(TokenContext); const tokencontext = useContext(TokenContext);
const { removeToken } = tokencontext; const { removeToken } = tokencontext;
const tabs = [{ value: 'user', label: 'User' }]; const tabs = [{ value: 'user', label: 'User' }];
const [openModalDeleteFolder, setOpenModalDeleteFolder] = useState(false); const [openModalDeleteUser, setOpenModalDeleteUser] = useState(false);
useEffect(() => { useEffect(() => {
setFormValues(props.current_user); setFormValues(props.current_user);
}, [props.current_user]); }, [props.current_user]);
useEffect(() => {
// Use a timer to automatically close the Alert after 2 seconds
const timerId = setTimeout(() => {
setUpdated(false);
}, 2000);
// Clean up the timer when the component unmounts or when updated changes
return () => clearTimeout(timerId);
}, [updated]);
useEffect(() => {
// Use a timer to automatically close the Alert after 2 seconds
const timerId = setTimeout(() => {
setError(false);
}, 2000);
// Clean up the timer when the component unmounts or when updated changes
return () => clearTimeout(timerId);
}, [error]);
if (formValues == undefined) { if (formValues == undefined) {
return null; return null;
} }
@ -60,21 +80,35 @@ function User(props: singleUserProps) {
[name]: value [name]: value
}); });
}; };
const handleSubmit = (e) => { const handleSubmit = async (e) => {
setLoading(true); setLoading(true);
setError(false); setError(false);
const res = await axiosConfig
.put(`/UpdateUser`, formValues)
.catch((err) => {
if (err.response) {
setError(true);
setLoading(false);
}
});
if (res) {
setUpdated(true);
setLoading(false);
}
}; };
const handleDelete = (e) => { const handleDelete = (e) => {
setLoading(true); setLoading(true);
setError(false); setError(false);
setOpenModalDeleteFolder(true); setOpenModalDeleteUser(true);
}; };
const deleteUserModalHandleCancel = (e) => { const deleteUserModalHandleCancel = (e) => {
setLoading(false); setLoading(false);
setError(false); setError(false);
setOpenModalDeleteFolder(false); setOpenModalDeleteUser(false);
}; };
const deleteUserModalHandle = (e) => { const deleteUserModalHandle = (e) => {
@ -94,7 +128,7 @@ function User(props: singleUserProps) {
.catch((error) => { .catch((error) => {
setLoading(false); setLoading(false);
setError(true); setError(true);
setOpenModalDeleteFolder(false); setOpenModalDeleteUser(false);
if (error.response && error.response.status == 401) { if (error.response && error.response.status == 401) {
removeToken(); removeToken();
} }
@ -105,10 +139,10 @@ function User(props: singleUserProps) {
return ( return (
<> <>
{openModalDeleteFolder && ( {openModalDeleteUser && (
<Modal <Modal
open={openModalDeleteFolder} open={openModalDeleteUser}
onClose={() => setOpenModalDeleteFolder(false)} onClose={deleteUserModalHandleCancel}
aria-labelledby="error-modal" aria-labelledby="error-modal"
aria-describedby="error-modal-description" aria-describedby="error-modal-description"
> >

10
typescript/frontend-marios2/src/content/dashboards/Users/UsersSearch.tsx
View File

@ -5,8 +5,7 @@ import {
Grid, Grid,
IconButton, IconButton,
InputAdornment, InputAdornment,
TextField, TextField
useTheme
} from '@mui/material'; } from '@mui/material';
import SearchTwoToneIcon from '@mui/icons-material/SearchTwoTone'; import SearchTwoToneIcon from '@mui/icons-material/SearchTwoTone';
import FlatUsersView from './FlatUsersView'; import FlatUsersView from './FlatUsersView';
@ -18,7 +17,6 @@ import { FormattedMessage } from 'react-intl';
import { Close as CloseIcon } from '@mui/icons-material'; import { Close as CloseIcon } from '@mui/icons-material';
function UsersSearch() { function UsersSearch() {
const theme = useTheme();
const [searchTerm, setSearchTerm] = useState(''); const [searchTerm, setSearchTerm] = useState('');
const { availableUsers, fetchAvailableUsers } = useContext(AccessContext); const { availableUsers, fetchAvailableUsers } = useContext(AccessContext);
const [filteredData, setFilteredData] = useState(availableUsers); const [filteredData, setFilteredData] = useState(availableUsers);
@ -26,7 +24,7 @@ function UsersSearch() {
const context = useContext(UserContext); const context = useContext(UserContext);
const [userCreated, setUserCreated] = useState(false); const [userCreated, setUserCreated] = useState(false);
const [errorOccured, setErrorOccured] = useState(false); const [errorOccured, setErrorOccured] = useState(false);
const { currentUser, setUser } = context; const { currentUser } = context;
useEffect(() => { useEffect(() => {
fetchAvailableUsers(); fetchAvailableUsers();
@ -54,7 +52,7 @@ function UsersSearch() {
setTimeout(() => { setTimeout(() => {
setUserCreated(false); setUserCreated(false);
}, 8000); }, 2000);
}; };
const handleUserFormCancel = () => { const handleUserFormCancel = () => {
@ -66,7 +64,7 @@ function UsersSearch() {
setErrorOccured(true); setErrorOccured(true);
setTimeout(() => { setTimeout(() => {
setErrorOccured(false); setErrorOccured(false);
}, 3000); }, 2000);
}; };
const isMobile = window.innerWidth <= 1490; const isMobile = window.innerWidth <= 1490;

8
typescript/frontend-marios2/src/interfaces/Chart.tsx
View File

@ -312,13 +312,13 @@ export const transformInputToAggregatedData = async (
'temp6' 'temp6'
]; ];
//while (currentDay.isBefore(currentDate)) { while (currentDay.isBefore(currentDate)) {
for (let i = 0; i < 7; i++) { //for (let i = 0; i < 7; i++) {
// console.log('Current day:', currentDay.format('YYYY-MM-DD')); // console.log('Current day:', currentDay.format('YYYY-MM-DD'));
let result = await Promise.resolve( let result = await Promise.resolve(
//fetchDailyData(currentDay.format('YYYY-MM-DD'), s3Credentials) fetchDailyData(currentDay.format('YYYY-MM-DD'), s3Credentials)
fetchDailyData(fake_data[i], s3Credentials) //fetchDailyData(fake_data[i], s3Credentials)
); );
if ( if (
result === FetchResult.notAvailable || result === FetchResult.notAvailable ||