Merge pull request #6 from moevm/koroleva/eventsPage

Events page
moevm · Nov 3, 2024 · ad018f2 · ad018f2
2 parents 15202bd + f9c8c19
commit ad018f2
Show file tree

Hide file tree

Showing 5 changed files with 119 additions and 0 deletions.
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -10,12 +10,16 @@ import HelpPage from './pages/HelpPage';
 import AllCellsPage from './pages/AllCellsPage';
 import AllUsersPage from './pages/AllUsersPage';
 import UserPage from './pages/UserPage';
+import AllEventsPage from './pages/AllEventsPage';
+import EventPage from './pages/EventPage';
 
 function App() {
     return (
         <BrowserRouter>
+        <header>
             <Link to="/personalAccount">ЛК</Link>
             <Link to="/allUsers">Страница пользователей</Link>
+        </header>
             <Routes>
                 <Route path="/personalAccount" element={<PersonalAccount />}></Route>
                 <Route path="/myCells" element={<MyCellsPage />}></Route>
@@ -24,6 +28,8 @@ function App() {
                 <Route path="/allCells" element={<AllCellsPage />}></Route>
                 <Route path="/allUsers" element={<AllUsersPage />}></Route>
                 <Route path="/user" element={<UserPage />}></Route>
+                <Route path="/allEvents" element={<AllEventsPage />}></Route>
+                <Route path="/event" element={<EventPage />}></Route>
             </Routes>
         </BrowserRouter>
 

diff --git a/client/src/pages/AllEventsPage.tsx b/client/src/pages/AllEventsPage.tsx
@@ -0,0 +1,88 @@
+import { Button, Table, TableBody, TableCell, TableHead, TableRow } from "@mui/material"
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Event } from "../serviceFiles/types";
+
+export default function AllEventsPage() {
+    let navigate = useNavigate();
+
+    const [events, setEvent] = useState([
+        {
+            eventId: 1,
+            cellId: 1,
+            userId: 1,
+            action: "open",
+            dateAndTime: "2024-10-13 12:46:01",
+            description: ""
+
+        }, {
+            eventId: 2,
+            cellId: 2,
+            userId: 1,
+            action: "close",
+            dateAndTime: "2024-11-13 13:50:01",
+            description: ""
+
+        },
+        {
+            eventId: 3,
+            cellId: 2,
+            userId: 1,
+            action: "breaking",
+            dateAndTime: "2024-11-16 01:50:01",
+            description: "Сломана дверца"
+
+        }]);
+    function handleUserClick(event: Event) {
+        navigate("/event", { state: event })
+    }
+    const listUsers = events.map((event: Event, index) =>
+        <TableRow key={event.eventId} onClick={() => handleUserClick(event)}>
+            <TableCell>
+                {event.eventId}
+            </TableCell>
+            <TableCell>
+                {event.cellId}
+            </TableCell>
+            <TableCell>
+                {event.userId}
+            </TableCell>
+            <TableCell>
+                {event.action}
+            </TableCell>
+            <TableCell>
+                {event.dateAndTime}
+            </TableCell>
+            <TableCell>
+                {event.description}
+            </TableCell>
+        </TableRow>
+    )
+    return (<>
+        <Table>
+            <TableHead>
+                <TableCell>
+                    eventId
+                </TableCell>
+                <TableCell>
+                    cellId
+                </TableCell>
+                <TableCell>
+                    userId
+                </TableCell>
+                <TableCell>
+                    action
+                </TableCell>
+                <TableCell>
+                    dateAndTime
+                </TableCell>
+                <TableCell>
+                    description
+                </TableCell>
+            </TableHead>
+            <TableBody>
+                {listUsers}
+            </TableBody>
+        </Table>
+    </>)
+}
diff --git a/client/src/pages/EventPage.tsx b/client/src/pages/EventPage.tsx
@@ -0,0 +1,17 @@
+import { Event } from "../serviceFiles/types"
+import { useLocation } from "react-router-dom"
+
+export default function EventPage() {
+    const {state} = useLocation();
+    console.log(state)
+    return (<div>
+        <h2>Событие id {state.eventId}</h2>
+        <div>
+            <p>Ячейка {state.cellId}</p>
+            <p>Пользователь {state.userId}</p>
+            <p>Действие {state.action}</p>
+            <p>Время {state.dateAndTime}</p>
+            <p>Описание {state.description}</p>
+        </div>
+    </div>)
+}
diff --git a/client/src/pages/PersonalAccountPage.tsx b/client/src/pages/PersonalAccountPage.tsx
@@ -23,6 +23,9 @@ export default function PersonalAccount() {
             <ListItemButton>
                 <Link to="/allCells">Все ячейки</Link>
             </ListItemButton>
+            <ListItemButton>
+                <Link to="/allEvents">Все события</Link>
+            </ListItemButton>
         </nav>
     </div>)
 }
diff --git a/client/src/serviceFiles/types.ts b/client/src/serviceFiles/types.ts
@@ -10,4 +10,9 @@ export type User = {
 }
 export type Event = {
     eventId: number,
+    cellId: number,
+    userId: number,
+    action: string,
+    dateAndTime: string,
+    description: string
 }