feat: disable dark mode for text inputs

feat: decrease calendar size
feat: load players in session
2025-05-21 15:08:36 +02:00 · 2025-05-21 15:04:06 +02:00 · 2025-05-21 14:55:13 +02:00 · 2025-05-21 14:37:07 +02:00 · 2025-05-21 14:36:51 +02:00 · 2025-05-21 14:26:35 +02:00
14 changed files with 761 additions and 182 deletions
--- a/cutt/analysis.py
+++ b/cutt/analysis.py
@@ -8,7 +8,15 @@ from fastapi.responses import JSONResponse
 from pydantic import BaseModel, Field
 from sqlmodel import Session, func, select
 from sqlmodel.sql.expression import SelectOfScalar
-from cutt.db import Chemistry, MVPRanking, Player, PlayerTeamLink, Team, engine
+from cutt.db import (
+    Chemistry,
+    MVPRanking,
+    Player,
+    PlayerTeamLink,
+    PlayerType,
+    Team,
+    engine,
+)
 import networkx as nx
 import numpy as np
 import matplotlib
@@ -25,6 +33,7 @@ analysis_router = APIRouter(prefix="/analysis", tags=["analysis"])

 C = Chemistry
 R = MVPRanking
+PT = PlayerType
 P = Player


@@ -146,6 +155,8 @@ def graph_json(
        for c in session.exec(statement2):
            user = player_map[c.user]
            for i, p_id in enumerate(c.love):
+                if p_id not in player_map:
+                    continue
                p = player_map[p_id]
                edges.append(
                    {
@@ -161,6 +172,8 @@ def graph_json(
                    }
                )
            for p_id in c.hate:
+                if p_id not in player_map:
+                    continue
                p = player_map[p_id]
                edges.append(
                    {
@@ -293,6 +306,39 @@ async def render_sociogram(params: Params):
    return {"image": encoded_image}


+translate_tablename = {
+    R.__tablename__: "🏆",
+    C.__tablename__: "🧪",
+    PT.__tablename__: "🃏",
+}
+
+
+def last_submissions(
+    request: Annotated[TeamScopedRequest, Security(verify_team_scope)],
+):
+    times = {}
+    with Session(engine) as session:
+        for survey in [C, PT, R]:
+            subquery = (
+                select(survey.user, func.max(survey.time).label("latest"))
+                .where(survey.team == request.team_id)
+                .group_by(survey.user)
+                .subquery()
+            )
+            statement2 = select(survey).join(
+                subquery,
+                (survey.user == subquery.c.user) & (survey.time == subquery.c.latest),
+            )
+            for r in session.exec(statement2):
+                if r.time.date() not in times:
+                    times[r.time.date()] = {}
+                times[r.time.date()][r.user] = (
+                    times[r.time.date()].get(r.user, "")
+                    + translate_tablename[survey.__tablename__]
+                )
+        return times
+
+
 def mvp(
    request: Annotated[TeamScopedRequest, Security(verify_team_scope)],
 ):
@@ -335,6 +381,8 @@ def mvp(
        )
        for r in session.exec(statement2):
            for i, p_id in enumerate(r.mvps):
+                if p_id not in player_map:
+                    continue
                p = player_map[p_id]
                ranks[p] = ranks.get(p, []) + [i + 1]

@@ -424,6 +472,9 @@ analysis_router.add_api_route(
    description="Request Most Valuable Players stats",
 )
 analysis_router.add_api_route("/turnout/{team_id}", endpoint=turnout, methods=["GET"])
+analysis_router.add_api_route(
+    "/times/{team_id}", endpoint=last_submissions, methods=["GET"]
+)

 if __name__ == "__main__":
    with Session(engine) as session:
--- a/cutt/db.py
+++ b/cutt/db.py
@@ -1,6 +1,7 @@
 from datetime import datetime, timezone
 from sqlmodel import (
    ARRAY,
+    CHAR,
    Column,
    Integer,
    Relationship,
@@ -48,6 +49,7 @@ class Player(SQLModel, table=True):
    display_name: str
    email: str | None = None
    full_name: str | None = None
+    gender: str | None = Field(default=None, sa_column=Column(CHAR(3)))
    disabled: bool | None = None
    hashed_password: str | None = None
    number: str | None = None
@@ -67,6 +69,16 @@ class Chemistry(SQLModel, table=True):
    team: int = Field(default=None, foreign_key="team.id")


+class PlayerType(SQLModel, table=True):
+    id: int | None = Field(default=None, primary_key=True)
+    time: datetime | None = Field(default_factory=utctime)
+    user: int = Field(default=None, foreign_key="player.id")
+    handlers: list[int] = Field(sa_column=Column(ARRAY(Integer)))
+    combis: list[int] = Field(sa_column=Column(ARRAY(Integer)))
+    cutters: list[int] = Field(sa_column=Column(ARRAY(Integer)))
+    team: int = Field(default=None, foreign_key="team.id")
+
+
 class MVPRanking(SQLModel, table=True):
    id: int | None = Field(default=None, primary_key=True)
    time: datetime | None = Field(default_factory=utctime)
--- a/cutt/demo.py
+++ b/cutt/demo.py
@@ -2,16 +2,16 @@ import random
 from cutt.db import Player

 names = [
-    "August",
-    "Beate",
-    "Ceasar",
-    "Daedalus",
-    "Elli",
-    "Ford P.",
-    "Gabriel",
-    "Hugo",
-    "Ivar Johansson",
-    "Jürgen Gordon Malinauskas",
+    ("August", "mmp"),
+    ("Beate", "fmp"),
+    ("Ceasar", "mmp"),
+    ("Daedalus", "mmp"),
+    ("Elli", "fmp"),
+    ("Ford P.", ""),
+    ("Gabriel", "mmp"),
+    ("Hugo", "mmp"),
+    ("Ivar Johansson", "mmp"),
+    ("Jürgen Gordon Malinauskas", "mmp"),
 ]
 demo_players = [
    Player.model_validate(
@@ -19,9 +19,10 @@ demo_players = [
            "id": i,
            "display_name": name,
            "username": name.lower().replace(" ", "").replace(".", ""),
+            "gender": gender,
            "number": str(random.randint(0, 100)),
            "email": name.lower().replace(" ", "").replace(".", "") + "@example.org",
        }
    )
-    for i, name in enumerate(names)
+    for i, (name, gender) in enumerate(names)
 ]
--- a/cutt/main.py
+++ b/cutt/main.py
@@ -2,7 +2,7 @@ from typing import Annotated
 from fastapi import APIRouter, Depends, FastAPI, HTTPException, Security, status
 from fastapi.responses import FileResponse, JSONResponse
 from fastapi.staticfiles import StaticFiles
-from cutt.db import Player, Team, Chemistry, MVPRanking, engine
+from cutt.db import Player, PlayerType, Team, Chemistry, MVPRanking, engine
 from sqlmodel import (
    Session,
    func,
@@ -20,6 +20,7 @@ from cutt.security import (
 from cutt.player import player_router

 C = Chemistry
+PT = PlayerType
 R = MVPRanking
 P = Player

@@ -114,7 +115,7 @@ def get_mvps(
            return mvps
        else:
            raise HTTPException(
-                status_code=status.HTTP_404_NOT_FOUND,
+                status_code=status.HTTP_400_BAD_REQUEST,
                detail="no previous state was found",
            )

@@ -158,11 +159,61 @@ def get_chemistry(
            subquery, (C.user == subquery.c.user) & (C.time == subquery.c.latest)
        )
        chemistry = session.exec(statement2).one_or_none()
-        if chemistry:
+        if chemistry is not None:
            return chemistry
        else:
            raise HTTPException(
-                status_code=status.HTTP_404_NOT_FOUND,
+                status_code=status.HTTP_400_BAD_REQUEST,
+                detail="no previous state was found",
+            )
+
+
+@api_router.put("/playertype", tags=["analysis"])
+def submit_playertype(
+    playertype: PlayerType, user: Annotated[Player, Depends(get_current_active_user)]
+):
+    if playertype.team == 42:
+        return JSONResponse("DEMO team, nothing happens")
+    if user.id == playertype.user:
+        with Session(engine) as session:
+            statement = select(Team).where(Team.id == playertype.team)
+            players = [t.players for t in session.exec(statement)][0]
+            if players:
+                player_ids = {p.id for p in players}
+                if player_ids >= (
+                    set(playertype.handlers)
+                    | set(playertype.combis)
+                    | set(playertype.cutters)
+                ):
+                    session.add(playertype)
+                    session.commit()
+                    return JSONResponse("success!")
+        raise somethings_fishy
+    else:
+        raise wrong_user_id_exception
+
+
+@api_router.get("/playertype/{team_id}", tags=["analysis"])
+def get_playertype(
+    team_id: int, user: Annotated[Player, Depends(get_current_active_user)]
+):
+    with Session(engine) as session:
+        subquery = (
+            select(PT.user, func.max(PT.time).label("latest"))
+            .where(PT.user == user.id)
+            .where(PT.team == team_id)
+            .group_by(PT.user)
+            .subquery()
+        )
+        statement2 = select(PT).join(
+            subquery, (PT.user == subquery.c.user) & (PT.time == subquery.c.latest)
+        )
+        playertype = session.exec(statement2).one_or_none()
+        if playertype is not None:
+            return playertype
+        else:
+            raise HTTPException(
+                status_code=status.HTTP_400_BAD_REQUEST,
                detail="no previous state was found",
            )

--- a/cutt/player.py
+++ b/cutt/player.py
@@ -22,8 +22,9 @@ player_router = APIRouter(prefix="/player", tags=["player"])
 class PlayerRequest(BaseModel):
    display_name: str
    username: str
+    gender: str | None
    number: str
-    email: str
+    email: str | None


 class AddPlayerRequest(PlayerRequest): ...
@@ -61,6 +62,7 @@ def add_player(
        new_player = Player(
            username=r.username,
            display_name=r.display_name,
+            gender=r.gender if r.gender else None,
            email=r.email if r.email else None,
            number=r.number,
            disabled=False,
@@ -89,9 +91,11 @@ def modify_player(
            .where(Team.id == request.team_id, P.id == r.id, P.username == r.username)
        ).one_or_none()
        if player:
+            print(r)
            player.display_name = r.display_name.strip()
            player.number = r.number.strip()
-            player.email = r.email.strip()
+            player.gender = r.gender.strip() if r.gender else None
+            player.email = r.email.strip() if r.email else None
            session.add(player)
            session.commit()
            return PlainTextResponse("modification successful")
@@ -162,7 +166,7 @@ async def list_players(
    if team_id == 42:
        return [
            user.model_dump(
-                include={"id", "display_name", "username", "number", "email"}
+                include={"id", "display_name", "gender", "username", "number", "email"}
            )
        ] + demo_players

@@ -188,7 +192,14 @@ async def list_players(
        if players:
            return [
                player.model_dump(
-                    include={"id", "display_name", "username", "number", "email"}
+                    include={
+                        "id",
+                        "display_name",
+                        "username",
+                        "gender",
+                        "number",
+                        "email",
+                    }
                )
                for player in players
                if not player.disabled
--- a/src/App.css
+++ b/src/App.css
@@ -29,7 +29,6 @@ dialog {
  border-radius: 1em;
 }

-
 /*=========Network Controls=========*/

 .infobutton {
@@ -61,7 +60,7 @@ dialog {
    flex-wrap: wrap;
    max-width: 240px;
    margin: 0px;
-    background-color: #F0F8FFdd;
+    background-color: #f0f8ffdd;

    .slider,
    span {
@@ -103,8 +102,8 @@ dialog {
  bottom: 0;
  background-color: #ccc;
  border-radius: 34px;
-  -webkit-transition: .4s;
-  transition: .4s;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
 }

 .slider:before {
@@ -116,19 +115,19 @@ dialog {
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
-  -webkit-transition: .4s;
-  transition: .4s;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
 }

-input:checked+.slider {
-  background-color: #2196F3;
+input:checked + .slider {
+  background-color: #2196f3;
 }

-input:focus+.slider {
-  box-shadow: 0 0 1px #2196F3;
+input:focus + .slider {
+  box-shadow: 0 0 1px #2196f3;
 }

-input:checked+.slider:before {
+input:checked + .slider:before {
  -webkit-transform: translateX(24px);
  -ms-transform: translateX(24px);
  transform: translateX(24px);
@@ -138,8 +137,6 @@ input:checked+.slider:before {
  opacity: 66%;
 }

-
-
 .hint {
  position: absolute;
  font-size: 80%;
@@ -151,11 +148,14 @@ input:checked+.slider:before {
  z-index: -1;
 }

-input {
+input,
+select {
  padding: 0.2em 16px;
  margin-top: 0.25em;
  margin-bottom: 0.25em;
  border-radius: 1em;
+  color: black;
+  background-color: white;
 }

 h1,
@@ -180,7 +180,6 @@ h3 {
  flex-direction: column;
 }

-
 .container {
  display: flex;
  flex-wrap: nowrap;
@@ -201,6 +200,9 @@ h3 {
  border-style: solid;
  border-radius: 16px;

+  h4 {
+    margin: 4px;
+  }
  &.one {
    max-width: min(96%, 768px);
    margin: 4px auto;
@@ -211,6 +213,7 @@ h3 {
 }

 .reservoir {
+  display: flex;
  flex-direction: unset;
  flex-wrap: wrap;
  justify-content: space-around;
@@ -281,10 +284,8 @@ button {
    font-size: 80%;
    margin: 0px;
  }
-
 }

-
@media only screen and (max-width: 768px) {
  #control-panel {
    grid-template-columns: 1fr;
@@ -308,7 +309,6 @@ button {
    font-size: xx-large;
    margin-bottom: 16px;
    margin-right: 16px;
-
  }

  .wavering {
@@ -317,11 +317,13 @@ button {
 }

 ::backdrop {
-  background-image: linear-gradient(45deg,
-      magenta,
-      rebeccapurple,
-      dodgerblue,
-      green);
+  background-image: linear-gradient(
+    45deg,
+    magenta,
+    rebeccapurple,
+    dodgerblue,
+    green
+  );
  opacity: 0.75;
 }

@@ -488,7 +490,9 @@ button {

  input {
    max-width: 300px;
-    margin: 0.2em auto;
+  }
+  select {
+    max-width: 335px;
  }
 }

@@ -496,7 +500,7 @@ button {
  color: black;
  background-color: #36c4;
  border: 1px solid black;
-  border-radius: 1.4em;
+  border-radius: 1.5em;
  margin: 4px;
  padding: 0.2em 0.5em;

@@ -511,6 +515,12 @@ button {
  &.disable-player {
    background-color: #e338;
  }
+  &.mmp {
+    background-color: lightskyblue;
+  }
+  &.fmp {
+    background-color: salmon;
+  }
 }

 .new-player-inputs {
@@ -533,21 +543,19 @@ button {
      margin: auto 1em;
    }

-    input {
+    input,
+    select {
      width: 90%;
      margin: 4px 0;
    }
  }
 }

-
@keyframes blink {
-
  0% {
    background-color: #8888;
  }

-
  13% {
    background-color: #8888;
  }
@@ -560,7 +568,6 @@ button {
    background-color: #8888;
  }

-
  38% {
    background-color: #8888;
  }
@@ -638,3 +645,87 @@ button {
    transform: translateX(0%);
  }
 }
+
+.calendar-container {
+  position: relative;
+  margin: 20px auto;
+  font-size: small;
+}
+
+.month-navigation {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px;
+  border-top: 2px solid grey;
+  border-bottom: 2px solid grey;
+}
+
+.month-navigation button {
+  cursor: pointer;
+  padding: 4px 8px;
+  border: none;
+  color: black;
+  background-color: transparent;
+}
+
+.month-navigation span {
+  font-weight: bold;
+}
+
+.calendar {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 8px;
+}
+
+.day {
+  padding: 2px;
+  border: 1px solid grey;
+  cursor: pointer;
+  display: flex;
+}
+
+.selected-day {
+  border: 4px solid grey;
+}
+
+.weekday {
+  border-bottom: 3px solid black;
+  margin: 0 1em;
+}
+
+.day-circle {
+  text-align: center;
+  border-radius: 1.5em;
+  width: 1.5em;
+  height: 1.5em;
+  padding: 0;
+  margin: auto;
+  border: 2px solid transparent;
+}
+
+.today {
+  border-radius: 1.6em;
+  border: 4px solid red;
+  text-align: center;
+}
+
+.has-event {
+  border-radius: 1.5em;
+  background-color: lightskyblue;
+}
+
+.active-player {
+  border-radius: 1.5em;
+  border: 4px solid rebeccapurple;
+}
+
+.events {
+  padding: 20px;
+  ul > li {
+    padding: 0;
+    margin: 0;
+    list-style-type: none;
+  }
+}
--- a/src/Avatar.tsx
+++ b/src/Avatar.tsx
@@ -22,6 +22,10 @@ const UserInfo = (user: User, teams: TeamState | undefined) => {
        <b>display name: </b>
      </div>
      <div>{user?.display_name}</div>
+      <div>
+        <b>gender: </b>
+      </div>
+      <div>{user?.gender?.toUpperCase() || "-"}</div>
      <div>
        <b>number: </b>
      </div>
--- a/src/Calendar.tsx
+++ b/src/Calendar.tsx
@@ -0,0 +1,174 @@
+import { useEffect, useState } from "react";
+import { apiAuth } from "./api";
+import { useSession } from "./Session";
+
+interface Datum {
+  [id: number]: string;
+}
+interface Events {
+  [key: string]: Datum;
+}
+
+const Calendar = ({ playerId }: { playerId: number }) => {
+  const [selectedDate, setSelectedDate] = useState(new Date());
+  const [events, setEvents] = useState<Events>();
+  const { teams, players } = useSession();
+
+  async function loadSubmissionDates() {
+    if (teams?.activeTeam) {
+      const data = await apiAuth(`analysis/times/${teams?.activeTeam}`, null);
+      if (data.detail) {
+        console.log(data.detail);
+      } else {
+        setEvents(data as Events);
+      }
+    }
+  }
+
+  useEffect(() => {
+    loadSubmissionDates();
+  }, [players]);
+
+  const getEventsForDay = (date: Date) => {
+    return events && events[date.toISOString().split("T")[0]];
+  };
+
+  // Handle day click
+  const handleDayClick = (date: Date) => {
+    setSelectedDate(date);
+  };
+
+  // Navigate to previous month
+  const handlePrevMonth = () => {
+    const date = new Date(selectedDate);
+    date.setMonth(date.getMonth() - 1);
+    setSelectedDate(date);
+  };
+
+  // Navigate to next month
+  const handleNextMonth = () => {
+    const date = new Date(selectedDate);
+    date.setMonth(date.getMonth() + 1);
+    setSelectedDate(date);
+  };
+
+  // Render month navigation
+  const renderMonthNavigation = () => {
+    return (
+      <div className="month-navigation">
+        <button onClick={handlePrevMonth}>&lt;</button>
+        <span>
+          <button onClick={() => setSelectedDate(new Date())}>📅</button>
+          {selectedDate.toLocaleString("default", {
+            month: "long",
+            year: "numeric",
+          })}
+        </span>
+        <button onClick={handleNextMonth}>&gt;</button>
+      </div>
+    );
+  };
+
+  // Render the calendar
+  const renderCalendar = () => {
+    const firstDayOfMonth = new Date(
+      selectedDate.getFullYear(),
+      selectedDate.getMonth(),
+      0
+    ).getDay();
+    const lastDateOfMonth = new Date(
+      selectedDate.getFullYear(),
+      selectedDate.getMonth() + 1,
+      0
+    ).getDate();
+
+    let days: JSX.Element[] = [];
+    let day = 1;
+
+    for (let i = 0; i < 7; i++) {
+      const date = new Date(0);
+      date.setDate(i + 5);
+      days.push(
+        <div key={"weekday_" + i} className="weekday">
+          {date.toLocaleString("default", {
+            weekday: "narrow",
+          })}
+        </div>
+      );
+    }
+
+    // Add empty cells for the first week
+    for (let i = 0; i < firstDayOfMonth; i++) {
+      days.push(<div key={"prev" + i} className="empty"></div>);
+    }
+
+    // Render each day of the month
+    while (day <= lastDateOfMonth) {
+      const date = new Date(selectedDate);
+      date.setDate(day);
+      const todaysEvents = getEventsForDay(date);
+
+      days.push(
+        <div
+          key={date.getDate()}
+          className={
+            "day" +
+            (date.toDateString() === selectedDate.toDateString()
+              ? " selected-day"
+              : "")
+          }
+          onClick={() => handleDayClick(date)}
+        >
+          <div
+            className={
+              "day-circle" +
+              (date.toDateString() === new Date().toDateString()
+                ? " today"
+                : "") +
+              (todaysEvents ? " has-event" : "") +
+              (todaysEvents && playerId in todaysEvents ? " active-player" : "")
+            }
+          >
+            {day}
+          </div>
+        </div>
+      );
+      day++;
+    }
+
+    return <div className="calendar">{days}</div>;
+  };
+
+  // Render events for the selected day
+  const renderEvents = () => {
+    const eventsForDay = getEventsForDay(selectedDate);
+    return (
+      <div className="events">
+        {eventsForDay && (
+          <ul>
+            {Object.entries(eventsForDay).map(([id, sub]) => {
+              const name = players?.filter((p) => p.id === Number(id));
+              return (
+                <li key={id}>
+                  {name ? name[0].display_name : ""}:{" "}
+                  <span style={{ letterSpacing: 8 }}>{sub}</span>
+                </li>
+              );
+            })}
+          </ul>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <div className="calendar-container">
+      <h2>Latest Submissions</h2>
+      {renderMonthNavigation()}
+      {renderCalendar()}
+      {renderEvents()}
+    </div>
+  );
+};
+
+export default Calendar;
--- a/src/Footer.tsx
+++ b/src/Footer.tsx
@@ -15,7 +15,7 @@ export default function Footer() {
          </Link>
          <span>|</span>
          <Link to="/network">
-            <span>Trainer Analysis</span>
+            <span>Sociogram</span>
          </Link>
          <span>|</span>
          <Link to="/mvp">
--- a/src/Rankings.tsx
+++ b/src/Rankings.tsx
@@ -1,15 +1,8 @@
-import {
-  ButtonHTMLAttributes,
-  Fragment,
-  ReactNode,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
+import { ButtonHTMLAttributes, useEffect, useRef, useState } from "react";
 import { ReactSortable, ReactSortableProps } from "react-sortablejs";
-import { apiAuth, loadPlayers, User } from "./api";
+import { apiAuth, User } from "./api";
 import { TeamState, useSession } from "./Session";
-import { Chemistry, MVPRanking } from "./types";
+import { Chemistry, MVPRanking, PlayerType } from "./types";
 import TabController from "./TabController";

 type PlayerListProps = Partial<ReactSortableProps<any>> & {
@@ -18,7 +11,12 @@ type PlayerListProps = Partial<ReactSortableProps<any>> & {

 function PlayerList(props: PlayerListProps) {
  return (
-    <ReactSortable {...props} animation={200} swapThreshold={0.4}>
+    <ReactSortable
+      {...props}
+      animation={200}
+      swapThreshold={0.2}
+      style={{ minHeight: props.list && props.list?.length < 1 ? 64 : 32 }}
+    >
      {props.list?.map((item, index) => (
        <div key={item.id} className="item">
          {props.orderedList
@@ -65,15 +63,11 @@ function ChemistryDnD({ user, teams, players }: PlayerInfoProps) {
  const [playersLeft, setPlayersLeft] = useState<User[]>([]);
  const [playersMiddle, setPlayersMiddle] = useState<User[]>(otherPlayers);
  const [playersRight, setPlayersRight] = useState<User[]>([]);
+  const [loading, setLoading] = useState(false);

  useEffect(() => {
-    setPlayersMiddle(otherPlayers);
+    handleGet();
  }, [players]);
-  useEffect(() => {
-    setPlayersLeft([]);
-    setPlayersMiddle(otherPlayers);
-    setPlayersRight([]);
-  }, [teams]);

  const [dialog, setDialog] = useState("dialog");
  const dialogRef = useRef<HTMLDialogElement>(null);
@@ -96,9 +90,14 @@ function ChemistryDnD({ user, teams, players }: PlayerInfoProps) {
  }

  async function handleGet() {
+    setLoading(true);
    const data = await apiAuth(`chemistry/${teams.activeTeam}`, null, "GET");
-    if (data.detail) alert(data.detail);
-    else {
+    if (data.detail) {
+      console.log(data.detail);
+      setPlayersRight([]);
+      setPlayersMiddle(otherPlayers);
+      setPlayersLeft([]);
+    } else {
      const chemistry = data as Chemistry;
      setPlayersLeft(filterSort(otherPlayers, chemistry.hate));
      setPlayersMiddle(
@@ -110,6 +109,7 @@ function ChemistryDnD({ user, teams, players }: PlayerInfoProps) {
      );
      setPlayersRight(filterSort(otherPlayers, chemistry.love));
    }
+    setLoading(false);
  }

  return (
@@ -122,46 +122,50 @@ function ChemistryDnD({ user, teams, players }: PlayerInfoProps) {
          setPlayersLeft([]);
        }}
      />
-      <div className="container">
-        <div className="box three">
-          <h2>😬</h2>
-          {playersLeft.length < 1 && (
-            <span className="grey hint">
-              drag people here that you'd rather not play with
-            </span>
-          )}
-          <PlayerList
-            list={playersLeft}
-            setList={setPlayersLeft}
-            group={"shared"}
-            className="dragbox"
-          />
+      {loading ? (
+        <span className="loader" style={{ width: 300 }} />
+      ) : (
+        <div className="container">
+          <div className="box three">
+            <h2>😬</h2>
+            {playersLeft.length < 1 && (
+              <span className="grey hint">
+                drag people here that you'd rather not play with
+              </span>
+            )}
+            <PlayerList
+              list={playersLeft}
+              setList={setPlayersLeft}
+              group={"shared"}
+              className="dragbox"
+            />
+          </div>
+          <div className="box three">
+            <h2>🤷</h2>
+            <PlayerList
+              list={playersMiddle}
+              setList={setPlayersMiddle}
+              group={"shared"}
+              className="middle dragbox"
+            />
+          </div>
+          <div className="box three">
+            <h2>😍</h2>
+            {playersRight.length < 1 && (
+              <span className="grey hint">
+                drag people here that you love playing with from best to ... ok
+              </span>
+            )}
+            <PlayerList
+              list={playersRight}
+              setList={setPlayersRight}
+              group={"shared"}
+              className="dragbox"
+              orderedList
+            />
+          </div>
        </div>
-        <div className="box three">
-          <h2>🤷</h2>
-          <PlayerList
-            list={playersMiddle}
-            setList={setPlayersMiddle}
-            group={"shared"}
-            className="middle dragbox"
-          />
-        </div>
-        <div className="box three">
-          <h2>😍</h2>
-          {playersRight.length < 1 && (
-            <span className="grey hint">
-              drag people here that you love playing with from best to ... ok
-            </span>
-          )}
-          <PlayerList
-            list={playersRight}
-            setList={setPlayersRight}
-            group={"shared"}
-            className="dragbox"
-            orderedList
-          />
-        </div>
-      </div>
+      )}

      <button className="submit wavering" onClick={() => handleSubmit()}>
        💾 <span className="submit_text">submit</span>
@@ -179,19 +183,153 @@ function ChemistryDnD({ user, teams, players }: PlayerInfoProps) {
  );
 }

+function TypeDnD({ user, teams, players }: PlayerInfoProps) {
+  const [availablePlayers, setAvailablePlayers] = useState<User[]>(players);
+  const [handlers, setHandlers] = useState<User[]>([]);
+  const [combis, setCombis] = useState<User[]>([]);
+  const [cutters, setCutters] = useState<User[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    handleGet();
+  }, [players]);
+
+  const [dialog, setDialog] = useState("dialog");
+  const dialogRef = useRef<HTMLDialogElement>(null);
+
+  async function handleSubmit() {
+    if (dialogRef.current) dialogRef.current.showModal();
+    setDialog("sending...");
+    let handlerlist = handlers.map(({ id }) => id);
+    let combilist = combis.map(({ id }) => id);
+    let cutterlist = cutters.map(({ id }) => id);
+    const data = {
+      user: user.id,
+      handlers: handlerlist,
+      combis: combilist,
+      cutters: cutterlist,
+      team: teams.activeTeam,
+    };
+    const response = await apiAuth("playertype", data, "PUT");
+    setDialog(response || "try sending again");
+  }
+
+  async function handleGet() {
+    setLoading(true);
+    const data = await apiAuth(`playertype/${teams.activeTeam}`, null, "GET");
+    if (data.detail) {
+      console.log(data.detail);
+      setAvailablePlayers(players);
+      setHandlers([]);
+      setCombis([]);
+      setCutters([]);
+    } else {
+      const playertype = data as PlayerType;
+      setAvailablePlayers(
+        players.filter(
+          (player) =>
+            !playertype.handlers.includes(player.id) &&
+            !playertype.combis.includes(player.id) &&
+            !playertype.cutters.includes(player.id)
+        )
+      );
+      setHandlers(filterSort(players, playertype.handlers));
+      setCombis(filterSort(players, playertype.combis));
+      setCutters(filterSort(players, playertype.cutters));
+    }
+    setLoading(false);
+  }
+
+  return (
+    <>
+      <HeaderControl
+        onLoad={handleGet}
+        onClear={() => {
+          setAvailablePlayers(players);
+          setHandlers([]);
+          setCombis([]);
+          setCutters([]);
+        }}
+      />
+      <div className="container">
+        <div className="box one">
+          <PlayerList
+            list={availablePlayers}
+            setList={setAvailablePlayers}
+            group={"type-shared"}
+            className="dragbox reservoir"
+          />
+        </div>
+      </div>
+      <div className="container">
+        <div className="box three">
+          <h4>handler</h4>
+          {handlers.length < 1 && (
+            <span className="grey hint">
+              drag people here that you like to see as handlers
+            </span>
+          )}
+          <PlayerList
+            list={handlers}
+            setList={setHandlers}
+            group={"type-shared"}
+            className="dragbox"
+          />
+        </div>
+        <div className="box three">
+          <h4>combi</h4>
+          {combis.length < 1 && (
+            <span className="grey hint">
+              drag people here that switch between handling and cutting
+            </span>
+          )}
+          <PlayerList
+            list={combis}
+            setList={setCombis}
+            group={"type-shared"}
+            className="middle dragbox"
+          />
+        </div>
+        <div className="box three">
+          <h4>cutter</h4>
+          {cutters.length < 1 && (
+            <span className="grey hint">
+              drag people here that you think are the best cutters
+            </span>
+          )}
+          <PlayerList
+            list={cutters}
+            setList={setCutters}
+            group={"type-shared"}
+            className="dragbox"
+          />
+        </div>
+      </div>
+      <button className="submit wavering" onClick={() => handleSubmit()}>
+        💾 <span className="submit_text">submit</span>
+      </button>
+      <dialog
+        ref={dialogRef}
+        id="PlayerTypeDialog"
+        onClick={(event) => {
+          event.currentTarget.close();
+        }}
+      >
+        {dialog}
+      </dialog>
+    </>
+  );
+}
+
 function MVPDnD({ user, teams, players }: PlayerInfoProps) {
  const [availablePlayers, setAvailablePlayers] = useState<User[]>(players);
  const [rankedPlayers, setRankedPlayers] = useState<User[]>([]);
+  const [loading, setLoading] = useState(false);

  useEffect(() => {
-    setAvailablePlayers(players);
+    handleGet();
  }, [players]);

-  useEffect(() => {
-    setAvailablePlayers(players);
-    setRankedPlayers([]);
-  }, [teams]);
-
  const [dialog, setDialog] = useState("dialog");
  const dialogRef = useRef<HTMLDialogElement>(null);

@@ -205,15 +343,20 @@ function MVPDnD({ user, teams, players }: PlayerInfoProps) {
  }

  async function handleGet() {
+    setLoading(true);
    const data = await apiAuth(`mvps/${teams.activeTeam}`, null, "GET");
-    if (data.detail) alert(data.detail);
-    else {
+    if (data.detail) {
+      console.log(data.detail);
+      setAvailablePlayers(players);
+      setRankedPlayers([]);
+    } else {
      const mvps = data as MVPRanking;
      setRankedPlayers(filterSort(players, mvps.mvps));
      setAvailablePlayers(
        players.filter((user) => !mvps.mvps.includes(user.id))
      );
    }
+    setLoading(false);
  }

  return (
@@ -225,46 +368,50 @@ function MVPDnD({ user, teams, players }: PlayerInfoProps) {
          setRankedPlayers([]);
        }}
      />
-      <div className="container">
-        <div className="box two">
-          <h2>🥏🏃</h2>
-          {availablePlayers.length < 1 && (
-            <span className="grey hint">all sorted 👍</span>
-          )}
-          <PlayerList
-            list={availablePlayers}
-            setList={setAvailablePlayers}
-            group={{
-              name: "mvp-shared",
-              pull: function (to) {
-                return to.el.classList.contains("putclone") ? "clone" : true;
-              },
-            }}
-            className="dragbox"
-          />
+      {loading ? (
+        <span className="loader" style={{ width: 300 }} />
+      ) : (
+        <div className="container">
+          <div className="box two">
+            <h2>🥏🏃</h2>
+            {availablePlayers.length < 1 && (
+              <span className="grey hint">all sorted 👍</span>
+            )}
+            <PlayerList
+              list={availablePlayers}
+              setList={setAvailablePlayers}
+              group={{
+                name: "mvp-shared",
+                pull: function (to) {
+                  return to.el.classList.contains("putclone") ? "clone" : true;
+                },
+              }}
+              className="dragbox"
+            />
+          </div>
+          <div className="box two">
+            <h1>🏆</h1>
+            {rankedPlayers.length < 1 && (
+              <span className="grey hint">
+                carefully place as many of the <i>Most Valuable Players</i>{" "}
+                (according to your humble opinion) in this box
+              </span>
+            )}
+            <PlayerList
+              list={rankedPlayers}
+              setList={setRankedPlayers}
+              group={{
+                name: "mvp-shared",
+                pull: function (to) {
+                  return to.el.classList.contains("putclone") ? "clone" : true;
+                },
+              }}
+              className="dragbox"
+              orderedList
+            />
+          </div>
        </div>
-        <div className="box two">
-          <h1>🏆</h1>
-          {rankedPlayers.length < 1 && (
-            <span className="grey hint">
-              carefully place as many of the <i>Most Valuable Players</i>{" "}
-              (according to your humble opinion) in this box
-            </span>
-          )}
-          <PlayerList
-            list={rankedPlayers}
-            setList={setRankedPlayers}
-            group={{
-              name: "mvp-shared",
-              pull: function (to) {
-                return to.el.classList.contains("putclone") ? "clone" : true;
-              },
-            }}
-            className="dragbox"
-            orderedList
-          />
-        </div>
-      </div>
+      )}

      <button className="submit wavering" onClick={() => handleSubmit()}>
        💾 <span className="submit_text">submit</span>
@@ -290,8 +437,8 @@ function HeaderControl({ onLoad, onClear }: HeaderControlProps) {
  return (
    <>
      <div>
-        <LoadButton onClick={onLoad} />
        <ClearButton onClick={onClear} />
+        <LoadButton onClick={onLoad} />
      </div>
      <div>
        <span className="grey">
@@ -304,17 +451,11 @@ function HeaderControl({ onLoad, onClear }: HeaderControlProps) {
 }

 export default function Rankings() {
-  const { user, teams } = useSession();
-  const [players, setPlayers] = useState<User[] | null>(null);
-
-  useEffect(() => {
-    if (teams) {
-      loadPlayers(teams.activeTeam).then((data) => setPlayers(data));
-    }
-  }, [user, teams]);
+  const { user, teams, players } = useSession();

  const tabs = [
    { id: "Chemistry", label: "🧪 Chemistry" },
+    { id: "Type", label: "🃏 Type" },
    { id: "MVP", label: "🏆 MVP" },
  ];

@@ -323,6 +464,7 @@ export default function Rankings() {
      {user && teams && players ? (
        <TabController tabs={tabs}>
          <ChemistryDnD {...{ user, teams, players }} />
+          <TypeDnD {...{ user, teams, players }} />
          <MVPDnD {...{ user, teams, players }} />
        </TabController>
      ) : (
--- a/src/Session.tsx
+++ b/src/Session.tsx
@@ -5,7 +5,7 @@ import {
  useEffect,
  useState,
 } from "react";
-import { apiAuth, currentUser, logout, User } from "./api";
+import { apiAuth, currentUser, loadPlayers, logout, User } from "./api";
 import { Login } from "./Login";
 import Header from "./Header";
 import { Team } from "./types";
@@ -23,6 +23,8 @@ export interface Session {
  user: User | null;
  teams: TeamState | null;
  setTeams: (teams: TeamState) => void;
+  players: User[] | null;
+  reloadPlayers: () => void;
  onLogout: () => void;
 }

@@ -30,6 +32,8 @@ const sessionContext = createContext<Session>({
  user: null,
  teams: null,
  setTeams: () => {},
+  players: null,
+  reloadPlayers: () => {},
  onLogout: () => {},
 });

@@ -38,6 +42,7 @@ export function SessionProvider(props: SessionProviderProps) {

  const [user, setUser] = useState<User | null>(null);
  const [teams, setTeams] = useState<TeamState | null>(null);
+  const [players, setPlayers] = useState<User[] | null>(null);
  const [err, setErr] = useState<unknown>(null);
  const [loading, setLoading] = useState(false);

@@ -60,12 +65,19 @@ export function SessionProvider(props: SessionProviderProps) {
    if (teams) setTeams({ teams: teams, activeTeam: teams[0].id });
  }

+  async function reloadPlayers() {
+    teams && loadPlayers(teams?.activeTeam).then((data) => setPlayers(data));
+  }
+
  useEffect(() => {
    loadUser();
  }, []);
  useEffect(() => {
    loadTeam();
  }, [user]);
+  useEffect(() => {
+    reloadPlayers();
+  }, [teams]);

  function onLogin(user: User) {
    setUser(user);
@@ -96,7 +108,9 @@ export function SessionProvider(props: SessionProviderProps) {
    content = <Login onLogin={onLogin} />;
  } else
    content = (
-      <sessionContext.Provider value={{ user, teams, setTeams, onLogout }}>
+      <sessionContext.Provider
+        value={{ user, teams, setTeams, players, reloadPlayers, onLogout }}
+      >
        {children}
      </sessionContext.Provider>
    );
--- a/src/TeamPanel.tsx
+++ b/src/TeamPanel.tsx
@@ -1,11 +1,12 @@
 import { FormEvent, useEffect, useState } from "react";
-import { apiAuth, loadPlayers, User } from "./api";
+import { apiAuth, Gender, User } from "./api";
 import { useSession } from "./Session";
 import { ErrorState } from "./types";
 import { useNavigate } from "react-router";
+import Calendar from "./Calendar";

 const TeamPanel = () => {
-  const { user, teams } = useSession();
+  const { user, teams, players, reloadPlayers } = useSession();
  const navigate = useNavigate();
  useEffect(() => {
    user?.scopes.includes(`team:${teams?.activeTeam}`) ||
@@ -16,20 +17,13 @@ const TeamPanel = () => {
    id: 0,
    username: "",
    display_name: "",
+    gender: undefined,
    number: "",
    email: "",
  } as User;
  const [error, setError] = useState<ErrorState>();
-  const [players, setPlayers] = useState<User[] | null>(null);
  const [player, setPlayer] = useState(newPlayerTemplate);

-  useEffect(() => {
-    if (teams) {
-      setError({ ok: true, message: "" });
-      loadPlayers(teams.activeTeam).then((data) => setPlayers(data));
-    }
-  }, [teams]);
-
  async function handleSubmit(e: FormEvent) {
    e.preventDefault();
    if (teams) {
@@ -38,14 +32,14 @@ const TeamPanel = () => {
        if (r.detail) setError({ ok: false, message: r.detail });
        else {
          setError({ ok: true, message: r });
-          loadPlayers(teams.activeTeam).then((data) => setPlayers(data));
+          reloadPlayers();
        }
      } else {
        const r = await apiAuth(`player/${teams?.activeTeam}`, player, "PUT");
        if (r.detail) setError({ ok: false, message: r.detail });
        else {
          setError({ ok: true, message: r });
-          loadPlayers(teams.activeTeam).then((data) => setPlayers(data));
+          reloadPlayers();
        }
      }
    }
@@ -65,7 +59,7 @@ const TeamPanel = () => {
        else {
          setError({ ok: true, message: r });
          setPlayer(newPlayerTemplate);
-          loadPlayers(teams.activeTeam).then((data) => setPlayers(data));
+          reloadPlayers();
        }
      }
    }
@@ -96,7 +90,11 @@ const TeamPanel = () => {
              {players &&
                players.map((p) => (
                  <button
-                    className="team-player"
+                    className={
+                      "team-player " +
+                      p.gender +
+                      (p.id === player.id ? " active-player" : "")
+                    }
                    key={p.id}
                    onClick={() => {
                      setPlayer(p);
@@ -132,8 +130,10 @@ const TeamPanel = () => {
                onChange={(e) => {
                  setPlayer({
                    ...player,
+                    ...(player.id === 0 && {
+                      username: e.target.value.toLowerCase().replace(/\W/g, ""),
+                    }),
                    display_name: e.target.value,
-                    username: e.target.value.toLowerCase().replace(/\W/g, ""),
                  });
                  setError({ ok: true, message: "" });
                }}
@@ -152,6 +152,22 @@ const TeamPanel = () => {
                }}
              />
            </div>
+            <div>
+              <label>gender</label>
+              <select
+                name="gender"
+                required
+                value={player.gender}
+                onChange={(e) => {
+                  setPlayer({ ...player, gender: e.target.value as Gender });
+                  setError({ ok: true, message: "" });
+                }}
+              >
+                <option value={undefined}></option>
+                <option value="fmp">FMP</option>
+                <option value="mmp">MMP</option>
+              </select>
+            </div>
            <div>
              <label>number (optional)</label>
              <input
@@ -202,6 +218,7 @@ const TeamPanel = () => {
            )}
          </form>
        </div>
+        <Calendar playerId={player.id} />
      </div>
    );
  } else <span className="loader" />;
--- a/src/api.ts
+++ b/src/api.ts
@@ -43,12 +43,15 @@ export async function apiAuth(
  }
 }

+export type Gender = "fmp" | "mmp" | undefined;
+
 export type User = {
  id: number;
  username: string;
  display_name: string;
  email: string;
  number: string;
+  gender: Gender;
  scopes: string;
 };

--- a/src/types.ts
+++ b/src/types.ts
@@ -27,6 +27,14 @@ export interface Chemistry {
  love: number[];
 }

+export interface PlayerType {
+  id: number;
+  user: number;
+  handlers: number[];
+  combis: number[];
+  cutters: number[];
+}
+
 export interface MVPRanking {
  id: number;
  user: number;
Author	SHA1	Message	Date
julius	b781408c18	feat: disable dark mode for text inputs	2025-05-21 15:08:36 +02:00
julius	a0c8e0cd18	feat: decrease calendar size	2025-05-21 15:04:06 +02:00
julius	de8dc6b9b9	feat: load players in session	2025-05-21 14:55:13 +02:00
julius	241f6fa7eb	feat: show active player	2025-05-21 14:37:07 +02:00
julius	a42fff807c	feat: useSession for players	2025-05-21 14:36:51 +02:00
julius	369cf0b727	feat: calendar display for latest submissions	2025-05-21 14:26:35 +02:00
julius	a6dfab47d5	fix: props.list empty	2025-05-19 14:59:10 +02:00
julius	4c78ede7c2	feat: increase dnd box	2025-05-19 14:50:24 +02:00
julius	8c8a88e72c	fix: handle players removed from team	2025-05-19 14:45:31 +02:00
julius	b9efd4f7a3	feat: add player type survey	2025-05-19 14:32:30 +02:00
julius	a6ebc28d47	fix: gender and previous state for DEMO	2025-05-18 16:01:05 +02:00
julius	48f282423f	feat: add gender in DEMO	2025-05-18 13:19:50 +02:00
julius	881e015c1f	Merge branch 'feat/demo'	2025-05-18 13:18:46 +02:00
julius	4e2e0dd2a5	feat: add gender	2025-05-18 13:18:02 +02:00
julius	b739246129	feat: load previously submitted by default	2025-05-18 11:59:07 +02:00