test implementing flat installation view of Sodiohome
This commit is contained in:
parent
25310a4250
commit
8c6d11795c
|
|
@ -19,7 +19,7 @@ import { axiosConfigWithoutToken } from './Resources/axiosConfig';
|
||||||
import InstallationsContextProvider from './contexts/InstallationsContextProvider';
|
import InstallationsContextProvider from './contexts/InstallationsContextProvider';
|
||||||
import AccessContextProvider from './contexts/AccessContextProvider';
|
import AccessContextProvider from './contexts/AccessContextProvider';
|
||||||
import SalidomoInstallationTabs from './content/dashboards/SalidomoInstallations';
|
import SalidomoInstallationTabs from './content/dashboards/SalidomoInstallations';
|
||||||
// import SodiohomeInstallationTabs from './content/dashboards/SodiohomeInstallations';
|
import SodioHomeInstallationTabs from './content/dashboards/SodiohomeInstallations';
|
||||||
import { ProductIdContext } from './contexts/ProductIdContextProvider';
|
import { ProductIdContext } from './contexts/ProductIdContextProvider';
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
|
|
@ -170,7 +170,7 @@ function App() {
|
||||||
path={routes.sodiohome_installations + '*'}
|
path={routes.sodiohome_installations + '*'}
|
||||||
element={
|
element={
|
||||||
<AccessContextProvider>
|
<AccessContextProvider>
|
||||||
{/*<SodiohomeInstallationTabs />*/}
|
<SodioHomeInstallationTabs />
|
||||||
</AccessContextProvider>
|
</AccessContextProvider>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,338 @@
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CircularProgress,
|
||||||
|
Grid,
|
||||||
|
styled,
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableContainer,
|
||||||
|
TableHead,
|
||||||
|
TableRow,
|
||||||
|
Typography,
|
||||||
|
useTheme
|
||||||
|
} from '@mui/material';
|
||||||
|
import { I_Installation } from 'src/interfaces/InstallationTypes';
|
||||||
|
import { FormattedMessage } from 'react-intl';
|
||||||
|
import { useLocation, useNavigate } from 'react-router-dom';
|
||||||
|
import routes from '../../../Resources/routes.json';
|
||||||
|
import CancelIcon from '@mui/icons-material/Cancel';
|
||||||
|
import BuildIcon from '@mui/icons-material/Build';
|
||||||
|
|
||||||
|
interface FlatInstallationViewProps {
|
||||||
|
installations: I_Installation[];
|
||||||
|
}
|
||||||
|
|
||||||
|
const FlatInstallationView = (props: FlatInstallationViewProps) => {
|
||||||
|
// const webSocketContext = useContext(WebSocketContext);
|
||||||
|
// const { getSortedInstallations } = webSocketContext;
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const [selectedInstallation, setSelectedInstallation] = useState<number>(-1);
|
||||||
|
const currentLocation = useLocation();
|
||||||
|
//
|
||||||
|
const sortedInstallations = [...props.installations].sort((a, b) => {
|
||||||
|
// Compare the status field of each installation and sort them based on the status.
|
||||||
|
//Installations with alarms go first
|
||||||
|
let a_status = a.status;
|
||||||
|
let b_status = b.status;
|
||||||
|
|
||||||
|
if (a_status > b_status) {
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
if (a_status < b_status) {
|
||||||
|
return 1;
|
||||||
|
}
|
||||||
|
return 0;
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleSelectOneInstallation = (installationID: number): void => {
|
||||||
|
if (selectedInstallation != installationID) {
|
||||||
|
setSelectedInstallation(installationID);
|
||||||
|
setSelectedInstallation(-1);
|
||||||
|
|
||||||
|
navigate(
|
||||||
|
routes.sodiohome_installations +
|
||||||
|
routes.list +
|
||||||
|
routes.installation +
|
||||||
|
`${installationID}` +
|
||||||
|
'/' +
|
||||||
|
routes.batteryview,
|
||||||
|
{
|
||||||
|
replace: true
|
||||||
|
}
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
setSelectedInstallation(-1);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const theme = useTheme();
|
||||||
|
|
||||||
|
const HoverableTableRow = styled(TableRow)(({ theme }) => ({
|
||||||
|
cursor: 'pointer',
|
||||||
|
'&:hover': {
|
||||||
|
backgroundColor: theme.palette.action.hover // Or any other color
|
||||||
|
}
|
||||||
|
}));
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Grid container spacing={1} sx={{ marginTop: 0.1 }}>
|
||||||
|
<Grid
|
||||||
|
item
|
||||||
|
sx={{
|
||||||
|
display:
|
||||||
|
currentLocation.pathname ===
|
||||||
|
routes.sodiohome_installations + 'list' ||
|
||||||
|
currentLocation.pathname ===
|
||||||
|
routes.sodiohome_installations + routes.list
|
||||||
|
? 'block'
|
||||||
|
: 'none'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Card>
|
||||||
|
<TableContainer>
|
||||||
|
<Table>
|
||||||
|
<TableHead>
|
||||||
|
<TableRow>
|
||||||
|
<TableCell>
|
||||||
|
<FormattedMessage id="name" defaultMessage="Name" />
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<FormattedMessage id="location" defaultMessage="Location" />
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<FormattedMessage id="region" defaultMessage="Region" />
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<FormattedMessage id="country" defaultMessage="Country" />
|
||||||
|
</TableCell>
|
||||||
|
{/*<TableCell>*/}
|
||||||
|
{/* <FormattedMessage id="Device" defaultMessage="Device" />*/}
|
||||||
|
{/*</TableCell>*/}
|
||||||
|
{/*<TableCell>*/}
|
||||||
|
{/* <FormattedMessage id="status" defaultMessage="Status" />*/}
|
||||||
|
{/*</TableCell>*/}
|
||||||
|
</TableRow>
|
||||||
|
</TableHead>
|
||||||
|
<TableBody>
|
||||||
|
{sortedInstallations
|
||||||
|
// .filter(
|
||||||
|
// (installation) =>
|
||||||
|
// installation.status === -1 &&
|
||||||
|
// installation.testingMode == false
|
||||||
|
// )
|
||||||
|
.map((installation) => {
|
||||||
|
const isInstallationSelected =
|
||||||
|
installation.s3BucketId === selectedInstallation;
|
||||||
|
|
||||||
|
const status = installation.status;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<HoverableTableRow
|
||||||
|
key={installation.s3BucketId}
|
||||||
|
onClick={() =>
|
||||||
|
handleSelectOneInstallation(installation.s3BucketId)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<TableCell>
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
fontWeight="bold"
|
||||||
|
color="text.primary"
|
||||||
|
gutterBottom
|
||||||
|
noWrap
|
||||||
|
sx={{ marginTop: '10px', fontSize: 'small' }}
|
||||||
|
>
|
||||||
|
{installation.name}
|
||||||
|
</Typography>
|
||||||
|
</TableCell>
|
||||||
|
|
||||||
|
<TableCell>
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
fontWeight="bold"
|
||||||
|
color="text.primary"
|
||||||
|
gutterBottom
|
||||||
|
noWrap
|
||||||
|
sx={{ marginTop: '10px', fontSize: 'small' }}
|
||||||
|
>
|
||||||
|
{installation.location}
|
||||||
|
</Typography>
|
||||||
|
</TableCell>
|
||||||
|
|
||||||
|
<TableCell>
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
fontWeight="bold"
|
||||||
|
color="text.primary"
|
||||||
|
gutterBottom
|
||||||
|
noWrap
|
||||||
|
sx={{ marginTop: '10px', fontSize: 'small' }}
|
||||||
|
>
|
||||||
|
{installation.region}
|
||||||
|
</Typography>
|
||||||
|
</TableCell>
|
||||||
|
|
||||||
|
<TableCell>
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
fontWeight="bold"
|
||||||
|
color="text.primary"
|
||||||
|
gutterBottom
|
||||||
|
noWrap
|
||||||
|
sx={{ marginTop: '10px', fontSize: 'small' }}
|
||||||
|
>
|
||||||
|
{installation.country}
|
||||||
|
</Typography>
|
||||||
|
</TableCell>
|
||||||
|
|
||||||
|
<TableCell>
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
fontWeight="bold"
|
||||||
|
color="text.primary"
|
||||||
|
gutterBottom
|
||||||
|
noWrap
|
||||||
|
sx={{ marginTop: '10px', fontSize: 'small' }}
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href={
|
||||||
|
'https://vrm.victronenergy.com/installation/' +
|
||||||
|
installation.vrmLink +
|
||||||
|
'/dashboard'
|
||||||
|
}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
style={{
|
||||||
|
display: 'inline-block',
|
||||||
|
padding: '0'
|
||||||
|
}} // Style the link
|
||||||
|
onClick={(e) => e.stopPropagation()} // Prevent the click event from bubbling up to the table row
|
||||||
|
>
|
||||||
|
VRM link
|
||||||
|
</a>
|
||||||
|
</Typography>
|
||||||
|
</TableCell>
|
||||||
|
|
||||||
|
<TableCell>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
marginLeft: '5px'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{installation.device === 1 ? (
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
fontWeight="bold"
|
||||||
|
color="text.primary"
|
||||||
|
gutterBottom
|
||||||
|
noWrap
|
||||||
|
sx={{ marginTop: '10px', fontSize: 'small' }}
|
||||||
|
>
|
||||||
|
Cerbo
|
||||||
|
</Typography>
|
||||||
|
) : installation.device === 2 ? (
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
fontWeight="bold"
|
||||||
|
color="text.primary"
|
||||||
|
gutterBottom
|
||||||
|
noWrap
|
||||||
|
sx={{ marginTop: '10px', fontSize: 'small' }}
|
||||||
|
>
|
||||||
|
Venus
|
||||||
|
</Typography>
|
||||||
|
) : (
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
fontWeight="bold"
|
||||||
|
color="text.primary"
|
||||||
|
gutterBottom
|
||||||
|
noWrap
|
||||||
|
sx={{ marginTop: '10px', fontSize: 'small' }}
|
||||||
|
>
|
||||||
|
Device not specified
|
||||||
|
</Typography>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
|
||||||
|
<TableCell>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
marginLeft: '15px'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{status === -1 ? (
|
||||||
|
<CancelIcon
|
||||||
|
style={{
|
||||||
|
width: '23px',
|
||||||
|
height: '23px',
|
||||||
|
color: 'red',
|
||||||
|
borderRadius: '50%'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
''
|
||||||
|
)}
|
||||||
|
|
||||||
|
{status === -2 ? (
|
||||||
|
<CircularProgress
|
||||||
|
size={20}
|
||||||
|
sx={{
|
||||||
|
color: '#f7b34d'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
''
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: '20px',
|
||||||
|
height: '20px',
|
||||||
|
marginLeft: '2px',
|
||||||
|
borderRadius: '50%',
|
||||||
|
backgroundColor:
|
||||||
|
status === 2
|
||||||
|
? 'red'
|
||||||
|
: status === 1
|
||||||
|
? 'orange'
|
||||||
|
: status === -1 || status === -2
|
||||||
|
? 'transparent'
|
||||||
|
: 'green'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{installation.testingMode && (
|
||||||
|
<BuildIcon
|
||||||
|
style={{
|
||||||
|
width: '23px',
|
||||||
|
height: '23px',
|
||||||
|
color: 'purple',
|
||||||
|
borderRadius: '50%',
|
||||||
|
position: 'relative',
|
||||||
|
zIndex: 1,
|
||||||
|
marginLeft: status != -1 ? '25px' : '0px'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
</HoverableTableRow>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</TableContainer>
|
||||||
|
</Card>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default FlatInstallationView;
|
||||||
|
|
@ -2,8 +2,10 @@ import React, { useMemo, useState } from 'react';
|
||||||
import { FormControl, Grid, InputAdornment, TextField } from '@mui/material';
|
import { FormControl, Grid, InputAdornment, TextField } from '@mui/material';
|
||||||
import SearchTwoToneIcon from '@mui/icons-material/SearchTwoTone';
|
import SearchTwoToneIcon from '@mui/icons-material/SearchTwoTone';
|
||||||
import { I_Installation } from '../../../interfaces/InstallationTypes';
|
import { I_Installation } from '../../../interfaces/InstallationTypes';
|
||||||
import { useLocation } from 'react-router-dom';
|
import { Route, Routes,useLocation } from 'react-router-dom';
|
||||||
import routes from '../../../Resources/routes.json';
|
import routes from '../../../Resources/routes.json';
|
||||||
|
import FlatInstallationView from './FlatInstallationView';
|
||||||
|
import SodioHomeInstallation from './Installation';
|
||||||
|
|
||||||
interface installationSearchProps {
|
interface installationSearchProps {
|
||||||
installations: I_Installation[];
|
installations: I_Installation[];
|
||||||
|
|
@ -42,9 +44,9 @@ function InstallationSearch(props: installationSearchProps) {
|
||||||
sx={{
|
sx={{
|
||||||
display:
|
display:
|
||||||
currentLocation.pathname ===
|
currentLocation.pathname ===
|
||||||
routes.salidomo_installations + 'list' ||
|
routes.sodiohome_installations + 'list' ||
|
||||||
currentLocation.pathname ===
|
currentLocation.pathname ===
|
||||||
routes.salidomo_installations + routes.list
|
routes.sodiohome_installations + routes.list
|
||||||
? 'block'
|
? 'block'
|
||||||
: 'none'
|
: 'none'
|
||||||
}}
|
}}
|
||||||
|
|
@ -75,24 +77,24 @@ function InstallationSearch(props: installationSearchProps) {
|
||||||
</Grid>
|
</Grid>
|
||||||
</Grid>
|
</Grid>
|
||||||
|
|
||||||
{/*<FlatInstallationView installations={filteredData} />*/}
|
<FlatInstallationView installations={filteredData} />
|
||||||
{/*<Routes>*/}
|
<Routes>
|
||||||
{/* {filteredData.map((installation) => {*/}
|
{filteredData.map((installation) => {
|
||||||
{/* return (*/}
|
return (
|
||||||
{/* <Route*/}
|
<Route
|
||||||
{/* key={installation.s3BucketId}*/}
|
key={installation.s3BucketId}
|
||||||
{/* path={routes.installation + installation.s3BucketId + '*'}*/}
|
path={routes.installation + installation.s3BucketId + '*'}
|
||||||
{/* element={*/}
|
element={
|
||||||
{/* <SalidomoInstallation*/}
|
<SodioHomeInstallation
|
||||||
{/* key={installation.s3BucketId}*/}
|
key={installation.s3BucketId}
|
||||||
{/* current_installation={installation}*/}
|
current_installation={installation}
|
||||||
{/* type="installation"*/}
|
type="installation"
|
||||||
{/* ></SalidomoInstallation>*/}
|
></SodioHomeInstallation>
|
||||||
{/* }*/}
|
}
|
||||||
{/* />*/}
|
/>
|
||||||
{/* );*/}
|
);
|
||||||
{/* })}*/}
|
})}
|
||||||
{/*</Routes>*/}
|
</Routes>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue