finish messaging ui
This commit is contained in:
marlonerler
+16
-91
@@ -1,95 +1,20 @@
|
||||
import * as React from "bloatless-react";
|
||||
|
||||
import { MainScreen } from "./mainScreen";
|
||||
import { MessageScreen } from "./messageScreen";
|
||||
import { getText } from "./translations";
|
||||
|
||||
// WS
|
||||
const ws = new WebSocket(`ws://${window.location.host}`);
|
||||
|
||||
ws.addEventListener("message", (message) => {
|
||||
receivedMessage.value = message.data;
|
||||
});
|
||||
|
||||
function send(object: any) {
|
||||
const stringified = JSON.stringify(object);
|
||||
ws.send(stringified);
|
||||
}
|
||||
|
||||
// STATE
|
||||
const receivedMessage = new React.State("");
|
||||
|
||||
const subscriptionChannel = new React.State("");
|
||||
const messageChannel = new React.State("");
|
||||
const messageBody = new React.State("");
|
||||
|
||||
function subscribe() {
|
||||
send({ subscribeChannel: subscriptionChannel.value });
|
||||
}
|
||||
|
||||
function unsubscribe() {
|
||||
send({ unsubscribeChannel: subscriptionChannel.value });
|
||||
}
|
||||
|
||||
function sendMessage() {
|
||||
send({
|
||||
messageChannel: messageChannel.value,
|
||||
messageBody: messageBody.value,
|
||||
});
|
||||
}
|
||||
|
||||
// UI
|
||||
document.querySelector("main")!.append(
|
||||
<article>
|
||||
<header>UDN Test</header>
|
||||
<div>
|
||||
<div class="tile">
|
||||
<div>
|
||||
<b>Received message</b>
|
||||
<p class="secondary" subscribe:innerText={receivedMessage}></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr></hr>
|
||||
|
||||
<label class="tile">
|
||||
<div>
|
||||
<span>Subscribe to channel</span>
|
||||
<input
|
||||
placeholder="my-channel"
|
||||
bind:value={subscriptionChannel}
|
||||
></input>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<div class="flex-row width-input justify-end">
|
||||
<button class="danger width-50" on:click={unsubscribe}>
|
||||
Unsubscribe
|
||||
</button>
|
||||
<button class="primary width-50" on:click={subscribe}>
|
||||
Subscribe
|
||||
<span class="icon">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<hr></hr>
|
||||
|
||||
<label class="tile">
|
||||
<div>
|
||||
<span>Channel</span>
|
||||
<input placeholder="my-channel" bind:value={messageChannel}></input>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<label class="tile">
|
||||
<div>
|
||||
<span>Message</span>
|
||||
<input placeholder="Hello, world!" bind:value={messageBody}></input>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<div class="flex-row width-input justify-end">
|
||||
<button class="primary width-50" on:click={sendMessage}>
|
||||
Send
|
||||
<span class="icon">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
document.body.prepend(
|
||||
<menu>
|
||||
<a class="tab-link" href="#main-screen" active>
|
||||
<span class="icon">settings</span>
|
||||
{getText("settings")}
|
||||
</a>
|
||||
<a class="tab-link" href="#message-screen">
|
||||
<span class="icon">chat</span>
|
||||
{getText("messages")}
|
||||
</a>
|
||||
</menu>
|
||||
);
|
||||
document.querySelector("main")!.append(MainScreen(), MessageScreen());
|
||||
|
||||
@@ -0,0 +1,90 @@
|
||||
import * as React from "bloatless-react";
|
||||
|
||||
import {
|
||||
formatMessage,
|
||||
isMessageEmpty,
|
||||
lastReceivedMessage,
|
||||
newMessageBody,
|
||||
newMessageChannel,
|
||||
sendMessage,
|
||||
subscribe,
|
||||
subscriptionChannel,
|
||||
unsubscribe,
|
||||
} from "./model";
|
||||
|
||||
import { getText } from "./translations";
|
||||
|
||||
export function MainScreen() {
|
||||
// UI
|
||||
return (
|
||||
<article id="main-screen">
|
||||
<header>{getText("settings")}</header>
|
||||
<div>
|
||||
<div class="tile width-input">
|
||||
<div>
|
||||
<b>{getText("messageLastReceived")}</b>
|
||||
<p class="secondary" subscribe:innerText={lastReceivedMessage}></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr></hr>
|
||||
|
||||
<label class="tile">
|
||||
<div>
|
||||
<span>{getText("subscribeToChannel")}</span>
|
||||
<input
|
||||
placeholder={getText("channel_placeholder")}
|
||||
bind:value={subscriptionChannel}
|
||||
on:enter={subscribe}
|
||||
></input>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<div class="flex-row width-input justify-end">
|
||||
<button class="danger width-50" on:click={unsubscribe}>
|
||||
{getText("unsubscribe")}
|
||||
</button>
|
||||
<button class="primary width-50" on:click={subscribe}>
|
||||
{getText("subscribe")}
|
||||
<span class="icon">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<hr></hr>
|
||||
|
||||
<label class="tile">
|
||||
<div>
|
||||
<span>{getText("channel")}</span>
|
||||
<input
|
||||
placeholder={getText("channel_placeholder")}
|
||||
bind:value={newMessageChannel}
|
||||
on:enter={sendMessage}
|
||||
></input>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<label class="tile">
|
||||
<div>
|
||||
<span>{getText("message")}</span>
|
||||
<input
|
||||
placeholder={getText("message_placeholder")}
|
||||
bind:value={newMessageBody}
|
||||
on:enter={sendMessage}
|
||||
></input>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<div class="flex-row width-input justify-end">
|
||||
<button
|
||||
class="primary width-50"
|
||||
on:click={sendMessage}
|
||||
toggle:disabled={isMessageEmpty}
|
||||
>
|
||||
{getText("send")}
|
||||
<span class="icon">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
import * as React from "bloatless-react";
|
||||
|
||||
import {
|
||||
Message,
|
||||
isMessageEmpty,
|
||||
messages,
|
||||
newMessageBody,
|
||||
parseMessage,
|
||||
sendMessage,
|
||||
} from "./model";
|
||||
|
||||
import { getText } from "./translations";
|
||||
|
||||
const convertMessageToElement: React.ListItemConverter<Message> = (message) => {
|
||||
return (
|
||||
<div class="tile" style="flex: 0">
|
||||
<div>
|
||||
<span class="secondary">{message.channel}</span>
|
||||
<b>{message.body}</b>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export function MessageScreen() {
|
||||
return (
|
||||
<article id="message-screen">
|
||||
<header>{getText("messagesReceived")}</header>
|
||||
<div>
|
||||
<div
|
||||
class="flex-column gap"
|
||||
subscribe:children={[messages, convertMessageToElement]}
|
||||
></div>
|
||||
</div>
|
||||
<footer>
|
||||
<input
|
||||
style="max-width: unset"
|
||||
placeholder={getText("message_placeholder_generic")}
|
||||
bind:value={newMessageBody}
|
||||
on:enter={sendMessage}
|
||||
></input>
|
||||
<button
|
||||
class="primary"
|
||||
on:click={sendMessage}
|
||||
toggle:disabled={isMessageEmpty}
|
||||
>
|
||||
<span class="icon">send</span>
|
||||
</button>
|
||||
</footer>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
import * as React from "bloatless-react";
|
||||
|
||||
import { getText } from "./translations";
|
||||
|
||||
export class Message implements React.Identifiable {
|
||||
uuid = new React.UUID();
|
||||
|
||||
constructor(public channel: string, public body: string) {}
|
||||
}
|
||||
|
||||
// WS
|
||||
const ws = new WebSocket(`ws://${window.location.host}`);
|
||||
|
||||
ws.addEventListener("message", (message) => {
|
||||
const formatted = formatMessage(message);
|
||||
const { channel, body } = parseMessage(message);
|
||||
|
||||
if (formatted) {
|
||||
lastReceivedMessage.value = formatted;
|
||||
}
|
||||
if (channel && body) {
|
||||
const messageObject = new Message(channel, body);
|
||||
if (body) messages.add(messageObject);
|
||||
}
|
||||
});
|
||||
|
||||
// STATE
|
||||
export const messages = new React.ListState<Message>();
|
||||
export const lastReceivedMessage = new React.State(
|
||||
getText("noMessagesReceived")
|
||||
);
|
||||
|
||||
export const subscriptionChannel = new React.State("");
|
||||
|
||||
export const newMessageChannel = new React.State("");
|
||||
export const newMessageBody = new React.State("");
|
||||
|
||||
export const isMessageEmpty = React.createProxyState(
|
||||
[newMessageChannel, newMessageBody],
|
||||
() => newMessageChannel.value == "" || newMessageBody.value == ""
|
||||
);
|
||||
|
||||
// METHODS
|
||||
export function formatMessage(message: MessageEvent<any>): string | undefined {
|
||||
const object = parseMessage(message);
|
||||
const lines = Object.entries(object).map(
|
||||
(entry) => `${entry[0]}: ${entry[1]}`
|
||||
);
|
||||
return lines.join("\n");
|
||||
}
|
||||
|
||||
export function parseMessage(message: MessageEvent<any>) {
|
||||
return JSON.parse(message.data.toString());
|
||||
}
|
||||
|
||||
export function sendToWS(object: any) {
|
||||
const stringified = JSON.stringify(object);
|
||||
ws.send(stringified);
|
||||
}
|
||||
|
||||
export function subscribe() {
|
||||
sendToWS({ subscribeChannel: subscriptionChannel.value });
|
||||
}
|
||||
|
||||
export function unsubscribe() {
|
||||
sendToWS({ unsubscribeChannel: subscriptionChannel.value });
|
||||
}
|
||||
|
||||
export function sendMessage() {
|
||||
sendToWS({
|
||||
messageChannel: newMessageChannel.value,
|
||||
messageBody: newMessageBody.value,
|
||||
});
|
||||
newMessageBody.value = "";
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
// STATIC
|
||||
export const staticTextEnglish = {
|
||||
channel: "Channel",
|
||||
channel_placeholder: "my-channel",
|
||||
message: "Message",
|
||||
messages: "Messages",
|
||||
message_placeholder: "Hello, world!",
|
||||
message_placeholder_generic: "Type a message...",
|
||||
noMessagesReceived: "No messages received",
|
||||
messageLastReceived: "Last received message",
|
||||
messagesReceived: "Received Messages",
|
||||
send: "Send",
|
||||
settings: "Settings",
|
||||
subscribeToChannel: "Subscribe to channel",
|
||||
subscribe: "Subscribe",
|
||||
unsubscribe: "Unubscribe",
|
||||
};
|
||||
|
||||
export const translations: { [key: string]: typeof staticTextEnglish } = {
|
||||
en: staticTextEnglish,
|
||||
es: {
|
||||
channel: "Canal",
|
||||
channel_placeholder: "mi-canal",
|
||||
message: "Mensaje",
|
||||
messages: "Mensajes",
|
||||
message_placeholder: "Hola!",
|
||||
message_placeholder_generic: "Nuevo mensaje",
|
||||
noMessagesReceived: "Sin mensajes",
|
||||
messageLastReceived: "Ültimo mensaje",
|
||||
messagesReceived: "Todos los Mensajes",
|
||||
send: "Enviar",
|
||||
settings: "Configuración",
|
||||
subscribeToChannel: "Suscribirse a un canal",
|
||||
subscribe: "Suscribirse",
|
||||
unsubscribe: "Cancelar",
|
||||
},
|
||||
de: {
|
||||
channel: "Kanal",
|
||||
channel_placeholder: "mein-kanal",
|
||||
message: "Nachricht",
|
||||
messages: "Nachrichten",
|
||||
message_placeholder: "Hallo!",
|
||||
message_placeholder_generic: "Neue Nachricht",
|
||||
noMessagesReceived: "Keine Nachrichten",
|
||||
messageLastReceived: "Letzte Nachrichte",
|
||||
messagesReceived: "Empfangene Nachrichten",
|
||||
send: "Senden",
|
||||
settings: "Einstellungen",
|
||||
subscribeToChannel: "Kanal Abonnieren",
|
||||
subscribe: "Abonnieren",
|
||||
unsubscribe: "Verlassen",
|
||||
},
|
||||
};
|
||||
|
||||
export function getText(key: keyof typeof staticTextEnglish): string {
|
||||
if (
|
||||
translations[navigator.language] &&
|
||||
translations[navigator.language][key]
|
||||
) {
|
||||
return translations[navigator.language.substring(0, 2)][key];
|
||||
}
|
||||
return translations.en[key];
|
||||
}
|
||||
Reference in New Issue
Block a user