Display the list of relays

central_frontend/src/routes/RelaysListRoute.tsx

@@ -30,6 +30,8 @@ export function RelaysListRoute(): React.ReactElement {
 
   const load = async () => {
     setList(await RelayApi.GetList());
+
+    list?.sort((a, b) => b.priority - a.priority);
   };
 
   const reload = () => {
@@ -63,5 +65,33 @@ function RelaysList(p: {
   list: DeviceRelay[];
   onReload: () => void;
 }): React.ReactElement {
-  return <>todo</>;
+  return (
+    <TableContainer component={Paper}>
+      <Table sx={{ minWidth: 650 }} aria-label="simple table">
+        <TableHead>
+          <TableRow>
+            <TableCell>Name</TableCell>
+            <TableCell>Enabled</TableCell>
+            <TableCell>Priority</TableCell>
+            <TableCell>Consumption</TableCell>
+            <TableCell>Status</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {p.list.map((row) => (
+            <TableRow
+              key={row.name}
+              sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
+            >
+              <TableCell>{row.name}</TableCell>
+              <TableCell>{row.enabled ? "YES" : "NO"}</TableCell>
+              <TableCell>{row.priority}</TableCell>
+              <TableCell>{row.consumption}</TableCell>
+              <TableCell>TODO</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
 }