Separated frontend and backend, created basic dev environment and websocket server

2021-09-04 15:08:12 +03:00
parent df2873dc48
commit 7fff6d4006
19 changed files with 58 additions and 0 deletions
--- a/front/index.html
+++ b/front/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>roomruler</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./src/index.tsx"></script>
+  </body>
+</html>
--- a/front/package.json
+++ b/front/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "roomruler",
+  "version": "1.0.0",
+  "description": "Web application for distribution of free classrooms",
+  "scripts": {
+    "dev": "vite",
+    "start": "vite",
+    "build": "vite build"
+  },
+  "author": "dm1sh",
+  "license": "MIT",
+  "devDependencies": {
+    "@types/react-dom": "^17.0.9",
+    "typescript": "^4.4.2",
+    "vite": "^2.5.3"
+  },
+  "dependencies": {
+    "@material-ui/core": "^4.12.3",
+    "immer": "^9.0.6",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  }
+}
--- a/front/src/App.tsx
+++ b/front/src/App.tsx
@@ -0,0 +1,75 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import {
+  ThemeProvider,
+  createTheme,
+  useMediaQuery,
+  CssBaseline,
+  AppBar,
+  Toolbar,
+  Typography,
+  makeStyles,
+  Grid,
+} from "@material-ui/core";
+
+import { RoomContextProvider, useRoomContext } from "./context";
+import { BuildingPlan } from "./components/BuildingPlan";
+import { RoomList } from "./components/RoomList";
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    padding: theme.spacing(10, 2, 2, 2),
+    height: "100vh",
+    "& > div > *": {
+      height: "100%",
+    },
+  },
+}));
+
+export const App = () => {
+  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
+
+  const theme = useMemo(
+    () =>
+      createTheme({
+        palette: {
+          type: prefersDarkMode ? "dark" : "light",
+        },
+      }),
+    [prefersDarkMode]
+  );
+
+  const planContainer = useRef<HTMLDivElement>(null);
+
+  const classes = useStyles();
+
+  const [canvasSize, setCanvasSize] = useState({ w: 0, h: 0 });
+
+  useEffect(() => {
+    if (planContainer.current)
+      setCanvasSize({
+        w: planContainer.current.clientWidth - theme.spacing(2),
+        h: planContainer.current.clientHeight - theme.spacing(1),
+      });
+  }, [planContainer.current]);
+
+  return (
+    <ThemeProvider theme={theme}>
+      <RoomContextProvider>
+        <CssBaseline />
+        <AppBar>
+          <Toolbar>
+            <Typography variant="h6">roomruler</Typography>
+          </Toolbar>
+        </AppBar>
+        <Grid className={classes.root} container>
+          <Grid ref={planContainer} item xs={9}>
+            <BuildingPlan width={canvasSize.w} height={canvasSize.h} />
+          </Grid>
+          <Grid item xs={3}>
+            <RoomList />
+          </Grid>
+        </Grid>
+      </RoomContextProvider>
+    </ThemeProvider>
+  );
+};
--- a/front/src/components/BuildingPlan.tsx
+++ b/front/src/components/BuildingPlan.tsx
@@ -0,0 +1,69 @@
+import { useTheme } from "@material-ui/core";
+import { useCallback } from "react";
+
+import { useRoomContext } from "../context";
+import { RoomDisplay } from "../types/room";
+import { Canvas } from "./Canvas";
+
+export type BuildingPlanProps = { width?: number; height?: number };
+
+const getRoomByCoord = (x: number, y: number, map: RoomDisplay[]) => {
+  for (let i = 0; i < map.length; i++) {
+    const { coordinates, size } = map[i];
+    if (
+      x >= coordinates.x &&
+      x <= coordinates.x + size.w &&
+      y >= coordinates.y &&
+      y <= coordinates.y + size.h
+    )
+      return i;
+  }
+
+  return -1;
+};
+
+export const BuildingPlan = ({ width, height }: BuildingPlanProps) => {
+  const { state, toggleFree } = useRoomContext();
+
+  const theme = useTheme();
+
+  const draw = useCallback(
+    (ctx: CanvasRenderingContext2D) => {
+      // Text styles
+      ctx.font = `${theme.typography.h6.fontSize} ${theme.typography.h6.fontFamily}`;
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+
+      state.map.map(({ coordinates, size, title }, index) => {
+        // Draw room rectangle
+        const { free } = state.char[index];
+        ctx.fillStyle = free
+          ? theme.palette.success.main
+          : theme.palette.grey[500];
+        ctx.fillRect(coordinates.x, coordinates.y, size.w, size.h);
+
+        // Draw its number
+        ctx.fillStyle = free
+          ? theme.palette.success.contrastText
+          : theme.palette.getContrastText(theme.palette.grey[500]);
+        ctx.fillText(
+          `${title}`,
+          coordinates.x + size.w / 2,
+          coordinates.y + size.h / 2
+        );
+      });
+    },
+    [state.char, state.map]
+  );
+
+  const clickCb = (x: number, y: number) => {
+    const index = getRoomByCoord(x, y, state.map);
+    if (index >= 0) toggleFree(index);
+  };
+
+  return (
+    <>
+      <Canvas clickCb={clickCb} height={height} width={width} draw={draw} />
+    </>
+  );
+};
--- a/front/src/components/Canvas.tsx
+++ b/front/src/components/Canvas.tsx
@@ -0,0 +1,68 @@
+import { HTMLProps, useEffect, useRef, MouseEvent, useCallback } from "react";
+
+export type DrawFT = (ctx: CanvasRenderingContext2D) => void;
+
+export type ClickCb = (x: number, y: number) => void;
+
+export type CanvasProps = HTMLProps<HTMLCanvasElement> & {
+  draw: DrawFT;
+  clickCb: ClickCb;
+  width?: number;
+  height?: number;
+};
+
+export const useCanvas = (
+  draw: DrawFT,
+  clickCb: ClickCb,
+  width?: number,
+  height?: number
+) => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) throw new Error("Canvas ref not set");
+
+    const context = canvas.getContext("2d");
+
+    if (!context) throw new Error("Couldn't get canvas context");
+
+    draw(context);
+  }, [draw, width, height]);
+
+  const onClick = useCallback(
+    (event: MouseEvent<HTMLCanvasElement>) => {
+      const canvas = canvasRef.current;
+      if (!canvas) throw new Error("Canvas ref not set");
+      const rect = canvas.getBoundingClientRect();
+
+      const x = event.clientX - rect.left;
+      const y = event.clientY - rect.top;
+
+      clickCb(x, y);
+    },
+    [canvasRef.current]
+  );
+
+  return { canvasRef, onClick };
+};
+
+export const Canvas = ({
+  draw,
+  clickCb,
+  width,
+  height,
+  ...props
+}: CanvasProps) => {
+  const { canvasRef, onClick } = useCanvas(draw, clickCb, width, height);
+
+  return (
+    <canvas
+      onClick={onClick}
+      width={width}
+      height={height}
+      ref={canvasRef}
+      {...props}
+    />
+  );
+};
--- a/front/src/components/RoomList.tsx
+++ b/front/src/components/RoomList.tsx
@@ -0,0 +1,101 @@
+import {
+  Paper,
+  List,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+  Typography,
+  makeStyles,
+  InputLabel,
+  Select,
+  Box,
+} from "@material-ui/core";
+import { ChangeEvent, useState } from "react";
+
+import { useRoomContext } from "../context";
+import { FilterState } from "../types/ui";
+
+const useStyles = makeStyles((theme) => ({
+  drawer: {
+    width: "100%",
+    height: `calc(100% - ${theme.spacing(1)}px)`,
+    padding: theme.spacing(2),
+  },
+  filterBox: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(1),
+  },
+  indicatorContainer: {
+    minWidth: theme.spacing(3),
+  },
+  indicator: {
+    width: theme.spacing(2),
+    height: theme.spacing(2),
+    borderRadius: "100%",
+  },
+  free: {
+    background: theme.palette.success.main,
+  },
+  busy: {
+    background: theme.palette.grey[500],
+  },
+}));
+
+export const RoomList = () => {
+  const classes = useStyles();
+
+  const { state } = useRoomContext();
+
+  const [filter, setFilter] = useState(FilterState.ALL);
+
+  const handleFilterChange = (
+    event: ChangeEvent<{ name?: string; value: unknown }>
+  ) => {
+    if (event.target && typeof event.target.value === "string")
+      setFilter(Number.parseInt(event.target.value));
+  };
+
+  return (
+    <Paper className={classes.drawer}>
+      <Typography variant="h6">Class room avaliability status</Typography>
+      <Box className={classes.filterBox}>
+        <InputLabel htmlFor="filter">Filter</InputLabel>
+
+        <Select
+          native
+          value={filter}
+          onChange={handleFilterChange}
+          inputProps={{
+            name: "filter",
+            id: "filter",
+          }}
+        >
+          <option value={FilterState.ALL}>All</option>
+          <option value={FilterState.FREE}>Free</option>
+          <option value={FilterState.BUSY}>Busy</option>
+        </Select>
+      </Box>
+      <List>
+        {state.map.map(({ title }, index) => {
+          if (filter === FilterState.FREE && !state.char[index].free) return "";
+          else if (filter === FilterState.BUSY && state.char[index].free)
+            return "";
+          else
+            return (
+              <ListItem key={title} disableGutters>
+                <ListItemIcon className={classes.indicatorContainer}>
+                  <div
+                    className={`${classes.indicator} ${
+                      state.char[index].free ? classes.free : classes.busy
+                    }`}
+                  />
+                </ListItemIcon>
+                <ListItemText primary={title} />
+              </ListItem>
+            );
+        })}
+      </List>
+    </Paper>
+  );
+};
--- a/front/src/constants.ts
+++ b/front/src/constants.ts
@@ -0,0 +1,40 @@
+import { ContextData } from "./types/context";
+import { PeriodFormat } from "./types/time";
+
+export const lessonPeriods: readonly PeriodFormat[] = [
+  "8:30-9:10",
+  "9:20-10:00",
+  "10:15-10:55",
+  "11:10-11:50",
+  "12:00-12:40",
+  "12:50-13:30",
+] as const;
+
+export const WeekDays = [
+  "Monday",
+  "Tuesday",
+  "Wednesday",
+  "Thursday",
+  "Friday",
+  "Saturday",
+  "Sunday",
+] as const;
+
+// It will look like Windows 11 logo, lol
+export const defaultState: ContextData = {
+  map: [
+    { x: 5, y: 5 },
+    { x: 110, y: 5 },
+    { x: 5, y: 110 },
+    { x: 110, y: 110 },
+  ].map((coordinates, index) => ({
+    coordinates,
+    size: { w: 100, h: 100 },
+    title: index + 1,
+  })),
+  char: Array(4)
+    .fill(0)
+    .map(() => ({
+      free: true,
+    })),
+};
--- a/front/src/context.tsx
+++ b/front/src/context.tsx
@@ -0,0 +1,33 @@
+import produce from "immer";
+import { createContext, FC, useContext, useState } from "react";
+
+import { defaultState } from "./constants";
+import { ContextData, ContextValue } from "./types/context";
+
+const Context = createContext<ContextValue | undefined>(undefined);
+
+export const RoomContextProvider: FC = ({ children }) => {
+  const [state, setState] = useState<ContextData>(defaultState);
+
+  const toggleFree = (index: number) =>
+    setState(
+      produce((draft) => {
+        draft.char[index].free = !draft.char[index].free;
+      })
+    );
+
+  return (
+    <Context.Provider value={{ state, toggleFree }}>
+      {children}
+    </Context.Provider>
+  );
+};
+
+export const useRoomContext = () => {
+  const context = useContext(Context);
+
+  if (!context)
+    throw new Error("useRoomContext must be used within RoomContextProvider");
+
+  return context;
+};
--- a/front/src/index.tsx
+++ b/front/src/index.tsx
@@ -0,0 +1,5 @@
+import ReactDOM from "react-dom";
+
+import { App } from "./App";
+
+ReactDOM.render(<App />, document.getElementById("root"));
--- a/front/src/types/context.ts
+++ b/front/src/types/context.ts
@@ -0,0 +1,11 @@
+import { RoomDisplay, RoomState } from "./room";
+
+export interface ContextData {
+  map: RoomDisplay[];
+  char: RoomState[];
+}
+
+export type ContextValue = {
+  state: ContextData;
+  toggleFree: (index: number) => void;
+};
--- a/front/src/types/room.ts
+++ b/front/src/types/room.ts
@@ -0,0 +1,9 @@
+export interface RoomDisplay {
+  coordinates: { x: number; y: number };
+  size: { w: number; h: number };
+  title: string | number;
+}
+
+export interface RoomState {
+  free: boolean;
+}
--- a/front/src/types/time.ts
+++ b/front/src/types/time.ts
@@ -0,0 +1,5 @@
+import { WeekDays } from "../constants";
+
+export type PeriodFormat = `${number}:${number}-${number}:${number}`;
+
+export type WeekDay = typeof WeekDays[number];
--- a/front/src/types/ui.ts
+++ b/front/src/types/ui.ts
@@ -0,0 +1,5 @@
+export enum FilterState {
+  ALL,
+  FREE,
+  BUSY,
+}
--- a/front/tsconfig.json
+++ b/front/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "es6",
+    "module": "ESNext",
+    "jsx": "react-jsx",
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true
+  }
+}
--- a/front/vite.config.js
+++ b/front/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  esbuild: {
+    jsxInject: `import React from "react"`,
+  },
+});