Initial commit

front/src/components/visitor/VisitorItem.js

@@ -0,0 +1,49 @@
+import Typography from "@mui/material/Typography";
+import {Card, FormControlLabel} from "@mui/material";
+import Stack from "@mui/material/Stack";
+import Box from "@mui/material/Box";
+import Switch from "@mui/material/Switch";
+import * as React from "react";
+
+export function VisitorItem({visitor, changeHandler, open}) {
+
+    const getRole = (role) => {
+        switch (role) {
+            case "USER":
+                return 'Посетитель';
+            case "BARMEN":
+                return 'Бармен';
+            case "ADMIN":
+                return 'Админ';
+            default:
+                return "Посетитель";
+        }
+    }
+
+    return (
+        <Card sx={{mb: 1, p: 1, borderRadius: '10px', maxWidth: '600px'}}>
+            <Stack>
+                <Typography variant='h6'>{`${visitor.name} ${!visitor.lastName ? "" : visitor.lastName}`}</Typography>
+                <Box display='flex' justifyContent='flex-end'>
+                    <Typography>{getRole(visitor.role)}</Typography>
+                </Box>
+                <Box display='flex' justifyContent='flex-start'>
+                    <FormControlLabel
+                        control={
+                            <Switch
+                                checked={visitor.invited}
+                                disabled={open}
+                                onChange={() => changeHandler(visitor)}
+                            />}
+                        label="Приглашен" labelPlacement='start'/>
+                </Box>
+                <Box display='flex' justifyContent='flex-end'>
+                    <Typography
+                        variant='body2'
+                        color={visitor.isActive ? 'green' : 'red'}
+                    >{visitor.isActive ? "В баре" : "Не вошел в бар"}</Typography>
+                </Box>
+            </Stack>
+        </Card>
+    )
+}