From 1d8b828d1bbe0e0daa64f6fc2689799c7169afa0 Mon Sep 17 00:00:00 2001 From: Kit La Touche Date: Thu, 19 Sep 2024 23:26:39 -0400 Subject: Add basic browser client Using Svelte. No tests, no linting, yet. This is just starting to get familiar with things. You'll still have to run the dev server and the dev client builder each in their own terminals. Enjoy! --- hi-ui/src/apiServer.js | 29 ++++++++++++++++ hi-ui/src/app.css | 3 ++ hi-ui/src/app.html | 12 +++++++ hi-ui/src/lib/ActiveChannel.svelte | 16 +++++++++ hi-ui/src/lib/Channel.svelte | 23 +++++++++++++ hi-ui/src/lib/ChannelList.svelte | 34 +++++++++++++++++++ hi-ui/src/lib/CreateChannelForm.svelte | 27 +++++++++++++++ hi-ui/src/lib/LogIn.svelte | 40 ++++++++++++++++++++++ hi-ui/src/lib/LogOut.svelte | 19 +++++++++++ hi-ui/src/lib/MessageInput.svelte | 12 +++++++ hi-ui/src/lib/index.js | 1 + hi-ui/src/routes/+layout.svelte | 7 ++++ hi-ui/src/routes/+page.svelte | 62 ++++++++++++++++++++++++++++++++++ hi-ui/src/store.js | 5 +++ 14 files changed, 290 insertions(+) create mode 100644 hi-ui/src/apiServer.js create mode 100644 hi-ui/src/app.css create mode 100644 hi-ui/src/app.html create mode 100644 hi-ui/src/lib/ActiveChannel.svelte create mode 100644 hi-ui/src/lib/Channel.svelte create mode 100644 hi-ui/src/lib/ChannelList.svelte create mode 100644 hi-ui/src/lib/CreateChannelForm.svelte create mode 100644 hi-ui/src/lib/LogIn.svelte create mode 100644 hi-ui/src/lib/LogOut.svelte create mode 100644 hi-ui/src/lib/MessageInput.svelte create mode 100644 hi-ui/src/lib/index.js create mode 100644 hi-ui/src/routes/+layout.svelte create mode 100644 hi-ui/src/routes/+page.svelte create mode 100644 hi-ui/src/store.js (limited to 'hi-ui/src') diff --git a/hi-ui/src/apiServer.js b/hi-ui/src/apiServer.js new file mode 100644 index 0000000..92f4dcc --- /dev/null +++ b/hi-ui/src/apiServer.js @@ -0,0 +1,29 @@ +import axios from 'axios'; + +export const apiServer = axios.create({ + baseURL: '/api/', +}); + +export async function boot() { + return apiServer.get('/boot'); +} + +export async function logIn(username, password) { + const data = { + name: username, + password, + }; + return apiServer.post('/auth/login', data); +} + +export async function logOut() { + return apiServer.post('/auth/logout', {}); +} + +export async function listChannels() { + return apiServer.get('/channels'); +} + +export async function createChannel(name) { + return apiServer.post('/channels', { name }); +} diff --git a/hi-ui/src/app.css b/hi-ui/src/app.css new file mode 100644 index 0000000..b5c61c9 --- /dev/null +++ b/hi-ui/src/app.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/hi-ui/src/app.html b/hi-ui/src/app.html new file mode 100644 index 0000000..77a5ff5 --- /dev/null +++ b/hi-ui/src/app.html @@ -0,0 +1,12 @@ + + + + + + + %sveltekit.head% + + +
%sveltekit.body%
+ + diff --git a/hi-ui/src/lib/ActiveChannel.svelte b/hi-ui/src/lib/ActiveChannel.svelte new file mode 100644 index 0000000..42aa53f --- /dev/null +++ b/hi-ui/src/lib/ActiveChannel.svelte @@ -0,0 +1,16 @@ + + +
+ Active channel: {channelName} +
+ + diff --git a/hi-ui/src/lib/Channel.svelte b/hi-ui/src/lib/Channel.svelte new file mode 100644 index 0000000..80c4505 --- /dev/null +++ b/hi-ui/src/lib/Channel.svelte @@ -0,0 +1,23 @@ + + +
  • + #{name} +
    • diff --git a/hi-ui/src/lib/ChannelList.svelte b/hi-ui/src/lib/ChannelList.svelte new file mode 100644 index 0000000..9f88e24 --- /dev/null +++ b/hi-ui/src/lib/ChannelList.svelte @@ -0,0 +1,34 @@ + + + + + + diff --git a/hi-ui/src/lib/CreateChannelForm.svelte b/hi-ui/src/lib/CreateChannelForm.svelte new file mode 100644 index 0000000..584fa61 --- /dev/null +++ b/hi-ui/src/lib/CreateChannelForm.svelte @@ -0,0 +1,27 @@ + + +
    + + +
    + + diff --git a/hi-ui/src/lib/LogIn.svelte b/hi-ui/src/lib/LogIn.svelte new file mode 100644 index 0000000..df734ee --- /dev/null +++ b/hi-ui/src/lib/LogIn.svelte @@ -0,0 +1,40 @@ + + +
    +
    + + +
    +
    + + +
    +
    + +
    +
    diff --git a/hi-ui/src/lib/LogOut.svelte b/hi-ui/src/lib/LogOut.svelte new file mode 100644 index 0000000..439a530 --- /dev/null +++ b/hi-ui/src/lib/LogOut.svelte @@ -0,0 +1,19 @@ + + +
    + +
    + + diff --git a/hi-ui/src/lib/MessageInput.svelte b/hi-ui/src/lib/MessageInput.svelte new file mode 100644 index 0000000..7896da6 --- /dev/null +++ b/hi-ui/src/lib/MessageInput.svelte @@ -0,0 +1,12 @@ + + +
    + +
    + + diff --git a/hi-ui/src/lib/index.js b/hi-ui/src/lib/index.js new file mode 100644 index 0000000..856f2b6 --- /dev/null +++ b/hi-ui/src/lib/index.js @@ -0,0 +1 @@ +// place files you want to import through the `$lib` alias in this folder. diff --git a/hi-ui/src/routes/+layout.svelte b/hi-ui/src/routes/+layout.svelte new file mode 100644 index 0000000..e3c6561 --- /dev/null +++ b/hi-ui/src/routes/+layout.svelte @@ -0,0 +1,7 @@ + + +
    + +
    diff --git a/hi-ui/src/routes/+page.svelte b/hi-ui/src/routes/+page.svelte new file mode 100644 index 0000000..4ef26db --- /dev/null +++ b/hi-ui/src/routes/+page.svelte @@ -0,0 +1,62 @@ + + +

    hi

    + +{#if loading} +

    Loading…

    +{:else if user != null} + @{user.username} +
    +
    + + +
    +
    + + +
    +
    +{:else} + +{/if} diff --git a/hi-ui/src/store.js b/hi-ui/src/store.js new file mode 100644 index 0000000..06042c2 --- /dev/null +++ b/hi-ui/src/store.js @@ -0,0 +1,5 @@ +import { writable } from 'svelte/store'; + +export const currentUser = writable(null); +export const activeChannel = writable(null); +export const channelsList = writable([]); -- cgit v1.2.3