build api manager room

package.json

@@ -17,6 +17,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.1.3",
+    "mapbox-gl": "^2.11.0",
     "jwt-decode": "^3.1.2",
     "moment": "^2.29.4",
     "react": "^18.2.0",

src/App.js

@@ -1,10 +1,21 @@
 import {
-  BrowserRouter as Router, Navigate, Route, Routes
+  BrowserRouter as Router,
+  Navigate,
+  Route,
+  Routes,
 } from "react-router-dom";
 import "./App.css";
 import { RequireAuth } from "./components";
+import {
+  Client,
+  Dashboard,
+  HostAdmin,
+  Login,
+  ManagerAdmin,
+  Signup,
+  ManagerRoom,
+} from "./pages";
 import RoleBasedGuard from "./guards/RoleBasedGuard";
-import { Client, Dashboard, HostAdmin, Login, ManagerAdmin, Signup } from "./pages";
 import { SYSTEM_ADMIN, HOST, CLIENT } from "./constants/index";
 
 function App() {
@@ -15,31 +26,33 @@ function App() {
         <Route path="/signup" element={<Signup />} />
         <Route path="/login" element={<Login />} />
         <Route path="/dashboard" element={<Dashboard />} />
+        <Route path="/managerroom" element={<ManagerRoom />} />
+        <Route
+          path="/host"
+          element={
+            <RoleBasedGuard accessibleRoles={[SYSTEM_ADMIN]}>
+              <HostAdmin />
+            </RoleBasedGuard>
+          }
+        ></Route>
 
-        <Route path="/host" element={<RoleBasedGuard 
-          accessibleRoles={[SYSTEM_ADMIN]}
-        >
-          <HostAdmin />
-          </RoleBasedGuard>}>
-        </Route>
-
-        <Route path="/manager" element={<RoleBasedGuard
-            accessibleRoles={[HOST]}
-          >
-            <ManagerAdmin />
-          </RoleBasedGuard>
-        }>
-        </Route>
-
-        <Route path="/client" element={
-          <RoleBasedGuard
-            accessibleRoles={[CLIENT]}
-          >
-            <Client />
-          </RoleBasedGuard>
-        }>
-        </Route>
+        <Route
+          path="/manager"
+          element={
+            <RoleBasedGuard accessibleRoles={[HOST]}>
+              <ManagerAdmin />
+            </RoleBasedGuard>
+          }
+        ></Route>
 
+        <Route
+          path="/client"
+          element={
+            <RoleBasedGuard accessibleRoles={[CLIENT]}>
+              <Client />
+            </RoleBasedGuard>
+          }
+        ></Route>
       </Routes>
     </Router>
   );

src/components/card/card.jsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+import Box from "@mui/material/Box";
+import Card from "@mui/material/Card";
+import CardActions from "@mui/material/CardActions";
+import CardContent from "@mui/material/CardContent";
+import Button from "@mui/material/Button";
+import Typography from "@mui/material/Typography";
+
+const bull = (
+  <Box
+    component="span"
+    sx={{ display: "inline-block", mx: "2px", transform: "scale(0.8)" }}
+  >
+    •
+  </Box>
+);
+
+export default function BasicCard(props) {
+  return (
+    <Card sx={{ minWidth: 275 }}>
+      <CardContent>
+        <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
+          {props.inTitle}
+        </Typography>
+        <Typography variant="h5" component="div">
+          {props.title}
+        </Typography>
+        <Typography sx={{ mb: 1.5 }} color="text.secondary">
+          {props.underTitle}
+        </Typography>
+        <Typography variant="body2" style={{ color: "black" }}>
+          {props.content}
+          <br />a benevolent smile
+        </Typography>
+      </CardContent>
+      <CardActions>
+        <Button size="small">{props.button}</Button>
+      </CardActions>
+    </Card>
+  );
+}

src/components/snackbars/index.jsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import Button from "@mui/material/Button";
+import Snackbar from "@mui/material/Snackbar";
+import IconButton from "@mui/material/IconButton";
+import CloseIcon from "@mui/icons-material/Close";
+
+export default function SimpleSnackbar(props) {
+  const [open, setOpen] = React.useState(false);
+  React.useEffect(() => {
+    setOpen(props.open);
+  }, [props]);
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  return (
+    <div>
+      <Snackbar
+        open={open}
+        autoHideDuration={6000}
+        onClose={handleClose}
+        message={props.text}
+      />
+    </div>
+  );
+}

src/pages/index.js

@@ -1,6 +1,7 @@
 export { default as Login } from "./login";
 export { default as Signup } from "./Signup";
 export { default as HostAdmin } from "./HostAdmin";
+export { default as ManagerRoom } from "./manager_room";
 export { default as ManagerAdmin } from "./ManagerAdmin";
 export { default as Dashboard } from "./Dashboard";
 export { default as Client } from "./Client";

src/pages/manager_room/create.jsx

@@ -0,0 +1,214 @@
+import * as React from "react";
+import Box from "@mui/material/Box";
+import Modal from "@mui/material/Modal";
+import Button from "@mui/material/Button";
+import TextField from "@mui/material/TextField";
+import MenuItem from "@mui/material/MenuItem";
+import { roomAPI } from "../../services/room.api";
+import SimpleSnackbar from "../../components/snackbars";
+const currencies = [
+  {
+    value: "available",
+    label: "Available",
+  },
+  {
+    value: "full",
+    label: "Full",
+  },
+  {
+    value: "pending",
+    label: "Pending",
+  },
+  {
+    value: "maintain",
+    label: "Maintain",
+  },
+];
+const style = {
+  position: "absolute",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  width: 400,
+  bgcolor: "background.paper",
+  border: "2px solid #000",
+  boxShadow: 24,
+  pt: 2,
+  px: 4,
+  pb: 3,
+};
+
+export default function CreateModal(props) {
+  const [open, setOpen] = React.useState(false);
+  const [snackOpen, setsnackOpen] = React.useState(false);
+  const [masage, setmasage] = React.useState("");
+  const [name, setname] = React.useState("");
+  const [address, setaddress] = React.useState("");
+  const [capacity, setcapacity] = React.useState(0);
+  const [price, setprice] = React.useState(0);
+  const [lng, setlng] = React.useState(0);
+  const [lat, setlat] = React.useState(0);
+  const [status, setstatus] = React.useState("false");
+  const [description, setdescription] = React.useState("");
+  const [image, setimage] = React.useState("");
+  const [rating, setrating] = React.useState(0);
+  React.useEffect(() => {
+    setOpen(props.show);
+  }, [props]);
+  const handleClose = () => {
+    setOpen(false);
+  };
+  const CreateRoom = async () => {
+    if (
+      name !== "" &&
+      address !== "" &&
+      lng &&
+      lat &&
+      status !== "" &&
+      image !== "" &&
+      rating
+    ) {
+      const newRoom = await roomAPI.create({
+        name,
+        address,
+        capacity,
+        price,
+        status,
+        description,
+        image,
+        rating,
+        location: { lng, lat },
+        is_active: true,
+      });
+      setsnackOpen(true);
+      if (newRoom ? true : false) {
+        setmasage(" Create success");
+        setOpen(!open);
+        window.location.reload(false);
+      } else {
+        setmasage("create fails");
+      }
+    } else {
+      setsnackOpen(true);
+      setmasage(" Check data again");
+    }
+  };
+  return (
+    <div>
+      <Modal
+        open={open}
+        onClose={props.onClose}
+        aria-labelledby="spring-modal-title"
+        aria-describedby="spring-modal-description"
+      >
+        <Box sx={{ ...style, width: "50%" }}>
+          <h2 id="parent-modal-title">Create Room </h2>
+          <TextField
+            className="col-12"
+            style={{ width: "100%", marginTop: "10px" }}
+            label="Name"
+            onChange={(e) => {
+              setname(e.target.value);
+            }}
+            variant="outlined"
+          />
+          <TextField
+            className="col-12"
+            style={{ width: "100%", marginTop: "10px" }}
+            label="address"
+            onChange={(e) => {
+              setaddress(e.target.value);
+            }}
+            variant="outlined"
+          />
+          <TextField
+            className="col-12"
+            type="number"
+            style={{ width: "100%", marginTop: "10px" }}
+            label="capacity"
+            onChange={(e) => {
+              setcapacity(parseInt(e.target.value));
+            }}
+            variant="outlined"
+          />
+          <TextField
+            className="col-12"
+            type="number"
+            style={{ width: "100%", marginTop: "10px" }}
+            label="price"
+            onChange={(e) => {
+              setprice(parseInt(e.target.value));
+            }}
+            variant="outlined"
+          />
+          <TextField
+            className="col-12"
+            type="number"
+            onChange={(e) => {
+              setlng(parseInt(e.target.value));
+            }}
+            style={{ width: "50%", marginTop: "10px" }}
+            label="Longtitude"
+            variant="outlined"
+          />
+          <TextField
+            className="col-12"
+            type="number"
+            onChange={(e) => {
+              setlat(parseInt(e.target.value));
+            }}
+            style={{ width: "50%", marginTop: "10px" }}
+            label="Latitude"
+            variant="outlined"
+          />
+          <TextField
+            className="col-12"
+            style={{ width: "100%", marginTop: "10px" }}
+            onChange={(e) => {
+              setdescription(e.target.value);
+            }}
+            label="description"
+            variant="outlined"
+          />
+          <TextField
+            className="col-12"
+            style={{ width: "100%", marginTop: "10px" }}
+            label="image"
+            onChange={(e) => {
+              setimage(e.target.value);
+            }}
+            variant="outlined"
+          />
+          <TextField
+            className="col-12"
+            type="number"
+            onChange={(e) => {
+              setrating(parseInt(e.target.value));
+            }}
+            style={{ width: "100%", marginTop: "10px" }}
+            label="rating"
+            variant="outlined"
+          />
+          <TextField
+            className="col-12"
+            select
+            onChange={(e) => {
+              setstatus(e.target.value);
+            }}
+            style={{ width: "100%", marginTop: "10px" }}
+            label="Status"
+            variant="outlined"
+          >
+            {currencies.map((option) => (
+              <MenuItem key={option.value} value={option.value}>
+                {option.label}
+              </MenuItem>
+            ))}
+          </TextField>
+          <Button onClick={CreateRoom}>Save</Button>
+        </Box>
+      </Modal>
+      <SimpleSnackbar open={snackOpen} text={masage} />
+    </div>
+  );
+}