From 8c6d11795cdab00ba321333459a4636a25ad0cd6 Mon Sep 17 00:00:00 2001
From: Yinyin Liu <liu@innov.energy>
Date: Tue, 21 Jan 2025 11:51:54 +0100
Subject: [PATCH] test implementing flat installation view of Sodiohome

---
 typescript/frontend-marios2/src/App.tsx       |   4 +-
 .../FlatInstallationView.tsx                  | 338 ++++++++++++++++++
 .../InstallationSearch.tsx                    |  44 +--
 3 files changed, 363 insertions(+), 23 deletions(-)
 create mode 100644 typescript/frontend-marios2/src/content/dashboards/SodiohomeInstallations/FlatInstallationView.tsx

diff --git a/typescript/frontend-marios2/src/App.tsx b/typescript/frontend-marios2/src/App.tsx
index 1b51d2995..ecb77c3d8 100644
--- a/typescript/frontend-marios2/src/App.tsx
+++ b/typescript/frontend-marios2/src/App.tsx
@@ -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>
                 }
               />
diff --git a/typescript/frontend-marios2/src/content/dashboards/SodiohomeInstallations/FlatInstallationView.tsx b/typescript/frontend-marios2/src/content/dashboards/SodiohomeInstallations/FlatInstallationView.tsx
new file mode 100644
index 000000000..7b9af3266
--- /dev/null
+++ b/typescript/frontend-marios2/src/content/dashboards/SodiohomeInstallations/FlatInstallationView.tsx
@@ -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;
diff --git a/typescript/frontend-marios2/src/content/dashboards/SodiohomeInstallations/InstallationSearch.tsx b/typescript/frontend-marios2/src/content/dashboards/SodiohomeInstallations/InstallationSearch.tsx
index 62ca20dc5..0c4f8bf41 100644
--- a/typescript/frontend-marios2/src/content/dashboards/SodiohomeInstallations/InstallationSearch.tsx
+++ b/typescript/frontend-marios2/src/content/dashboards/SodiohomeInstallations/InstallationSearch.tsx
@@ -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>
     </>
   );
 }