From 577bc9447daa407453fc8db6a70b7e055091d9f2 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Wed, 18 Sep 2024 21:22:22 -0400
Subject: [PATCH] Added fields

---
 .../Maintenance/CreateMaintenance/index.jsx   | 135 +++++++++++++++---
 .../Maintenance/CreateMaintenance/styled.jsx  |  20 +++
 2 files changed, 134 insertions(+), 21 deletions(-)
 create mode 100644 Client/src/Pages/Maintenance/CreateMaintenance/styled.jsx

diff --git a/Client/src/Pages/Maintenance/CreateMaintenance/index.jsx b/Client/src/Pages/Maintenance/CreateMaintenance/index.jsx
index c4aa697f6..724643f59 100644
--- a/Client/src/Pages/Maintenance/CreateMaintenance/index.jsx
+++ b/Client/src/Pages/Maintenance/CreateMaintenance/index.jsx
@@ -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"
diff --git a/Client/src/Pages/Maintenance/CreateMaintenance/styled.jsx b/Client/src/Pages/Maintenance/CreateMaintenance/styled.jsx
new file mode 100644
index 000000000..76897815d
--- /dev/null
+++ b/Client/src/Pages/Maintenance/CreateMaintenance/styled.jsx
@@ -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,
+  },
+}));