appoint team manager in UI

frontend/src/TeamPanel.tsx

@@ -4,6 +4,7 @@ import { useSession } from "./Session";
 import { ErrorState } from "./types";
 import { useNavigate } from "react-router";
 import Calendar from "./Calendar";
+import { Info, Star, StarHalf, StarOff, UserPen } from "lucide-react";
 import Loading from "./Loading";
 
 const TeamPanel = () => {
@@ -21,6 +22,7 @@ const TeamPanel = () => {
     gender: undefined,
     number: "",
     email: "",
+    is_manager: false,
   } as User;
   const [error, setError] = useState<ErrorState>();
   const [player, setPlayer] = useState(newPlayerTemplate);
@@ -96,7 +98,12 @@ const TeamPanel = () => {
                           setError({ ok: true, message: "" });
                         }}
                       >
-                        {p.display_name}
+                        <span>{p.display_name}</span>
+                        {p.is_manager && (
+                          <span className="icon">
+                            <Star size={16} fill="gold" />
+                          </span>
+                        )}
                       </button>
                     ))}
                     <button
@@ -197,7 +204,7 @@ const TeamPanel = () => {
                     </div>
                     <div className="field">
                       <label className="label">
-                        email <small>(optional)</small>
+                        email <small>(optional, but helpful)</small>
                       </label>
                       <div className="control">
                         <input
@@ -210,18 +217,52 @@ const TeamPanel = () => {
                           }}
                         />
                       </div>
-                      {error?.message && (
-                        <p
-                          className={
-                            "help" + (error.ok ? " is-success" : " is-danger")
-                          }
+                    </div>
+                    <div className="field">
+                      <div className="control">
+                        <label className="label">
+                          manager{" "}
+                          <span className="tooltip">
+                            <Info size={16} />
+                            <span className="tooltiptext notification is-primary is-light has-text-centered">
+                              managers are able to see the analyses and modify
+                              the players
+                            </span>
+                          </span>
+                        </label>
+                        <button
+                          className={"button"}
+                          onClick={(e) => {
+                            e.preventDefault();
+                            setPlayer({
+                              ...player,
+                              is_manager: !player.is_manager,
+                            });
+                            setError({ ok: true, message: "" });
+                          }}
                         >
-                          {error.message}
-                        </p>
-                      )}
+                          <span className="icon">
+                            {player.is_manager ? (
+                              <Star fill="gold" />
+                            ) : (
+                              <StarOff />
+                            )}
+                          </span>
+                          <span>{player.is_manager ? "yes" : "no"}</span>
+                        </button>
+                      </div>
                     </div>
                   </div>
-                  <div className="field is-grouped is-grouped-centered">
+                  {error?.message && (
+                    <p
+                      className={
+                        "help" + (error.ok ? " is-success" : " is-danger")
+                      }
+                    >
+                      {error.message}
+                    </p>
+                  )}
+                  <div className="field is-grouped is-grouped-multiline is-grouped-centered">
                     <button
                       className={
                         "button is-light" +

frontend/src/api.ts

@@ -1,3 +1,4 @@
+import { JwtPayload } from "jwt-decode";
 import { useSession } from "./Session";
 
 export const baseUrl = "";
@@ -53,6 +54,7 @@ export type User = {
   number: string;
   gender: Gender;
   scopes: string;
+  is_manager: boolean;
 };
 
 export async function currentUser(): Promise<User> {
@@ -124,3 +126,9 @@ export const logout = async () => {
     console.error(e);
   }
 };
+
+export interface PassToken extends JwtPayload {
+  username: string;
+  name: string;
+  team_id: number;
+}

frontend/src/main.css

@@ -20,3 +20,23 @@
   position: absolute;
   margin: 1rem;
 }
+
+.tooltip {
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+}
+
+/* Tooltip text */
+.tooltiptext {
+  visibility: hidden;
+  width: 10rem;
+  padding: 0.25rem;
+  position: absolute;
+  z-index: 1;
+}
+
+/* Show the tooltip text on hover */
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+}