fix(vote): fix bulk del sql issue

feat(frontend): add swipe to unlock page and various text changes
feat(frontend): add delete all buttons to admin page
2026-06-26 00:12:52 +02:00 · 2026-06-25 19:56:50 +02:00 · 2026-06-24 15:56:53 +02:00 · 2026-06-24 15:56:37 +02:00
10 changed files with 240 additions and 17 deletions
@@ -2,7 +2,7 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/png" href="/favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Outfit-Voting Abi26</title>
  </head>
@@ -57,8 +57,12 @@

@media (max-width: 600px) {
  .app-header {
-    flex-direction: column;
-    gap: 1rem;
    padding: 1rem;
  }
+  .header-brand {
+    gap: 0.5rem;
+  }
+  .header-title {
+    font-size: 1.1rem;
+  }
 }
@@ -0,0 +1,66 @@
+.slide-control {
+  position: relative;
+  height: 78px;
+  border-radius: 999px;
+  border: 1px solid rgba(255, 255, 255, 0.09);
+  background: rgba(8, 11, 16, 0.88);
+  padding: 4px;
+  user-select: none;
+  touch-action: none;
+  cursor: pointer;
+  overflow: hidden;
+  max-width: 400px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+.slide-control::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(90deg, rgba(22, 193, 231, 0.26), transparent 44%);
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.slide-control.is-dragging {
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+.slide-label,
+.slide-hint {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  pointer-events: none;
+}
+
+.slide-label {
+  font-size: 1.15rem;
+  letter-spacing: 0.015em;
+  color: rgba(248, 251, 255, 0.86);
+}
+
+.slide-hint {
+  margin-top: 46px;
+  font-size: 0.77rem;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: rgba(190, 210, 225, 0.57);
+}
+
+.slide-knob {
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  width: 68px;
+  height: 68px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  color: #04070b;
+  background: linear-gradient(180deg, #fff 0%, #e8ecf0 100%);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
+  transition: transform 160ms ease;
+}
@@ -0,0 +1,87 @@
+import { ArrowRight } from 'lucide-react';
+import { useRef, useState, type PointerEvent } from 'react';
+import './SlideToContinue.css';
+
+interface SlideToContinueProps {
+  label: string;
+  onComplete: () => void;
+}
+
+const KNOB_SIZE = 68;
+const TRACK_PADDING = 4;
+const COMPLETE_THRESHOLD = 0.84;
+
+export function SlideToContinue({ label, onComplete }: SlideToContinueProps) {
+  const trackRef = useRef<HTMLDivElement | null>(null);
+  const [position, setPosition] = useState(0);
+  const [dragging, setDragging] = useState(false);
+
+  const moveKnob = (clientX: number) => {
+    const track = trackRef.current;
+    if (!track) return;
+
+    const bounds = track.getBoundingClientRect();
+    const max = Math.max(bounds.width - KNOB_SIZE - TRACK_PADDING * 2, 1);
+    const next = clientX - bounds.left - KNOB_SIZE / 2 - TRACK_PADDING;
+    const clamped = Math.min(Math.max(next, 0), max);
+    setPosition(clamped);
+  };
+
+  const completeIfNeeded = () => {
+    const track = trackRef.current;
+    if (!track) return;
+
+    const max = Math.max(track.getBoundingClientRect().width - KNOB_SIZE - TRACK_PADDING * 2, 1);
+    if (position / max >= COMPLETE_THRESHOLD) {
+      setPosition(max);
+      onComplete();
+      return;
+    }
+
+    setPosition(0);
+  };
+
+  const handlePointerDown = (event: PointerEvent<HTMLDivElement>) => {
+    event.currentTarget.setPointerCapture(event.pointerId);
+    setDragging(true);
+    moveKnob(event.clientX);
+  };
+
+  const handlePointerMove = (event: PointerEvent<HTMLDivElement>) => {
+    if (!dragging) return;
+    moveKnob(event.clientX);
+  };
+
+  const handlePointerUp = (event: PointerEvent<HTMLDivElement>) => {
+    if (!dragging) return;
+    event.currentTarget.releasePointerCapture(event.pointerId);
+    setDragging(false);
+    completeIfNeeded();
+  };
+
+  return (
+    <div
+      ref={trackRef}
+      className={`slide-control${dragging ? ' is-dragging' : ''}`}
+      onPointerDown={handlePointerDown}
+      onPointerMove={handlePointerMove}
+      onPointerUp={handlePointerUp}
+      onPointerCancel={handlePointerUp}
+      role="button"
+      tabIndex={0}
+      aria-label={label}
+      onKeyDown={(event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault();
+          onComplete();
+        }
+      }}
+    >
+      <span className="slide-label">{label}</span>
+      <span className="slide-hint">Nach rechts wischen</span>
+      <span className="slide-knob" style={{ transform: `translateX(${position}px)` }}>
+        <ArrowRight size={28} />
+      </span>
+    </div>
+  );
+}
@@ -81,7 +81,7 @@ a {

@media (max-width: 768px) {
  .app-container {
-    padding: 120px 1rem 1rem 1rem;
+    padding: 140px 1rem 1rem 1rem;
  }
 }

@@ -134,6 +134,36 @@ export default function AdminPage() {
    });
  };

+  const handleDeleteCategory = (cat: string) => {
+    const catIds = options.filter(o => o.Category === cat).map(o => o.ID);
+    if (catIds.length === 0) return;
+    openDialog(
+      "Kategorie leeren?",
+      `Möchtest du wirklich alle ${catIds.length} Einträge in der Kategorie "${cat}" unwiderruflich löschen?`,
+      async () => {
+        await api.bulkDeleteVoteEntries(catIds);
+        setSelectedIds(new Set([...selectedIds].filter(id => !catIds.includes(id))));
+        loadData();
+        closeDialog();
+      }
+    );
+  };
+
+  const handleDeleteAll = () => {
+    if (options.length === 0) return;
+    openDialog(
+      "Alle Einträge löschen?",
+      `ACHTUNG: Möchtest du wirklich ALLE ${options.length} Einträge unwiderruflich löschen?`,
+      async () => {
+        const allIds = options.map(o => o.ID);
+        await api.bulkDeleteVoteEntries(allIds);
+        setSelectedIds(new Set());
+        loadData();
+        closeDialog();
+      }
+    );
+  };
+
  const saveEdit = async (id: string) => {
    await api.setVoteCount(id, editVotes);
    setEditId(null);
@@ -205,13 +235,19 @@ export default function AdminPage() {
        </div>
      </div>

-      {selectedIds.size > 0 && (
+      {selectedIds.size > 0 ? (
        <div className="bulk-actions panel">
          <span>{selectedIds.size} Einträge ausgewählt</span>
          <button className="btn-danger" onClick={handleBulkDelete}>
            <Trash2 size={18} /> Ausgewählte Löschen
          </button>
        </div>
+      ) : options.length > 0 && (
+        <div className="bulk-actions panel" style={{ justifyContent: 'flex-end' }}>
+          <button className="btn-danger" onClick={handleDeleteAll}>
+            <Trash2 size={18} /> Alle Kategorien & Einträge löschen
+          </button>
+        </div>
      )}

      <div className="admin-tables">
@@ -245,13 +281,18 @@ export default function AdminPage() {
                    style={{ padding: '0.4rem 0.8rem', borderRadius: 'var(--radius-m)', background: 'rgba(255,255,255,0.05)', border: '1px solid var(--panel-border)', fontSize: '0.9rem', width: '160px' }}
                  />
                </div>
-                <button className="btn-icon add-to-cat" onClick={() => {
-                  setBulkCategory(cat);
-                  window.scrollTo({ top: 0, behavior: 'smooth' });
-                  setTimeout(() => document.getElementById('bulkNames')?.focus(), 300);
-                }}>
-                  <Plus size={16} /> Hier hinzufügen
-                </button>
+                <div style={{ display: 'flex', gap: '0.5rem' }}>
+                  <button className="btn-icon add-to-cat" onClick={() => {
+                    setBulkCategory(cat);
+                    window.scrollTo({ top: 0, behavior: 'smooth' });
+                    setTimeout(() => document.getElementById('bulkNames')?.focus(), 300);
+                  }}>
+                    <Plus size={16} /> Hier hinzufügen
+                  </button>
+                  <button className="btn-icon delete" onClick={() => handleDeleteCategory(cat)}>
+                    <Trash2 size={16} /> Alle löschen
+                  </button>
+                </div>
              </div>
              <table className="admin-table">
                <thead>
@@ -3,6 +3,7 @@ import { api } from '../../api';
 import type { VoteOption } from '../../types';
 import { LockScreen } from '../../components/LockScreen';
 import { SearchableSelect } from '../../components/SearchableSelect';
+import { SlideToContinue } from '../../components/SlideToContinue';
 import { Header } from '../../components/Header';
 import { Check } from 'lucide-react';
 import './Voting.css';
@@ -13,6 +14,7 @@ export default function VotingPage() {
  const [options, setOptions] = useState<VoteOption[]>([]);
  const [selections, setSelections] = useState<Record<string, string>>({});
  const [submitted, setSubmitted] = useState<Record<string, boolean>>({});
+  const [introUnlocked, setIntroUnlocked] = useState<boolean>(false);

  useEffect(() => {
    document.title = 'Abstimmen - Outfit-Voting Abi26';
@@ -94,12 +96,31 @@ export default function VotingPage() {
    );
  }

+  const handleUnlockIntro = () => {
+    setIntroUnlocked(true);
+  };
+
+  if (!introUnlocked) {
+    return (
+      <>
+        <Header showResultsLink={true} />
+        <div className="voting-page" style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', textAlign: 'center', minHeight: '60vh', padding: '2rem' }}>
+          <h1 className="page-title" style={{ fontSize: '2.4rem', marginBottom: '1.5rem', fontFamily: "'Sora', sans-serif" }}>Outfit des Abends Voting</h1>
+          <p className="page-subtitle" style={{ maxWidth: '600px', margin: '2rem auto 4rem auto', lineHeight: '1.7', fontSize: '1.15rem' }}>
+            Auf dieser Seite kannst du für das beste Outfit des Abends des Abi-Jahrgangs 2026 der Goetheschule Wetzlar abstimmen.
+          </p>
+          <SlideToContinue label="Weiter zum Voting" onComplete={handleUnlockIntro} />
+        </div>
+      </>
+    );
+  }
+
  return (
    <>
      <Header showResultsLink={true} />
      <div className="voting-page">
        <h1 className="page-title">Outfit Voting</h1>
-        <p className="page-subtitle">Wähle deine Favoriten in jeder Kategorie.</p>
+        <p className="page-subtitle">Wähle deinen Favoriten in jeder Kategorie.</p>
      
      <div className="categories-grid">
        {categories.map(cat => {
@@ -3,6 +3,7 @@ package database
 import (
 	"errors"
 	"fmt"
+	"log"
 	"strings"

 	"tomatentum.net/outfit-voting-abi26/internal/util"
@@ -16,7 +17,7 @@ const BULKINSERTVOTEENTRY string = "INSERT INTO vote(id, category, name, votes)
 const SETVOTE string = "UPDATE vote SET votes = $1 WHERE id = $2"
 const INCVOTE string = "UPDATE vote SET votes = votes + 1 WHERE id = $1"
 const DELVOTEENTRY string = "DELETE FROM vote WHERE id = $1"
-const BULKDELVOTEENTRY string = "DELETE FROM vote WHERE key IN (%s)"
+const BULKDELVOTEENTRY string = "DELETE FROM vote WHERE id IN (%s)"
 const GETVOTES string = "SELECT * FROM vote ORDER BY votes DESC"
 const GETVOTEOPTIONS string = "SELECT id, category, name FROM vote"
 const GETVOTE string = "SELECT * FROM vote WHERE id = $1"
@@ -120,12 +121,16 @@ func DelVoteEntry(id string) error {
 func BulkDelVoteEntry(ids []string) error {

 	placeholders := make([]string, len(ids))
+	args := make([]any, len(ids))

 	for i := 0; i < len(ids); i++ {
-		placeholders = append(placeholders, fmt.Sprintf("$%d", i))
+		placeholders[i] = fmt.Sprintf("$%d", i+1)
+		args[i] = ids[i]
 	}

-	res, err := db.Exec(fmt.Sprintf(BULKDELVOTEENTRY, strings.Join(placeholders, ", ")), ids)
+	stmnt := fmt.Sprintf(BULKDELVOTEENTRY, strings.Join(placeholders, ", "))
+	log.Println(stmnt)
+	res, err := db.Exec(stmnt, args...)

 	if err != nil {
 		return err
Author	SHA1	Message	Date
tueem	6a363a7f1a	fix(vote): fix bulk del sql issue docker / docker (push) Successful in 3m43s Details build / Go-Build (push) Successful in 46s Details	2026-06-26 00:12:52 +02:00
tueem	313d0d418c	feat(frontend): add swipe to unlock page and various text changes build / Go-Build (push) Successful in 45s Details docker / docker (push) Successful in 5m17s Details	2026-06-25 19:56:50 +02:00
tueem	8587b9577a	feat(frontend): add delete all buttons to admin page build / Go-Build (push) Successful in 1m31s Details docker / docker (push) Successful in 4m17s Details	2026-06-24 15:56:53 +02:00
tueem	9911eaf812	feat(frontend): change favicon	2026-06-24 15:56:37 +02:00