Compare commits
No commits in common. "1048ed0a7fd1bb2f7290ad1dfbd2b67fec005538" and "68d126f69147ca92eb06443a7b680e8fb01eeb7a" have entirely different histories.
1048ed0a7f
...
68d126f691
|
|
@ -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>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -1,338 +0,0 @@
|
||||||
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,10 +2,8 @@ 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 { Route, Routes,useLocation } from 'react-router-dom';
|
import { 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[];
|
||||||
|
|
@ -44,9 +42,9 @@ function InstallationSearch(props: installationSearchProps) {
|
||||||
sx={{
|
sx={{
|
||||||
display:
|
display:
|
||||||
currentLocation.pathname ===
|
currentLocation.pathname ===
|
||||||
routes.sodiohome_installations + 'list' ||
|
routes.salidomo_installations + 'list' ||
|
||||||
currentLocation.pathname ===
|
currentLocation.pathname ===
|
||||||
routes.sodiohome_installations + routes.list
|
routes.salidomo_installations + routes.list
|
||||||
? 'block'
|
? 'block'
|
||||||
: 'none'
|
: 'none'
|
||||||
}}
|
}}
|
||||||
|
|
@ -77,24 +75,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={*/}
|
||||||
<SodioHomeInstallation
|
{/* <SalidomoInstallation*/}
|
||||||
key={installation.s3BucketId}
|
{/* key={installation.s3BucketId}*/}
|
||||||
current_installation={installation}
|
{/* current_installation={installation}*/}
|
||||||
type="installation"
|
{/* type="installation"*/}
|
||||||
></SodioHomeInstallation>
|
{/* ></SalidomoInstallation>*/}
|
||||||
}
|
{/* }*/}
|
||||||
/>
|
{/* />*/}
|
||||||
);
|
{/* );*/}
|
||||||
})}
|
{/* })}*/}
|
||||||
</Routes>
|
{/*</Routes>*/}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue