mirror/Checkmate
1
0
Fork 0
mirror of https://github.com/bluewave-labs/Checkmate.git synced 2026-01-20 08:39:43 -06:00
Code Issues Packages Projects Releases Wiki Activity

Added fields

Browse Source
This commit is contained in:
Daniel Cojocea
2024-09-18 21:22:22 -04:00
parent 6c09606e40
commit 577bc9447d
2 changed files with 134 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
Client/src/Pages/Maintenance/CreateMaintenance/index.jsx
View File

@@ -5,6 +5,25 @@ import Select from "../../../Components/Inputs/Select";
import Field from "../../../Components/Inputs/Field";
import Breadcrumbs from "../../../Components/Breadcrumbs";
import "./index.css";
import { ConfigBox } from "./styled";
const repeatConfig = [
{ _id: 0, name: "Don't repeat" },
{ _id: 1, name: "Repeat daily" },
{ _id: 2, name: "Repeat weekly" },
];
const durationConfig = [
{ _id: 0, name: "seconds" },
{ _id: 1, name: "minutes" },
{ _id: 2, name: "hours" },
{ _id: 3, name: "days" },
];
const periodConfig = [
{ _id: 0, name: "AM" },
{ _id: 1, name: "PM" },
];
const CreateMaintenance = () => {
const theme = useTheme();
@@ -24,30 +43,104 @@ const CreateMaintenance = () => {
gap={theme.spacing(12)}
mt={theme.spacing(6)}
>
<Typography component="h1" variant="h1">
<Typography component="span" fontSize="inherit">
Create a{" "}
<Box>
<Typography component="h1" variant="h1">
<Typography component="span" fontSize="inherit">
Create a{" "}
</Typography>
<Typography
component="span"
variant="h2"
fontSize="inherit"
fontWeight="inherit"
>
maintenance{" "}
</Typography>
<Typography component="span" fontSize="inherit">
window
</Typography>
</Typography>
<Typography
component="span"
variant="h2"
fontSize="inherit"
fontWeight="inherit"
<Typography component="h2" variant="body2" fontSize={14}>
Your pings won't be sent during this time frame
</Typography>
</Box>
<ConfigBox direction="row">
<Typography component="h2" variant="h2">
General Settings
</Typography>
<Box
pl={theme.spacing(18)}
pr={theme.spacing(8)}
borderLeft={1}
borderLeftColor={theme.palette.border.light}
>
maintenance{" "}
<Select
id="maintenance-repeat"
label="Maintenance Repeat"
value={0}
items={repeatConfig}
/>
<Box mt={theme.spacing(16)}>
<Typography component="h3">Days</Typography>
</Box>
</Box>
</ConfigBox>
<ConfigBox>
<Stack direction="row">
<Box>
<Typography component="h2" variant="h2">
Start time
</Typography>
<Typography>
All dates and times are in GMT+0 time zone.
</Typography>
</Box>
<Stack direction="row">
<Select id="maintenance-period" value={0} items={periodConfig} />
</Stack>
</Stack>
<Stack direction="row">
<Box>
<Typography component="h2" variant="h2">
Duration
</Typography>
</Box>
<Stack direction="row">
<Select id="maintenance-unit" value={0} items={durationConfig} />
</Stack>
</Stack>
</ConfigBox>
<Box>
<Typography
component="h2"
variant="h2"
fontSize={16}
my={theme.spacing(6)}
>
Monitor related settings
</Typography>
<Typography component="span" fontSize="inherit">
window
</Typography>
</Typography>
<Box
width="100%"
p={theme.spacing(15)}
border={1}
borderColor={theme.palette.border.light}
borderRadius={theme.shape.borderRadius}
backgroundColor={theme.palette.background.main}
></Box>
<ConfigBox>
<Stack direction="row">
<Box>
<Typography component="h2" variant="h2">
Friendly name
</Typography>
</Box>
<Box>
<Field
id="maintenance-name"
placeholder="Maintanence at __ : __ for ___ minutes"
value=""
/>
</Box>
</Stack>
<Stack direction="row">
<Typography component="h2" variant="h2">
Add monitors
</Typography>
</Stack>
</ConfigBox>
</Box>
<Box ml="auto" display="inline-block">
<Button
variant="contained"

20
Client/src/Pages/Maintenance/CreateMaintenance/styled.jsx Normal file
View File

@@ -0,0 +1,20 @@
import { Stack, styled } from "@mui/material";
export const ConfigBox = styled(Stack)(({ theme }) => ({
border: 1,
borderStyle: "solid",
borderColor: theme.palette.border.light,
borderRadius: theme.spacing(2),
backgroundColor: theme.palette.background.main,
"& > *": { padding: theme.spacing(14) },
"& > :first-of-type, & > .MuiStack-root > div:first-of-type": {
flex: 0.6,
},
"& > div:last-of-type, & > .MuiStack-root > div:last-of-type": {
flex: 1,
},
"& h2": { fontSize: 13.5, fontWeight: 500 },
"& h3, & p": {
color: theme.palette.text.tertiary,
},
}));