adjusting context/reducer setup to allow for deselection of plot. add…

…ing bottom bar view as well.
Smithsonian · Nov 6, 2023 · 400d637 · 400d637
1 parent bcf2850
commit 400d637
Show file tree

Hide file tree

Showing 7 changed files with 215 additions and 254 deletions.
diff --git a/NextJSApp/frontend/app/(endpoints)/dashboard/page.tsx b/NextJSApp/frontend/app/(endpoints)/dashboard/page.tsx
@@ -6,11 +6,21 @@ import Box from "@mui/joy/Box";
 
 export default function Page() {
   const currentPlot = usePlotContext();
-  return (
-    <>
-      <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
-        <p>You have selected {currentPlot?.key ? currentPlot!.key : "nothing"}</p>
-      </Box>
-    </>
-  );
+  if (!currentPlot?.key) {
+    return (
+      <>
+        <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
+          <p>You must select a plot to continue!</p>
+        </Box>
+      </>
+    );
+  } else {
+    return (
+      <>
+        <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
+          <p>You have selected {currentPlot?.key ? currentPlot!.key : "nothing"}</p>
+        </Box>
+      </>
+    );
+  }
 }
diff --git a/NextJSApp/frontend/app/(endpoints)/data/page.tsx b/NextJSApp/frontend/app/(endpoints)/data/page.tsx
@@ -6,11 +6,13 @@ import {IRecordSet} from "mssql";
 import {RowDataStructure, tableHeaders, tableHeaderSettings} from "@/config/macros";
 import {Table} from "@mui/joy";
 import Button from "@mui/joy/Button";
+import Box from "@mui/joy/Box";
 
 export default function Page() {
   const plot = usePlotContext()!;
   const [recordsets, setRecordsets] = useState<IRecordSet<any>[] | null>(null);
   const [loading, setLoading] = useState(false);
+  const currentPlot = usePlotContext();
   async function getData() {
     setLoading(true);
     const res = await fetch(`/api/getalldataforplot?plot=` + plot!.key, {
@@ -21,42 +23,53 @@ export default function Page() {
     setRecordsets(await data.recordsets);
     setLoading(false);
   }
-  let data: RowDataStructure[] = []
-  if (recordsets) {
-    Object.values(recordsets[0]).map((row) => {
-      let temp: RowDataStructure = {tag: row['Tag'], subquadrat: row['Subquadrat'], spcode: row['SpCode'], dbh: (row['DBH'] as number).toFixed(2), htmeas: (row['Htmeas'] as number).toFixed(2), codes: row['Codes'], comments: row['Comments']}
-      data.push(temp);
-    })
+  if (!currentPlot?.key) {
     return (
       <>
-        <Button onClick={getData} loading={loading}>Reload Data</Button>
-        <div>
-          {recordsets && <Table>
-            <thead>
-            <tr>
-              {tableHeaders.map((item, index) => (
-                <th style={tableHeaderSettings} key={index}>{item.label}</th>
-                ))}
-            </tr>
-            </thead>
-            <tbody>
-            {data.map((row, rowIndex) => (
-              <tr key={rowIndex}>
-                {Object.values(row).map((rowEntry, rowEntryIndex) => (
-                  <td key={rowEntryIndex}>{rowEntry}</td>
-                ))}
-              </tr>
-              ))}
-            </tbody>
-          </Table>}
-        </div>
+        <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
+          <p>You must select a plot to continue!</p>
+        </Box>
       </>
     );
   } else {
-    return (
-      <>
-        <Button onClick={getData} loading={loading}>Reload Data</Button>
-      </>
-    );
+    let data: RowDataStructure[] = []
+    if (recordsets) {
+      Object.values(recordsets[0]).map((row) => {
+        let temp: RowDataStructure = {tag: row['Tag'], subquadrat: row['Subquadrat'], spcode: row['SpCode'], dbh: (row['DBH'] as number).toFixed(2), htmeas: (row['Htmeas'] as number).toFixed(2), codes: row['Codes'], comments: row['Comments']}
+        data.push(temp);
+      })
+      return (
+        <>
+          <Button onClick={getData} loading={loading}>Reload Data</Button>
+          <div>
+            {recordsets && <Table>
+              <thead>
+              <tr>
+                {tableHeaders.map((item, index) => (
+                  <th style={tableHeaderSettings} key={index}>{item.label}</th>
+                ))}
+              </tr>
+              </thead>
+              <tbody>
+              {data.map((row, rowIndex) => (
+                <tr key={rowIndex}>
+                  {Object.values(row).map((rowEntry, rowEntryIndex) => (
+                    <td key={rowEntryIndex}>{rowEntry}</td>
+                  ))}
+                </tr>
+              ))}
+              </tbody>
+            </Table>}
+          </div>
+        </>
+      );
+    } else {
+      return (
+        <>
+          <Button onClick={getData} loading={loading}>Reload Data</Button>
+        </>
+      );
+    }
   }
+
 }
diff --git a/NextJSApp/frontend/app/(endpoints)/files/page.tsx b/NextJSApp/frontend/app/(endpoints)/files/page.tsx
@@ -3,29 +3,40 @@ import * as React from "react";
 import ViewUploadedFiles from "@/components/viewuploadedfiles";
 import {UploadAndReviewProcess} from "@/components/uploadreviewcycle";
 import {Tab, TabList, TabPanel, Tabs} from "@mui/joy";
+import {usePlotContext} from "@/app/plotcontext";
+import Box from "@mui/joy/Box";
 
 // File Hub
 export default function Files() {
-
-
-  // Tab system -- Browse page, Upload page
-  return (
-    <>
-      <p>Drag and drop files into the box to upload them to storage</p>
-      <div className={"mt-5"}>
-        <Tabs aria-label={"File Hub Options"} size={"sm"} className={""}>
-          <TabList>
-            <Tab>Browse Uploaded Files</Tab>
-            <Tab>Upload New Files</Tab>
-          </TabList>
-          <TabPanel value={0}>
-            <ViewUploadedFiles />
-          </TabPanel>
-          <TabPanel value={1}>
-            <UploadAndReviewProcess />
-          </TabPanel>
-        </Tabs>
-      </div>
-    </>
-  );
+  const currentPlot = usePlotContext();
+  if (!currentPlot?.key) {
+    return (
+      <>
+        <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
+          <p>You must select a plot to continue!</p>
+        </Box>
+      </>
+    );
+  } else {
+    // Tab system -- Browse page, Upload page
+    return (
+      <>
+        <p>Drag and drop files into the box to upload them to storage</p>
+        <div className={"mt-5"}>
+          <Tabs aria-label={"File Hub Options"} size={"sm"} className={""}>
+            <TabList>
+              <Tab>Browse Uploaded Files</Tab>
+              <Tab>Upload New Files</Tab>
+            </TabList>
+            <TabPanel value={0}>
+              <ViewUploadedFiles />
+            </TabPanel>
+            <TabPanel value={1}>
+              <UploadAndReviewProcess />
+            </TabPanel>
+          </Tabs>
+        </div>
+      </>
+    );
+  }
 }
diff --git a/NextJSApp/frontend/app/(endpoints)/layout.tsx b/NextJSApp/frontend/app/(endpoints)/layout.tsx
@@ -1,10 +1,11 @@
 "use client";
 import * as React from "react";
-import {title} from "@/config/primitives";
+import {subtitle, title} from "@/config/primitives";
 import {redirect, usePathname} from "next/navigation";
 import {useSession} from "next-auth/react";
 import {Box} from "@mui/joy";
 import Sidebar from "@/components/sidebar";
+import Divider from "@mui/joy/Divider";
 
 export default function EndpointLayout({ children, }: { children: React.ReactNode }){
   useSession({
@@ -75,6 +76,15 @@ export default function EndpointLayout({ children, }: { children: React.ReactNod
         </Box>
         <Box sx={{ display: 'flex', alignItems: 'center' }}>
           {children}
+          <Box mt={3} position="absolute" bottom="10px" right="calc(40% - var(--Sidebar-width))" sx={{display: 'flex', alignItems: 'center', flexDirection: 'row'}}>
+            <Box>
+              <h1 className={title({color: "violet"})}>ForestGEO&nbsp;</h1>
+            </Box>
+            <Divider orientation={"vertical"} sx={{marginRight: 2}} />
+            <Box>
+              <p className={subtitle({color: "cyan"})}>A data entry and validation system for your convenience.</p>
+            </Box>
+          </Box>
         </Box>
       </Box>
     </>

diff --git a/NextJSApp/frontend/app/plotcontext.tsx b/NextJSApp/frontend/app/plotcontext.tsx
@@ -25,6 +25,7 @@ export function PlotsProvider({ children }: {children: React.ReactNode}) {
 
 function plotsReducer(currentPlot: any, action: {plotKey: string}) {
   if (plots.find((p) => p.key == action.plotKey)) return plots.find((p) => p.key == action.plotKey);
+  else if (action.plotKey == "") return null;
   else return currentPlot;
 }