Alexander Bocken
5c8605c690
All checks were successful
CI / update (push) Successful in 2m8s
Migrated all components and routes from Svelte 4 to Svelte 5 syntax:
- Converted export let → $props() with generic type syntax
- Replaced createEventDispatcher → callback props
- Migrated $: reactive statements → $derived() and $effect()
- Updated two-way bindings with $bindable()
- Fixed TypeScript syntax: added lang="ts" to script tags
- Converted inline type annotations to generic parameter syntax
- Updated deprecated event directives to Svelte 5 syntax:
- on:click → onclick
- on:submit → onsubmit
- on:change → onchange
- Converted deprecated <slot> elements → {@render children()}
- Updated slot props to Snippet types
- Fixed season/icon selector components with {#snippet} blocks
- Fixed non-reactive state by converting let → $state()
- Fixed infinite loop in EnhancedBalance by converting $effect → $derived
- Fixed Chart.js integration by converting $state proxies to plain arrays
- Updated cospend dashboard and payment pages with proper reactivity
- Migrated 20+ route files from export let data → $props()
- Fixed TypeScript type annotations in page components
- Updated reactive statements in error and cospend routes
- Removed invalid onchange attribute from Toggle component
- Fixed modal ID isolation in CreateIngredientList/CreateStepList
- Fixed dark mode button visibility in TranslationApproval
- Build now succeeds with zero deprecation warnings
All functionality tested and working. No breaking changes to user experience.
78 lines
2.0 KiB
Svelte
78 lines
2.0 KiB
Svelte
<script lang="ts">
|
|
import { browser } from '$app/environment';
|
|
import { enhance } from '$app/forms';
|
|
|
|
let { recipeId, isFavorite = $bindable(false), isLoggedIn = false } = $props<{ recipeId: string, isFavorite?: boolean, isLoggedIn?: boolean }>();
|
|
|
|
let isLoading = $state(false);
|
|
|
|
async function toggleFavorite(event: Event) {
|
|
// If JavaScript is available, prevent form submission and handle client-side
|
|
if (browser) {
|
|
event.preventDefault();
|
|
|
|
if (!isLoggedIn || isLoading) return;
|
|
|
|
isLoading = true;
|
|
|
|
try {
|
|
const method = isFavorite ? 'DELETE' : 'POST';
|
|
const response = await fetch('/api/rezepte/favorites', {
|
|
method,
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({ recipeId }),
|
|
});
|
|
|
|
if (response.ok) {
|
|
isFavorite = !isFavorite;
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to toggle favorite:', error);
|
|
} finally {
|
|
isLoading = false;
|
|
}
|
|
}
|
|
// If no JS, form will submit normally
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.favorite-button {
|
|
all: unset;
|
|
font-size: 1.5rem;
|
|
cursor: pointer;
|
|
transition: 100ms;
|
|
filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
|
|
position: absolute;
|
|
bottom: 0.5em;
|
|
right: 0.5em;
|
|
}
|
|
|
|
.favorite-button:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.favorite-button:hover,
|
|
.favorite-button:focus-visible {
|
|
transform: scale(1.2);
|
|
}
|
|
</style>
|
|
|
|
{#if isLoggedIn}
|
|
<form method="post" action="?/toggleFavorite" style="display: inline;" use:enhance>
|
|
<input type="hidden" name="recipeId" value={recipeId} />
|
|
<input type="hidden" name="isFavorite" value={isFavorite} />
|
|
<button
|
|
type="submit"
|
|
class="favorite-button"
|
|
disabled={isLoading}
|
|
onclick={toggleFavorite}
|
|
title={isFavorite ? 'Favorit entfernen' : 'Als Favorit speichern'}
|
|
>
|
|
{isFavorite ? '❤️' : '🖤'}
|
|
</button>
|
|
</form>
|
|
{/if} |