From 547509b2b3a1f18d7e5532930c15892d28ae987c Mon Sep 17 00:00:00 2001
From: Medha Mahanta <medhamahanta@ucsb.edu>
Date: Sun, 20 Aug 2023 16:25:12 -0700
Subject: [PATCH] advanced results table

---
 client/src/components/Advanced.js | 46 +++++++++++++++++++++++++++++--
 client/src/components/Home.js     |  9 +++---
 2 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/client/src/components/Advanced.js b/client/src/components/Advanced.js
index cb59dec..230ca81 100644
--- a/client/src/components/Advanced.js
+++ b/client/src/components/Advanced.js
@@ -5,7 +5,7 @@ import {
   Paper,
   TextField,
   Typography,
-  styled,
+  styled, Table, TableBody, TableCell, TableContainer, TableHead, TableRow 
 } from "@mui/material";
 import axios from "axios";
 import { useState } from "react";
@@ -25,6 +25,10 @@ const Item = styled(Paper)(({ theme }) => ({
 
 let RTU_key = 0;
 
+const createTableData = (number, name, value) => {
+  return {number, name, value};
+}
+
 export default function Advanced() {
   let navigate = useNavigate(); // navigate to diff pages
   // dropdown forms
@@ -59,6 +63,7 @@ export default function Advanced() {
   const [calculationOutput, setCalculationOutput] = useState({});
 
   const [graphs, setGraphs] = useState([]);
+  const [tableRows, setTableRows] = useState([]);
 
   const RTU_inputs = [
     "Supply Air Flow (CFM)",
@@ -140,6 +145,14 @@ export default function Advanced() {
         ["#f5ca0a", "#f5ca0a", "#f5ca0a", "#f5ca0a", "#05a129"]
       ),
     ]);
+
+    setTableRows([
+      createTableData("1", "Enthalpy Coast", graphData[0]),
+      createTableData("2", "Chiller Direct Reduction", graphData[1]),
+      createTableData("3", "Reduced kW from CFM Reduction", graphData[2]),
+      createTableData("4", "Reduced kW from Static Pressure Reset", graphData[3]),
+      createTableData("5", "Total Load Reduction", graphData[4]),
+    ]);
   };
 
   const tableCellStyle = {
@@ -465,7 +478,34 @@ export default function Advanced() {
         >
           Reduction Results
         </Typography>
-        <Grid justifyContent="left" style={{ marginTop: "10px" }}>
+
+        <TableContainer component={Paper} style={{width: "80%"}}>
+      <Table  aria-label="simple table">
+        <TableHead>
+          <TableRow >
+            <TableCell> </TableCell>
+            <TableCell align="center" style={{fontWeight: "bold", color: "#303030"}}>Shed Category</TableCell>
+            <TableCell align="center" style={{fontWeight: "bold"}}> Shed Result (kW)</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {tableRows.map((row) => (
+            <TableRow
+              key={row.number}
+              sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+            >
+              <TableCell align="center" component="th" scope="row">
+                {row.number}
+              </TableCell>
+              <TableCell align="center">{row.name}</TableCell>
+              <TableCell align="center">{(row.value).toFixed(2)}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+
+        {/* <Grid justifyContent="left" style={{ marginTop: "10px" }}>
           {Object.keys(calculationOutput).map((keyName, i) => (
             <div key={i}>
               <div
@@ -478,7 +518,7 @@ export default function Advanced() {
               </div>
             </div>
           ))}
-        </Grid>
+        </Grid> */}
         <Typography
           variant="h4"
           color="primary.main"
diff --git a/client/src/components/Home.js b/client/src/components/Home.js
index 68ce19c..1aef421 100644
--- a/client/src/components/Home.js
+++ b/client/src/components/Home.js
@@ -10,7 +10,7 @@ export default function Home() {
       style={{
         position: "absolute",
         width: "100%",
-        height: "100vh",
+        height: "90vh",
         backgroundImage: `url(${image})`,
         backgroundPosition: "center",
         backgroundSize: "cover",
@@ -23,14 +23,14 @@ export default function Home() {
         padding={10}
         md={12}
         xs={12}
-        direction="row"
-        alignItems="center"
+        //direction="row"
+        //alignItems="center"
       >
         <Grid item xs={12} align="center">
           <Typography
             variant="h4"
             color="white.main"
-            sx={{ fontWeight: "bold", marginTop: 20 }}
+            sx={{ fontWeight: "bold", marginTop: 10, textShadow: "2px 2px #000" }}
           >
             Demand Flexibility Assessment Tool
           </Typography>
@@ -45,6 +45,7 @@ export default function Home() {
               m: 1,
               marginTop: 1,
               textAlign: "center",
+              textShadow: "1px 1px #000",
             }}
           >
             Welcome to the Demand Flexibility Assessment Tool, made by the Grid