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/.eslintrc.cjs | 20 +++ web/.gitignore | 6 + web/.prettierignore | 3 + web/README.md | 38 ++++++ web/client.html | 294 -------------------------------------------- web/package.json | 59 +++++++++ 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 + web/static/client.css | 67 ++++------ web/svelte.config.js | 23 ++++ web/tsconfig.json | 17 +++ web/vite.config.ts | 8 ++ 15 files changed, 425 insertions(+), 335 deletions(-) create mode 100644 web/.eslintrc.cjs create mode 100644 web/.gitignore create mode 100644 web/.prettierignore create mode 100644 web/README.md delete mode 100644 web/client.html create mode 100644 web/package.json 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 create mode 100644 web/svelte.config.js create mode 100644 web/tsconfig.json create mode 100644 web/vite.config.ts (limited to 'web') diff --git a/web/.eslintrc.cjs b/web/.eslintrc.cjs new file mode 100644 index 0000000..3ccf435 --- /dev/null +++ b/web/.eslintrc.cjs @@ -0,0 +1,20 @@ +module.exports = { + root: true, + parser: '@typescript-eslint/parser', + extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'], + plugins: ['svelte3', '@typescript-eslint'], + ignorePatterns: ['*.cjs'], + overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }], + settings: { + 'svelte3/typescript': () => require('typescript') + }, + parserOptions: { + sourceType: 'module', + ecmaVersion: 2020 + }, + env: { + browser: true, + es2017: true, + node: true + } +}; diff --git a/web/.gitignore b/web/.gitignore new file mode 100644 index 0000000..c97ad87 --- /dev/null +++ b/web/.gitignore @@ -0,0 +1,6 @@ +node_modules/ +build/ +.svelte-kit/ +.idea/ + +package-lock.json diff --git a/web/.prettierignore b/web/.prettierignore new file mode 100644 index 0000000..29e170b --- /dev/null +++ b/web/.prettierignore @@ -0,0 +1,3 @@ +build/ +node_modules/ +.svelte-kit/ diff --git a/web/README.md b/web/README.md new file mode 100644 index 0000000..5c91169 --- /dev/null +++ b/web/README.md @@ -0,0 +1,38 @@ +# create-svelte + +Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte). + +## Creating a project + +If you're seeing this, you've probably already done this step. Congrats! + +```bash +# create a new project in the current directory +npm create svelte@latest + +# create a new project in my-app +npm create svelte@latest my-app +``` + +## Developing + +Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server: + +```bash +npm run dev + +# or start the server and open the app in a new browser tab +npm run dev -- --open +``` + +## Building + +To create a production version of your app: + +```bash +npm run build +``` + +You can preview the production build with `npm run preview`. + +> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment. diff --git a/web/client.html b/web/client.html deleted file mode 100644 index 2fbc4fd..0000000 --- a/web/client.html +++ /dev/null @@ -1,294 +0,0 @@ - - - - - - WRMS - - - - - - - - - -
-

Currently Playing

-

Nothing

-
- -
- -

Add your song

-
-
- - -
-
- -
-
- -

Playlist

- -
- - diff --git a/web/package.json b/web/package.json new file mode 100644 index 0000000..e6e0eef --- /dev/null +++ b/web/package.json @@ -0,0 +1,59 @@ +{ + "name": "wrms", + "version": "0.0.1", + "scripts": { + "dev": "vite dev", + "build": "vite build", + "preview": "vite preview", + "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", + "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", + "lint": "prettier --plugin-search-dir . --check . && eslint .", + "format": "prettier --plugin-search-dir . --write ." + }, + "devDependencies": { + "@sveltejs/adapter-auto": "^1.0.0", + "@sveltejs/adapter-static": "^1.0.5", + "@sveltejs/kit": "^1.0.0", + "@sveltejs/package": "^1.0.0", + "@tsconfig/svelte": "^3.0.0", + "@typescript-eslint/eslint-plugin": "^5.45.0", + "@typescript-eslint/parser": "^5.45.0", + "eslint": "^8.28.0", + "eslint-config-prettier": "^8.5.0", + "eslint-plugin-svelte3": "^4.0.0", + "prettier": "^2.8.0", + "prettier-plugin-svelte": "^2.8.1", + "svelte": "^3.54.0", + "svelte-check": "^3.0.2", + "svelte-preprocess": "^5.0.1", + "tslib": "^2.4.1", + "typescript": "^4.9.4", + "vite": "^4.0.0" + }, + "prettier": { + "useTabs": true, + "singleQuote": true, + "trailingComma": "none", + "printWidth": 100, + "plugins": [ + "prettier-plugin-svelte" + ], + "pluginSearchDirs": [ + "." + ], + "overrides": [ + { + "files": "*.svelte", + "options": { + "parser": "svelte" + } + } + ] + }, + "eslintIgnore": [ + ".svelte-kit", + "build", + "node_modules" + ], + "type": "module" +} 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; diff --git a/web/static/client.css b/web/static/client.css index c01b307..ba4c864 100644 --- a/web/static/client.css +++ b/web/static/client.css @@ -1,60 +1,45 @@ :root { - --background: #222222; - --primary: white; - --secondary: gray; - --link: yellow; + --background: #222222; + --primary: white; + --secondary: gray; + --link: yellow; } html { - width: 100%; - overflow: hidden; + width: 100%; + overflow: hidden; } body { - position: fixed; - overflow-y: scroll; - -webkit-overflow-scrolling: touch; - width: 100%; - height: 100%; - margin: 0; - background-color: var(--background); - color: var(--primary); + position: fixed; + overflow-y: scroll; + -webkit-overflow-scrolling: touch; + width: 100%; + height: 100%; + margin: 0; + background-color: var(--background); + color: var(--primary); } .flex-column { - display: flex; - flex-direction: column; - align-items: center; + display: flex; + flex-direction: column; + align-items: center; } .flex-row { - display: flex; - flex-direction: row; - align-items: center; + display: flex; + flex-direction: row; + align-items: center; } .icon-button { - --icon-size: 4em; - border: none; - background-color: transparent; + --icon-size: 4em; + border: none; + background-color: transparent; } .icon-button > img { - width: var(--icon-size); - height: var(--icon-size); - filter: invert(100%); -} - -#play-pause.pause > img:nth-child(1) { - display: none; -} -#play-pause.play > img:nth-child(2) { - display: none; -} - -#searchResults > div > button { - --icon-size: 2em; -} -#searchResults > div > small { - color: var(--secondary); - margin-left: 0.5em; + width: var(--icon-size); + height: var(--icon-size); + filter: invert(100%); } diff --git a/web/svelte.config.js b/web/svelte.config.js new file mode 100644 index 0000000..8c8f77b --- /dev/null +++ b/web/svelte.config.js @@ -0,0 +1,23 @@ +import adapter from '@sveltejs/adapter-static'; +import { vitePreprocess } from '@sveltejs/kit/vite'; + +/** @type {import('@sveltejs/kit').Config} */ +const config = { + // Consult https://kit.svelte.dev/docs/integrations#preprocessors + // for more information about preprocessors + preprocess: vitePreprocess(), + + kit: { + adapter: adapter({ + // default options are shown. On some platforms + // these options are set automatically — see below + pages: 'build', + assets: 'build', + fallback: null, + precompress: false, + strict: true + }) + } +}; + +export default config; diff --git a/web/tsconfig.json b/web/tsconfig.json new file mode 100644 index 0000000..6ae0c8c --- /dev/null +++ b/web/tsconfig.json @@ -0,0 +1,17 @@ +{ + "extends": "./.svelte-kit/tsconfig.json", + "compilerOptions": { + "allowJs": true, + "checkJs": true, + "esModuleInterop": true, + "forceConsistentCasingInFileNames": true, + "resolveJsonModule": true, + "skipLibCheck": true, + "sourceMap": true, + "strict": true + } + // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias + // + // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes + // from the referenced tsconfig.json - TypeScript does not merge them in +} diff --git a/web/vite.config.ts b/web/vite.config.ts new file mode 100644 index 0000000..1695034 --- /dev/null +++ b/web/vite.config.ts @@ -0,0 +1,8 @@ +import { sveltekit } from '@sveltejs/kit/vite'; +import type { UserConfig } from 'vite'; + +const config: UserConfig = { + plugins: [sveltekit()] +}; + +export default config; -- cgit v1.2.3