Verwaltung: mehr Information pro Zeile statt leerer Flaeche

Rueckmeldung 22.08.2026 mit Bildschirmfoto: die Anfragenliste wirkte blass und leer. Zu Recht -- sie zeigte Nummer, Name, Paket, Status, Datum. Das ist korrekt, beantwortet aber nicht die Fragen, die man beim Draufschauen WIRKLICH hat. Jetzt steht in jeder Zeile: * E-Mail direkt sichtbar (vorher musste man die Anfrage dafuer oeffnen) * Paket, Budgetrahmen, Wunschtermin als eigene Marken * Sprache, falls es NICHT Deutsch ist -- dann antwortet man auch in der richtigen Sprache * ob daraus schon ein Kunde geworden ist Statt eines Datums steht dort "vor 3 Tagen". Beim Datum muss man selbst rechnen, wie lange jemand schon wartet -- und genau das ist die Frage, die zaehlt. Ab sieben Tagen ohne Bearbeitung wird die Angabe rot: eine Anfrage, die eine Woche liegt, ist ein verlorener Kunde. Ein farbiger Streifen links codiert den Status zusaetzlich zur Textmarke. Farbe ALLEIN waere fuer farbfehlsichtige Menschen keine Information -- zusammen mit dem Text ist sie ein schneller Anker beim Ueberfliegen. Der leere Zustand stellt nicht mehr nur fest, dass nichts da ist, sondern erklaert, WO Anfragen herkommen, und legt den Link zum Formular gleich daneben. Co-Authored-By: Claude Opus 5 <[email protected]>
2026-08-22 21:42:15 +02:00
parent 097e80b845
commit d93625439a
1 changed files with 100 additions and 9 deletions
@@ -74,7 +74,7 @@
  }
  .vw-karte:hover { border-color: var(--wd-rand-stark); background: rgba(127,208,232,.05); }
  .vw-karte-nr { font-family: var(--font-head); font-weight: 800; font-size: .82rem; color: var(--wd-blau); white-space: nowrap; }
-  .vw-karte-mitte { min-width: 0; }
+  .vw-karte-mitte { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
  .vw-karte-name { font-weight: 700; color: var(--wd-text); }
  .vw-karte-info { font-size: .87rem; color: var(--wd-text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .vw-karte-rechts { text-align: right; white-space: nowrap; }
@@ -144,6 +144,49 @@
    display: block; word-break: break-all; margin: .6rem 0;
    font-size: .84rem; color: var(--wd-gold); line-height: 1.5;
  }
+
+  /* ---------- Anfragekarte, gehobene Fassung ----------
+     Die erste Fassung zeigte Nummer, Name, Paket, Status, Datum. Das ist
+     korrekt, aber es beantwortet nicht die Fragen, die man beim
+     Draufschauen WIRKLICH hat: Wie dringend ist das? Wie viel Geld steckt
+     drin? Wie lange liegt es schon? Genau die stehen jetzt drin.
+
+     Ein farbiger Streifen links codiert den Status zusaetzlich zur
+     Textmarke — Farbe ALLEIN waere fuer farbfehlsichtige Menschen keine
+     Information, zusammen mit dem Text ist sie ein schneller Anker. */
+  .vw-karte {
+    position: relative;
+    overflow: hidden;
+    padding-left: 1.5rem;
+  }
+  .vw-karte::before {
+    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
+    background: var(--wd-rand-stark);
+  }
+  .vw-karte--neu::before { background: var(--wd-gold); }
+  .vw-karte--pruefung::before,
+  .vw-karte--angebot::before { background: var(--wd-blau); }
+  .vw-karte--rueckfrage::before { background: var(--wd-lila); }
+  .vw-karte--angenommen::before,
+  .vw-karte--abgeschlossen::before { background: var(--wd-ok); }
+  .vw-karte--abgelehnt::before { background: var(--wd-fehler); }
+
+  .vw-karte-marken { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }
+  .vw-mini {
+    font-size: .74rem; font-weight: 600; padding: .15rem .5rem;
+    border-radius: 6px; background: rgba(127,208,232,.09);
+    color: var(--wd-text-mid); border: 1px solid var(--wd-rand);
+    white-space: nowrap;
+  }
+  .vw-mini--geld { color: var(--wd-gold); border-color: rgba(232,200,119,.3); background: rgba(232,200,119,.07); }
+  .vw-mini--alt { color: var(--wd-fehler); border-color: rgba(255,157,157,.3); background: rgba(255,157,157,.06); }
+
+  /* Leerer Zustand — auch hier fuehren statt nur feststellen. */
+  .vw-leer-gross { text-align: center; padding: clamp(2rem,6vw,3.5rem) 1.5rem; }
+  .vw-leer-gross-symbol { font-size: 2.6rem; opacity: .45; margin-bottom: .6rem; }
+  .vw-leer-gross h3 { margin-bottom: .3em; }
+  .vw-leer-gross p { max-width: 46ch; margin-left: auto; margin-right: auto; }
+
  .vw-leer-hinweis { text-align: center; padding: 3rem 1rem; color: var(--wd-text-soft); }
  .vw-laedt { text-align: center; padding: 2.5rem 1rem; color: var(--wd-text-soft); }
 </style>
@@ -448,6 +491,29 @@
    });
  }

+
+  /* Ganze Tage seit einem Zeitpunkt. Bewusst ueber den Kalendertag
+     gerechnet, nicht ueber 24-Stunden-Bloecke: eine Anfrage von gestern
+     23:50 Uhr ist umgangssprachlich "gestern", nicht "vor 0 Tagen". */
+  function tageSeit(zeit) {
+    if (!zeit) return 0;
+    var dann = new Date(zeit);
+    if (isNaN(dann.getTime())) return 0;
+    var a = new Date(dann.getFullYear(), dann.getMonth(), dann.getDate());
+    var heute = new Date();
+    var b = new Date(heute.getFullYear(), heute.getMonth(), heute.getDate());
+    return Math.round((b - a) / 86400000);
+  }
+
+  function zeitText(tage) {
+    if (tage <= 0) return "heute";
+    if (tage === 1) return "gestern";
+    if (tage < 7) return "vor " + tage + " Tagen";
+    if (tage < 14) return "vor einer Woche";
+    if (tage < 31) return "vor " + Math.floor(tage / 7) + " Wochen";
+    return "vor " + Math.floor(tage / 30) + " Monaten";
+  }
+
  function zeichneListe() {
    var liste = document.getElementById("vw-liste");
    var gefiltert = alleAnfragen.filter(function (a) {
@@ -460,23 +526,48 @@
    });

    if (!gefiltert.length) {
-      liste.innerHTML = '<div class="vw-leer-hinweis">' +
-        (alleAnfragen.length ? "Keine Anfrage passt zu diesem Filter." :
-         filterArchiv ? "Im Archiv liegt noch nichts." : "Noch keine Anfragen eingegangen.") + "</div>";
+      /* Auch hier fuehren statt nur feststellen: Wer keine Anfragen hat,
+         soll wissen, WO sie herkommen -- und den Link gleich griffbereit
+         haben. */
+      liste.innerHTML = alleAnfragen.length
+        ? '<div class="vw-leer-hinweis">Keine Anfrage passt zu diesem Filter.</div>'
+        : filterArchiv
+          ? '<div class="vw-leer-hinweis">Im Archiv liegt noch nichts. Archivierte Anfragen bleiben vollstaendig erhalten und lassen sich jederzeit zurueckholen.</div>'
+          : '<div class="wd-karte vw-leer-gross" style="cursor:default;display:block">' +
+              '<div class="vw-leer-gross-symbol" aria-hidden="true">📬</div>' +
+              "<h3>Noch keine Anfragen</h3>" +
+              '<p class="wd-leise">Sobald jemand das Formular ausfuellt, landet die Anfrage hier — mit allem, was er angegeben hat, und du bekommst eine Benachrichtigung.</p>' +
+              '<div class="wd-btn-reihe" style="justify-content:center;margin-top:1rem">' +
+                '<a class="wd-btn wd-btn--zweit wd-btn--klein" href="/webdesign/anfrage.html" target="_blank" rel="noopener">Formular ansehen</a>' +
+                '<a class="wd-btn wd-btn--still wd-btn--klein" href="/webdesign/" target="_blank" rel="noopener">Zur Seite</a>' +
+              "</div></div>";
      return;
    }

    liste.innerHTML = gefiltert.map(function (a) {
-      return '<button type="button" class="vw-karte" data-id="' + s(a.id) + '">' +
+      var tage = tageSeit(a.erstellt_am);
+      /* "vor 3 Tagen" sagt mehr als ein Datum. Beim Datum muss man selbst
+         rechnen, wie lange jemand schon wartet -- und genau das ist die
+         Frage, die zaehlt. Ab sieben Tagen ohne Bearbeitung wird es rot:
+         eine Anfrage, die eine Woche liegt, ist ein verlorener Kunde. */
+      var liegtLange = tage >= 7 && (a.status === "neu" || a.status === "rueckfrage");
+      return '<button type="button" class="vw-karte vw-karte--' + s(a.status) + '" data-id="' + s(a.id) + '">' +
        '<span class="vw-karte-nr">' + s(a.nummer) + "</span>" +
        '<span class="vw-karte-mitte">' +
-          '<span class="vw-karte-name">' + s(a.name) + "</span><br />" +
-          '<span class="vw-karte-info">' + s(PAKET_TEXT[a.paket] || a.paket) +
-          (a.budget ? " · " + s(BUDGET_TEXT[a.budget] || a.budget) : "") + "</span>" +
+          '<span class="vw-karte-name">' + s(a.name) + "</span>" +
+          '<span class="vw-karte-info">' + s(a.email) + "</span>" +
+          '<span class="vw-karte-marken">' +
+            '<span class="vw-mini">' + s(PAKET_TEXT[a.paket] || a.paket) + "</span>" +
+            (a.budget ? '<span class="vw-mini vw-mini--geld">' + s(BUDGET_TEXT[a.budget] || a.budget) + "</span>" : "") +
+            (a.termin ? '<span class="vw-mini">Wunsch: ' + s(a.termin) + "</span>" : "") +
+            (a.sprache && a.sprache !== "de" ? '<span class="vw-mini">' + s(a.sprache.toUpperCase()) + "</span>" : "") +
+            (a.kunde_id ? '<span class="vw-mini">ist Kunde</span>' : "") +
+          "</span>" +
        "</span>" +
        '<span class="vw-karte-rechts">' +
          '<span class="vw-status vw-status--' + s(a.status) + '">' + s(STATUS_TEXT[a.status] || a.status) + "</span>" +
-          '<span class="vw-karte-zeit">' + window.WD.datum(a.erstellt_am) + "</span>" +
+          '<span class="vw-karte-zeit' + (liegtLange ? " vw-mini--alt" : "") + '">' +
+            s(zeitText(tage)) + "</span>" +
        "</span></button>";
    }).join("");