small updates

JohanGrims · Sep 18, 2024 · c80065e · c80065e
1 parent b9abf21
commit c80065e
Show file tree

Hide file tree

Showing 4 changed files with 189 additions and 19 deletions.
diff --git a/index.html b/index.html
@@ -36,7 +36,7 @@
 
     <title>WaldorfWahlen</title>
   </head>
-  <body class="mdui-theme-auto">
+  <body>
     <div id="root"></div>
     <style>
       .firebase-emulator-warning {

diff --git a/src/admin/Settings.jsx b/src/admin/Settings.jsx
@@ -1,6 +1,75 @@
+import {
+  EmailAuthProvider,
+  reauthenticateWithCredential,
+  updateEmail,
+  updatePassword,
+} from "firebase/auth";
+import { snackbar } from "mdui";
+import React from "react";
 import { auth } from "../firebase";
 
 export default function Settings() {
+  const [email, setEmail] = React.useState(auth.currentUser.email);
+  const [password, setPassword] = React.useState("");
+  const [newPassword, setNewPassword] = React.useState("");
+
+  const [darkMode, setDarkMode] = React.useState(
+    localStorage.getItem("theme") === "light"
+  );
+
+  function updateUser() {
+    const userCredentials = EmailAuthProvider.credential(
+      auth.currentUser.email,
+      password
+    );
+    reauthenticateWithCredential(auth.currentUser, userCredentials)
+      .then(() => {
+        if (newPassword) {
+          changePassword();
+        }
+        if (email !== auth.currentUser.email) {
+          changeEmail();
+        }
+      })
+      .catch((error) => {
+        console.error(error);
+      });
+  }
+
+  function changeEmail() {
+    updateEmail(auth.currentUser, email)
+      .then(() => {
+        snackbar({ message: "E-Mail-Adresse geändert" });
+      })
+      .catch((error) => {
+        console.error(error);
+      });
+  }
+
+  function changePassword() {
+    updatePassword(auth.currentUser, password)
+      .then(() => {
+        snackbar({ message: "Passwort geändert" });
+      })
+      .catch((error) => {
+        console.error(error);
+      });
+  }
+
+  const switchRef = React.useRef(null);
+
+  React.useEffect(() => {
+    const handleToggle = () => {
+      setDarkMode(switchRef.current.checked);
+      localStorage.setItem(
+        "theme",
+        switchRef.current.checked ? "dark" : "light"
+      );
+    };
+
+    switchRef.current.addEventListener("change", handleToggle);
+  }, []);
+
   return (
     <div className="mdui-prose">
       <h1>Einstellungen</h1>
@@ -9,18 +78,28 @@ export default function Settings() {
         label="E-Mail"
         type="email"
         required
-        value={auth.currentUser.email}
-        disabled
+        value={email}
+        onInput={(e) => setEmail(e.target.value)}
       ></mdui-text-field>
       <mdui-text-field
         label="Passwort"
         type="password"
         required
-        disabled
+        value={password}
+        onInput={(e) => setPassword(e.target.value)}
+      ></mdui-text-field>
+      <mdui-text-field
+        label="Neues Passwort"
+        type="password"
+        required
+        value={newPassword}
+        onInput={(e) => setNewPassword(e.target.value)}
       ></mdui-text-field>
       <p />
       <div className="button-container">
-        <mdui-button variant="text">Passwort ändern</mdui-button>
+        <mdui-button variant="text" onClick={updateUser}>
+          Speichern
+        </mdui-button>
         <p />
         <mdui-button onClick={() => auth.signOut()}>Abmelden</mdui-button>
       </div>
@@ -29,7 +108,8 @@ export default function Settings() {
         <mdui-switch
           checked-icon="dark_mode"
           unchecked-icon="light_mode"
-          checked
+          checked={localStorage.getItem("theme") !== "light"}
+          ref={switchRef}
         ></mdui-switch>
         <label>Dark Mode</label>
       </div>

diff --git a/src/admin/vote/Assign.jsx b/src/admin/vote/Assign.jsx
@@ -17,6 +17,14 @@ export default function Assign() {
   const [loading, setLoading] = React.useState(false);
   const [mode, setMode] = React.useState("by-option");
 
+  const [rules, setRules] = React.useState([
+    {
+      apply: "*",
+      scores: [1, 2, 4],
+    },
+  ]);
+  const [editRules, setEditRules] = React.useState(false);
+
   const navigate = useNavigate();
 
   async function fetchOptimization() {
@@ -45,6 +53,7 @@ export default function Assign() {
         projects: projects,
         preferences: preferences,
         selectCount: vote.selectCount,
+        rules: rules,
       };
 
       const response = await fetch("https://api.chatwithsteiner.de/assign", {
@@ -82,22 +91,94 @@ export default function Assign() {
             color: "gray",
           }}
         >
-          Um alle möglichen Kombinationen zu berechnen, würde es mit{" "}
-          {choices.length} Schülern und {vote.selectCount} Wahlen länger dauern
-          als das Universum alt ist. Es gäbe nämlich{" "}
-          {Math.pow(vote.selectCount, choices.length)} mögliche Kombinationen.
-          So lange wollen wir nicht warten. Deshalb optimiert ein schlauer
-          Algorithmus für uns. Die Berechnungsdauer hängt von der Anzahl der
-          Schüler und der Anzahl der Wahlen ab. Bei vielen Schülern und Wahlen
-          kann es einige Sekunden dauern. Gleich ist es fertig.
+          Um alle möglichen Kombinationen zu berechnen, würde es mit 100
+          Schülern und 3 Wahlen länger dauern als das Universum alt ist. Es gäbe
+          nämlich {Math.pow(3, 100)} mögliche Kombinationen. So lange wollen wir
+          nicht warten. Deshalb optimiert ein schlauer Algorithmus für uns. Die
+          Berechnungsdauer hängt von der Anzahl der Schüler und der Anzahl der
+          Wahlen ab. Bei vielen Schülern und Wahlen kann es einige Sekunden
+          dauern. Gleich ist es fertig.
         </div>
       </div>
     );
   }
 
   if (!results) {
     return (
-      <div>
+      <div className="mdui-prose">
+        <mdui-dialog
+          open={editRules}
+          onClosed={() => setEditRules(false)}
+          headline="Regeln anpassen"
+          fullscreen
+        >
+          {rules.map((rule, i) => (
+            <div
+              key={i}
+              style={{ display: "flex", gap: "10px", marginBottom: "10px" }}
+            >
+              <mdui-text-field
+                label="Anwenden auf"
+                placeholder="grade=12"
+                value={rule.apply}
+                onInput={(e) => {
+                  const newRules = [...rules];
+                  newRules[i].apply = e.target.value;
+                  setRules(newRules);
+                }}
+              />
+              <mdui-text-field
+                label="Punkte"
+                placeholder="1,2,4"
+                value={rule.scores.join(",")}
+                onInput={(e) => {
+                  const newRules = [...rules];
+                  newRules[i].scores = e.target.value.split(",").map(Number);
+                  setRules(newRules);
+                }}
+              />
+              <mdui-button-icon
+                icon="delete"
+                onClick={() => {
+                  const newRules = [...rules];
+                  newRules.splice(i, 1);
+                  setRules(newRules);
+                }}
+              />
+            </div>
+          ))}
+          <mdui-button
+            onClick={() =>
+              setRules([...rules, { apply: "", scores: [1, 2, 4] }])
+            }
+            icon="add"
+          >
+            Regel hinzufügen
+          </mdui-button>
+          <mdui-button
+            slot="action"
+            onClick={() => {
+              setEditRules(false);
+              snackbar({ message: "Regeln gespeichert." });
+            }}
+          >
+            Speichern
+          </mdui-button>
+        </mdui-dialog>
+        <div
+          style={{
+            display: "flex",
+            gap: "10px",
+            justifyContent: "space-between",
+            alignItems: "start",
+          }}
+        >
+          <h2>Zuteilung</h2>
+          <mdui-button icon="settings" onClick={() => setEditRules(true)}>
+            Regeln anpassen
+          </mdui-button>
+        </div>
+        <p />
         <mdui-card
           variant="filled"
           style={{ width: "100%", padding: "20px" }}
@@ -192,7 +273,17 @@ export default function Assign() {
 
   return (
     <div className="mdui-prose">
-      <h2>Ergebnisse</h2>
+      <div
+        style={{
+          display: "flex",
+          gap: "10px",
+          justifyContent: "space-between",
+          alignItems: "start",
+        }}
+      >
+        <h2>Ergebnisse</h2>
+        <mdui-button onClick={saveResults}>Ergebnisse speichern</mdui-button>
+      </div>
       <p />
       Hier sind die optimierten Zuordnungen der Schüler zu den Projekten.
       <p />
@@ -429,8 +520,6 @@ export default function Assign() {
           </div>
         </div>
       )}
-      <p />
-      <mdui-button onClick={saveResults}>Ergebnisse speichern</mdui-button>
     </div>
   );
 }

diff --git a/src/main.jsx b/src/main.jsx
@@ -5,7 +5,7 @@ import ErrorPage from "./Error.jsx";
 import "./styles.css";
 
 import "mdui";
-import { setColorScheme } from "mdui";
+import { setColorScheme, setTheme } from "mdui";
 import "mdui/mdui.css";
 
 import App, { loader as appLoader } from "./App.jsx";
@@ -29,6 +29,7 @@ import Schedule from "./admin/vote/Schedule.jsx";
 import Share from "./admin/vote/Share.jsx";
 
 setColorScheme("#f89e24");
+setTheme(localStorage.getItem("theme") || "dark");
 
 const router = createBrowserRouter([
   {