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 AccessContextProvider from './contexts/AccessContextProvider';
|
||||
import SalidomoInstallationTabs from './content/dashboards/SalidomoInstallations';
|
||||
// import SodiohomeInstallationTabs from './content/dashboards/SodiohomeInstallations';
|
||||
import SodioHomeInstallationTabs from './content/dashboards/SodiohomeInstallations';
|
||||
import { ProductIdContext } from './contexts/ProductIdContextProvider';
|
||||
|
||||
function App() {
|
||||
|
|
@ -170,7 +170,7 @@ function App() {
|
|||
path={routes.sodiohome_installations + '*'}
|
||||
element={
|
||||
<AccessContextProvider>
|
||||
{/*<SodiohomeInstallationTabs />*/}
|
||||
<SodioHomeInstallationTabs />
|
||||
</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 SearchTwoToneIcon from '@mui/icons-material/SearchTwoTone';
|
||||
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 FlatInstallationView from './FlatInstallationView';
|
||||
import SodioHomeInstallation from './Installation';
|
||||
|
||||
interface installationSearchProps {
|
||||
installations: I_Installation[];
|
||||
|
|
@ -42,9 +44,9 @@ function InstallationSearch(props: installationSearchProps) {
|
|||
sx={{
|
||||
display:
|
||||
currentLocation.pathname ===
|
||||
routes.salidomo_installations + 'list' ||
|
||||
routes.sodiohome_installations + 'list' ||
|
||||
currentLocation.pathname ===
|
||||
routes.salidomo_installations + routes.list
|
||||
routes.sodiohome_installations + routes.list
|
||||
? 'block'
|
||||
: 'none'
|
||||
}}
|
||||
|
|
@ -75,24 +77,24 @@ function InstallationSearch(props: installationSearchProps) {
|
|||
</Grid>
|
||||
</Grid>
|
||||
|
||||
{/*<FlatInstallationView installations={filteredData} />*/}
|
||||
{/*<Routes>*/}
|
||||
{/* {filteredData.map((installation) => {*/}
|
||||
{/* return (*/}
|
||||
{/* <Route*/}
|
||||
{/* key={installation.s3BucketId}*/}
|
||||
{/* path={routes.installation + installation.s3BucketId + '*'}*/}
|
||||
{/* element={*/}
|
||||
{/* <SalidomoInstallation*/}
|
||||
{/* key={installation.s3BucketId}*/}
|
||||
{/* current_installation={installation}*/}
|
||||
{/* type="installation"*/}
|
||||
{/* ></SalidomoInstallation>*/}
|
||||
{/* }*/}
|
||||
{/* />*/}
|
||||
{/* );*/}
|
||||
{/* })}*/}
|
||||
{/*</Routes>*/}
|
||||
<FlatInstallationView installations={filteredData} />
|
||||
<Routes>
|
||||
{filteredData.map((installation) => {
|
||||
return (
|
||||
<Route
|
||||
key={installation.s3BucketId}
|
||||
path={routes.installation + installation.s3BucketId + '*'}
|
||||
element={
|
||||
<SodioHomeInstallation
|
||||
key={installation.s3BucketId}
|
||||
current_installation={installation}
|
||||
type="installation"
|
||||
></SodioHomeInstallation>
|
||||
}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Routes>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue