elysium/qualiteer
elysium/qualiteer
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Prepared for Vite Migration

Browse source
This commit is contained in:
Dunemask 2022-07-06 20:20:27 +00:00
parent 468437b5d0
commit d46be86f68
14 changed files with 392 additions and 236 deletions
Download patch file Download diff file Expand all files Collapse all files

147
src/Navbar.jsx Normal file
View file

@ -0,0 +1,147 @@
import { useContext, useState } from "react";
import StoreContext from "./ctx/StoreContext.jsx";
import JobContext from "./ctx/JobContext.jsx";
import {
Routes,
Route,
Link,
BrowserRouter,
Navigate,
useLocation,
} from "react-router-dom";
import AppBar from "@mui/material/AppBar";
import Badge, { BadgeProps } from "@mui/material/Badge";
import { styled } from "@mui/material/styles";
import Box from "@mui/material/Box";
import Toolbar from "@mui/material/Toolbar";
import IconButton from "@mui/material/IconButton";
import Typography from "@mui/material/Typography";
import MenuIcon from "@mui/icons-material/Menu";
import Avatar from "@mui/material/Avatar";
import Drawer from "@mui/material/Drawer";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import List from "@mui/material/List";
import ListItemButton from "@mui/material/ListItemButton";
import NotificationsIcon from "@mui/icons-material/Notifications";
import WorkIcon from "@mui/icons-material/Work";
import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted";
import SettingsIcon from "@mui/icons-material/Settings";
import WarningIcon from "@mui/icons-material/Warning";
import InfoIcon from "@mui/icons-material/Info";
// Import Pages
import Failing from "./views/Failing.jsx";
import Alerting from "./views/Alerting.jsx";
import Jobs from "./views/Jobs.jsx";
import Catalog from "./views/Catalog.jsx";
import Settings from "./views/Settings.jsx";
import About from "./views/About.jsx";
const drawerWidth = 240;
export default function Navbar(props) {
const { state: jobState } = useContext(JobContext);
const { state: store } = useContext(StoreContext);
const { inModal } = props;
const pages = store.pages;
const icons = [
<Badge badgeContent={store.failing.length} color="error">
<WarningIcon />
</Badge>,
<NotificationsIcon />,
<Badge badgeContent={jobState.jobs.length} color="primary">
<WorkIcon />
</Badge>,
<FormatListBulletedIcon />,
<SettingsIcon />,
<InfoIcon />,
];
const location = useLocation();
const [drawerOpen, setDrawer] = useState(false);
const toggleDrawer = () => setDrawer(!drawerOpen);
const closeDrawer = () => setDrawer(false);
const reloadPage = () => window.location.reload(false);
const SideBadge = styled(Badge)(({ theme }) => ({
"& .MuiBadge-badge": {
right: -6,
top: 10,
padding: "0 4px",
},
}));
const navHeader = () => {
const pathStr =
location.pathname.charAt(1).toUpperCase() + location.pathname.slice(2);
if (location.pathname !== "/failing") return pathStr;
return (
<SideBadge
badgeContent={store.failing.length}
color="error"
overlap="circular"
>
{pathStr}
</SideBadge>
);
};
const drawerIndex = (isDrawer) => (theme) =>
theme.zIndex.modal + 2 - (isDrawer ? 1 : 0);
return (
<AppBar position="fixed" sx={{ bgcolor: "black", zIndex: drawerIndex() }}>
<Box sx={{ flexGrow: 1, margin: "0 20px" }}>
<Toolbar disableGutters>
<IconButton
size="large"
edge="start"
color="inherit"
aria-label="menu"
sx={{ mr: 2 }}
onClick={toggleDrawer}
>
<MenuIcon />
</IconButton>
<Drawer
open={drawerOpen}
onClose={closeDrawer}
sx={{ zIndex: drawerIndex(true) }}
>
<Toolbar />
<Box sx={{ width: 250, overflow: "auto" }} role="presentation">
<List>
{pages.map((text, index) => (
<ListItemButton
key={text}
component={Link}
to={"/" + text}
selected={location.pathname === "/" + text}
onClick={closeDrawer}
>
<ListItemIcon>{icons[index]}</ListItemIcon>
<ListItemText
primary={text.charAt(0).toUpperCase() + text.slice(1)}
/>
</ListItemButton>
))}
</List>
</Box>
</Drawer>
<Typography variant="h6" noWrap component="div" sx={{ flexGrow: 1 }}>
{navHeader()}
</Typography>
<Avatar
style={{ cursor: "pointer" }}
alt="QA"
src="/assets/QA.png"
onClick={reloadPage}
/>
</Toolbar>
</Box>
</AppBar>
);
}

102
src/Views.jsx
View file

@ -1,6 +1,7 @@
import { useContext, useState } from "react";
import StoreContext from "./ctx/StoreContext.jsx";
import JobContext from "./ctx/JobContext.jsx";
import Navbar from "./Navbar.jsx";
import {
Routes,
@ -44,106 +45,9 @@ export default function Views() {
const { state: jobState } = useContext(JobContext);
const { state: store } = useContext(StoreContext);
const pages = ["failing", "alerting", "jobs", "catalog", "settings", "about"];
const icons = [
<Badge badgeContent={store.failing.length} color="error">
<WarningIcon />
</Badge>,
<NotificationsIcon />,
<Badge badgeContent={jobState.jobs.length} color="primary">
<WorkIcon />
</Badge>,
<FormatListBulletedIcon />,
<SettingsIcon />,
<InfoIcon />,
];
const location = useLocation();
const [drawerOpen, setDrawer] = useState(false);
const toggleDrawer = () => setDrawer(!drawerOpen);
const closeDrawer = () => setDrawer(false);
const reloadPage = () => window.location.reload(false);
const SideBadge = styled(Badge)(({ theme }) => ({
"& .MuiBadge-badge": {
right: -6,
top: 10,
padding: "0 4px",
},
}));
const navHeader = () => {
const pathStr =
location.pathname.charAt(1).toUpperCase() + location.pathname.slice(2);
if (location.pathname !== "/failing") return pathStr;
return (
<SideBadge
badgeContent={store.failing.length}
color="error"
overlap="circular"
>
{pathStr}
</SideBadge>
);
};
return (
<div className="view">
<AppBar
position="fixed"
sx={{ bgcolor: "black", zIndex: (theme) => theme.zIndex.drawer + 1 }}
>
<Box sx={{ flexGrow: 1, margin: "0 20px" }}>
<Toolbar disableGutters>
<IconButton
size="large"
edge="start"
color="inherit"
aria-label="menu"
sx={{ mr: 2 }}
onClick={toggleDrawer}
>
<MenuIcon />
</IconButton>
<Drawer open={drawerOpen} onClose={closeDrawer}>
<Toolbar />
<Box sx={{ width: 250, overflow: "auto" }} role="presentation">
<List>
{pages.map((text, index) => (
<ListItemButton
key={text}
component={Link}
to={"/" + text}
selected={location.pathname === "/" + text}
onClick={closeDrawer}
>
<ListItemIcon>{icons[index]}</ListItemIcon>
<ListItemText
primary={text.charAt(0).toUpperCase() + text.slice(1)}
/>
</ListItemButton>
))}
</List>
</Box>
</Drawer>
<Typography
variant="h6"
noWrap
component="div"
sx={{ flexGrow: 1 }}
>
{navHeader()}
</Typography>
<Avatar
alt="Remy Sharp"
src="/assets/QA.png"
onClick={reloadPage}
/>
</Toolbar>
</Box>
</AppBar>
<Navbar />
<Box component="main" sx={{ flexGrow: 1, p: 3 }}>
<Toolbar />
@ -153,7 +57,7 @@ export default function Views() {
<Route path="/alerting" element={<Alerting />} />
<Route path="/jobs" element={<Jobs />} />
<Route path="/catalog" element={<Catalog />} />
<Route path="/settings" element={<Settings pages={pages} />} />
<Route path="/settings" element={<Settings />} />
<Route path="/about" element={<About />} />
</Routes>
</Box>

11
src/ctx/JobContext.jsx
View file

@ -100,8 +100,13 @@ export const JobProvider = ({ children }) => {
});
}
function jobBuilder() {
mockRun();
function jobBuilder(tests) {
if (!Array.isArray(tests)) throw Error("Error from within JobContext.jsx");
console.log("Would run tests", tests);
}
function retrySingle(test) {
console.log("Would retry test", test);
}
const context = {
@ -111,6 +116,8 @@ export const JobProvider = ({ children }) => {
jobCreate,
jobDelete,
retryAll,
retrySingle,
jobBuilder,
activeJobStates,
};
const contextValue = useMemo(() => context, [state, dispatch]);

25
src/ctx/StoreContext.jsx
View file

@ -23,16 +23,16 @@ const catalogMock = new Array(10).fill(0).map((v, i) => ({
type: i % 3 ? "api" : "ui",
}));
const failingMock = new Array(10).fill(0).map((v, i) => ({
const failingMock = new Array(12).fill(0).map((v, i) => ({
class: `SomeTestClass${i % 2 ? i - 1 : i / 2}`,
name: `TestThatDoesOneThing${i + 1}`,
timestamp: `2022-05-10T16:${2 + i}:33.810Z`,
timestamp: `2022-05-10T16:0${i < 10 ? i : i - 10}:33.810Z`,
method: `SomeMethod`,
silencedUntil: i % 4 ? null : `2022-05-10T16:${2 + i}:33.810Z`,
silencedUntil: i % 4 ? null : `2022-05-10T16:0${i}:33.810Z`,
frequency: "1hour",
type: i % 3 ? "api" : "ui",
dailyFails: i + 1,
screenshot: "https://example.com",
screenshot: "https://picsum.photos/1920/1080",
recentResults: [1, 0, 0, 1, 0],
isCompound: i % 5 ? false : true,
failedMessage: `Some Test FailureMessage ${i}`,
@ -57,6 +57,7 @@ const failingMock = new Array(10).fill(0).map((v, i) => ({
}));
const initialState = {
pages: ["failing", "alerting", "jobs", "catalog", "settings", "about"],
intervals: [],
catalog: catalogMock,
failing: failingMock,
@ -85,14 +86,28 @@ export const StoreProvider = ({ children }) => {
const [state, dispatch] = useReducer(reducer, initialState);
function silenceRequest(silenceInfo) {
const req = {name: silenceInfo.name ?? "*", class: silenceInfo.class ?? "*", method: silenceInfo.method ?? "*", silencedUntil: silenceInfo.silencedUntil };
const req = {
name: silenceInfo.name ?? "*",
class: silenceInfo.class ?? "*",
method: silenceInfo.method ?? "*",
silencedUntil: silenceInfo.silencedUntil,
};
console.log("Would upsert silence", req);
}
function removeFailure(failure) {
const req = {
name: failure.name,
class: failure.class,
};
console.log("Would remove failure", req);
}
const context = {
state,
dispatch,
silenceRequest,
removeFailure,
updateStore: (store) => dispatch({ type: ACTIONS.UPDATE, store }),
};
const contextValue = useMemo(() => context, [state, dispatch]);

7
src/views/Failing.jsx
View file

@ -42,13 +42,6 @@ export default function Failing() {
setSilenceEntry({ ...silence, open: true });
};
/* TODO
for(var j of activeJobStates()){
const failingTest = failing.find((f)=>f.name===j.testName);
if(!failingTest) continue;
failingTest.jobStatus= j.status;
}*/
const [retryAllOpen, setRetryAllOpen] = useState(false);
const retryAllClick = () => setRetryAllOpen(!retryAllOpen);

36
src/views/Jobs.jsx
View file

@ -8,7 +8,7 @@ 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 Toolbar from "@mui/material/Toolbar";
import DialogTitle from "@mui/material/DialogTitle";
import ClickAwayListener from "@mui/material/ClickAwayListener";
@ -24,8 +24,7 @@ export default function Jobs() {
const {
state: jobState,
dispatch: jobDispatch,
jobUpdate,
jobCreate,
jobBuilder,
} = useContext(JobContext);
const { state: store, updateStore } = useContext(StoreContext);
@ -37,21 +36,25 @@ export default function Jobs() {
{ name: "Compound", icon: <ViewColumnIcon /> },
{ name: "Manual", icon: <PageviewIcon /> },
];
const quickOpenClick = (e) => {
e.preventDefault();
e.stopPropagation();
if(!store.simplifiedControls) return setQuickOpen(!quickOpen);
if (!store.simplifiedControls) return setQuickOpen(!quickOpen);
setJobDialogOpen(true);
}
};
const quickOpenClose = () => setQuickOpen(false);
const handleClickOpen = () => setJobDialogOpen(true);
const handleClose = () => setJobDialogOpen(false);
const [queued, setQueued] = useState([]);
useEffect(() => {
}, [jobState.jobs]);
useEffect(() => {}, [jobState.jobs]);
const handleClose = (confirmed) => () => {
setJobDialogOpen(false);
if (!confirmed) return;
jobBuilder(queued);
};
return (
<div className="jobs">
@ -59,15 +62,20 @@ export default function Jobs() {
<JobBox key={i} job={v} />
))}
<Dialog open={jobDialogOpen} onClose={handleClose} maxWidth="xs">
<Dialog open={jobDialogOpen} onClose={handleClose()} fullScreen>
<Toolbar />
<DialogTitle>New Job</DialogTitle>
<DialogContent>
<span>Some Selectors</span>
<JobTestSelector queued={queued} availableTests={store.catalog} setQueued={setQueued} />
<JobTestSelector
queued={queued}
availableTests={store.catalog}
setQueued={setQueued}
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>Cancel</Button>
<Button onClick={handleClose} autoFocus>
<Button onClick={handleClose()}>Cancel</Button>
<Button onClick={handleClose(true)} autoFocus>
Start
</Button>
</DialogActions>

5
src/views/Settings.jsx
View file

@ -15,7 +15,6 @@ import Typography from "@mui/material/Typography";
export default function Settings(props) {
const { state: store, updateStore } = useContext(StoreContext);
const { regions } = store;
const { pages } = props;
const defaultDialog = {
title: "",
@ -35,7 +34,7 @@ export default function Settings(props) {
},
defaultPage: {
title: "Default Page",
options: pages,
options: store.pages,
current: store.defaultPage,
onSelect: (p) => updateStore({ defaultPage: p }),
},
@ -133,8 +132,6 @@ export default function Settings(props) {
/>
</ListItem>
<MultiOptionDialog
id="multi-options-menu"
keepMounted

65
src/views/alt-comps/JobManualSelector.jsx
View file

@ -7,43 +7,44 @@ import ListItemText from "@mui/material/ListItemText";
import ListItemAvatar from "@mui/material/ListItemAvatar";
import Checkbox from "@mui/material/Checkbox";
export default function JobManualSelector(props){
const {availableTests} = props;
export default function JobManualSelector(props) {
const { availableTests } = props;
const [queued, setQueued] = useState([]);
useEffect(()=>{
},[availableTests]);
useEffect(() => {}, [availableTests]);
const queueTest = (test) => () => {
const q = [...queued];
const testIndex = q.indexOf(test);
if(testIndex === -1) q.push(test);
if (testIndex === -1) q.push(test);
else q.splice(testIndex, 1);
setQueued(q);
};
return (
<Box style={{ overflow: "auto", maxHeight: 250 }}>
<List>
{availableTests.map((v, i) => (
<ListItem
key={i}
secondaryAction={<Checkbox edge="end" checked={queued.includes(v)} />}
disablePadding
onClick={queueTest(v)}
>
<ListItemButton key={i}>
<ListItemText
primary={
<span>
{v.class}#<strong>{v.name}</strong>
</span>
}
style={{ wordBreak: "break-word" }}
/>
</ListItemButton>
</ListItem>
))}
</List>
</Box>
);
}
return (
<Box style={{ overflow: "auto", maxHeight: 250 }}>
<List>
{availableTests.map((v, i) => (
<ListItem
key={i}
secondaryAction={
<Checkbox edge="end" checked={queued.includes(v)} />
}
disablePadding
onClick={queueTest(v)}
>
<ListItemButton key={i}>
<ListItemText
primary={
<span>
{v.class}#<strong>{v.name}</strong>
</span>
}
style={{ wordBreak: "break-word" }}
/>
</ListItemButton>
</ListItem>
))}
</List>
</Box>
);
}

32
src/views/alt-comps/JobTestSelector.jsx
View file

@ -6,20 +6,18 @@ import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import DialogTitle from "@mui/material/DialogTitle";
export default function JobTestSelector(props){
const {jobDialogOpen, handleClose, dialogTitle, testSelector} = props;
return (
<Dialog open={jobDialogOpen} onClose={handleClose} maxWidth="xs">
<DialogTitle>{dialogTitle}</DialogTitle>
<DialogContent>
{testSelector}
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>Cancel</Button>
<Button onClick={handleClose} autoFocus>
Start
</Button>
</DialogActions>
</Dialog>
);
}
export default function JobTestSelector(props) {
const { jobDialogOpen, handleClose, dialogTitle, testSelector } = props;
return (
<Dialog open={jobDialogOpen} onClose={handleClose} maxWidth="xs">
<DialogTitle>{dialogTitle}</DialogTitle>
<DialogContent>{testSelector}</DialogContent>
<DialogActions>
<Button onClick={handleClose}>Cancel</Button>
<Button onClick={handleClose} autoFocus>
Start
</Button>
</DialogActions>
</Dialog>
);
}

14
src/views/components/CatalogBox.jsx
View file

@ -8,7 +8,6 @@ import AccordionSummary from "@mui/material/AccordionSummary";
import Typography from "@mui/material/Typography";
import IconButton from "@mui/material/IconButton";
import DeleteIcon from "@mui/icons-material/Delete";
import PlayArrowIcon from "@mui/icons-material/PlayArrow";
import Box from "@mui/material/Box";
@ -33,10 +32,21 @@ export default function CatalogBox(props) {
const toggleOpen = () => setOpen(!open);
const runTest = (e) => {
e.preventDefault();
e.stopPropagation();
jobBuilder([catalogTest]);
};
function Actions() {
return (
<React.Fragment>
<IconButton color="success" aria-label="play" component="span">
<IconButton
color="success"
aria-label="play"
component="span"
onClick={runTest}
>
<PlayArrowIcon />
</IconButton>
</React.Fragment>

89
src/views/components/FailingBox.jsx
View file

@ -7,6 +7,13 @@ import AccordionDetails from "@mui/material/AccordionDetails";
import AccordionSummary from "@mui/material/AccordionSummary";
import Typography from "@mui/material/Typography";
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";
import IconButton from "@mui/material/IconButton";
import DeleteIcon from "@mui/icons-material/Delete";
import NotificationsIcon from "@mui/icons-material/Notifications";
@ -43,14 +50,23 @@ export default function FailingBox(props) {
jobStatus: testJobStatus,
} = failingTest;
const { state: jobState, retryTest, retryJobStatus } = useContext(JobContext);
const { state: jobState, retrySingle } = useContext(JobContext);
const { state: store, updateStore } = useContext(StoreContext);
const { state: store, updateStore, removeFailure } = useContext(StoreContext);
const [open, setOpen] = useState(false);
const toggleOpen = () => setOpen(!open);
const [removeOpen, setRemoveOpen] = useState(false);
const removeClick = () => setRemoveOpen(!removeOpen);
const handleRemoveClose = (confirmed) => (e) => {
stopPropagation(e);
setRemoveOpen(false);
if (!confirmed) return;
removeFailure(failingTest);
};
function badgeColor() {
if (dailyFails === 1) return "primary";
else if (dailyFails === 2) return "secondary";
@ -80,9 +96,11 @@ export default function FailingBox(props) {
function Actions() {
return (
<React.Fragment>
<IconButton aria-label="photo" component="span">
<PhotoCameraIcon />
</IconButton>
<a href={screenshotUrl}>
<IconButton aria-label="photo" component="span">
<PhotoCameraIcon />
</IconButton>
</a>
<IconButton aria-label="retry" component="span">
{jobIcon()}
@ -96,7 +114,12 @@ export default function FailingBox(props) {
>
<NotificationsIcon />
</IconButton>
<IconButton color="error" aria-label="delete" component="span">
<IconButton
color="error"
aria-label="delete"
component="span"
onClick={removeClick}
>
<DeleteIcon />
</IconButton>
</React.Fragment>
@ -125,21 +148,52 @@ export default function FailingBox(props) {
horizontal: "left",
}}
></Badge>
<Badge
sx={{ mr: 2 }}
style={{ whiteSpace: "nowrap", left: "3.125rem" }}
badgeContent={new Date(timestamp).toLocaleTimeString("en-US")}
anchorOrigin={{
vertical: "bottom",
horizontal: "left",
}}
></Badge>
<Dialog
open={removeOpen}
onClose={handleRemoveClose()}
sx={{ "& .MuiDialog-paper": { width: "80%", maxHeight: 435 } }}
maxWidth="xs"
>
<DialogTitle>Remove failure?</DialogTitle>
<DialogContent>
<DialogContentText>
This will remove 1 test from the database
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleRemoveClose()}>Cancel</Button>
<Button onClick={handleRemoveClose(true)} autoFocus>
Yes
</Button>
</DialogActions>
</Dialog>
<Typography component={"span"} style={{ wordBreak: "break-word" }}>
{`${testClass}#`}
<Box fontWeight="bold" display="inline">
{testName}{" "}
</Box>
<br />
<span className="recent-results">
{recentResults.map(
(v, i) =>
(v && <CheckIcon key={i} color="success" />) || (
<ClearIcon key={i} color="error" />
)
)}
</span>
{isCompound && <ViewColumnIcon />}
<div>
<span className="recent-results">
{recentResults.map(
(v, i) =>
(v && <CheckIcon key={i} color="success" />) || (
<ClearIcon key={i} color="error" />
)
)}
</span>
{isCompound && <ViewColumnIcon />}
</div>
</Typography>
<Stack
@ -153,8 +207,9 @@ export default function FailingBox(props) {
direction="row"
sx={{
ml: "auto",
mb: "auto",
mb: "auto",
mt: "auto",
whiteSpace: "nowrap",
display: { xs: "none", sm: "none", md: "block", lg: "block" },
}}
>

66
src/views/components/JobTestSelector.jsx
View file

@ -6,42 +6,44 @@ import ListItemButton from "@mui/material/ListItemButton";
import ListItemText from "@mui/material/ListItemText";
import Checkbox from "@mui/material/Checkbox";
export default function JobTestSelector(props){
const {availableTests, queued, setQueued} = props;
useEffect(()=>{},[availableTests]);
export default function JobTestSelector(props) {
const { availableTests, queued, setQueued } = props;
useEffect(() => {}, [availableTests]);
const queueTest = (test) => () => {
const q = [...queued];
const testIndex = q.indexOf(test);
if(testIndex === -1) q.push(test);
if (testIndex === -1) q.push(test);
else q.splice(testIndex, 1);
setQueued(q);
};
return (
<Box style={{ overflow: "auto", maxHeight: 250 }}>
<List>
{availableTests.map((v, i) => (
<ListItem
key={i}
secondaryAction={<Checkbox edge="end" checked={queued.includes(v)} />}
disablePadding
onClick={queueTest(v)}
>
<ListItemButton key={i}>
<ListItemText
primary={
<span>
{v.class}#<strong>{v.name}</strong>
</span>
}
style={{ wordBreak: "break-word" }}
/>
</ListItemButton>
</ListItem>
))}
</List>
</Box>
);
}
return (
<Box style={{ overflow: "auto", maxHeight: 250 }}>
<List>
{availableTests.map((v, i) => (
<ListItem
key={i}
secondaryAction={
<Checkbox edge="end" checked={queued.includes(v)} />
}
disablePadding
onClick={queueTest(v)}
>
<ListItemButton key={i}>
<ListItemText
primary={
<span>
{v.class}#<strong>{v.name}</strong>
</span>
}
style={{ wordBreak: "break-word" }}
/>
</ListItemButton>
</ListItem>
))}
</List>
</Box>
);
}

15
src/views/components/MultiOptionDialog.jsx
View file

@ -1,5 +1,7 @@
import { useState, useRef, useEffect } from "react";
import useMediaQuery from "@mui/material/useMediaQuery";
import { useTheme } from "@mui/material/styles";
import Button from "@mui/material/Button";
import DialogTitle from "@mui/material/DialogTitle";
import DialogContent from "@mui/material/DialogContent";
@ -8,12 +10,14 @@ import Dialog from "@mui/material/Dialog";
import RadioGroup from "@mui/material/RadioGroup";
import Radio from "@mui/material/Radio";
import FormControlLabel from "@mui/material/FormControlLabel";
import Toolbar from "@mui/material/Toolbar";
export default function MultiOptionDialog(props) {
const { dialog: dialogProp, onClose, open, ...other } = props;
const [value, setValue] = useState(dialogProp.current);
const [dialog, setDialog] = useState(dialogProp);
const theme = useTheme();
const fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
const radioGroupRef = useRef(null);
useEffect(() => {
@ -35,12 +39,17 @@ export default function MultiOptionDialog(props) {
return (
<Dialog
sx={{ "& .MuiDialog-paper": { width: "80%", maxHeight: 435 } }}
maxWidth="xs"
TransitionProps={{ onEntering: handleEntering }}
open={open}
{...other}
sx={
fullScreen
? {}
: { "& .MuiDialog-paper": { width: "80%", maxHeight: 435 } }
}
fullScreen={fullScreen}
>
<Toolbar sx={{ display: { sm: "none" } }} />
<DialogTitle>{dialog.title}</DialogTitle>
<DialogContent dividers>
<RadioGroup

14
src/views/components/SilenceDialog.jsx
View file

@ -1,16 +1,20 @@
import { useState, useContext, useEffect } from "react";
import StoreContext from "../../ctx/StoreContext.jsx";
import useMediaQuery from "@mui/material/useMediaQuery";
import { useTheme } from "@mui/material/styles";
import Button from "@mui/material/Button";
import DialogTitle from "@mui/material/DialogTitle";
import DialogContent from "@mui/material/DialogContent";
import DialogActions from "@mui/material/DialogActions";
import Dialog from "@mui/material/Dialog";
import TextField from "@mui/material/TextField";
import Toolbar from "@mui/material/Toolbar";
export default function SilenceDialog(props) {
const { silence, open, onClose } = props;
const theme = useTheme();
const fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
const [silenceEntry, setSilenceEntry] = useState(silence);
useEffect(() => {
@ -30,10 +34,16 @@ export default function SilenceDialog(props) {
return (
<Dialog
sx={{ "& .MuiDialog-paper": { width: "80%", maxHeight: 435 } }}
sx={
fullScreen
? {}
: { "& .MuiDialog-paper": { width: "80%", maxHeight: 435 } }
}
maxWidth="xs"
open={open}
fullScreen={fullScreen}
>
<Toolbar sx={{ display: { sm: "none" } }} />
<DialogTitle>Silence Alert</DialogTitle>
<DialogContent>
<TextField