✨ Admin page for pages

src/lib/server/db/index.ts

@@ -19,4 +19,4 @@ const products = createProductCollection(db);
 const { pictures, picturesFs } = createPictureCollections(db);
 
 export { client, db, pages, users, pictures, picturesFs, products };
-export const collections = { products, pictures };
+export const collections = { products, pictures, pages, users };

src/lib/server/db/page.ts

@@ -28,7 +28,7 @@ Des tissus rigoureusement sélectionnés vous seront proposés pour habiller vos
 
 Daphné ne travaille que sur rendez vous, alors n'hésitez pas à la contacter, par téléphone ou par mail pour toute demande.`,
 			'eshop-description': "description de l'eshop",
-			description: `C'est dans son univers enchanteur que Daphné le Couls, tapissière d'ameublement qualifiée depuis 2019, vous propose la réfection de vos assises dans son atelier situé en Finistère, à logonna Daoulas (entre l'axe Brest Quimper).
+			'search-engine-description': `C'est dans son univers enchanteur que Daphné le Couls, tapissière d'ameublement qualifiée depuis 2019, vous propose la réfection de vos assises dans son atelier situé en Finistère, à logonna Daoulas (entre l'axe Brest Quimper).
 
 Daphné se déplace à votre domicile afin de déterminer avec vous vos besoins, qu'il s'agisse d'une réfection de siège complète, ou bien de la création de coussins décoratifs.`
 		},
@@ -46,17 +46,23 @@ Daphné se déplace à votre domicile afin de déterminer avec vous vos besoins,
 			'realisation-8': null,
 			'realisation-9': null,
 			'realisation-10': null
-		}
+		},
+		createdAt: new Date(),
+		updatedAt: new Date()
 	} as HomePage,
 	'/contact': {
 		_id: '/contact',
 		name: 'Contact',
 		text: {
+			'search-engine-description':
+				'Je me déplace à votre domicile dans le Finistère sur rendez-vous.',
 			description: 'Je me déplace à votre domicile dans le Finistère sur rendez-vous.'
 		},
 		pictures: {
 			'photo-garde': null
-		}
+		},
+		createdAt: new Date(),
+		updatedAt: new Date()
 	} as ContactPage,
 	'/atelier': {
 		_id: '/atelier',
@@ -70,7 +76,7 @@ Daphné se déplace à votre domicile afin de déterminer avec vous vos besoins,
 			'texte-2': `Nous vous proposons un service en ligne afin de concevoir à distance des coussins, et de vous les livrer n'importe où en France. 
 
 Nous proposons à la vente également des assises déjà refectionnées dans la partie E-shop.`,
-			description:
+			'search-engine-description':
 				"À l'atelier, nous vous proposons la réfection traditionnelle ou moderne de vos assises (crin ou mousse) selon vos besoins."
 		},
 		pictures: {
@@ -83,7 +89,7 @@ Nous proposons à la vente également des assises déjà refectionnées dans la
 		_id: '/realisations',
 		name: 'Réalisations',
 		text: {
-			description:
+			'search-engine-description':
 				"Découvrez les sièges, fauteuils et coussins réalisés par Daphné, tapissière d'ameublement de la Bergère Enchantée",
 			'realisation-1': '',
 			'realisation-2': '',
@@ -94,7 +100,17 @@ Nous proposons à la vente également des assises déjà refectionnées dans la
 			'realisation-7': '',
 			'realisation-8': '',
 			'realisation-9': '',
-			'realisation-10': ''
+			'realisation-10': '',
+			'realisation-11': '',
+			'realisation-12': '',
+			'realisation-13': '',
+			'realisation-14': '',
+			'realisation-15': '',
+			'realisation-16': '',
+			'realisation-17': '',
+			'realisation-18': '',
+			'realisation-19': '',
+			'realisation-20': ''
 		},
 		pictures: {
 			'realisation-1': null,
@@ -106,8 +122,20 @@ Nous proposons à la vente également des assises déjà refectionnées dans la
 			'realisation-7': null,
 			'realisation-8': null,
 			'realisation-9': null,
-			'realisation-10': null
-		}
+			'realisation-10': null,
+			'realisation-11': null,
+			'realisation-12': null,
+			'realisation-13': null,
+			'realisation-14': null,
+			'realisation-15': null,
+			'realisation-16': null,
+			'realisation-17': null,
+			'realisation-18': null,
+			'realisation-19': null,
+			'realisation-20': null
+		},
+		createdAt: new Date(),
+		updatedAt: new Date()
 	} as CreationsPage,
 	'/tissus-et-finitions': {
 		_id: '/tissus-et-finitions',
@@ -130,7 +158,7 @@ Nous proposons à la vente également des assises déjà refectionnées dans la
 			'photo-15': null
 		},
 		text: {
-			description:
+			'search-engine-description':
 				"Découvrez les finitions et tissus utilisés par Daphné, tapissière d'ameublement de la Bergère Enchantée"
 		}
 	} as FabricsPage,
@@ -138,7 +166,7 @@ Nous proposons à la vente également des assises déjà refectionnées dans la
 		_id: '/vente',
 		name: 'E-shop',
 		text: {
-			description:
+			'search-engine-description':
 				'Liste des fauteuils, chaises, coussins... réalisés par Daphné et disponibles à la vente'
 		},
 		pictures: {

src/lib/types/Page.ts

@@ -3,8 +3,8 @@ import type { Timestamps } from './Timestamps';
 export interface Page extends Timestamps {
 	_id: string;
 	name: string;
-	text: Record<string, string>;
-	pictures: Record<string, string | null>;
+	text: Record<string, string | undefined>;
+	pictures: Record<string, string | null | undefined>;
 }
 
 export interface HomePage extends Page {
@@ -13,60 +13,29 @@ export interface HomePage extends Page {
 	text: {
 		presentation: string;
 		'eshop-description': string;
-		description: string;
+		'search-engine-description': string;
 	};
 	pictures: {
 		discover: string | null;
 		move: string | null;
 		'e-shop': string | null;
-		'realisation-1': string | null;
-		'realisation-2': string | null;
-		'realisation-3': string | null;
-		'realisation-4': string | null;
-		'realisation-5': string | null;
-		'realisation-6': string | null;
-		'realisation-7': string | null;
-		'realisation-8': string | null;
-		'realisation-9': string | null;
-		'realisation-10': string | null;
-	};
+	} & Partial<Record<`realisation-${number}`, string | null>>;
 }
 
 export interface CreationsPage extends Page {
 	_id: '/realisations';
 	name: 'Réalisations';
 	text: {
-		description: string;
-		'realisation-1': string;
-		'realisation-2': string;
-		'realisation-3': string;
-		'realisation-4': string;
-		'realisation-5': string;
-		'realisation-6': string;
-		'realisation-7': string;
-		'realisation-8': string;
-		'realisation-9': string;
-		'realisation-10': string;
-	};
-	pictures: {
-		'realisation-1': string | null;
-		'realisation-2': string | null;
-		'realisation-3': string | null;
-		'realisation-4': string | null;
-		'realisation-5': string | null;
-		'realisation-6': string | null;
-		'realisation-7': string | null;
-		'realisation-8': string | null;
-		'realisation-9': string | null;
-		'realisation-10': string | null;
-	};
+		'search-engine-description': string;
+	} & Partial<Record<`realisation-${number}`, string>>;
+	pictures: Partial<Record<`realisation-${number}`, string | null>>;
 }
 
 export interface FabricsPage {
 	_id: '/tissus-et-finitions';
 	name: 'Tissus et finitions';
 	text: {
-		description: string;
+		'search-engine-description': string;
 	};
 	pictures: {
 		'photo-1': string | null;
@@ -92,6 +61,7 @@ export interface ContactPage extends Page {
 	name: 'Contact';
 	text: {
 		description: string;
+		'search-engine-description': string;
 	};
 	pictures: {
 		'photo-garde': string | null;
@@ -102,7 +72,7 @@ export interface WorkshopPage extends Page {
 	_id: '/atelier';
 	name: "L'Atelier";
 	text: {
-		description: string;
+		'search-engine-description': string;
 		'texte-1': string;
 		'texte-2': string;
 	};
@@ -117,7 +87,7 @@ export interface EshopPage extends Page {
 	_id: '/vente';
 	name: 'E-shop';
 	text: {
-		description: string;
+		'search-engine-description': string;
 	};
 	pictures: {
 		background: string | null;

src/lib/utils/typedKeys.ts

@@ -0,0 +1,3 @@
+export function typedKeys<K extends string>(x: Record<K, any>): K[] {
+	return Object.keys(x) as K[];
+}

src/routes/+layout.svelte

@@ -24,9 +24,9 @@
 		<meta property="twitter:title" content={$page.data.title} />
 	{/if}
 	{#if $page.data.description}
-		<meta name="description" content={$page.data.description} />
-		<meta property="og:description" content={$page.data.description} />
-		<meta property="twitter:description" content={$page.data.description} />
+		<meta name="description" content={$page.data['search-engine-description']} />
+		<meta property="og:description" content={$page.data['search-engine-description']} />
+		<meta property="twitter:description" content={$page.data['search-engine-description']} />
 	{/if}
 	<meta property="og:type" content={$page.data.type || 'website'} />
 	{#if shownPicture}

src/routes/+page.svelte

@@ -3,6 +3,7 @@
 	import Container from '$lib/components/Container.svelte';
 	import Picture from '$lib/components/Picture.svelte';
 	import type { HomePage } from '$lib/types/Page';
+	import { typedKeys } from '$lib/utils/typedKeys';
 	import { marked } from 'marked';
 	import type { PageData } from './$types';
 
@@ -13,7 +14,7 @@
 
 	type PictureKey = keyof typeof pageData.pictures;
 
-	const showcasePics = Object.keys(pageData.pictures)
+	const showcasePics = typedKeys(pageData.pictures)
 		.filter((key) => key.startsWith('realisation-') && pageData.pictures[key as PictureKey])
 		.map((key) => pictures.find((pic) => pic._id === pageData.pictures[key as PictureKey]))
 		.filter(Boolean);

src/routes/admin/+layout.server.ts

@@ -0,0 +1,12 @@
+import type { LayoutServerLoad } from './$types';
+import { error, redirect } from '@sveltejs/kit';
+
+export const load: LayoutServerLoad = (event) => {
+	if (!event.locals.user) {
+		throw redirect(303, `/connexion?suivant=${encodeURIComponent(event.url.href)}`);
+	}
+
+	if (event.locals.user.authority !== 'admin') {
+		throw error(403);
+	}
+};

src/routes/admin/+layout.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import Container from '$lib/components/Container.svelte';
+</script>
+
+<div class="flex justify-evenly mb-10">
+	<a
+		href="/admin/pages"
+		class="pa-2 link"
+		class:text-sunray={$page.url.pathname.startsWith('/admin/pages')}>Pages</a
+	>
+	<a
+		href="/admin/photos"
+		class="pa-2 link"
+		class:text-sunray={$page.url.pathname.startsWith('/admin/photos')}>Photos</a
+	>
+	<a
+		href="/admin/produits"
+		class="pa-2 link"
+		class:text-sunray={$page.url.pathname.startsWith('/admin/produits')}>Produits</a
+	>
+</div>
+
+<Container>
+	<slot />
+</Container>

src/routes/admin/+page.ts

@@ -0,0 +1,6 @@
+import type { PageLoad } from './$types';
+import { redirect } from '@sveltejs/kit';
+
+export const load: PageLoad = () => {
+	throw redirect(302, '/admin/pages');
+};

src/routes/admin/pages/+page.server.ts

@@ -0,0 +1,10 @@
+import { pictures } from '$lib/server/db';
+import { pages } from '$lib/server/db/page';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async () => {
+	return {
+		pages: Object.values(pages),
+		photos: await pictures.find({ productId: { $exists: false } }).toArray()
+	};
+};

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

@@ -0,0 +1,61 @@
+<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}

src/routes/admin/pages/[id]/+server.ts

@@ -0,0 +1,30 @@
+import { collections } from '$lib/server/db';
+import { pages } from '$lib/server/db/page';
+import { error } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+
+export const POST: RequestHandler = async (input) => {
+	const id = input.params.id;
+
+	const body: { type: 'picture' | 'text'; key: string; value: string } = await input.request.json();
+
+	if (!(id in pages)) {
+		throw error(400, 'Mauvaise id de page: ' + id);
+	}
+
+	const type = body.type === 'picture' ? 'pictures' : body.type;
+
+	const page = pages[id as keyof typeof pages];
+
+	if (!(type in page) || !(body.key in page[type])) {
+		throw error(400, 'Mauvaise clé');
+	}
+
+	await collections.pages.updateOne(
+		{ _id: id },
+		{ $set: { [`${type}.${body.key}`]: String(body.value).replaceAll('\r', '') } },
+		{ upsert: true }
+	);
+
+	return new Response();
+};

src/routes/realisations/+page.svelte

@@ -2,6 +2,7 @@
 	import Container from '$lib/components/Container.svelte';
 	import PictureComponent from '$lib/components/Picture.svelte';
 	import type { CreationsPage } from '$lib/types/Page';
+	import { typedKeys } from '$lib/utils/typedKeys';
 	import { marked } from 'marked';
 	import type { PageData } from './$types';
 
@@ -12,7 +13,7 @@
 
 	type PictureKey = keyof typeof pageData.pictures;
 
-	const picKeys = Object.keys(pageData.pictures).filter(
+	const picKeys = typedKeys(pageData.pictures).filter(
 		(key) => key.startsWith('realisation-') && pageData.pictures[key as PictureKey]
 	);
 </script>