summaryrefslogtreecommitdiff
path: root/hi-ui/src
diff options
context:
space:
mode:
Diffstat (limited to 'hi-ui/src')
-rw-r--r--hi-ui/src/apiServer.js53
-rw-r--r--hi-ui/src/lib/Message.svelte10
-rw-r--r--hi-ui/src/routes/+page.svelte15
-rw-r--r--hi-ui/src/store.js2
-rw-r--r--hi-ui/src/store/channels.js4
-rw-r--r--hi-ui/src/store/logins.js22
-rw-r--r--hi-ui/src/store/messages.js29
7 files changed, 92 insertions, 43 deletions
diff --git a/hi-ui/src/apiServer.js b/hi-ui/src/apiServer.js
index f4a89a4..3aa3f1b 100644
--- a/hi-ui/src/apiServer.js
+++ b/hi-ui/src/apiServer.js
@@ -1,5 +1,5 @@
import axios from 'axios';
-import { activeChannel, channelsList, messages } from './store';
+import { activeChannel, channelsList, loginsList, messages } from './store';
export const apiServer = axios.create({
baseURL: '/api/',
@@ -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/Message.svelte b/hi-ui/src/lib/Message.svelte
index efc6641..d10bee3 100644
--- a/hi-ui/src/lib/Message.svelte
+++ b/hi-ui/src/lib/Message.svelte
@@ -1,23 +1,25 @@
<script>
import SvelteMarkdown from 'svelte-markdown';
- import { currentUser } from '../store';
+ import { currentUser, logins } from '../store';
import { deleteMessage } from '../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/routes/+page.svelte b/hi-ui/src/routes/+page.svelte
index 932582d..dd5f2f7 100644
--- a/hi-ui/src/routes/+page.svelte
+++ b/hi-ui/src/routes/+page.svelte
@@ -2,7 +2,7 @@
import { onMount } from 'svelte';
import { boot, subscribeToEvents } from '../apiServer';
- import { currentUser, channelsList, messages } from '../store';
+ import { currentUser, logins, channelsList, messages } from '../store';
import ActiveChannel from '../lib/ActiveChannel.svelte';
import ChannelList from '../lib/ChannelList.svelte';
@@ -22,15 +22,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 () => {
@@ -38,6 +32,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/store.js b/hi-ui/src/store.js
index 4e6b4f1..1b3dfca 100644
--- a/hi-ui/src/store.js
+++ b/hi-ui/src/store.js
@@ -1,8 +1,10 @@
import { writable } from 'svelte/store';
import { ActiveChannel, Channels } from './store/channels';
import { Messages } from './store/messages';
+import { Logins } from './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/store/channels.js b/hi-ui/src/store/channels.js
index 20702cc..bb6c86c 100644
--- a/hi-ui/src/store/channels.js
+++ b/hi-ui/src/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/store/logins.js b/hi-ui/src/store/logins.js
new file mode 100644
index 0000000..5b45206
--- /dev/null
+++ b/hi-ui/src/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/store/messages.js b/hi-ui/src/store/messages.js
index 560b9e1..931b8fb 100644
--- a/hi-ui/src/store/messages.js
+++ b/hi-ui/src/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) {
generated by cgit v1.2.3 (git 2.39.1) at 2026-01-03 03:04:26 +0000