fix:style and layout

tonybentley · Dec 31, 2023 · 7749aeb · 7749aeb
1 parent 12a554e
commit 7749aeb
Show file tree

Hide file tree

Showing 4 changed files with 117 additions and 75 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,11 +9,15 @@
     "signalk-webapp"
   ],
   "release": {
-    "branches": ["master", "main"]
+    "branches": [
+      "master",
+      "main"
+    ]
   },
   "dependencies": {
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.15.2",
     "@mui/material": "^5.15.2",
     "@mui/x-data-grid": "^6.18.6",
     "@testing-library/jest-dom": "^5.17.0",

diff --git a/src/App.css b/src/App.css
@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,5 +1,23 @@
-import { DataGrid, GridToolbar } from '@mui/x-data-grid';
-import { Grid, List, ListItem, Checkbox } from '@mui/material';
+import { 
+  DataGrid,
+  GridToolbarColumnsButton, 
+  GridToolbarContainer,
+  GridToolbarExport,
+  GridToolbarFilterButton 
+} from '@mui/x-data-grid';
+
+import {
+  Grid,
+  List,
+  ListItem,
+  Checkbox,
+  Accordion,
+  AccordionSummary,
+  Typography, 
+  AccordionDetails
+} from '@mui/material';
+
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { useState, useEffect, useCallback, useRef } from 'react';
 import { Data, Event, EventData, EEListItem, EListItem, EventItem } from './interfaces';
 import { v4 as uuid } from 'uuid';
@@ -11,6 +29,17 @@ const getData = async () => {
   return await res.json();
 }
 
+const CustomToolbar = () => {
+  return (
+    <GridToolbarContainer>
+      <GridToolbarColumnsButton />
+      <GridToolbarFilterButton />
+      <GridToolbarExport />
+    </GridToolbarContainer>
+  );
+}
+
+
 function App() {
 
   const [data] = useState(Array<Event>());
@@ -177,50 +206,71 @@ function App() {
   }, [emitters]);
 
   return (
-    <div className="App" style={{margin: '10px'}}>
-      <Grid container spacing={2} ml={4} mt={10}>
-        <Grid xs={3} item>
-          <h3 style={{float: 'left'}}>Emitters</h3>
-          <List>
-            { emitters.map((emitter: EListItem) => 
-              <ListItem  sx={{p:0}} key={emitter.id}>
-                <Checkbox 
-                  sx={{p:0}} 
-                  checked={emitter.checked} 
-                  onChange={updateEmittersChecked} 
-                  size="small" value={emitter.value}/> 
-                <span>{emitter.value}</span>
-              </ListItem>)}
-          </List>
-          <h3 style={{float: 'left'}}>Events</h3>
-          <List>
-            { events
-              .filter((event: EEListItem) => event.visible)
-              .map((event: EEListItem) => 
-                <ListItem  sx={{p:0}} key={event.id}>
-                  <Checkbox 
-                    sx={{p:0}} 
-                    checked={event.checked} 
-                    onChange={updateEventsChecked} 
-                    size="small" 
-                    value={event.value}/> 
-                  <span>{event.value}</span>
-                </ListItem>)}
-          </List>
+    <div className="App" style={{marginTop: 10}}>
+      <Grid container spacing={2} mt={5} pl={0}>
+        <Grid xs={3} item p={0}  style={{overflow:'scroll', height: 650}} mt={5}>
+        <Accordion defaultExpanded={true} disableGutters style={{boxShadow:'none'}}>
+            <AccordionSummary sx={{pt:0, mt:0, mb:0, pb:0}}
+              expandIcon={<ExpandMoreIcon />}
+              aria-controls="panel1a-content"
+              aria-expanded={true}
+              id="emitters">
+                <Typography variant="body1">Emitters ({emitters.length})</Typography>
+            </AccordionSummary>
+            <AccordionDetails sx={{pt:0, mt:0,  mb:0, pb:0}}>
+              <List sx={{pt:0, mt:0}}>
+                { emitters.map((emitter: EListItem) => 
+                  <ListItem  sx={{p:.2}} key={emitter.id}>
+                    <Checkbox 
+                      sx={{p:0, mr:.08}} 
+                      checked={emitter.checked} 
+                      onChange={updateEmittersChecked} 
+                      size="small" value={emitter.value}/> 
+                      <label style={{marginLeft:8}}>{emitter.value}</label>
+                  </ListItem>)}
+              </List>
+            </AccordionDetails>
+          </Accordion>
+
+          <Accordion defaultExpanded={true} style={{boxShadow:'none'}}>
+            <AccordionSummary  sx={{pt:0, mt:0, mb:0, pb:0}}
+              expandIcon={<ExpandMoreIcon />}
+              aria-controls="panel1a-content"
+              aria-expanded={true}
+              id="events">
+                <Typography variant="body1">Events ({events.filter(item=>item.visible).length})</Typography>
+            </AccordionSummary>
+            <AccordionDetails  sx={{pt:0, mt:0, mb:0, pb:0}}>
+              <List sx={{pt:0, mt:0}}>
+                { events
+                  .filter((event: EEListItem) => event.visible)
+                  .map((event: EEListItem) => 
+                    <ListItem  sx={{p:0}} key={event.id}>
+                      <Checkbox 
+                        sx={{p:0, mr:.08}} 
+                        checked={event.checked} 
+                        onChange={updateEventsChecked} 
+                        size="small" 
+                        value={event.value}/> 
+                        <label style={{marginLeft:8}}>{event.value}</label>
+                    </ListItem>)}
+              </List>
+            </AccordionDetails>
+          </Accordion>
         </Grid>
         <Grid xs={8} item style={{ height: 700, width: '100%', marginTop: 16 }}>
         <DataGrid
-          rowCount={eventItems.length}
-          slots={{ toolbar: GridToolbar }}
+          slots={{ toolbar: CustomToolbar }}
+          hideFooter={true} 
           slotProps={{
             toolbar: {
               showQuickFilter: true,
             },
           }}
-          hideFooter={true}
           rows={eventItems}
           density='compact'
           columns={columnHeader} />
+          <Typography variant='body2' style={{float:'right', paddingTop:4}}>Total Rows: {eventItems.length}</Typography>
         </Grid>
       </Grid>
     </div>