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

Added Configuration for SodistoreHome devices in the frontend

This commit is contained in:
Noe 2025-09-25 15:06:48 +02:00
parent 0aae239551
commit 4420f7373b
6 changed files with 475 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
typescript/frontend-marios2/src/content/dashboards/BatteryView/BatteryViewSodioHome.tsx
View File

@ -44,7 +44,6 @@ function BatteryViewSodioHome(props: BatteryViewSodioHomeProps) {
.sort((a, b) => parseInt(b.BatteryId) - parseInt(a.BatteryId))
: [];
console.log('battery view', sortedBatteryView);
const [loading, setLoading] = useState(sortedBatteryView.length == 0);
const handleMainStatsButton = () => {
navigate(routes.mainstats);

4
typescript/frontend-marios2/src/content/dashboards/Configuration/Configuration.tsx
View File

@ -93,7 +93,7 @@ function Configuration(props: ConfigurationProps) {
const { currentUser, setUser } = context;
const { product, setProduct } = useContext(ProductIdContext);
const [formValues, setFormValues] = useState<ConfigurationValues>({
const [formValues, setFormValues] = useState<Partial<ConfigurationValues>>({
minimumSoC: props.values.Config.MinSoc,
gridSetPoint: (props.values.Config.GridSetPoint as number) / 1000,
calibrationChargeState: CalibrationChargeOptionsController.indexOf(
@ -151,7 +151,7 @@ function Configuration(props: ConfigurationProps) {
return;
} else {
// console.log('asked for', dayjs(formValues.calibrationChargeDate));
const configurationToSend: ConfigurationValues = {
const configurationToSend: Partial<ConfigurationValues> = {
minimumSoC: formValues.minimumSoC,
gridSetPoint: formValues.gridSetPoint,
calibrationChargeState: formValues.calibrationChargeState,

12
typescript/frontend-marios2/src/content/dashboards/Log/graph.util.tsx
View File

@ -323,6 +323,12 @@ export interface JSONRecordData {
TruConvertDcIp: { DeviceState: string };
TsRelaysIp: { DeviceState: string };
};
//For SodistoerHome
MaximumChargingCurrent: number;
MaximumDischargingCurrent: number;
OperatingPriority: string;
BatteriesCount: number;
};
DcDc: {
@ -602,6 +608,12 @@ export type ConfigurationValues = {
calibrationChargeDate: Date | null;
calibrationDischargeState: number;
calibrationDischargeDate: Date | null;
//For sodistoreHome
maximumDischargingCurrent: number;
maximumChargingCurrent: number;
operatingPriority: number;
batteriesCount: number;
};
//
// export interface Pv {

56
typescript/frontend-marios2/src/content/dashboards/SodiohomeInstallations/Installation.tsx
View File

@ -24,6 +24,7 @@ import { TimeSpan, UnixTime } from '../../../dataCache/time';
import { fetchDataJson } from '../Installations/fetchData';
import { FetchResult } from '../../../dataCache/dataCache';
import BatteryViewSodioHome from '../BatteryView/BatteryViewSodioHome';
import SodistoreHomeConfiguration from './SodistoreHomeConfiguration';
interface singleInstallationProps {
current_installation?: I_Installation;
@ -179,6 +180,43 @@ function SodioHomeInstallation(props: singleInstallationProps) {
}
};
const fetchDataForOneTime = async () => {
var timeperiodToSearch = 200;
let res;
let timestampToFetch;
for (var i = timeperiodToSearch; i > 0; i -= 2) {
timestampToFetch = UnixTime.now().earlier(TimeSpan.fromSeconds(i));
try {
res = await fetchDataJson(timestampToFetch, s3Credentials, false);
if (res !== FetchResult.notAvailable && res !== FetchResult.tryLater) {
break;
}
} catch (err) {
console.error('Error fetching data:', err);
return false;
}
}
if (i <= 0) {
setConnected(false);
setLoading(false);
return false;
}
setConnected(true);
setLoading(false);
const timestamp = Object.keys(res)[Object.keys(res).length - 1];
setValues(res[timestamp]);
// setValues(
// extractValues({
// time: UnixTime.fromTicks(parseInt(timestamp, 10)),
// value: res[timestamp]
// })
// );
return true;
};
useEffect(() => {
let path = location.split('/');
setCurrentTab(path[path.length - 1]);
@ -213,9 +251,9 @@ function SodioHomeInstallation(props: singleInstallationProps) {
}
}
// Fetch only one time in configuration tab
// if (currentTab == 'configuration') {
// fetchDataForOneTime();
// }
if (currentTab == 'configuration') {
fetchDataForOneTime();
}
return () => {
continueFetching.current = false;
@ -429,6 +467,18 @@ function SodioHomeInstallation(props: singleInstallationProps) {
/>
)}
{currentUser.userType == UserType.admin && (
<Route
path={routes.configuration}
element={
<SodistoreHomeConfiguration
values={values}
id={props.current_installation.id}
></SodistoreHomeConfiguration>
}
/>
)}
{currentUser.userType == UserType.admin && (
<Route
path={routes.manage}

386
typescript/frontend-marios2/src/content/dashboards/SodiohomeInstallations/SodistoreHomeConfiguration.tsx Normal file
View File

@ -0,0 +1,386 @@
import { ConfigurationValues, JSONRecordData } from '../Log/graph.util';
import {
Alert,
Box,
CardContent,
CircularProgress,
Container,
FormControl,
Grid,
IconButton,
InputLabel,
Modal,
Select,
TextField,
Typography,
useTheme
} from '@mui/material';
import React, { useContext, useState } from 'react';
import { FormattedMessage } from 'react-intl';
import Button from '@mui/material/Button';
import { Close as CloseIcon } from '@mui/icons-material';
import MenuItem from '@mui/material/MenuItem';
import axiosConfig from '../../../Resources/axiosConfig';
import { UserContext } from '../../../contexts/userContext';
import { ProductIdContext } from '../../../contexts/ProductIdContextProvider';
interface SodistoreHomeConfigurationProps {
values: JSONRecordData;
id: number;
}
function SodistoreHomeConfiguration(props: SodistoreHomeConfigurationProps) {
if (props.values === null) {
return null;
}
const OperatingPriorityOptions = [
'LoadPriority',
'BatteryPriority',
'GridPriority'
];
const [errors, setErrors] = useState({
minimumSoC: false,
gridSetPoint: false
});
const SetErrorForField = (field_name, state) => {
setErrors((prevErrors) => ({
...prevErrors,
[field_name]: state
}));
};
const theme = useTheme();
const [loading, setLoading] = useState(false);
const [error, setError] = useState(false);
const [updated, setUpdated] = useState(false);
const [dateSelectionError, setDateSelectionError] = useState('');
const [isErrorDateModalOpen, setErrorDateModalOpen] = useState(false);
const context = useContext(UserContext);
const { currentUser, setUser } = context;
const { product, setProduct } = useContext(ProductIdContext);
const [formValues, setFormValues] = useState<Partial<ConfigurationValues>>({
minimumSoC: props.values.Config.MinSoc,
maximumDischargingCurrent: props.values.Config.MaximumChargingCurrent,
maximumChargingCurrent: props.values.Config.MaximumDischargingCurrent,
operatingPriority: OperatingPriorityOptions.indexOf(
props.values.Config.OperatingPriority
),
batteriesCount: props.values.Config.BatteriesCount
});
const handleOperatingPriorityChange = (event) => {
setFormValues({
...formValues,
['operatingPriority']: OperatingPriorityOptions.indexOf(
event.target.value
)
});
};
const handleSubmit = async (e) => {
// console.log('asked for', dayjs(formValues.calibrationChargeDate));
const configurationToSend: Partial<ConfigurationValues> = {
minimumSoC: formValues.minimumSoC,
maximumDischargingCurrent: formValues.maximumDischargingCurrent,
maximumChargingCurrent: formValues.maximumChargingCurrent,
operatingPriority: formValues.operatingPriority
};
setLoading(true);
const res = await axiosConfig
.post(
`/EditInstallationConfig?installationId=${props.id}`,
configurationToSend
)
.catch((err) => {
if (err.response) {
setError(true);
setLoading(false);
}
});
if (res) {
setUpdated(true);
setLoading(false);
}
};
const handleChange = (e) => {
const { name, value } = e.target;
switch (name) {
case 'minimumSoC':
if (
/[^0-9.]/.test(value) ||
isNaN(parseFloat(value)) ||
parseFloat(value) > 100
) {
SetErrorForField(name, true);
} else {
SetErrorForField(name, false);
}
break;
case 'gridSetPoint':
if (/[^0-9.]/.test(value) || isNaN(parseFloat(value))) {
SetErrorForField(name, true);
} else {
SetErrorForField(name, false);
}
break;
default:
break;
}
setFormValues({
...formValues,
[name]: value
});
};
const handleOkOnErrorDateModal = () => {
setErrorDateModalOpen(false);
};
return (
<Container maxWidth="xl">
<Grid
container
direction="row"
justifyContent="center"
alignItems="stretch"
spacing={3}
>
{isErrorDateModalOpen && (
<Modal open={isErrorDateModalOpen} onClose={() => {}}>
<Box
sx={{
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: 450,
bgcolor: 'background.paper',
borderRadius: 4,
boxShadow: 24,
p: 4,
display: 'flex',
flexDirection: 'column',
alignItems: 'center'
}}
>
<Typography
variant="body1"
gutterBottom
sx={{ fontWeight: 'bold' }}
>
{dateSelectionError}
</Typography>
<Button
sx={{
marginTop: 2,
textTransform: 'none',
bgcolor: '#ffc04d',
color: '#111111',
'&:hover': { bgcolor: '#f7b34d' }
}}
onClick={handleOkOnErrorDateModal}
>
Ok
</Button>
</Box>
</Modal>
)}
<Grid item xs={12} md={12}>
<CardContent>
<Box
component="form"
sx={{
'& .MuiTextField-root': { m: 1, width: 390 }
}}
noValidate
autoComplete="off"
>
<>
<div style={{ marginBottom: '5px' }}>
<TextField
label={
<FormattedMessage
id="batteriesCount "
defaultMessage="Batteries Count"
/>
}
name="batteriesCount"
value={formValues.batteriesCount}
onChange={handleChange}
fullWidth
/>
</div>
<div style={{ marginBottom: '5px' }}>
<TextField
label={
<FormattedMessage
id="minimum_soc "
defaultMessage="Minimum SoC (%)"
/>
}
name="minimumSoC"
value={formValues.minimumSoC}
onChange={handleChange}
helperText={
errors.minimumSoC ? (
<span style={{ color: 'red' }}>
Value should be between 0-100%
</span>
) : (
''
)
}
fullWidth
/>
</div>
<div style={{ marginBottom: '5px' }}>
<TextField
label={
<FormattedMessage
id="maximumChargingCurrent "
defaultMessage="Maximum Charging Current"
/>
}
name="maximumChargingCurrent"
value={formValues.maximumChargingCurrent}
onChange={handleChange}
fullWidth
/>
</div>
<div style={{ marginBottom: '5px' }}>
<TextField
label={
<FormattedMessage
id="maximumDischargingCurrent "
defaultMessage="Maximum Discharging Current"
/>
}
name="maximumDischargingCurrent"
value={formValues.maximumDischargingCurrent}
onChange={handleChange}
fullWidth
/>
</div>
<div style={{ marginBottom: '5px', marginTop: '10px' }}>
<FormControl fullWidth sx={{ marginLeft: 1, width: 390 }}>
<InputLabel
sx={{
fontSize: 14,
backgroundColor: 'white'
}}
>
<FormattedMessage
id="operating_priority"
defaultMessage="Operating Priority"
/>
</InputLabel>
<Select
value={
OperatingPriorityOptions[formValues.operatingPriority]
}
onChange={handleOperatingPriorityChange}
>
{OperatingPriorityOptions.map((option) => (
<MenuItem key={option} value={option}>
{option}
</MenuItem>
))}
</Select>
</FormControl>
</div>
</>
<div
style={{
display: 'flex',
alignItems: 'center',
marginTop: 10
}}
>
<Button
variant="contained"
onClick={handleSubmit}
sx={{
marginLeft: '10px'
}}
>
<FormattedMessage
id="applychanges"
defaultMessage="Apply Changes"
/>
</Button>
{loading && (
<CircularProgress
sx={{
color: theme.palette.primary.main,
marginLeft: '20px'
}}
/>
)}
{updated && (
<Alert
severity="success"
sx={{
ml: 1,
display: 'flex',
alignItems: 'center'
}}
>
Successfully applied configuration file
<IconButton
color="inherit"
size="small"
onClick={() => setUpdated(false)}
sx={{ marginLeft: '4px' }}
>
<CloseIcon fontSize="small" />
</IconButton>
</Alert>
)}
{error && (
<Alert
severity="error"
sx={{
ml: 1,
display: 'flex',
alignItems: 'center'
}}
>
An error has occurred
<IconButton
color="inherit"
size="small"
onClick={() => setError(false)}
sx={{ marginLeft: '4px' }}
>
<CloseIcon fontSize="small" />
</IconButton>
</Alert>
)}
</div>
</Box>
</CardContent>
</Grid>
</Grid>
</Container>
);
}
export default SodistoreHomeConfiguration;

22
typescript/frontend-marios2/src/content/dashboards/SodiohomeInstallations/index.tsx
View File

@ -29,7 +29,8 @@ function SodioHomeInstallationTabs(props: SodioHomeInstallationTabsProps) {
'manage',
'overview',
'log',
'history'
'history',
'configuration'
];
const [currentTab, setCurrentTab] = useState<string>(undefined);
@ -133,6 +134,16 @@ function SodioHomeInstallationTabs(props: SodioHomeInstallationTabsProps) {
<FormattedMessage id="information" defaultMessage="Information" />
)
},
{
value: 'configuration',
label: (
<FormattedMessage
id="configuration"
defaultMessage="Configuration"
/>
)
},
{
value: 'history',
label: (
@ -213,6 +224,15 @@ function SodioHomeInstallationTabs(props: SodioHomeInstallationTabsProps) {
<FormattedMessage id="information" defaultMessage="Information" />
)
},
{
value: 'configuration',
label: (
<FormattedMessage
id="configuration"
defaultMessage="Configuration"
/>
)
},
{
value: 'history',
label: (