From 9f28b6d9160fee5eff92d1d9849191f2f12faeab Mon Sep 17 00:00:00 2001 From: Ubuntu Date: Mon, 14 Feb 2022 16:33:38 +0000 Subject: Initial commit --- src/routes/__layout.svelte | 45 ++++++++++ src/routes/about.svelte | 50 ++++++++++++ src/routes/index.svelte | 59 ++++++++++++++ src/routes/todos/_api.ts | 22 +++++ src/routes/todos/index.svelte | 186 ++++++++++++++++++++++++++++++++++++++++++ src/routes/todos/index.ts | 52 ++++++++++++ 6 files changed, 414 insertions(+) create mode 100644 src/routes/__layout.svelte create mode 100644 src/routes/about.svelte create mode 100644 src/routes/index.svelte create mode 100644 src/routes/todos/_api.ts create mode 100644 src/routes/todos/index.svelte create mode 100644 src/routes/todos/index.ts (limited to 'src/routes') diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte new file mode 100644 index 0000000..7fef681 --- /dev/null +++ b/src/routes/__layout.svelte @@ -0,0 +1,45 @@ + + +
+ +
+ +
+ + + + diff --git a/src/routes/about.svelte b/src/routes/about.svelte new file mode 100644 index 0000000..569d3e1 --- /dev/null +++ b/src/routes/about.svelte @@ -0,0 +1,50 @@ + + + + About + + +
+

About this app

+ +

+ This is a SvelteKit app. You can make your own by typing the + following into your command line and following the prompts: +

+ + + 
npm init svelte@next
+ +

+ The page you're looking at is purely static HTML, with no client-side interactivity needed. + Because of that, we don't need to load any JavaScript. Try viewing the page's source, or opening + the devtools network panel and reloading. +

+ +

+ The TODOs page illustrates SvelteKit's data loading and form handling. Try using + it with JavaScript disabled! +

+
+ + diff --git a/src/routes/index.svelte b/src/routes/index.svelte new file mode 100644 index 0000000..68311dd --- /dev/null +++ b/src/routes/index.svelte @@ -0,0 +1,59 @@ + + + + + + Home + + +
+

+
+ + + Welcome + +
+ + to your new
SvelteKit app +

+ +

+ try editing src/routes/index.svelte +

+ + +
+ + diff --git a/src/routes/todos/_api.ts b/src/routes/todos/_api.ts new file mode 100644 index 0000000..f8bcf73 --- /dev/null +++ b/src/routes/todos/_api.ts @@ -0,0 +1,22 @@ +/* + This module is used by the /todos and /todos/[uid] + endpoints to make calls to api.svelte.dev, which stores todos + for each user. The leading underscore indicates that this is + a private module, _not_ an endpoint — visiting /todos/_api + will net you a 404 response. + + (The data on the todo app will expire periodically; no + guarantees are made. Don't use it to organise your life.) +*/ + +const base = 'https://api.svelte.dev'; + +export async function api(request: Request, resource: string, data?: Record) { + return fetch(`${base}/${resource}`, { + method: request.method, + headers: { + 'content-type': 'application/json' + }, + body: data && JSON.stringify(data) + }); +} diff --git a/src/routes/todos/index.svelte b/src/routes/todos/index.svelte new file mode 100644 index 0000000..e36b6cf --- /dev/null +++ b/src/routes/todos/index.svelte @@ -0,0 +1,186 @@ + + + + Todos + + +
+

Todos

+ +
{ + form.reset(); + } + }} + > + +
+ + {#each todos as todo (todo.uid)} +
+
{ + todo.done = !!data.get('done'); + } + }} + > + + +
+ {/each} +
+ + diff --git a/src/routes/todos/index.ts b/src/routes/todos/index.ts new file mode 100644 index 0000000..129b60a --- /dev/null +++ b/src/routes/todos/index.ts @@ -0,0 +1,52 @@ +import { api } from './_api'; +import type { RequestHandler } from '@sveltejs/kit'; + +export const get: RequestHandler = async ({ request, locals }) => { + // locals.userid comes from src/hooks.js + const response = await api(request, `todos/${locals.userid}`); + + if (response.status === 404) { + // user hasn't created a todo list. + // start with an empty array + return { + body: { + todos: [] + } + }; + } + + if (response.ok) { + return { + body: { + todos: await response.json() + } + }; + } + + return { + status: response.status + }; +}; + +export const post: RequestHandler = async ({ request, locals }) => { + const form = await request.formData(); + + return api(request, `todos/${locals.userid}`, { + text: form.get('text') + }); +}; + +export const patch: RequestHandler = async ({ request, locals }) => { + const form = await request.formData(); + + return api(request, `todos/${locals.userid}/${form.get('uid')}`, { + text: form.has('text') ? form.get('text') : undefined, + done: form.has('done') ? !!form.get('done') : undefined + }); +}; + +export const del: RequestHandler = async ({ request, locals }) => { + const form = await request.formData(); + + return api(request, `todos/${locals.userid}/${form.get('uid')}`); +}; -- cgit