Savepoint

src/views/Alerting.jsx

@@ -0,0 +1,61 @@
+import { useState, useContext } from "react";
+import StoreContext from "../ctx/StoreContext.jsx";
+
+import SpeedDial from '@mui/material/SpeedDial';
+import SpeedDialAction from '@mui/material/SpeedDialAction';
+import SpeedDialIcon from '@mui/material/SpeedDialIcon';
+
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+
+export default function Alerting() {
+  const { state: store, updateStore } = useContext(StoreContext);
+
+  const [alertDialogOpen, setAlertDialogOpen] = useState(false);
+  const quickAlertClick = () => setAlertDialogOpen(!alertDialogOpen);
+
+  function silenceAlert(){
+    
+  }
+  const handleClose = (confirmed) => () => {
+    quickAlertClick(); 
+    if(!confirmed) return;
+    silenceAlert();           
+  }  
+  
+  return (
+    <div className="alerting">
+      <Dialog
+        open={alertDialogOpen}
+        onClose={handleClose()}
+        sx={{ '& .MuiDialog-paper': { width: '80%', maxHeight: 435 } }}
+      maxWidth="xs"
+      >
+        <DialogTitle>
+          Silence Alert
+        </DialogTitle>
+        <DialogContent>
+         
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleClose()}>Cancel</Button>
+          <Button onClick={handleClose(true)} autoFocus>
+            Silence
+          </Button>
+        </DialogActions>
+      </Dialog>
+
+      <SpeedDial
+       ariaLabel="Silence Alert"
+        sx={{ position: 'absolute', bottom: 16, right: 16 }}
+        icon={<SpeedDialIcon />}
+        onClick={quickAlertClick}
+        open={false}
+      />
+    </div>
+  );
+}