From 83a0b5ad9d7bca174da8eef517d47aa1c207dea2 Mon Sep 17 00:00:00 2001 From: Dennis Brentjes Date: Sun, 29 May 2022 15:23:01 +0200 Subject: [PATCH] Adds some basic styling --- frontend/package-lock.json | 211 +++++++++++++++++++++++ frontend/package.json | 2 + frontend/src/App.js | 20 ++- frontend/src/components/AddGameNight.jsx | 77 ++++++--- frontend/src/components/Gamenight.jsx | 94 +++++++--- frontend/src/components/Gamenights.jsx | 70 ++++++-- frontend/src/components/MenuBar.jsx | 43 +++-- 7 files changed, 431 insertions(+), 86 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index fe24715..c75d464 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -13,9 +13,11 @@ "@material-ui/icons": "^4.11.3", "@mui/icons-material": "^5.8.0", "@mui/material": "^5.8.0", + "@mui/x-date-pickers": "^5.0.0-alpha.4", "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.0.1", "@testing-library/user-event": "^13.5.0", + "date-fns": "^2.28.0", "moment": "^2.29.3", "react": "^18.1.0", "react-datetime": "^3.1.1", @@ -2176,6 +2178,75 @@ "postcss-selector-parser": "^6.0.10" } }, + "node_modules/@date-io/core": { + "version": "2.14.0", + "resolved": "https://registry.npmjs.org/@date-io/core/-/core-2.14.0.tgz", + "integrity": "sha512-qFN64hiFjmlDHJhu+9xMkdfDG2jLsggNxKXglnekUpXSq8faiqZgtHm2lsHCUuaPDTV6wuXHcCl8J1GQ5wLmPw==" + }, + "node_modules/@date-io/date-fns": { + "version": "2.14.0", + "resolved": "https://registry.npmjs.org/@date-io/date-fns/-/date-fns-2.14.0.tgz", + "integrity": "sha512-4fJctdVyOd5cKIKGaWUM+s3MUXMuzkZaHuTY15PH70kU1YTMrCoauA7hgQVx9qj0ZEbGrH9VSPYJYnYro7nKiA==", + "dependencies": { + "@date-io/core": "^2.14.0" + }, + "peerDependencies": { + "date-fns": "^2.0.0" + }, + "peerDependenciesMeta": { + "date-fns": { + "optional": true + } + } + }, + "node_modules/@date-io/dayjs": { + "version": "2.14.0", + "resolved": "https://registry.npmjs.org/@date-io/dayjs/-/dayjs-2.14.0.tgz", + "integrity": "sha512-4fRvNWaOh7AjvOyJ4h6FYMS7VHLQnIEeAV5ahv6sKYWx+1g1UwYup8h7+gPuoF+sW2hTScxi7PVaba2Jk/U8Og==", + "dependencies": { + "@date-io/core": "^2.14.0" + }, + "peerDependencies": { + "dayjs": "^1.8.17" + }, + "peerDependenciesMeta": { + "dayjs": { + "optional": true + } + } + }, + "node_modules/@date-io/luxon": { + "version": "2.14.0", + "resolved": "https://registry.npmjs.org/@date-io/luxon/-/luxon-2.14.0.tgz", + "integrity": "sha512-KmpBKkQFJ/YwZgVd0T3h+br/O0uL9ZdE7mn903VPAG2ZZncEmaUfUdYKFT7v7GyIKJ4KzCp379CRthEbxevEVg==", + "dependencies": { + "@date-io/core": "^2.14.0" + }, + "peerDependencies": { + "luxon": "^1.21.3 || ^2.x" + }, + "peerDependenciesMeta": { + "luxon": { + "optional": true + } + } + }, + "node_modules/@date-io/moment": { + "version": "2.14.0", + "resolved": "https://registry.npmjs.org/@date-io/moment/-/moment-2.14.0.tgz", + "integrity": "sha512-VsoLXs94GsZ49ecWuvFbsa081zEv2xxG7d+izJsqGa2L8RPZLlwk27ANh87+SNnOUpp+qy2AoCAf0mx4XXhioA==", + "dependencies": { + "@date-io/core": "^2.14.0" + }, + "peerDependencies": { + "moment": "^2.24.0" + }, + "peerDependenciesMeta": { + "moment": { + "optional": true + } + } + }, "node_modules/@emotion/babel-plugin": { "version": "11.9.2", "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.9.2.tgz", @@ -3158,6 +3229,61 @@ "react": "^17.0.0 || ^18.0.0" } }, + "node_modules/@mui/x-date-pickers": { + "version": "5.0.0-alpha.4", + "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-5.0.0-alpha.4.tgz", + "integrity": "sha512-bPEsVygOI5KvrySYzi4ujJlRr4uskM5hDpcV8JCafHtSNQjUMQmCDtQKpAd8rViKBCBQMK8vhpqmf8ShfiZpLA==", + "dependencies": { + "@babel/runtime": "^7.17.2", + "@date-io/date-fns": "^2.14.0", + "@date-io/dayjs": "^2.14.0", + "@date-io/luxon": "^2.14.0", + "@date-io/moment": "^2.14.0", + "@mui/utils": "^5.7.0", + "clsx": "^1.1.1", + "prop-types": "^15.7.2", + "react-transition-group": "^4.4.2", + "rifm": "^0.12.1" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@emotion/react": "^11.9.0", + "@emotion/styled": "^11.8.1", + "@mui/material": "^5.2.3", + "@mui/system": "^5.2.3", + "date-fns": "^2.25.0", + "dayjs": "^1.10.7", + "luxon": "^1.28.0 || ^2.0.0", + "moment": "^2.29.1", + "react": "^17.0.2 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + }, + "date-fns": { + "optional": true + }, + "dayjs": { + "optional": true + }, + "luxon": { + "optional": true + }, + "moment": { + "optional": true + } + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -6477,6 +6603,18 @@ "node": ">=10" } }, + "node_modules/date-fns": { + "version": "2.28.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz", + "integrity": "sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==", + "engines": { + "node": ">=0.11" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/date-fns" + } + }, "node_modules/debug": { "version": "3.2.7", "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz", @@ -14027,6 +14165,14 @@ "node": ">=0.10.0" } }, + "node_modules/rifm": { + "version": "0.12.1", + "resolved": "https://registry.npmjs.org/rifm/-/rifm-0.12.1.tgz", + "integrity": "sha512-OGA1Bitg/dSJtI/c4dh90svzaUPt228kzFsUkJbtA2c964IqEAwWXeL9ZJi86xWv3j5SMqRvGULl7bA6cK0Bvg==", + "peerDependencies": { + "react": ">=16.8" + } + }, "node_modules/rimraf": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz", @@ -18003,6 +18149,43 @@ "integrity": "sha512-RkYG5KiGNX0fJ5YoI0f4Wfq2Yo74D25Hru4fxTOioYdQvHBxcrrtTTyT5Ozzh2ejcNrhFy7IEts2WyEY7yi5yw==", "requires": {} }, + "@date-io/core": { + "version": "2.14.0", + "resolved": "https://registry.npmjs.org/@date-io/core/-/core-2.14.0.tgz", + "integrity": "sha512-qFN64hiFjmlDHJhu+9xMkdfDG2jLsggNxKXglnekUpXSq8faiqZgtHm2lsHCUuaPDTV6wuXHcCl8J1GQ5wLmPw==" + }, + "@date-io/date-fns": { + "version": "2.14.0", + "resolved": "https://registry.npmjs.org/@date-io/date-fns/-/date-fns-2.14.0.tgz", + "integrity": "sha512-4fJctdVyOd5cKIKGaWUM+s3MUXMuzkZaHuTY15PH70kU1YTMrCoauA7hgQVx9qj0ZEbGrH9VSPYJYnYro7nKiA==", + "requires": { + "@date-io/core": "^2.14.0" + } + }, + "@date-io/dayjs": { + "version": "2.14.0", + "resolved": "https://registry.npmjs.org/@date-io/dayjs/-/dayjs-2.14.0.tgz", + "integrity": "sha512-4fRvNWaOh7AjvOyJ4h6FYMS7VHLQnIEeAV5ahv6sKYWx+1g1UwYup8h7+gPuoF+sW2hTScxi7PVaba2Jk/U8Og==", + "requires": { + "@date-io/core": "^2.14.0" + } + }, + "@date-io/luxon": { + "version": "2.14.0", + "resolved": "https://registry.npmjs.org/@date-io/luxon/-/luxon-2.14.0.tgz", + "integrity": "sha512-KmpBKkQFJ/YwZgVd0T3h+br/O0uL9ZdE7mn903VPAG2ZZncEmaUfUdYKFT7v7GyIKJ4KzCp379CRthEbxevEVg==", + "requires": { + "@date-io/core": "^2.14.0" + } + }, + "@date-io/moment": { + "version": "2.14.0", + "resolved": "https://registry.npmjs.org/@date-io/moment/-/moment-2.14.0.tgz", + "integrity": "sha512-VsoLXs94GsZ49ecWuvFbsa081zEv2xxG7d+izJsqGa2L8RPZLlwk27ANh87+SNnOUpp+qy2AoCAf0mx4XXhioA==", + "requires": { + "@date-io/core": "^2.14.0" + } + }, "@emotion/babel-plugin": { "version": "11.9.2", "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.9.2.tgz", @@ -18667,6 +18850,23 @@ "react-is": "^17.0.2" } }, + "@mui/x-date-pickers": { + "version": "5.0.0-alpha.4", + "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-5.0.0-alpha.4.tgz", + "integrity": "sha512-bPEsVygOI5KvrySYzi4ujJlRr4uskM5hDpcV8JCafHtSNQjUMQmCDtQKpAd8rViKBCBQMK8vhpqmf8ShfiZpLA==", + "requires": { + "@babel/runtime": "^7.17.2", + "@date-io/date-fns": "^2.14.0", + "@date-io/dayjs": "^2.14.0", + "@date-io/luxon": "^2.14.0", + "@date-io/moment": "^2.14.0", + "@mui/utils": "^5.7.0", + "clsx": "^1.1.1", + "prop-types": "^15.7.2", + "react-transition-group": "^4.4.2", + "rifm": "^0.12.1" + } + }, "@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -21095,6 +21295,11 @@ "whatwg-url": "^8.0.0" } }, + "date-fns": { + "version": "2.28.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz", + "integrity": "sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==" + }, "debug": { "version": "3.2.7", "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz", @@ -26473,6 +26678,12 @@ "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz", "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==" }, + "rifm": { + "version": "0.12.1", + "resolved": "https://registry.npmjs.org/rifm/-/rifm-0.12.1.tgz", + "integrity": "sha512-OGA1Bitg/dSJtI/c4dh90svzaUPt228kzFsUkJbtA2c964IqEAwWXeL9ZJi86xWv3j5SMqRvGULl7bA6cK0Bvg==", + "requires": {} + }, "rimraf": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz", diff --git a/frontend/package.json b/frontend/package.json index cae5341..ea998cf 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -8,9 +8,11 @@ "@material-ui/icons": "^4.11.3", "@mui/icons-material": "^5.8.0", "@mui/material": "^5.8.0", + "@mui/x-date-pickers": "^5.0.0-alpha.4", "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.0.1", "@testing-library/user-event": "^13.5.0", + "date-fns": "^2.28.0", "moment": "^2.29.3", "react": "^18.1.0", "react-datetime": "^3.1.1", diff --git a/frontend/src/App.js b/frontend/src/App.js index 211c285..dbccafd 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -3,7 +3,6 @@ import React, { useState, useEffect } from 'react'; import MenuBar from './components/MenuBar'; import Login from './components/Login'; import Gamenights from './components/Gamenights'; -import AddGameNight from './components/AddGameNight'; import Gamenight from './components/Gamenight'; const localStorageUserKey = 'user'; @@ -100,39 +99,42 @@ function App() { setUser(JSON.parse(localStorage.getItem(localStorageUserKey))); }, []); + let page; if(user === null) { - return ( + page = (
); } else { - let mainview; if(activeGamenight === null) { - mainview = <> - + mainview = ( setActiveGamenight(g)}/> - + ) } else { - mainview = + />) } - return ( + page = ( <> {mainview} ); } + + return page; } export default App; diff --git a/frontend/src/components/AddGameNight.jsx b/frontend/src/components/AddGameNight.jsx index 9349c68..dc2a746 100644 --- a/frontend/src/components/AddGameNight.jsx +++ b/frontend/src/components/AddGameNight.jsx @@ -1,8 +1,14 @@ import React, { useEffect, useState } from 'react'; -import DateTime from 'react-datetime'; -import GameAdder from './GameAdder'; +import AddIcon from '@mui/icons-material/Add'; +import IconButton from '@mui/material/IconButton'; +import TextField from '@mui/material/TextField'; +import Stack from '@mui/material/Stack'; +import Button from '@mui/material/Button'; +import { DateTimePicker } from '@mui/x-date-pickers'; +import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; -import "react-datetime/css/react-datetime.css"; +import GameAdder from './GameAdder'; function AddGameNight(props) { const [expanded, setExpanded] = useState(false); @@ -68,29 +74,56 @@ function AddGameNight(props) { if(expanded) { return ( -
-
{ e.preventDefault(); }}> -
- Gamenight - - - - - - - + +
+ { e.preventDefault(); }}> +
+ Gamenight - -
- - -
+ + + }/> + + + + + + + +
+ +
+ ); } else { return ( - + setExpanded(true)}> + + ); } } diff --git a/frontend/src/components/Gamenight.jsx b/frontend/src/components/Gamenight.jsx index 2664163..e6446b9 100644 --- a/frontend/src/components/Gamenight.jsx +++ b/frontend/src/components/Gamenight.jsx @@ -1,38 +1,76 @@ -import * as React from 'react'; +import React, { useState } from 'react'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import ListItemText from '@mui/material/ListItemText'; +import ListSubheader from '@mui/material/ListSubheader'; +import ArrowBackIcon from '@mui/icons-material/ArrowBack'; +import IconButton from '@mui/material/IconButton'; +import Typography from '@mui/material/Typography'; + +import moment from 'moment'; + function Gamenight(props) { - let games = props.gamenight.game_list.map(g => - ( -
  • - {g.name} -
    • - ) - ); + const [dense, setDense] = useState(true); - let participants = props.gamenight.participants.map(p => - ( -
  • - {p.username} -
    • - ) + let games = props.gamenight.game_list.map(g => + ( + + + ) + ); - return ( -
    -

    {props.gamenight.name}

    - - {props.gamenight.datetime} -

    Games:

    -
      - {games} -
    -

    Participants:

    -
      - {participants} -
    -
    + let participants = props.gamenight.participants.map(p => + ( + + + ) + ) + + return ( +
    + props.onDismis()}> + + + + + {props.gamenight.name} + + + When: {moment(props.gamenight.datetime).format('LL HH:mm')} + + + + Games: + + }> + {games} + + + Participants: + + }> + {participants} + +
    + ) } export default Gamenight diff --git a/frontend/src/components/Gamenights.jsx b/frontend/src/components/Gamenights.jsx index bf54a28..f034cfa 100644 --- a/frontend/src/components/Gamenights.jsx +++ b/frontend/src/components/Gamenights.jsx @@ -1,8 +1,19 @@ -import React from 'react'; +import * as React from 'react'; +import List from '@mui/material/List'; +import ListItem from '@mui/material/ListItem'; +import ListItemAvatar from '@mui/material/ListItemAvatar'; +import ListItemText from '@mui/material/ListItemText'; +import Avatar from '@mui/material/Avatar'; +import IconButton from '@mui/material/IconButton'; +import GamesIcon from '@mui/icons-material/Games'; +import DeleteIcon from '@mui/icons-material/Delete'; + +import AddGameNight from './AddGameNight'; function Gamenights(props) { + const [dense, setDense] = React.useState(false); - const DeleteGameNight = (gameId) => { + const DeleteGamenight = (gameId) => { if (props.user !== null) { let input = { game_id: gameId, @@ -31,23 +42,52 @@ function Gamenights(props) { } } - let gamenights = props.gamenights.map(g => - ( -
  • props.onSelectGamenight(g)}> - {g.name} - {(props.user.id === g.owner_id || props.user.role === "Admin") && - - } -
    • + DeleteGamenight(g.id) + }}> + + + ) + } + return ( + props.onSelectGamenight(g)} + secondaryAction={ + secondaryAction + }> + + + + + + + ) - ); + }); return ( -
      - {gamenights} -
    + <> + + + {gamenights} + + ); } diff --git a/frontend/src/components/MenuBar.jsx b/frontend/src/components/MenuBar.jsx index 06adf25..573f77c 100644 --- a/frontend/src/components/MenuBar.jsx +++ b/frontend/src/components/MenuBar.jsx @@ -1,18 +1,37 @@ -import React from 'react'; +import * as React from 'react'; +import AppBar from '@mui/material/AppBar'; +import Toolbar from '@mui/material/Toolbar'; +import Typography from '@mui/material/Typography'; +import Button from '@mui/material/Button'; +import IconButton from '@mui/material/IconButton'; +import MenuIcon from '@mui/icons-material/Menu'; function MenuBar(props) { return ( - + + + + + + + Gamenight! + + + + ); }