diff --git a/wahlfang_web/src/api/management.js b/wahlfang_web/src/api/management.js
index a2d635267d1001f389476afa934d76633fe3a8e7..2ef96c6ae584c0f4f57d47d9d44df83246cd6d4a 100644
--- a/wahlfang_web/src/api/management.js
+++ b/wahlfang_web/src/api/management.js
@@ -79,7 +79,7 @@ export const createSession = async (form_values) => {
export const fetchSessions = async () => {
const response = await makeAuthenticatedManagerRequest(managementAPIRoutes.manageSessions, 'GET');
- return await response.json();
+ return await response.json()
}
export const deleteSession = async (pk) => {
diff --git a/wahlfang_web/src/pages/ManagementApp.js b/wahlfang_web/src/pages/ManagementApp.js
index 219487e040c8797c90b51c72c973e3d9f64d6272..be6ff445ff47c0234506a65922e72b7c25ab3d72 100644
--- a/wahlfang_web/src/pages/ManagementApp.js
+++ b/wahlfang_web/src/pages/ManagementApp.js
@@ -12,6 +12,7 @@ import HeaderManagement from "../components/HeaderManagement";
import Logout from "./management/Logout";
import ManagerAuthenticatedRoute from "../components/ManagerAuthenticatedRoute";
import ManagerSessions from "./management/ManagerSessions"
+import SessionDetail from "./management/SessionDetail"
import AddSession from "./management/AddSession"
@@ -66,6 +67,9 @@ export default function ManagementApp() {
<Route exact path={`${path}/sessions`}>
<ManagerSessions/>
</Route>
+ <Route exact path={`${path}/sessions/:id`}>
+ <SessionDetail/>
+ </Route>
<ManagerAuthenticatedRoute>
<Route exact path={`${path}/logout`}>
<Suspense fallback={<Loading/>}>
diff --git a/wahlfang_web/src/pages/management/ManagerSessions.js b/wahlfang_web/src/pages/management/ManagerSessions.js
index bd4b7266ecf4de980a2adee8a6635f52e7f529e4..f2340b1c52c7a4a0e8e1f501b6511d90decbbf1f 100644
--- a/wahlfang_web/src/pages/management/ManagerSessions.js
+++ b/wahlfang_web/src/pages/management/ManagerSessions.js
@@ -57,6 +57,10 @@ export default function ManagerSessions() {
handleClose();
}
+ const toSessionDetail = (pk) => {
+ history.push(`/management/sessions/${pk}`)
+ }
+
return (
<Layout>
@@ -68,7 +72,7 @@ export default function ManagerSessions() {
{sessions.map((session, index) => (
<Box key={session.id} pb={3} sx={{ width: '100%', bgcolor: 'background.paper', }}>
<List component="nav" aria-label="main mailbox folders">
- <ListItemButton>
+ <ListItemButton onClick={() => toSessionDetail(session.id)}>
<ListItemText disableTypography
primary={<Typography type="body2" style={{ color: '#495057' }}>{session.title}</Typography>} />
{session.start_date && <ListItemText sx={{pr: 2}} primary={<Typography align="right" type="overline" style={{ color: '#495057' }}>{formatDate(session.start_date)}</Typography>}/>}
diff --git a/wahlfang_web/src/pages/management/SessionDetail.js b/wahlfang_web/src/pages/management/SessionDetail.js
index d58211595bb0e042bc2ca5528219ee743f2db355..439f230004dc9017556a5d7acb26f8678f6582a5 100644
--- a/wahlfang_web/src/pages/management/SessionDetail.js
+++ b/wahlfang_web/src/pages/management/SessionDetail.js
@@ -1,15 +1,27 @@
import React, {useEffect} from 'react';
import Layout from "../../components/Layout";
+import {useParams} from "react-router-dom";
import {useRecoilValue} from "recoil";
-import {sessionList} from "../../state/management"
+import {sessionById} from "../../state/management"
import Button from '@mui/material/Button';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import MenuIcon from '@mui/icons-material/Menu';
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import Box from "@mui/material/Box";
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+
+
+
+
+export default function SessionDetail() {
+ const {id} = useParams();
+ const session = useRecoilValue(sessionById(parseInt(id)))
+ console.log(session)
-export default function ManagerSessions() {
- const data = useRecoilValue(sessionList)
const [anchorEl, setAnchorEl] = React.useState(null);
const open = Boolean(anchorEl);
@@ -21,47 +33,74 @@ export default function ManagerSessions() {
};
return (
<Layout>
- {data.map(session => (
- <div className="row justify-content-center">
- <div className="col-12">
- <div className="card shadow">
- <div className="card-header bg-dark text-light">
- <h4 className="d-inline">{session.title}</h4>
- <div className="d-inline float-right">
- <Button
- id="demo-positioned-button"
- aria-controls="demo-positioned-menu"
- aria-haspopup="true"
- aria-expanded={open ? 'true' : undefined}
- onClick={handleClick}
- startIcon={<MenuIcon />}
- >
- </Button>
- <Menu
- id="demo-positioned-menu"
- aria-labelledby="demo-positioned-button"
- anchorEl={anchorEl}
- open={open}
- onClose={handleClose}
- anchorOrigin={{
- vertical: 'top',
- horizontal: 'left',
- }}
- transformOrigin={{
- vertical: 'top',
- horizontal: 'left',
- }}
- >
- <MenuItem onClick={handleClose}>Profile</MenuItem>
- <MenuItem onClick={handleClose}>My account</MenuItem>
- <MenuItem onClick={handleClose}>Logout</MenuItem>
- </Menu>
- </div>
- </div>
- </div>
- </div>
- </div>
- ))}
+ <Box
+ sx = {{
+ boxShadow: 1,
+ display: 'flex',
+ justifyContent: 'space-between',
+ p: 2,
+ bgcolor: 'common.black'
+ }}
+ >
+ <Typography variant="h4" color="common.white" component="div">
+ {session.title}
+ </Typography>
+ <Box>
+ <Button
+ id="add-election-btn"
+ variant="contained"
+ >
+ Add Election
+ </Button>
+ <Button
+ id="demo-positioned-button"
+ aria-controls="demo-positioned-menu"
+ aria-haspopup="true"
+ aria-expanded={open ? 'true' : undefined}
+ onClick={handleClick}
+ startIcon={<MenuIcon />}
+ >
+ </Button>
+ <Menu
+ id="demo-positioned-menu"
+ aria-labelledby="demo-positioned-button"
+ anchorEl={anchorEl}
+ open={open}
+ onClose={handleClose}
+ anchorOrigin={{
+ vertical: 'top',
+ horizontal: 'left',
+ }}
+ transformOrigin={{
+ vertical: 'top',
+ horizontal: 'left',
+ }}
+ >
+ <MenuItem onClick={handleClose}>Profile</MenuItem>
+ <MenuItem onClick={handleClose}>My account</MenuItem>
+ <MenuItem onClick={handleClose}>Logout</MenuItem>
+ </Menu>
+ </Box>
+ </Box>
+ <Box
+ sx = {{
+ boxShadow: 1,
+ display: 'flex',
+ p: 2,
+ justifyContent: 'left',
+ }}
+ >
+ <Card
+ sx = {{
+ border: "none"
+ }}
+ >
+ <CardContent>
+ There are no elections
+ </CardContent>
+ </Card>
+ </Box>
</Layout>
+
)
}
\ No newline at end of file
diff --git a/wahlfang_web/src/state/management.js b/wahlfang_web/src/state/management.js
index 4cff9bf5b248e8d507ba6d6dba77c614cbf2f5d6..9df29d0984d0af8f2099d53a4de3cf6b84480b25 100644
--- a/wahlfang_web/src/state/management.js
+++ b/wahlfang_web/src/state/management.js
@@ -1,6 +1,7 @@
import {atom, selector, selectorFamily} from "recoil";
import {fetchSessions} from "../api/management";
import {managementWS} from "../websocket";
+import {electionList} from "./index";
export const isManagerAuthenticated = atom({
@@ -27,4 +28,13 @@ export const sessionList = atom ({
})
},
]
+})
+
+
+export const sessionById = selectorFamily({
+ key: "sessionById",
+ get: (sessionId) => async ({get}) => {
+ const sessions = await get(sessionList);
+ return sessions.find(session => session.id === sessionId)
+ }
})
\ No newline at end of file