Füge Event-Datenverwaltung hinzu und verbessere die Benutzeroberfläche

src/Admin.css

@@ -23,6 +23,31 @@
   color: #ffffff;
 }
 
+.header-buttons {
+  display: flex;
+  gap: 10px;
+}
+
+.print-btn {
+  background-color: #28a745;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 16px;
+  transition: background-color 0.3s ease;
+}
+
+.print-btn:hover {
+  background-color: #218838;
+}
+
+.print-btn:active {
+  background-color: #1e7e34;
+  transform: scale(0.98);
+}
+
 .logout-btn {
   background-color: #dc3545;
   color: white;
@@ -203,7 +228,176 @@
   transform: scale(0.95);
 }
 
-@media (max-width: 768px) {
+.date-input {
+  padding: 12px 15px;
+  font-size: 14px;
+  background-color: rgba(97, 218, 251, 0.25);
+  border: 2px solid rgba(97, 218, 251, 0.5);
+  border-radius: 5px;
+  color: #ffffff;
+  transition: all 0.3s ease;
+  font-family: inherit;
+  max-width: 300px;
+}
+
+.date-input:focus {
+  outline: none;
+  border-color: #61dafb;
+  background-color: rgba(97, 218, 251, 0.35);
+  box-shadow: 0 0 8px rgba(97, 218, 251, 0.4);
+}
+
+.date-input::placeholder {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.date-input-container {
+  max-width: 1200px;
+  margin: 20px auto 30px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+
+.date-input-label {
+  color: #ffffff;
+  font-size: 14px;
+  margin-bottom: 8px;
+  opacity: 0.9;
+}
+
+.date-input-group {
+  display: flex;
+  gap: 5px;
+  justify-content: center;
+  align-items: center;
+}
+
+.date-save-btn {
+  background-color: #61dafb;
+  color: #000000;
+  border: none;
+  padding: 12px 25px;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 600;
+  transition: all 0.3s ease;
+}
+
+.date-save-btn:hover {
+  background-color: #4db8d9;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(97, 218, 251, 0.3);
+}
+
+.event-data-container {
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(10px);
+  border-radius: 8px;
+  padding: 25px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+  max-width: 1200px;
+  margin: 20px auto 30px;
+  border: 1px solid rgba(97, 218, 251, 0.3);
+}
+
+.event-data-container h3 {
+  margin-top: 0;
+  margin-bottom: 20px;
+  color: #ffffff;
+  font-size: 1.3em;
+  text-align: center;
+}
+
+.event-data-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+.event-data-field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.event-data-label {
+  color: #ffffff;
+  font-size: 14px;
+  font-weight: 600;
+  opacity: 0.9;
+}
+
+.event-data-input {
+  padding: 12px 15px;
+  font-size: 14px;
+  background-color: rgba(97, 218, 251, 0.25);
+  border: 2px solid rgba(97, 218, 251, 0.5);
+  border-radius: 5px;
+  color: #ffffff;
+  transition: all 0.3s ease;
+  font-family: inherit;
+}
+
+.event-data-input:focus {
+  outline: none;
+  border-color: #61dafb;
+  background-color: rgba(97, 218, 251, 0.35);
+  box-shadow: 0 0 8px rgba(97, 218, 251, 0.4);
+}
+
+.event-data-input::placeholder {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.checkbox-container {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 15px;
+  background-color: rgba(97, 218, 251, 0.25);
+  border: 2px solid rgba(97, 218, 251, 0.5);
+  border-radius: 5px;
+}
+
+.event-data-checkbox {
+  width: 18px;
+  height: 18px;
+  accent-color: #61dafb;
+}
+
+.checkbox-container span {
+  color: #ffffff;
+  font-size: 14px;
+}
+
+.event-save-btn {
+  background-color: #61dafb;
+  color: #000000;
+  border: none;
+  padding: 15px 30px;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 16px;
+  font-weight: 600;
+  transition: all 0.3s ease;
+  display: block;
+  margin: 0 auto;
+}
+
+.event-save-btn:hover {
+  background-color: #4db8d9;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(97, 218, 251, 0.3);
+}
+
+.event-save-btn:active {
+  background-color: #3a9bb6;
+  transform: translateY(0);
+}
   .admin-header {
     flex-direction: column;
     gap: 15px;
@@ -227,7 +421,11 @@
     font-size: 36px;
   }
 
-  .admin-header h2 {
+  .event-data-grid {
-    font-size: 24px;
+    grid-template-columns: 1fr;
+  }
+
+  .event-save-btn {
+    font-size: 14px;
+    padding: 12px 25px;
   }
-}

src/Admin.jsx

@@ -4,16 +4,29 @@ import { auth, db } from './firebase';
 import { signOut } from 'firebase/auth';
 import './Admin.css';
 
-export default function Admin() {
+export default function Admin({ close }) {
   const [data, setData] = useState([]);
+  const [eventData, setEventData] = useState({
+    time: "",
+    date: "",
+    price: "",
+    food: false,
+    endtime: ""
+  });
+
   
   useEffect(() => {
     let unsub = onSnapshot(collection(db, "forms"), (snapshot) => {
       let data = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
       setData(data)
     })
+    let unsub1 = onSnapshot(doc(db, "time", "time"), data => {
+      let parsedData = data.data()
+      setEventData(parsedData)
+    })
     return () => {
       unsub();
+      unsub1()
     };
   }, []);
 
@@ -33,6 +46,16 @@ export default function Admin() {
     }
   }
 
+  const saveEventData = async () => {
+    try {
+      await updateDoc(doc(db, "time", "time"), eventData)
+      alert("Event-Daten gespeichert")
+    } catch (error) {
+      alert("Irgendetwas ist schief gelaufen :(")
+      console.error(error)
+    }
+  }
+
   const deletePerson = async (id, index) => {
     if (window.confirm("Möchtest du diese Person wirklich löschen?")) {
       try {
@@ -52,13 +75,121 @@ export default function Admin() {
     }
   }
 
+  const resetEverything = () => {
+    if (!window.confirm("Wirklich alle Anmeldungen löschen? Dieser Vorgang kann nicht rückgängig gemacht werden.")) {
+      return;
+    }
+    data.forEach(async el => {
+      try {
+        await deleteDoc(doc(db, "forms", el.id))
+      } catch (error) {
+        console.error(error)
+        alert("Irgendetwas ist schiefgelaufen :(")
+      }
+    });
+  }
+
+  const handlePrint = () => {
+    const allNames = data.flatMap(entry => entry.names || []);
+    const printContent = `
+      <html>
+        <head>
+          <title>Liste der angemeldeten Personen</title>
+          <style>
+            body { font-family: Arial, sans-serif; margin: 20px; }
+            h1 { text-align: center; }
+            ul { list-style-type: none; padding: 0; }
+            li { padding: 5px 0; border-bottom: 1px solid #eee; }
+          </style>
+        </head>
+        <body>
+          <h1>Liste der angemeldeten Personen</h1>
+          <ul>
+            ${allNames.map(name => `<li>${name}</li>`).join('')}
+          </ul>
+        </body>
+      </html>
+    `;
+    const printWindow = window.open('', '_blank');
+    printWindow.document.write(printContent);
+    printWindow.document.close();
+    printWindow.print();
+  }
+
   return (
     <div className="admin-container">
       <div className="admin-header">
         <h2>Verwaltung Dashboard</h2>
-        <button type='button' onClick={() => signOut(auth)} className="logout-btn">Logout</button>
+        <div className="header-buttons" style={{ paddingLeft: "50px" }}>
+          <button type='button' onClick={handlePrint} className="print-btn">Drucken</button>
+          <button type='button' onClick={() => signOut(auth)} className="logout-btn">Logout</button>
+          <button type='button' onClick={() => resetEverything()} className="logout-btn" style={{ color: "rgb(179, 0, 0)" }}>Alle Anmeldungen löschen</button>
+          <button type='button' onClick={() => close()} className="logout-btn" >Verwaltung ohne Abmelden schließen</button>
+        </div>
+      </div>
+      <div className="event-data-container">
+        <h3>Event-Daten bearbeiten</h3>
+        <div className="event-data-grid">
+          <div className="event-data-field">
+            <label className="event-data-label">Zeit:</label>
+            <input
+              type="text"
+              value={eventData.time}
+              onChange={(e) => setEventData({...eventData, time: e.target.value})}
+              className="event-data-input"
+              placeholder="z.B. 19:00 Uhr"
+            />
+          </div>
+          <div className="event-data-field">
+            <label className="event-data-label">Datum:</label>
+            <input
+              type="text"
+              value={eventData.date}
+              onChange={(e) => setEventData({...eventData, date: e.target.value})}
+              className="event-data-input"
+              placeholder="z.B. 27. März 2026"
+            />
+          </div>
+          <div className="event-data-field">
+            <label className="event-data-label">Preis:</label>
+            <input
+              type="text"
+              value={eventData.price}
+              onChange={(e) => setEventData({...eventData, price: e.target.value})}
+              className="event-data-input"
+              placeholder="z.B. 5"
+            />
+          </div>
+          <div className="event-data-field">
+            <label className="event-data-label">Anmeldung bis:</label>
+            <input
+              type="datetime-local"
+              value={eventData.endtime}
+              onChange={(e) => setEventData({...eventData, endtime: e.target.value})}
+              className="event-data-input"
+            />
+          </div>
+          <div className="event-data-field">
+            <label className="event-data-label">Verpflegung:</label>
+            <div className="checkbox-container">
+              <input
+                type="checkbox"
+                checked={eventData.food}
+                onChange={(e) => setEventData({...eventData, food: e.target.checked})}
+                className="event-data-checkbox"
+              />
+              <span>Verpflegung ist gesorgt</span>
+            </div>
+          </div>
+        </div>
+        <button
+          type='button'
+          onClick={saveEventData}
+          className="event-save-btn"
+        >
+          Event-Daten speichern
+        </button>
       </div>
-
       <div className="admin-stats">
         <div className="stat-box">
           <h3>Gesamtzahl Anmeldungen</h3>

src/App.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 import './App.css';
-import { addDoc, collection, doc, getDoc, onSnapshot } from 'firebase/firestore';
+import { addDoc, collection, doc, onSnapshot } from 'firebase/firestore';
 import { auth, db } from './firebase';
 import Admin from './Admin';
 import { onAuthStateChanged, signInWithEmailAndPassword } from 'firebase/auth';
@@ -12,13 +12,24 @@ function App() {
   const [showManagement, setShowManagement] = useState(false);
   const [loginPassword, setLoginPassword] = useState("");
   const [isLoggedIn, setisLoggedIn] = useState(false);
+  const [data, setData] = useState({
+    time: "",
+    date: "",
+    price: "",
+    food: false,
+    endtime: "2026-03-27T17:30:00",
+  });
 
   useEffect(() => {
     const unsub = onAuthStateChanged(auth, (user) => {
       setisLoggedIn(user ? true : false)
     })
+    const unsub1 = onSnapshot(doc(db, "time", "time"), (data) => {
+      setData(data.data())
+    })
     return () => {
       unsub()
+      unsub1()
     };
   }, []);
 
@@ -126,7 +137,7 @@ function App() {
               <button type="submit">Login</button>
               <button type="button" onClick={() => setShowManagement(false)} style={{background:'#888',marginTop:'10px'}}>Abbrechen</button>
             </form>
-          ) : <Admin />}
+          ) : <Admin close={() => setShowManagement(false)} />}
         </div>
       ) : (
         <>
@@ -135,7 +146,7 @@ function App() {
             <div className="facts">
               <div className="fact-row">
                 <span className="fact-label">Zeit:</span>
-                <span className="fact-value">18:00</span>
+                <span className="fact-value">{data.time}</span>
               </div>
               <div className="fact-row">
                 <span className="fact-label">Ort:</span>
@@ -143,45 +154,46 @@ function App() {
               </div>
               <div className="fact-row">
                 <span className="fact-label">Datum:</span>
-                <span className="fact-value">Fr. 27.03.2026</span>
+                <span className="fact-value">{data.date}</span>
               </div>
               <div className="fact-row">
                 <span className="fact-label">Eintrittspreis:</span>
-                <span className="fact-value">2€</span>
+                <span className="fact-value">{data.price}€</span>
               </div>
               <div className="fact-row">
                 <span className="fact-label">Anmeldung spätestens bis:</span>
-                <span className="fact-value">17:30 (online oder vor Ort)</span>
+                <span className="fact-value">{ new Date(data.endtime).toLocaleDateString() } (online oder vor Ort)</span>
               </div>
               <br />
               <div className="fact-row">
                 {/* <span className='fact-label'></span> */}
                 <span className="fact-value">Ausschließlich für Schüler, Lehrer und Familienmitglieder.</span>
               </div>
-              <div className="fact-row">
+              { data.food && <div className="fact-row">
                 <span className='fact-value'>Für Verpflegung ist gesorgt.</span>
-              </div>
+              </div> }
             </div>
             <button onClick={scrollToForm}>Jetzt Anmelden</button>
           </div>
           <div id="form-section" ref={formSectionRef}>
-            <form>
+            { new Date() > new Date(data.endtime) ? <h1 style={{ color: 'white', background: 'red', padding: '20px' }}>Die Anmeldefrist ist leider schon abgelaufen</h1> : 
-              <label>E-Mail:</label>
+              <form>
-              <input type="email" name="email" placeholder="Deine E-Mail-Adresse" onChange={(e => setEmail(e.target.value))} value={email}/>
+                <label>E-Mail:</label>
-              <br />
+                <input type="email" name="email" placeholder="Deine E-Mail-Adresse" onChange={(e => setEmail(e.target.value))} value={email}/>
-              <label>Namen</label>
+                <br />
-              <button type='button' onClick={() => setNames([...names, ""]) }>Neue Person hinzufügen</button>
+                <label>Namen</label>
-              { createPersonFields() }
+                <button type='button' onClick={() => setNames([...names, ""]) }>Neue Person hinzufügen</button>
-              <br />
+                { createPersonFields() }
-              <button type="submit" onClick={submit}>Anmelden</button>
+                <br />
-            </form>
+                <button type="submit" onClick={submit}>Anmelden</button>
+              </form>
+            }
           </div>
         </>
       )}
       <footer>
         <p>
-          
+          <button type="button" onClick={() => setShowManagement(!showManagement)} style={{ marginRight: '20px', cursor: 'pointer' }}>Verwaltung { showManagement ? "schließen" : "öffnen" }</button>
-          <a onClick={() => setShowManagement(true)} style={{ marginRight: '20px', cursor: 'pointer' }}>Verwaltung öffnen</a>
           Bildquelle Hintergrund: <a href="https://store-images.s-microsoft.com/image/apps.42739.13510798887965433.cf25521d-d390-432c-8007-cbc0aa3ebe97.53ed75d0-4a6a-4c11-a3ae-fd528ef6444a?h=1280" target="_blank" rel="noopener noreferrer">hier klicken</a>
         </p>
       </footer>