src/routes/admin/pages/+page.svelte

<script lang="ts">
	import type { Page } from '$lib/types/Page';
	import type { PageData } from './$types';

	export let data: PageData;

	function updatePicture(page: Page, key: string, value: string) {
		fetch('/admin/pages/' + encodeURIComponent(page._id), {
			method: 'POST',
			headers: { 'content-type': 'application/json' },
			body: JSON.stringify({ type: 'picture', key, value })
		});
	}

	function updateText(page: Page, key: string, value: string) {
		fetch('/admin/pages/' + encodeURIComponent(page._id), {
			method: 'POST',
			headers: { 'content-type': 'application/json' },
			body: JSON.stringify({ type: 'text', key, value })
		});
	}
</script>

{#each data.pages as page}
	<section class="mb-6">
		<h1>{page.name} ({page._id})</h1>

		<h2 class="mt-4">Textes</h2>

		{#each Object.keys(page.text) as key}
			<label class="block w-full mt-4">
				<h3>{key}</h3>
				<textarea
					name="{page._id}_text_{key}"
					cols="30"
					rows="10"
					class="block w-full"
					value={page.text[key]}
					on:blur={(event) => updateText(page, key, event.currentTarget.value)}
				/>
			</label>
		{/each}

		<h2 class="mt-4">Images</h2>

		{#each Object.keys(page.pictures) as key}
			<label class="block w-full mt-4">
				<h3>{key}</h3>
				<select
					name="{page._id}_picture_{key}"
					value={page.pictures[key]}
					on:change={(event) => updatePicture(page, key, event.currentTarget.value)}
				>
					{#each data.photos as photo}
						<option value={photo._id}>{photo.name}</option>
					{/each}
				</select>
			</label>
		{/each}
	</section>
{/each}