From 7b9d908d2c1612843990dd39decbdbf40e51dbd7 Mon Sep 17 00:00:00 2001 From: gammelalf Date: Mon, 23 Jan 2023 03:12:21 +0100 Subject: Reimplemented current frontend in svelte --- web/src/app.d.ts | 12 ++++ web/src/app.html | 13 ++++ web/src/lib/api.ts | 40 +++++++++++ web/src/routes/+page.svelte | 159 ++++++++++++++++++++++++++++++++++++++++++++ web/src/routes/+page.ts | 1 + 5 files changed, 225 insertions(+) create mode 100644 web/src/app.d.ts create mode 100644 web/src/app.html create mode 100644 web/src/lib/api.ts create mode 100644 web/src/routes/+page.svelte create mode 100644 web/src/routes/+page.ts (limited to 'web/src') diff --git a/web/src/app.d.ts b/web/src/app.d.ts new file mode 100644 index 0000000..f59b884 --- /dev/null +++ b/web/src/app.d.ts @@ -0,0 +1,12 @@ +// See https://kit.svelte.dev/docs/types#app +// for information about these interfaces +declare global { + namespace App { + // interface Error {} + // interface Locals {} + // interface PageData {} + // interface Platform {} + } +} + +export {}; diff --git a/web/src/app.html b/web/src/app.html new file mode 100644 index 0000000..1d67ac6 --- /dev/null +++ b/web/src/app.html @@ -0,0 +1,13 @@ + + + + WRMS + + + + %sveltekit.head% + + +
%sveltekit.body%
+ + diff --git a/web/src/lib/api.ts b/web/src/lib/api.ts new file mode 100644 index 0000000..032cbd4 --- /dev/null +++ b/web/src/lib/api.ts @@ -0,0 +1,40 @@ +export type Song = { + title: string; + artist: string; + source: string; + uri: string; + weight: number; +}; + +export type WsMessage = { + cmd: 'add' | 'update' | 'pause' | 'play' | 'upvoted' | 'downvoted'; + songs: Array; +}; +export type SearchResponse = { + cmd: 'search'; + songs: Array; +}; + +const HEADERS = new Headers([ + ['Accept', 'application/json'], + ['Content-Type', 'application/json'] +]); +const API = { + baseUrl: '', + get(url: string, body?: Record) { + if (body !== undefined) { + url += '?' + new URLSearchParams(body); + } + return fetch(this.baseUrl + url, { + method: 'GET' + }); + }, + post(url: string, body?: object) { + return fetch(this.baseUrl + url, { + method: 'POST', + body: body && JSON.stringify(body), + headers: HEADERS + }); + } +}; +export default API; diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte new file mode 100644 index 0000000..1cb4c71 --- /dev/null +++ b/web/src/routes/+page.svelte @@ -0,0 +1,159 @@ + + +
+

Currently Playing

+

{currentSong?.title || 'Nothing'}

+
+ +
+
+
+

Add your song

+
+ + + {#each searchResults as { title, artist, source, uri, weight } (uri)} +
+ + {artist + ' - ' + title} + {source} +
+ {/each} +
+
+
+

Playlist

+ {#each playlist as { title, artist, source, uri, weight } (uri)} +
+ + + {`${weight} ${artist} - ${title}`} + {`(${source})`} +
+ {/each} +
+
+
+ + diff --git a/web/src/routes/+page.ts b/web/src/routes/+page.ts new file mode 100644 index 0000000..189f71e --- /dev/null +++ b/web/src/routes/+page.ts @@ -0,0 +1 @@ +export const prerender = true; -- cgit v1.2.3