From a627b98a3b0a9ac21768b87b8fb9da27fcea5d65 Mon Sep 17 00:00:00 2001
From: JohanGrims <johan.grimsehl@gmail.com>
Date: Fri, 18 Oct 2024 19:10:53 +0200
Subject: [PATCH] different fixes and features

---
 src/admin/Students.tsx              |   2 +-
 src/admin/index.jsx                 |   2 +-
 src/admin/navigation/DrawerList.jsx |   2 +-
 src/admin/navigation/VoteDrawer.jsx |  16 ++-
 src/admin/vote/Answers.jsx          |  18 ++-
 src/admin/vote/Match.tsx            | 192 +++++++++++++++++++---------
 src/admin/vote/index.jsx            |  59 +++------
 src/main.jsx                        |   2 +-
 8 files changed, 181 insertions(+), 112 deletions(-)

diff --git a/src/admin/Students.tsx b/src/admin/Students.tsx
index 4200947..b6db4b7 100644
--- a/src/admin/Students.tsx
+++ b/src/admin/Students.tsx
@@ -281,7 +281,7 @@ export default function Students() {
                 onClick={() => {
                   navigate(`/admin/students/${classId}/true`);
                 }}
-              ></mdui-segmented-button>{" "}
+              ></mdui-segmented-button>
               <mdui-segmented-button
                 icon="delete"
                 onClick={() => classId && removeClass(classId)}
diff --git a/src/admin/index.jsx b/src/admin/index.jsx
index 0578068..03da91d 100644
--- a/src/admin/index.jsx
+++ b/src/admin/index.jsx
@@ -13,7 +13,7 @@ export default function Admin(props) {
   const [authUser, setAuthUser] = React.useState(false);
   const [loading, setLoading] = React.useState(true);
 
-  const [open, setOpen] = React.useState(true);
+  const [open, setOpen] = React.useState(window.innerWidth > 1024);
 
   React.useEffect(() => {
     const listen = onAuthStateChanged(auth, (user) => {
diff --git a/src/admin/navigation/DrawerList.jsx b/src/admin/navigation/DrawerList.jsx
index 7ca8852..7013301 100644
--- a/src/admin/navigation/DrawerList.jsx
+++ b/src/admin/navigation/DrawerList.jsx
@@ -219,7 +219,7 @@ export default function DrawerList() {
           active={active === "students"}
           title={"SchülerInnen"}
           icon={"people"}
-          onCLick={() => navigate("/admin/students")}
+          onCLick={() => navigate("/admin/students/add")}
         />
 
         <br />
diff --git a/src/admin/navigation/VoteDrawer.jsx b/src/admin/navigation/VoteDrawer.jsx
index 61b844e..d6b8f24 100644
--- a/src/admin/navigation/VoteDrawer.jsx
+++ b/src/admin/navigation/VoteDrawer.jsx
@@ -69,11 +69,17 @@ export default function VoteDrawer({}) {
           flexDirection: "column",
         }}
       >
-        <DrawerItem
-          icon={"arrow_back"}
-          title={data?.title}
-          onCLick={() => navigate("/admin")}
-        />
+        <mdui-tooltip
+          variant="rich"
+          headline="Zurück"
+          content="Kehren Sie zur Übersicht zurück."
+        >
+          <DrawerItem
+            icon={"arrow_back"}
+            title={data?.title}
+            onCLick={() => navigate("/admin")}
+          />
+        </mdui-tooltip>
         <mdui-divider></mdui-divider>
         <br />
         <mdui-tooltip
diff --git a/src/admin/vote/Answers.jsx b/src/admin/vote/Answers.jsx
index edaba53..ef8cfd5 100644
--- a/src/admin/vote/Answers.jsx
+++ b/src/admin/vote/Answers.jsx
@@ -9,6 +9,7 @@ import { confirm } from "mdui";
 import React from "react";
 import { useLoaderData } from "react-router-dom";
 import { db } from "../../firebase";
+import { useNavigate } from "react-router-dom";
 
 export default function Answers() {
   const { vote, options, answers } = useLoaderData();
@@ -19,6 +20,8 @@ export default function Answers() {
 
   const grades = [...new Set(answers.map((answer) => answer.grade))];
 
+  const navigate = useNavigate();
+
   React.useEffect(() => {
     if (search) {
       const query = search.toLowerCase();
@@ -38,7 +41,18 @@ export default function Answers() {
 
   return (
     <div className="mdui-prose">
-      <h2>Antworten</h2>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+        }}
+      >
+        <h2>Antworten</h2>
+        <mdui-chip onClick={() => navigate("../match")}>
+          Mit Klassenlisten abgleichen
+        </mdui-chip>
+      </div>
+      <br />
       <mdui-radio-group value={mode}>
         <mdui-radio value="by-option" onClick={() => setMode("by-option")}>
           Nach Erstwahl
@@ -50,6 +64,8 @@ export default function Answers() {
           Nach Name
         </mdui-radio>
       </mdui-radio-group>
+      <br />
+
       <p />
       {mode === "by-option" && (
         <mdui-tabs
diff --git a/src/admin/vote/Match.tsx b/src/admin/vote/Match.tsx
index 5acfad7..94e3f38 100644
--- a/src/admin/vote/Match.tsx
+++ b/src/admin/vote/Match.tsx
@@ -10,76 +10,142 @@ export default function Match() {
     choices: any[];
   };
 
+  const [mode, setMode] = React.useState("database");
+
   const sortedClasses = classes.sort((a, b) => a.grade - b.grade);
+
   return (
     <div className="mdui-prose">
       <h2>Abgleichen</h2>
-      <mdui-tabs value={sortedClasses[0].id}>
-        {sortedClasses.map((c) => (
-          <mdui-tab value={c.id}>
-            Klasse {c.grade}
-            <mdui-badge>{c.students.length}</mdui-badge>
-          </mdui-tab>
-        ))}
-        <p />
-        {sortedClasses.map((c) => (
-          <mdui-tab-panel slot="panel" value={c.id}>
-            <div style={{ padding: "10px" }}>
-              <div className="mdui-table">
-                <table>
-                  <thead>
-                    <tr>
-                      <th>Name</th>
-                      <th>#</th>
-                      <th>Name</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {c.students.map((s) => (
+      <mdui-radio-group value={mode}>
+        <mdui-radio value="database" onClick={() => setMode("database")}>
+          Datenbank
+        </mdui-radio>
+        <mdui-radio value="answers" onClick={() => setMode("answers")}>
+          Antworten
+        </mdui-radio>
+      </mdui-radio-group>
+
+      {mode === "database" && (
+        <mdui-tabs value={sortedClasses[0].id}>
+          {sortedClasses.map((c) => (
+            <mdui-tab value={c.id}>
+              Klasse {c.grade}
+              <mdui-badge>{c.students.length}</mdui-badge>
+            </mdui-tab>
+          ))}
+          <p />
+          {sortedClasses.map((c) => (
+            <mdui-tab-panel slot="panel" value={c.id}>
+              <div style={{ padding: "10px" }}>
+                <div className="mdui-table">
+                  <table>
+                    <thead>
                       <tr>
-                        <td>{s.name}</td>
-                        <td>{s.listIndex}</td>
-                        <td>
-                          <Link
-                            to={`../answers?search=${
-                              choices.filter(
-                                (choice) =>
-                                  choice.listIndex === s.listIndex.toString() &&
-                                  choice.grade === c.grade.toString()
-                              )[0]?.id
-                            }`}
-                          >
-                            {
-                              choices.filter(
-                                (choice) =>
-                                  choice.listIndex === s.listIndex.toString() &&
-                                  choice.grade === c.grade.toString()
-                              )[0]?.name
-                            }
-                          </Link>
-                          {choices.filter(
-                            (choice) =>
-                              choice.listIndex === s.listIndex.toString() &&
-                              choice.grade === c.grade.toString()
-                          ).length > 1 &&
-                            " + " +
-                              (choices.filter(
-                                (choice) =>
-                                  choice.listIndex === s.listIndex.toString() &&
-                                  choice.grade === c.grade.toString()
-                              ).length -
-                                1) +
-                              " weitere"}{" "}
-                        </td>
+                        <th>Name</th>
+                        <th>#</th>
+                        <th>Name</th>
                       </tr>
-                    ))}
-                  </tbody>
-                </table>
+                    </thead>
+                    <tbody>
+                      {c.students.map((s) => (
+                        <tr>
+                          <td>{s.name}</td>
+                          <td>{s.listIndex}</td>
+                          <td>
+                            <Link
+                              to={`../answers?search=${
+                                choices.filter(
+                                  (choice) =>
+                                    choice.listIndex ===
+                                      s.listIndex.toString() &&
+                                    choice.grade === c.grade.toString()
+                                )[0]?.id
+                              }`}
+                            >
+                              {
+                                choices.filter(
+                                  (choice) =>
+                                    choice.listIndex ===
+                                      s.listIndex.toString() &&
+                                    choice.grade === c.grade.toString()
+                                )[0]?.name
+                              }
+                            </Link>
+                            {choices.filter(
+                              (choice) =>
+                                choice.listIndex === s.listIndex.toString() &&
+                                choice.grade === c.grade.toString()
+                            ).length > 1 &&
+                              " + " +
+                                (choices.filter(
+                                  (choice) =>
+                                    choice.listIndex ===
+                                      s.listIndex.toString() &&
+                                    choice.grade === c.grade.toString()
+                                ).length -
+                                  1) +
+                                " weitere"}{" "}
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
               </div>
-            </div>
-          </mdui-tab-panel>
-        ))}
-      </mdui-tabs>
+            </mdui-tab-panel>
+          ))}
+        </mdui-tabs>
+      )}
+
+      {mode === "answers" && (
+        <div>
+          <div className="mdui-table">
+            <table>
+              <thead>
+                <tr>
+                  <th>Name</th>
+                  <th>#</th>
+                  <th>Klasse</th>
+                  <th>Name</th>
+                </tr>
+              </thead>
+              <tbody>
+                {choices
+                  .sort((a, b) => {
+                    if (a.grade === b.grade) {
+                      return a.listIndex - b.listIndex;
+                    }
+                    return a.grade - b.grade;
+                  })
+                  .map((choice) => (
+                    <tr key={choice.id}>
+                      <td>
+                        <Link to={`../answers?search=${choice.id}`}>
+                          {choice.name}
+                        </Link>
+                      </td>
+                      <td>{choice.listIndex}</td>
+                      <td>{choice.grade}</td>
+                      <td>
+                        {
+                          sortedClasses
+                            .find(
+                              (c) => Number(c.grade) === Number(choice.grade)
+                            )
+                            ?.students.find(
+                              (s) =>
+                                Number(s.listIndex) === Number(choice.listIndex)
+                            )?.name
+                        }
+                      </td>
+                    </tr>
+                  ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
     </div>
   );
 }
diff --git a/src/admin/vote/index.jsx b/src/admin/vote/index.jsx
index ca9828f..3eff8ae 100644
--- a/src/admin/vote/index.jsx
+++ b/src/admin/vote/index.jsx
@@ -11,27 +11,23 @@ export default function AdminVote() {
     <div className="mdui-prose">
       <div style={{ display: "flex", justifyContent: "space-between" }}>
         <h2>{vote.title}</h2>
-        <mdui-tooltip
-          variant="rich"
-          headline="Status"
-          content={`Diese Wahl ist ${
-            vote.active && vote.endTime.seconds * 1000 > Date.now()
-              ? vote.startTime.seconds * 1000 < Date.now()
-                ? "aktiv"
-                : "geplant"
-              : "beendet"
-          }.`}
-        >
-          <mdui-icon
-            name={
-              vote.active && vote.endTime.seconds * 1000 > Date.now()
-                ? vote.startTime.seconds * 1000 < Date.now()
-                  ? "event_available"
-                  : "event"
-                : "done_all"
-            }
-          ></mdui-icon>
-        </mdui-tooltip>
+        <mdui-chip onClick={() => navigate("./schedule")}>
+          {!vote.active
+            ? "Nicht aktiv"
+            : `${new Date(vote.startTime.seconds * 1000).toLocaleString([], {
+                hour: "2-digit",
+                minute: "2-digit",
+                day: "2-digit",
+                month: "2-digit",
+                year: "numeric",
+              })} - ${new Date(vote.endTime.seconds * 1000).toLocaleString([], {
+                hour: "2-digit",
+                minute: "2-digit",
+                day: "2-digit",
+                month: "2-digit",
+                year: "numeric",
+              })}`}
+        </mdui-chip>
       </div>
       <p />
       <div
@@ -94,26 +90,11 @@ export default function AdminVote() {
           variant="filled"
           style={{ padding: "20px", flex: 1 }}
           clickable
-          onClick={() => navigate(`/admin/${vote.id}/schedule`)}
+          onClick={() => navigate(`/admin/${vote.id}/match`)}
         >
-          <h3>
-            {vote.active && vote.endTime.seconds * 1000 > Date.now()
-              ? vote.startTime.seconds * 1000 < Date.now()
-                ? "Beenden"
-                : "Planen"
-              : "Starten"}
-          </h3>
+          <h3>Abgleichen</h3>
           <p style={{ fontSize: "50px" }}>
-            <mdui-icon
-              name={
-                vote.active && vote.endTime.seconds * 1000 > Date.now()
-                  ? vote.startTime.seconds * 1000 < Date.now()
-                    ? "pause"
-                    : "scheduled"
-                  : "play_arrow"
-              }
-              style={{ fontSize: "50px" }}
-            />
+            <mdui-icon name={"fact_check"} style={{ fontSize: "50px" }} />
           </p>
         </mdui-card>
         <mdui-card
diff --git a/src/main.jsx b/src/main.jsx
index c32769d..a58da0c 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -83,7 +83,7 @@ const routes = [
             element: <NewVote />,
           },
           {
-            path: "students/:classId?/:edit?",
+            path: "students/:classId/:edit?",
             element: <Students />,
             loader: studentsLoader,
           },