Add bufet, teams+players, test admin

src/App.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 
 import { Pocketbase as PocketbaseProvider } from 'pocketbase-react';
 import { Router } from './pages/_router';
+import { AppHeader } from './components/app-header';
 
 const serverURL = "http://127.0.0.1:8090";
 // const collections = ['games', 'goals', 'players', 'teams', 'misc'];
@@ -19,7 +20,8 @@ const App: React.FC = () => {
                 // for example expo WebBrowser
             }}
         >
-            <div className="d-flex justify-content-center">
+            <div className="d-flex flex-column align-items-center justify-content-start">
+                <AppHeader />
                 <div style={{maxWidth: 600, width: '100%'}}>
                     <Router />
                 </div>

src/components/app-header.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import Navbar from 'react-bootstrap/Navbar'
+import Container from 'react-bootstrap/Container'
+import Nav from 'react-bootstrap/Nav'
+import { Link } from 'wouter';
+
+
+export const AppHeader: React.FC = () => {
+    return (
+        <Navbar expand="lg">
+            <Container className='px-4 py-2'>
+                <Navbar.Brand href='/'>GJP Cup</Navbar.Brand>
+                <Navbar.Toggle aria-controls='navbar'/>
+                <Navbar.Collapse id='navbar' className='justify-content-end'>
+                    <Nav className="me-auto">
+                        <Link href='/'><Nav.Link>Hlavní stránka</Nav.Link></Link>
+                        <Link href='/teams'><Nav.Link>Týmy a hráči</Nav.Link></Link>
+                        <Link href='/matches'><Nav.Link>Všechny zápasy</Nav.Link></Link>
+                        <Link href='/stats'><Nav.Link>Velká tabulka</Nav.Link></Link>
+                        <Link href='/bufet'><Nav.Link>Bufet</Nav.Link></Link>
+                        <Link href='/vote'><Nav.Link>Hlasování</Nav.Link></Link>
+                        <Link href='/admin'><Nav.Link>Admin</Nav.Link></Link>
+                    </Nav>
+                </Navbar.Collapse>
+            </Container>
+        </Navbar>
+    );
+};

src/components/team-view.tsx

@@ -0,0 +1,62 @@
+import React, { useMemo } from 'react';
+import { Container, Card, Table } from 'react-bootstrap';
+import { Player, Team } from '../types';
+import { useGameLogic } from '../logic';
+
+const teamPointsInlineStyle: React.CSSProperties = {
+    borderBottomStyle: 'hidden',
+};
+
+type TeamProps = {
+    team: Team,
+};
+
+export const TeamView: React.FC<TeamProps> = props => {
+    const { players } = useGameLogic();
+
+    const {
+        team,
+    } = props;
+
+    const members = useMemo(() => {
+        const array =  players.filter(player => player.team === team.id).sort((a, b) => a.goals.length - b.goals.length);
+        return new Set(array);
+    }, [players, team.id]);
+
+    return (
+        <Card className='my-3'>
+            <Card.Header as="h5">{team.name}</Card.Header>
+            <Card.Body className='pb-0'>
+                <Table>
+                    <tbody>
+                        {[...members.values()].map((member, idx) => (
+                            <PlayerRow player={member} last={idx === members.size-1} key={member.id}/>
+                        ))}
+                    </tbody>
+                    <tfoot>
+                        <tr style={teamPointsInlineStyle}>
+                            <td><b>Body týmu:</b></td>
+                            <td><b>{team.points}</b></td>
+                        </tr>
+                    </tfoot>
+                </Table>
+            </Card.Body>
+        </Card>
+    );
+};
+
+type PlayerRowProps = {
+    player: Player,
+    last: boolean,
+};
+
+const PlayerRow: React.FC<PlayerRowProps> = props => {
+    const { player, last } = props;
+
+    return (
+        <tr style={last ? { borderBottomColor: 'black' } : undefined}>
+            <td>{player.name}</td>
+            <td>{player.goals.length}</td>
+        </tr>
+    );
+};

src/logic.ts

@@ -40,6 +40,11 @@ export const useGameLogic = () => {
     return {
         gameState,
         currentGame,
+
         players: players.records,
+        games: games.records,
+        teams: teams.records,
+
+        addPlayer: players.actions.create,
     };
 };

src/pages/_router.tsx

@@ -1,11 +1,18 @@
 import React from 'react';
 import { Route, Switch } from "wouter";
 import { HomePage } from './home';
+import { BufetPage } from './bufet';
+import { TeamsPage } from './teams';
+import { AdminHomePage } from './admin/home';
 
 export const Router: React.FC = () => {
     return (
         <Switch>
             <Route path="/" component={HomePage} />
+            <Route path="/bufet" component={BufetPage} />
+            <Route path="/teams" component={TeamsPage} />
+
+            <Route path="/admin" component={AdminHomePage} />
         </Switch>
     );
 };

src/pages/admin/home.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useGameLogic } from '../../logic';
+import Button from 'react-bootstrap/Button';
+
+export const AdminHomePage: React.FC = () => {
+    const { teams, addPlayer } = useGameLogic();
+
+    return (
+        <div>
+            {teams.map(team => (
+                <div>
+                    <p>{team.name}</p>
+                    <Button onClick={() => addPlayer({name: Math.random().toString(), team: team.id})}>ADD</Button>
+                </div>
+            ))}
+        </div>
+    );
+};

src/pages/bufet.tsx

@@ -0,0 +1,27 @@
+import Card from 'react-bootstrap/Card';
+
+export const BufetPage: React.FC = () => {
+    return (
+        <div>
+            <Card className="m-4">
+                <Card.Header>Bufet</Card.Header>
+
+                <Card.Body>
+                <p className="pb-4">Bufet je otevřený! V nabídce najdete:</p>
+
+                <p>Whey protein - 3O Kč</p>
+                <p>Párek v rohlíku - 20 Kč</p>
+                <p>Párek na tácku - 10 Kč</p>
+                <p>Toust - 20 Kč</p>
+                <p>Voda citrón máta - 5 Kč</p>
+                <p>Kreatin 10g - 30 Kč</p>
+                <p>Kofein 200mg - 40 Kč</p>
+                <p>Sušené mléko - 15 Kč</p>
+                <p>Muffin od Bobisovy babičky - 10 Kč</p>
+
+                <p className="pt-2">Dejte si do nosu ;)</p>
+                </Card.Body>
+            </Card>
+        </div>
+    );
+};

src/pages/teams.tsx

@@ -0,0 +1,24 @@
+import React, { useMemo } from 'react';
+import { TeamView } from '../components/team-view';
+import { useGameLogic } from '../logic';
+
+export const TeamsPage: React.FC = () => {
+    const {
+        teams,
+    } = useGameLogic();
+
+    const teamsSorted = useMemo(() => {
+        return teams.sort((a, b) => a.no - b.no);
+    }, [teams]);
+
+    if (!teamsSorted || teamsSorted.length === 0)
+        return (<p>loading</p>);
+
+    return (
+        <div>
+            {teamsSorted.map(team => (
+                <TeamView team={team} key={team.name}/>
+            ))}
+        </div>
+    );
+};