summaryrefslogtreecommitdiff
path: root/hi-ui
diff options
context:
space:
mode:
Diffstat (limited to 'hi-ui')
-rw-r--r--hi-ui/src/lib/apiServer.js57
-rw-r--r--hi-ui/src/lib/components/Message.svelte10
-rw-r--r--hi-ui/src/lib/store.js2
-rw-r--r--hi-ui/src/lib/store/channels.js4
-rw-r--r--hi-ui/src/lib/store/logins.js22
-rw-r--r--hi-ui/src/lib/store/messages.js29
-rw-r--r--hi-ui/src/routes/(app)/+layout.svelte15
-rw-r--r--hi-ui/src/routes/+layout.js1
8 files changed, 95 insertions, 45 deletions
diff --git a/hi-ui/src/lib/apiServer.js b/hi-ui/src/lib/apiServer.js
index 9a51715..f6d6148 100644
--- a/hi-ui/src/lib/apiServer.js
+++ b/hi-ui/src/lib/apiServer.js
@@ -1,5 +1,5 @@
import axios from 'axios';
-import { activeChannel, channelsList, messages } from '$lib/store';
+import { activeChannel, channelsList, logins, messages } from '$lib/store';
export const apiServer = axios.create({
baseURL: '/api/',
@@ -25,8 +25,8 @@ export async function createChannel(name) {
return apiServer.post('/channels', { name });
}
-export async function postToChannel(channelId, message) {
- return apiServer.post(`/channels/${channelId}`, { message });
+export async function postToChannel(channelId, body) {
+ return apiServer.post(`/channels/${channelId}`, { body });
}
export async function deleteMessage(messageId) {
@@ -55,22 +55,47 @@ export function subscribeToEvents(resume_point) {
const data = JSON.parse(evt.data);
switch (data.type) {
- case 'created':
- channelsList.update((value) => value.addChannel(data.channel))
+ case 'login':
+ onLoginEvent(data);
break;
- case 'message':
- messages.update((value) => value.addMessage(data));
- break;
- case 'message_deleted':
- messages.update((value) => value.deleteMessage(data.channel.id, data.message));
+ case 'channel':
+ onChannelEvent(data);
break;
- case 'deleted':
- activeChannel.update((value) => value.deleteChannel(data.channel));
- channelsList.update((value) => value.deleteChannel(data.channel));
- messages.update((value) => value.deleteChannel(data.channel));
- break;
- default:
+ case 'message':
+ onMessageEvent(data);
break;
}
}
}
+
+function onLoginEvent(data) {
+ switch (data.event) {
+ case 'created':
+ logins.update((value) => value.addLogin(data.id, data.name))
+ break;
+ }
+}
+
+function onChannelEvent(data) {
+ switch (data.event) {
+ case 'created':
+ channelsList.update((value) => value.addChannel(data.id, data.name))
+ break;
+ case 'deleted':
+ activeChannel.update((value) => value.deleteChannel(data.id));
+ channelsList.update((value) => value.deleteChannel(data.id));
+ messages.update((value) => value.deleteChannel(data.id));
+ break;
+ }
+}
+
+function onMessageEvent(data) {
+ switch (data.event) {
+ case 'sent':
+ messages.update((value) => value.addMessage(data.channel, data.id, data.at, data.sender, data.body));
+ break;
+ case 'deleted':
+ messages.update((value) => value.deleteMessage(data.id));
+ break;
+ }
+}
diff --git a/hi-ui/src/lib/components/Message.svelte b/hi-ui/src/lib/components/Message.svelte
index 5b51492..d040433 100644
--- a/hi-ui/src/lib/components/Message.svelte
+++ b/hi-ui/src/lib/components/Message.svelte
@@ -1,23 +1,25 @@
<script>
import SvelteMarkdown from 'svelte-markdown';
- import { currentUser } from '$lib/store';
+ import { currentUser, logins } from '$lib/store';
import { deleteMessage } from '$lib/apiServer';
export let at; // XXX: Omitted for now.
export let sender;
- export let message;
+ export let body;
let timestamp = new Date(at).toTimeString();
+ let name;
+ $: name = $logins.get(sender);
</script>
<div class="card card-hover m-4 relative">
<span class="chip variant-soft sticky top-o left-0">
<!-- TODO: should this show up for only the first of a run? -->
- @{sender.name}:
+ @{name}:
</span>
<span class="timestamp chip variant-soft absolute top-0 right-0">{at}</span>
<section class="p-4">
- <SvelteMarkdown source={message.body} />
+ <SvelteMarkdown source={body} />
</section>
</div>
diff --git a/hi-ui/src/lib/store.js b/hi-ui/src/lib/store.js
index 5e28195..b964b4b 100644
--- a/hi-ui/src/lib/store.js
+++ b/hi-ui/src/lib/store.js
@@ -1,8 +1,10 @@
import { writable } from 'svelte/store';
import { ActiveChannel, Channels } from '$lib/store/channels';
import { Messages } from '$lib/store/messages';
+import { Logins } from '$lib/store/logins';
export const currentUser = writable(null);
export const activeChannel = writable(new ActiveChannel());
+export const logins = writable(new Logins());
export const channelsList = writable(new Channels());
export const messages = writable(new Messages());
diff --git a/hi-ui/src/lib/store/channels.js b/hi-ui/src/lib/store/channels.js
index 20702cc..bb6c86c 100644
--- a/hi-ui/src/lib/store/channels.js
+++ b/hi-ui/src/lib/store/channels.js
@@ -9,8 +9,8 @@ export class Channels {
return this;
}
- addChannel(channel) {
- this.channels = [...this.channels, channel];
+ addChannel(id, name) {
+ this.channels = [...this.channels, { id, name }];
this.sort();
return this;
}
diff --git a/hi-ui/src/lib/store/logins.js b/hi-ui/src/lib/store/logins.js
new file mode 100644
index 0000000..5b45206
--- /dev/null
+++ b/hi-ui/src/lib/store/logins.js
@@ -0,0 +1,22 @@
+export class Logins {
+ constructor() {
+ this.logins = {};
+ }
+
+ addLogin(id, name) {
+ this.logins[id] = name;
+ return this;
+ }
+
+ setLogins(logins) {
+ this.logins = {};
+ for (let { id, name } of logins) {
+ this.addLogin(id, name);
+ }
+ return this;
+ }
+
+ get(id) {
+ return this.logins[id];
+ }
+}
diff --git a/hi-ui/src/lib/store/messages.js b/hi-ui/src/lib/store/messages.js
index 560b9e1..931b8fb 100644
--- a/hi-ui/src/lib/store/messages.js
+++ b/hi-ui/src/lib/store/messages.js
@@ -4,28 +4,31 @@ export class Messages {
}
inChannel(channel) {
- return this.channels[channel] || [];
+ return this.channels[channel] = (this.channels[channel] || []);
}
- addMessage(message) {
- let {
- channel,
- ...payload
- } = message;
- let channel_id = channel.id;
- this.updateChannel(channel_id, (messages) => [...messages, payload]);
+ addMessage(channel, id, at, sender, body) {
+ this.updateChannel(channel, (messages) => [...messages, { id, at, sender, body }]);
return this;
}
- addMessages(channel, payloads) {
- this.updateChannel(channel, (messages) => [...messages, ...payloads]);
+ setMessages(messages) {
+ this.channels = {};
+ for (let { channel, id, at, sender, body } of messages) {
+ this.inChannel(channel).push({ id, at, sender, body, });
+ }
+ for (let channel in this.channels) {
+ this.channels[channel].sort((a, b) => a.at - b.at);
+ }
return this;
}
- deleteMessage(channel, message) {
- let messages = this.messages(channel).filter((msg) => msg.message.id != message);
- this.channels[channel] = messages;
+ deleteMessage(message) {
+ for (let channel in this.channels) {
+ this.updateChannel(channel, (messages) => messages.filter((msg) => msg.id != message));
+ }
+ return this;
}
deleteChannel(id) {
diff --git a/hi-ui/src/routes/(app)/+layout.svelte b/hi-ui/src/routes/(app)/+layout.svelte
index 9875817..ae6195d 100644
--- a/hi-ui/src/routes/(app)/+layout.svelte
+++ b/hi-ui/src/routes/(app)/+layout.svelte
@@ -2,7 +2,7 @@
import { onMount } from 'svelte';
import { boot, subscribeToEvents } from '$lib/apiServer';
- import { currentUser, channelsList, messages } from '$lib/store';
+ import { currentUser, logins, channelsList, messages } from '$lib/store';
import ChannelList from '$lib/components/ChannelList.svelte';
import CreateChannelForm from '$lib/components/CreateChannelForm.svelte';
@@ -21,15 +21,9 @@
id: boot.login.id,
username: boot.login.name,
}));
- let channels = boot.channels.map((channel) => ({
- id: channel.id,
- name: channel.name,
- }));
- channelsList.update((value) => value.setChannels(channels));
- let bootMessages = boot.channels.map((channel) => [channel.id, channel.messages]);
- for (let [channel, channelMessages] of bootMessages) {
- messages.update((value) => value.addMessages(channel, channelMessages));
- }
+ logins.update((value) => value.setLogins(boot.logins));
+ channelsList.update((value) => value.setChannels(boot.channels));
+ messages.update((value) => value.setMessages(boot.messages));
}
onMount(async () => {
@@ -37,6 +31,7 @@
let response = await boot();
switch (response.status) {
case 200:
+ debugger;
onBooted(response.data);
subscribeToEvents(response.data.resume_point);
break;
diff --git a/hi-ui/src/routes/+layout.js b/hi-ui/src/routes/+layout.js
new file mode 100644
index 0000000..a3d1578
--- /dev/null
+++ b/hi-ui/src/routes/+layout.js
@@ -0,0 +1 @@
+export const ssr = false;
generated by cgit v1.2.3 (git 2.39.1) at 2026-01-02 18:35:49 +0000