feat(pwa): Schreib-Aktionen zeigen Offline-Toast statt stillem Fail
All checks were successful
Build & Publish Docker Image / build-and-push (push) Successful in 1m18s
All checks were successful
Build & Publish Docker Image / build-and-push (push) Successful in 1m18s
Neuer Helper requireOnline(action) prüft vor jedem Schreib-Fetch
den Online-Status. Offline: ein Toast erscheint ("Die Aktion braucht
eine Internet-Verbindung."), Aktion bricht sauber ab. Der Button-
State bleibt unverändert (kein optimistisches Update, das gleich
wieder zurückgedreht werden müsste).
Eingebaut in Rezept-Detail (8 Handler), Register (2), Wunschliste
(2), Admin Domains/Profile/Backup, Home-Dismiss.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
10
src/lib/client/require-online.ts
Normal file
10
src/lib/client/require-online.ts
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
import { network } from './network.svelte';
|
||||||
|
import { toastStore } from './toast.svelte';
|
||||||
|
|
||||||
|
// Soll vor jedem Schreib-Fetch aufgerufen werden. Liefert true wenn
|
||||||
|
// online (User darf weitermachen) oder false + Toast wenn offline.
|
||||||
|
export function requireOnline(action = 'Die Aktion'): boolean {
|
||||||
|
if (network.online) return true;
|
||||||
|
toastStore.error(`${action} braucht eine Internet-Verbindung.`);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
@@ -10,6 +10,7 @@
|
|||||||
import SearchFilter from '$lib/components/SearchFilter.svelte';
|
import SearchFilter from '$lib/components/SearchFilter.svelte';
|
||||||
import { profileStore } from '$lib/client/profile.svelte';
|
import { profileStore } from '$lib/client/profile.svelte';
|
||||||
import { searchFilterStore } from '$lib/client/search-filter.svelte';
|
import { searchFilterStore } from '$lib/client/search-filter.svelte';
|
||||||
|
import { requireOnline } from '$lib/client/require-online';
|
||||||
|
|
||||||
const LOCAL_PAGE = 30;
|
const LOCAL_PAGE = 30;
|
||||||
|
|
||||||
@@ -357,6 +358,7 @@
|
|||||||
async function dismissFromRecent(recipeId: number, e: MouseEvent) {
|
async function dismissFromRecent(recipeId: number, e: MouseEvent) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
|
if (!requireOnline('Das Entfernen')) return;
|
||||||
recent = recent.filter((r) => r.id !== recipeId);
|
recent = recent.filter((r) => r.id !== recipeId);
|
||||||
await fetch(`/api/recipes/${recipeId}`, {
|
await fetch(`/api/recipes/${recipeId}`, {
|
||||||
method: 'PATCH',
|
method: 'PATCH',
|
||||||
|
|||||||
@@ -3,6 +3,7 @@
|
|||||||
import { Pencil, Check, X, Globe } from 'lucide-svelte';
|
import { Pencil, Check, X, Globe } from 'lucide-svelte';
|
||||||
import type { AllowedDomain } from '$lib/types';
|
import type { AllowedDomain } from '$lib/types';
|
||||||
import { confirmAction, alertAction } from '$lib/client/confirm.svelte';
|
import { confirmAction, alertAction } from '$lib/client/confirm.svelte';
|
||||||
|
import { requireOnline } from '$lib/client/require-online';
|
||||||
|
|
||||||
let domains = $state<AllowedDomain[]>([]);
|
let domains = $state<AllowedDomain[]>([]);
|
||||||
let loading = $state(true);
|
let loading = $state(true);
|
||||||
@@ -25,6 +26,7 @@
|
|||||||
async function add() {
|
async function add() {
|
||||||
errored = null;
|
errored = null;
|
||||||
if (!newDomain.trim()) return;
|
if (!newDomain.trim()) return;
|
||||||
|
if (!requireOnline('Das Hinzufügen')) return;
|
||||||
adding = true;
|
adding = true;
|
||||||
const res = await fetch('/api/domains', {
|
const res = await fetch('/api/domains', {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
@@ -59,6 +61,7 @@
|
|||||||
|
|
||||||
async function saveEdit(d: AllowedDomain) {
|
async function saveEdit(d: AllowedDomain) {
|
||||||
if (!editDomain.trim()) return;
|
if (!editDomain.trim()) return;
|
||||||
|
if (!requireOnline('Das Speichern')) return;
|
||||||
saving = true;
|
saving = true;
|
||||||
try {
|
try {
|
||||||
const res = await fetch(`/api/domains/${d.id}`, {
|
const res = await fetch(`/api/domains/${d.id}`, {
|
||||||
@@ -92,6 +95,7 @@
|
|||||||
destructive: true
|
destructive: true
|
||||||
});
|
});
|
||||||
if (!ok) return;
|
if (!ok) return;
|
||||||
|
if (!requireOnline('Das Entfernen')) return;
|
||||||
await fetch(`/api/domains/${d.id}`, { method: 'DELETE' });
|
await fetch(`/api/domains/${d.id}`, { method: 'DELETE' });
|
||||||
await load();
|
await load();
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { profileStore } from '$lib/client/profile.svelte';
|
import { profileStore } from '$lib/client/profile.svelte';
|
||||||
import { confirmAction, alertAction } from '$lib/client/confirm.svelte';
|
import { confirmAction, alertAction } from '$lib/client/confirm.svelte';
|
||||||
|
import { requireOnline } from '$lib/client/require-online';
|
||||||
|
|
||||||
let newName = $state('');
|
let newName = $state('');
|
||||||
let newEmoji = $state('🍳');
|
let newEmoji = $state('🍳');
|
||||||
@@ -10,6 +11,7 @@
|
|||||||
async function add() {
|
async function add() {
|
||||||
errored = null;
|
errored = null;
|
||||||
if (!newName.trim()) return;
|
if (!newName.trim()) return;
|
||||||
|
if (!requireOnline('Das Anlegen')) return;
|
||||||
adding = true;
|
adding = true;
|
||||||
try {
|
try {
|
||||||
await profileStore.create(newName.trim(), newEmoji || null);
|
await profileStore.create(newName.trim(), newEmoji || null);
|
||||||
@@ -24,6 +26,7 @@
|
|||||||
async function rename(id: number, currentName: string) {
|
async function rename(id: number, currentName: string) {
|
||||||
const next = prompt('Neuer Name:', currentName);
|
const next = prompt('Neuer Name:', currentName);
|
||||||
if (!next || next === currentName) return;
|
if (!next || next === currentName) return;
|
||||||
|
if (!requireOnline('Das Umbenennen')) return;
|
||||||
const res = await fetch(`/api/profiles/${id}`, {
|
const res = await fetch(`/api/profiles/${id}`, {
|
||||||
method: 'PATCH',
|
method: 'PATCH',
|
||||||
headers: { 'content-type': 'application/json' },
|
headers: { 'content-type': 'application/json' },
|
||||||
@@ -49,6 +52,7 @@
|
|||||||
destructive: true
|
destructive: true
|
||||||
});
|
});
|
||||||
if (!ok) return;
|
if (!ok) return;
|
||||||
|
if (!requireOnline('Das Löschen')) return;
|
||||||
await fetch(`/api/profiles/${id}`, { method: 'DELETE' });
|
await fetch(`/api/profiles/${id}`, { method: 'DELETE' });
|
||||||
if (profileStore.activeId === id) profileStore.clear();
|
if (profileStore.activeId === id) profileStore.clear();
|
||||||
await profileStore.load();
|
await profileStore.load();
|
||||||
|
|||||||
@@ -3,6 +3,7 @@
|
|||||||
import { CookingPot, Link, Plus, ChevronDown, Pencil } from 'lucide-svelte';
|
import { CookingPot, Link, Plus, ChevronDown, Pencil } from 'lucide-svelte';
|
||||||
import { goto } from '$app/navigation';
|
import { goto } from '$app/navigation';
|
||||||
import { alertAction } from '$lib/client/confirm.svelte';
|
import { alertAction } from '$lib/client/confirm.svelte';
|
||||||
|
import { requireOnline } from '$lib/client/require-online';
|
||||||
import type { PageData } from './$types';
|
import type { PageData } from './$types';
|
||||||
|
|
||||||
let { data }: { data: PageData } = $props();
|
let { data }: { data: PageData } = $props();
|
||||||
@@ -35,12 +36,14 @@
|
|||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
const url = importUrl.trim();
|
const url = importUrl.trim();
|
||||||
if (!url) return;
|
if (!url) return;
|
||||||
|
if (!requireOnline('Der URL-Import')) return;
|
||||||
importOpen = false;
|
importOpen = false;
|
||||||
goto(`/preview?url=${encodeURIComponent(url)}`);
|
goto(`/preview?url=${encodeURIComponent(url)}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
async function createBlank() {
|
async function createBlank() {
|
||||||
if (creatingBlank) return;
|
if (creatingBlank) return;
|
||||||
|
if (!requireOnline('Das Anlegen')) return;
|
||||||
menuOpen = false;
|
menuOpen = false;
|
||||||
creatingBlank = true;
|
creatingBlank = true;
|
||||||
try {
|
try {
|
||||||
|
|||||||
@@ -20,6 +20,7 @@
|
|||||||
import { profileStore } from '$lib/client/profile.svelte';
|
import { profileStore } from '$lib/client/profile.svelte';
|
||||||
import { wishlistStore } from '$lib/client/wishlist.svelte';
|
import { wishlistStore } from '$lib/client/wishlist.svelte';
|
||||||
import { confirmAction, alertAction } from '$lib/client/confirm.svelte';
|
import { confirmAction, alertAction } from '$lib/client/confirm.svelte';
|
||||||
|
import { requireOnline } from '$lib/client/require-online';
|
||||||
import type { CommentRow } from '$lib/server/recipes/actions';
|
import type { CommentRow } from '$lib/server/recipes/actions';
|
||||||
|
|
||||||
let { data } = $props();
|
let { data } = $props();
|
||||||
@@ -69,6 +70,7 @@
|
|||||||
ingredients: typeof data.recipe.ingredients;
|
ingredients: typeof data.recipe.ingredients;
|
||||||
steps: typeof data.recipe.steps;
|
steps: typeof data.recipe.steps;
|
||||||
}) {
|
}) {
|
||||||
|
if (!requireOnline('Das Speichern')) return;
|
||||||
saving = true;
|
saving = true;
|
||||||
try {
|
try {
|
||||||
const res = await fetch(`/api/recipes/${data.recipe.id}`, {
|
const res = await fetch(`/api/recipes/${data.recipe.id}`, {
|
||||||
@@ -127,6 +129,7 @@
|
|||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
if (!requireOnline('Das Rating')) return;
|
||||||
await fetch(`/api/recipes/${data.recipe.id}/rating`, {
|
await fetch(`/api/recipes/${data.recipe.id}/rating`, {
|
||||||
method: 'PUT',
|
method: 'PUT',
|
||||||
headers: { 'content-type': 'application/json' },
|
headers: { 'content-type': 'application/json' },
|
||||||
@@ -145,6 +148,7 @@
|
|||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
if (!requireOnline('Das Favorit-Setzen')) return;
|
||||||
const profileId = profileStore.active.id;
|
const profileId = profileStore.active.id;
|
||||||
const wasFav = isFav;
|
const wasFav = isFav;
|
||||||
const method = wasFav ? 'DELETE' : 'PUT';
|
const method = wasFav ? 'DELETE' : 'PUT';
|
||||||
@@ -167,6 +171,7 @@
|
|||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
if (!requireOnline('Der Kochjournal-Eintrag')) return;
|
||||||
const res = await fetch(`/api/recipes/${data.recipe.id}/cooked`, {
|
const res = await fetch(`/api/recipes/${data.recipe.id}/cooked`, {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: { 'content-type': 'application/json' },
|
headers: { 'content-type': 'application/json' },
|
||||||
@@ -188,6 +193,7 @@
|
|||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
if (!requireOnline('Das Speichern des Kommentars')) return;
|
||||||
const text = newComment.trim();
|
const text = newComment.trim();
|
||||||
if (!text) return;
|
if (!text) return;
|
||||||
const res = await fetch(`/api/recipes/${data.recipe.id}/comments`, {
|
const res = await fetch(`/api/recipes/${data.recipe.id}/comments`, {
|
||||||
@@ -219,6 +225,7 @@
|
|||||||
destructive: true
|
destructive: true
|
||||||
});
|
});
|
||||||
if (!ok) return;
|
if (!ok) return;
|
||||||
|
if (!requireOnline('Das Löschen')) return;
|
||||||
await fetch(`/api/recipes/${data.recipe.id}`, { method: 'DELETE' });
|
await fetch(`/api/recipes/${data.recipe.id}`, { method: 'DELETE' });
|
||||||
goto('/');
|
goto('/');
|
||||||
}
|
}
|
||||||
@@ -242,6 +249,7 @@
|
|||||||
editingTitle = false;
|
editingTitle = false;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
if (!requireOnline('Das Umbenennen')) return;
|
||||||
const res = await fetch(`/api/recipes/${data.recipe.id}`, {
|
const res = await fetch(`/api/recipes/${data.recipe.id}`, {
|
||||||
method: 'PATCH',
|
method: 'PATCH',
|
||||||
headers: { 'content-type': 'application/json' },
|
headers: { 'content-type': 'application/json' },
|
||||||
@@ -277,6 +285,7 @@
|
|||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
if (!requireOnline('Das Wunschlisten-Setzen')) return;
|
||||||
const profileId = profileStore.active.id;
|
const profileId = profileStore.active.id;
|
||||||
const wasOn = onMyWishlist;
|
const wasOn = onMyWishlist;
|
||||||
if (wasOn) {
|
if (wasOn) {
|
||||||
|
|||||||
@@ -4,6 +4,7 @@
|
|||||||
import { profileStore } from '$lib/client/profile.svelte';
|
import { profileStore } from '$lib/client/profile.svelte';
|
||||||
import { wishlistStore } from '$lib/client/wishlist.svelte';
|
import { wishlistStore } from '$lib/client/wishlist.svelte';
|
||||||
import { alertAction, confirmAction } from '$lib/client/confirm.svelte';
|
import { alertAction, confirmAction } from '$lib/client/confirm.svelte';
|
||||||
|
import { requireOnline } from '$lib/client/require-online';
|
||||||
import type { WishlistEntry, SortKey } from '$lib/server/wishlist/repository';
|
import type { WishlistEntry, SortKey } from '$lib/server/wishlist/repository';
|
||||||
|
|
||||||
const SORT_OPTIONS: { value: SortKey; label: string }[] = [
|
const SORT_OPTIONS: { value: SortKey; label: string }[] = [
|
||||||
@@ -41,6 +42,7 @@
|
|||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
if (!requireOnline('Die Wunschlisten-Aktion')) return;
|
||||||
const profileId = profileStore.active.id;
|
const profileId = profileStore.active.id;
|
||||||
if (entry.on_my_wishlist) {
|
if (entry.on_my_wishlist) {
|
||||||
await fetch(`/api/wishlist/${entry.recipe_id}?profile_id=${profileId}`, {
|
await fetch(`/api/wishlist/${entry.recipe_id}?profile_id=${profileId}`, {
|
||||||
@@ -65,6 +67,7 @@
|
|||||||
destructive: true
|
destructive: true
|
||||||
});
|
});
|
||||||
if (!ok) return;
|
if (!ok) return;
|
||||||
|
if (!requireOnline('Das Entfernen')) return;
|
||||||
await fetch(`/api/wishlist/${entry.recipe_id}?all=true`, { method: 'DELETE' });
|
await fetch(`/api/wishlist/${entry.recipe_id}?all=true`, { method: 'DELETE' });
|
||||||
await load();
|
await load();
|
||||||
void wishlistStore.refresh();
|
void wishlistStore.refresh();
|
||||||
|
|||||||
Reference in New Issue
Block a user