Zahlungen: Ladefehler sichtbar machen statt ewig "Wird geladen"

Rueckmeldung 23.08.2026: "da steht das aber passiert nichts" -- der
Reiter Zahlungen zeigte in beiden Kaesten dauerhaft "Wird geladen...".

Geprueft statt vermutet: Der Server antwortet (401 auf unangemeldete
Anfragen, Webhook 400), die ausgelieferte Seite enthaelt die Funktion,
und lokal nachgestellt laeuft der Ablauf sauber durch. Die Anfrage
bricht nach 15 Sekunden von selbst ab.

Der eigentliche Mangel liegt woanders und ist meiner: Ein Ladehinweis
ohne Ende ist die schlechteste aller Rueckmeldungen. Er sieht aus wie
Arbeit und ist doch nur Stillstand -- man kann nicht unterscheiden, ob
die Anfrage laeuft, fehlgeschlagen ist oder das Skript gar nicht
angesprungen ist. Und wenn der Fehler dann kommt, verschwindet er in
einer Meldung am Bildschirmrand.

DREI AENDERUNGEN

Jeder Fehler wird im Kasten selbst angezeigt, mit STATUSNUMMER im
Klartext ("Konnte nicht geladen werden (Status 403)"). Die kann Filipe
mir nennen, ohne die Entwicklerwerkzeuge zu oeffnen -- 403 heisst etwas
voellig anderes als 500 oder "keine Verbindung", und ohne diese Zahl
raet man.

Dazu ein Knopf "Nochmal versuchen". Bei einem Aussetzer im Mobilfunk ist
das der ganze Unterschied zwischen "geht nicht" und "geht doch".

Die statischen "Wird geladen..."-Texte im HTML sind raus. Der Kasten ist
jetzt leer, bis das Skript ihn fuellt -- und die Ladetexte lauten anders
als vorher. Bleibt spaeter der alte Text stehen, weiss man sofort: Die
Funktion ist nie angelaufen. Das ist eine Aussage, "Wird geladen" war
keine.

Auch die Zahlungsliste verschluckt ihren Fehler nicht mehr. Sie leerte
den Kasten stillschweigend -- ein leerer Bereich ohne Erklaerung ist
nicht weniger verwirrend als ein haengender Ladehinweis.

GEPRUEFT: alle vier Zustaende im Browser nachgestellt -- Serverfehler
500, kein Zugriff 403, Netzausfall und Erfolgsfall. In den ersten drei
erscheint Klartext samt Wiederholen-Knopf, im vierten der normale
Inhalt. Verwaltung weiterhin 69 von 69.

Versionsstempel und Cache-Name auf v11.

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
2026-08-23 17:07:35 +02:00
co-authored by Claude Opus 5
parent 497c576d1c
commit d68d10d002
14 changed files with 91 additions and 59 deletions
+4 -4
View File
@@ -13,8 +13,8 @@
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd10" />
<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd10" />
<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd11" />
<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd11" />
<style>
/* Zeitstrahl: die Linie verbindet die Nummernkreise. Sie liegt hinter
den Kreisen (z-index) und endet beim letzten Schritt, damit sie nicht
@@ -183,7 +183,7 @@
<div id="wd-fuss"></div>
<script src="/assets/js/i18n-wd-ablauf.js?v=20260823wd10"></script>
<script src="/assets/js/wd-core.js?v=20260823wd10"></script>
<script src="/assets/js/i18n-wd-ablauf.js?v=20260823wd11"></script>
<script src="/assets/js/wd-core.js?v=20260823wd11"></script>
</body>
</html>
+5 -5
View File
@@ -13,8 +13,8 @@
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd10" />
<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd10" />
<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd11" />
<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd11" />
<style>
/* ---------- Schrittanzeige ----------
Zeigt alle vier Schritte gleichzeitig statt nur "3 von 4". Man sieht
@@ -418,8 +418,8 @@
<div id="wd-fuss"></div>
<script src="/assets/js/i18n-wd-anfrage.js?v=20260823wd10"></script>
<script src="/assets/js/wd-core.js?v=20260823wd10"></script>
<script src="/assets/js/wd-anfrage.js?v=20260823wd10"></script>
<script src="/assets/js/i18n-wd-anfrage.js?v=20260823wd11"></script>
<script src="/assets/js/wd-core.js?v=20260823wd11"></script>
<script src="/assets/js/wd-anfrage.js?v=20260823wd11"></script>
</body>
</html>
+4 -4
View File
@@ -13,8 +13,8 @@
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd10" />
<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd10" />
<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd11" />
<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd11" />
<style>
.fq-thema { scroll-margin-top: 90px; }
.fq-thema + .fq-thema { margin-top: clamp(2rem, 4vw, 3rem); }
@@ -195,7 +195,7 @@
<div id="wd-fuss"></div>
<script src="/assets/js/i18n-wd-faq.js?v=20260823wd10"></script>
<script src="/assets/js/wd-core.js?v=20260823wd10"></script>
<script src="/assets/js/i18n-wd-faq.js?v=20260823wd11"></script>
<script src="/assets/js/wd-core.js?v=20260823wd11"></script>
</body>
</html>
+4 -4
View File
@@ -16,8 +16,8 @@
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd10" />
<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd10" />
<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd11" />
<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd11" />
<style>
/* ---------- Nur auf der Startseite gebraucht ---------- */
@@ -407,8 +407,8 @@
<div id="wd-fuss"></div>
<script src="/assets/js/i18n-wd-index.js?v=20260823wd10"></script>
<script src="/assets/js/wd-core.js?v=20260823wd10"></script>
<script src="/assets/js/i18n-wd-index.js?v=20260823wd11"></script>
<script src="/assets/js/wd-core.js?v=20260823wd11"></script>
<script>
/* ---------------------------------------------------------------------
Marken-Intro (Masterplan S.3, Schritt 02: "Nach erfolgreichem Code
+4 -4
View File
@@ -13,8 +13,8 @@
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd10" />
<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd10" />
<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd11" />
<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd11" />
<style>
/* Sprungmarken.
Frueher eine waagerecht wischbare Leiste. Rueckmeldung 22.08.2026:
@@ -331,7 +331,7 @@
<div id="wd-fuss"></div>
<script src="/assets/js/i18n-wd-leistungen.js?v=20260823wd10"></script>
<script src="/assets/js/wd-core.js?v=20260823wd10"></script>
<script src="/assets/js/i18n-wd-leistungen.js?v=20260823wd11"></script>
<script src="/assets/js/wd-core.js?v=20260823wd11"></script>
</body>
</html>
+5 -5
View File
@@ -12,8 +12,8 @@
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd10" />
<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd10" />
<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd11" />
<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd11" />
<style>
.po-login { max-width: 440px; margin: clamp(1.5rem,6vh,4rem) auto; }
@@ -134,8 +134,8 @@
<div id="wd-fuss"></div>
<script src="/assets/js/i18n-wd-portal.js?v=20260823wd10"></script>
<script src="/assets/js/wd-core.js?v=20260823wd10"></script>
<script src="/assets/js/wd-portal.js?v=20260823wd10"></script>
<script src="/assets/js/i18n-wd-portal.js?v=20260823wd11"></script>
<script src="/assets/js/wd-core.js?v=20260823wd11"></script>
<script src="/assets/js/wd-portal.js?v=20260823wd11"></script>
</body>
</html>
+4 -4
View File
@@ -13,8 +13,8 @@
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd10" />
<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd10" />
<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd11" />
<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd11" />
<style>
.pfo-projekt { overflow: hidden; padding: 0; margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
.pfo-bild {
@@ -192,7 +192,7 @@
<div id="wd-fuss"></div>
<script src="/assets/js/i18n-wd-portfolio.js?v=20260823wd10"></script>
<script src="/assets/js/wd-core.js?v=20260823wd10"></script>
<script src="/assets/js/i18n-wd-portfolio.js?v=20260823wd11"></script>
<script src="/assets/js/wd-core.js?v=20260823wd11"></script>
</body>
</html>
+4 -4
View File
@@ -13,8 +13,8 @@
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd10" />
<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd10" />
<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd11" />
<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd11" />
<style>
.pr-preis-gross { font-family: var(--font-head); font-weight: 800; color: var(--wd-blau); white-space: nowrap; }
@@ -196,7 +196,7 @@
<div id="wd-fuss"></div>
<script src="/assets/js/i18n-wd-preise.js?v=20260823wd10"></script>
<script src="/assets/js/wd-core.js?v=20260823wd10"></script>
<script src="/assets/js/i18n-wd-preise.js?v=20260823wd11"></script>
<script src="/assets/js/wd-core.js?v=20260823wd11"></script>
</body>
</html>
+3 -3
View File
@@ -8,8 +8,8 @@
<link rel="icon" type="image/png" href="/assets/img/favicon.png" />
<link rel="manifest" href="/webdesign/app.webmanifest" />
<meta name="theme-color" content="#05070b" />
<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd10" />
<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd10" />
<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd11" />
<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd11" />
</head>
<body class="wd">
<div id="wd-kopf"></div>
@@ -400,6 +400,6 @@
<div id="wd-fuss"></div>
<script src="/assets/js/wd-core.js?v=20260823wd10"></script>
<script src="/assets/js/wd-core.js?v=20260823wd11"></script>
</body>
</html>
+1 -1
View File
@@ -34,7 +34,7 @@
Start alle alten Zwischenspeicher weg. Muss bei jeder Änderung an den
Dateien unten hochgezählt werden, sonst hängen Nutzer auf einem alten
Stand fest. */
const CACHE_NAME = "dogfather-webdesign-v10";
const CACHE_NAME = "dogfather-webdesign-v11";
/* Bausteine, die die Oberfläche zum Anzeigen braucht. Bewusst KEINE
HTML-Datei in dieser Liste. */
+4 -4
View File
@@ -13,8 +13,8 @@
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd10" />
<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd10" />
<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd11" />
<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd11" />
<style>
.ue-kopf { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
/* Auf dem Handy zuerst der Text, dann das Bild: sonst schiebt ein
@@ -127,7 +127,7 @@
<div id="wd-fuss"></div>
<script src="/assets/js/i18n-wd-ueber.js?v=20260823wd10"></script>
<script src="/assets/js/wd-core.js?v=20260823wd10"></script>
<script src="/assets/js/i18n-wd-ueber.js?v=20260823wd11"></script>
<script src="/assets/js/wd-core.js?v=20260823wd11"></script>
</body>
</html>
+40 -8
View File
@@ -11,8 +11,8 @@
<link rel="apple-touch-icon" href="/assets/img/wd-app-180.png" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="DF Verwaltung" />
<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd10" />
<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd10" />
<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd11" />
<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd11" />
<style>
/* =====================================================================
Verwaltungsbereich — bewusst NUR AUF DEUTSCH.
@@ -728,9 +728,9 @@
<!-- ============ ZAHLUNGEN ============ -->
<div id="vw-zahlungen-bereich" hidden>
<div id="vw-pp-stand"><div class="vw-laedt">Wird geladen…</div></div>
<div id="vw-pp-stand"></div>
<h2 style="font-size:1.15rem;margin-top:1.6rem">Zahlungen</h2>
<div id="vw-zahlungen-liste"><div class="vw-laedt">Wird geladen…</div></div>
<div id="vw-zahlungen-liste"></div>
</div>
<!-- ============ POSTFACH ============ -->
@@ -761,7 +761,7 @@
<div class="vw-detail-blatt" id="vw-detail-blatt"></div>
</div>
<script src="/assets/js/wd-core.js?v=20260823wd10"></script>
<script src="/assets/js/wd-core.js?v=20260823wd11"></script>
<script>
/* =====================================================================
Verwaltung: Anfragen ansehen, Status ändern, Notizen, Archivieren.
@@ -1990,15 +1990,44 @@
hilfe: "Beginnt mit P-. Nur nötig für monatliche Betreuungs-Abos." },
];
/* Zeigt einen Fehler SICHTBAR an, statt den Ladehinweis stehen zu
lassen.
Beim ersten Einsatz blieb hier "Wird geladen…" stehen und es
passierte nichts weiter -- Filipe konnte nicht erkennen, ob die
Anfrage noch laeuft, fehlgeschlagen ist oder das Skript gar nicht
angesprungen ist. Ein Ladehinweis ohne Ende ist die schlechteste
aller Rueckmeldungen: Er sieht aus wie Arbeit und ist doch nur
Stillstand.
Deshalb: eigener Text je Zustand, die Statusnummer im Klartext (die
kann er mir nennen, ohne die Entwicklerwerkzeuge zu oeffnen) und ein
Knopf zum erneuten Versuch. */
function ladefehlerZeigen(ziel, fehler, nochmal) {
var nummer = fehler && fehler.status ? " (Status " + fehler.status + ")" : "";
ziel.innerHTML =
'<div class="wd-hinweis"><p class="wd-hinweis-titel">Konnte nicht geladen werden' +
s(nummer) + "</p>" +
'<p class="wd-klein">' + s((fehler && fehler.message) || "Unbekannter Fehler") + "</p>" +
'<div class="wd-btn-reihe" style="margin-top:.7rem">' +
'<button type="button" class="wd-btn wd-btn--zweit wd-btn--klein" id="vw-nochmal">Nochmal versuchen</button>' +
"</div></div>";
var k = document.getElementById("vw-nochmal");
if (k) k.addEventListener("click", nochmal);
}
async function ladeZahlungen() {
var ziel = document.getElementById("vw-pp-stand");
ziel.innerHTML = '<div class="vw-laedt">Wird geladen…</div>';
/* Anderer Wortlaut als im festen HTML: Steht spaeter noch der alte
Text da, weiss man, dass diese Funktion nie angelaufen ist. */
ziel.innerHTML = '<div class="vw-laedt">Einstellungen werden abgerufen…</div>';
try {
var d = await api("/webdesign/admin/einstellungen");
zeichnePayPal(d);
} catch (fehler) {
if (fehler.status === 401) { token = null; tokenSchreiben(null); zeigeAnmeldung(); return; }
ziel.innerHTML = '<div class="vw-leer-hinweis">' + s(fehler.message) + "</div>";
ladefehlerZeigen(ziel, fehler, ladeZahlungen);
return;
}
ladeZahlungsliste();
}
@@ -2153,7 +2182,10 @@
"</span></div>";
}).join("");
} catch (fehler) {
ziel.innerHTML = "";
/* Frueher wurde hier stillschweigend geleert. Ein leerer Kasten
ohne Erklaerung ist aber nicht weniger verwirrend als ein
haengender Ladehinweis. */
ladefehlerZeigen(ziel, fehler, ladeZahlungsliste);
}
}
+5 -5
View File
@@ -9,8 +9,8 @@
<link rel="icon" type="image/png" href="/assets/img/favicon.png" />
<link rel="manifest" href="/webdesign/app.webmanifest" />
<meta name="theme-color" content="#05070b" />
<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd10" />
<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd10" />
<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd11" />
<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd11" />
</head>
<body class="wd">
<div id="wd-kopf"></div>
@@ -137,8 +137,8 @@
<div id="wd-fuss"></div>
<script src="/assets/js/i18n-wd-widerruf.js?v=20260823wd10"></script>
<script src="/assets/js/wd-core.js?v=20260823wd10"></script>
<script src="/assets/js/wd-widerruf.js?v=20260823wd10"></script>
<script src="/assets/js/i18n-wd-widerruf.js?v=20260823wd11"></script>
<script src="/assets/js/wd-core.js?v=20260823wd11"></script>
<script src="/assets/js/wd-widerruf.js?v=20260823wd11"></script>
</body>
</html>
+4 -4
View File
@@ -21,8 +21,8 @@
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd10" />
<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd10" />
<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd11" />
<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd11" />
<style>
/* =====================================================================
Zugangswand — nur hier gebraucht, deshalb bewusst NICHT in
@@ -177,8 +177,8 @@
</div>
</main>
<script src="/assets/js/i18n-wd-zugang.js?v=20260823wd10"></script>
<script src="/assets/js/wd-core.js?v=20260823wd10"></script>
<script src="/assets/js/i18n-wd-zugang.js?v=20260823wd11"></script>
<script src="/assets/js/wd-core.js?v=20260823wd11"></script>
<script>
(function () {
"use strict";