VDMDI/UDN
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add stats to frontend

Browse Source
This commit is contained in:
marlonerler
2024-07-05 16:49:08 +02:00
parent dd5d1b7e26
commit 65cd27c6f5
7 changed files with 97 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/dist/index.js
Vendored
+28 -2
View File
@@ -186,6 +186,7 @@
var staticTextEnglish = {
channel: "Channel",
channel_placeholder: "my-channel",
info: "Info",
message: "Message",
messages: "Messages",
message_placeholder: "Hello, world!",
@@ -194,6 +195,7 @@
messageLastReceived: "Last received message",
messagesReceived: "Received Messages",
send: "Send",
serverInfo: "Server Info",
settings: "Settings",
subscribeToChannel: "Subscribe to channel",
subscribe: "Subscribe",
@@ -204,6 +206,7 @@
es: {
channel: "Canal",
channel_placeholder: "mi-canal",
info: "Info",
message: "Mensaje",
messages: "Mensajes",
message_placeholder: "Hola!",
@@ -212,6 +215,7 @@
messageLastReceived: "\xDCltimo mensaje",
messagesReceived: "Todos los Mensajes",
send: "Enviar",
serverInfo: "Informaci\xF3n",
settings: "Configuraci\xF3n",
subscribeToChannel: "Suscribirse a un canal",
subscribe: "Suscribirse",
@@ -220,6 +224,7 @@
de: {
channel: "Kanal",
channel_placeholder: "mein-kanal",
info: "Daten",
message: "Nachricht",
messages: "Nachrichten",
message_placeholder: "Hallo!",
@@ -228,6 +233,7 @@
messageLastReceived: "Letzte Nachrichte",
messagesReceived: "Empfangene Nachrichten",
send: "Senden",
serverInfo: "Serverdaten",
settings: "Einstellungen",
subscribeToChannel: "Kanal Abonnieren",
subscribe: "Abonnieren",
@@ -250,6 +256,7 @@
uuid = new UUID();
};
var ws = new WebSocket(`ws://${window.location.host}`);
ws.addEventListener("open", () => updateStats());
ws.addEventListener("message", (message) => {
const formatted = formatMessage(message);
const { messageChannel, messageBody } = parseMessage(message);
@@ -265,6 +272,19 @@
var lastReceivedMessage = new State(
getText("noMessagesReceived")
);
var statHTMLString = new State("");
async function updateStats() {
const response = await fetch(
`${window.location.protocol}//${window.location.host}/stats`
);
const data = await response.json();
let html = "";
data.forEach((item) => {
const tile = /* @__PURE__ */ createElement("div", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "secondary flex width-100" }, item[0].toString()), /* @__PURE__ */ createElement("b", null, item[1].toString()));
html += tile.outerHTML;
});
statHTMLString.value = html;
}
var subscriptionChannel = new State("");
var newMessageChannel = new State("");
var newMessageBody = new State("");
@@ -293,6 +313,7 @@
sendToWS({ unsubscribeChannel: subscriptionChannel.value });
}
function sendMessage() {
if (isMessageEmpty.value == true) return;
sendToWS({
messageChannel: newMessageChannel.value,
messageBody: newMessageBody.value
@@ -300,6 +321,11 @@
newMessageBody.value = "";
}
// src/infoScreen.tsx
function InfoScreen() {
return /* @__PURE__ */ createElement("article", { id: "info-screen" }, /* @__PURE__ */ createElement("header", null, getText("serverInfo"), /* @__PURE__ */ createElement("span", null, /* @__PURE__ */ createElement("button", { "on:click": updateStats }, /* @__PURE__ */ createElement("span", { class: "icon" }, "refresh")))), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("div", { class: "flex-column gap", "subscribe:innerHTML": statHTMLString })));
}
// src/mainScreen.tsx
function MainScreen() {
return /* @__PURE__ */ createElement("article", { id: "main-screen" }, /* @__PURE__ */ createElement("header", null, getText("settings")), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("div", { class: "tile width-input" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, getText("messageLastReceived")), /* @__PURE__ */ createElement("p", { class: "secondary", "subscribe:innerText": lastReceivedMessage }))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, getText("subscribeToChannel")), /* @__PURE__ */ createElement(
@@ -367,7 +393,7 @@
// src/index.tsx
document.body.prepend(
/* @__PURE__ */ createElement("menu", null, /* @__PURE__ */ createElement("a", { class: "tab-link", href: "#main-screen", active: true }, /* @__PURE__ */ createElement("span", { class: "icon" }, "settings"), getText("settings")), /* @__PURE__ */ createElement("a", { class: "tab-link", href: "#message-screen" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "chat"), getText("messages")))
/* @__PURE__ */ createElement("menu", null, /* @__PURE__ */ createElement("a", { class: "tab-link", href: "#info-screen", active: true }, /* @__PURE__ */ createElement("span", { class: "icon" }, "info"), getText("info")), /* @__PURE__ */ createElement("a", { class: "tab-link", href: "#main-screen" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "settings"), getText("settings")), /* @__PURE__ */ createElement("a", { class: "tab-link", href: "#message-screen" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "chat"), getText("messages")))
);
document.querySelector("main").append(MainScreen(), MessageScreen());
document.querySelector("main").append(InfoScreen(), MainScreen(), MessageScreen());
})();
static/src/index.tsx
+9 -2
View File
@@ -1,5 +1,6 @@
import * as React from "bloatless-react";
import { InfoScreen } from "./infoScreen";
import { MainScreen } from "./mainScreen";
import { MessageScreen } from "./messageScreen";
import { getText } from "./translations";
@@ -7,7 +8,11 @@ import { getText } from "./translations";
// WS
document.body.prepend(
<menu>
<a class="tab-link" href="#main-screen" active>
<a class="tab-link" href="#info-screen" active>
<span class="icon">info</span>
{getText("info")}
</a>
<a class="tab-link" href="#main-screen">
<span class="icon">settings</span>
{getText("settings")}
</a>
@@ -17,4 +22,6 @@ document.body.prepend(
</a>
</menu>
);
document.querySelector("main")!.append(MainScreen(), MessageScreen());
document
.querySelector("main")!
.append(InfoScreen(), MainScreen(), MessageScreen());
static/src/infoScreen.tsx
+23
View File
@@ -0,0 +1,23 @@
import * as React from "bloatless-react";
import { statHTMLString, updateStats } from "./model";
import { getText } from "./translations";
export function InfoScreen() {
return (
<article id="info-screen">
<header>
{getText("serverInfo")}
<span>
<button on:click={updateStats}>
<span class="icon">refresh</span>
</button>
</span>
</header>
<div>
<div class="flex-column gap" subscribe:innerHTML={statHTMLString}></div>
</div>
</article>
);
}
static/src/model.tsx
+26
View File
@@ -11,6 +11,8 @@ export class Message implements React.Identifiable {
// WS
const ws = new WebSocket(`ws://${window.location.host}`);
ws.addEventListener("open", () => updateStats());
ws.addEventListener("message", (message) => {
const formatted = formatMessage(message);
const { messageChannel, messageBody } = parseMessage(message);
@@ -25,11 +27,34 @@ ws.addEventListener("message", (message) => {
});
// STATE
// messages
export const messages = new React.ListState<Message>();
export const lastReceivedMessage = new React.State(
getText("noMessagesReceived")
);
// stats
export const statHTMLString = new React.State<string>("");
export async function updateStats() {
const response = await fetch(
`${window.location.protocol}//${window.location.host}/stats`
);
const data: [string, string][] = await response.json();
let html = "";
data.forEach((item) => {
const tile = (
<div class="tile">
<span class="secondary flex width-100">{item[0].toString()}</span>
<b>{item[1].toString()}</b>
</div>
);
html += tile.outerHTML;
});
statHTMLString.value = html;
}
// elements
export const subscriptionChannel = new React.State("");
export const newMessageChannel = new React.State("");
@@ -67,6 +92,7 @@ export function unsubscribe() {
}
export function sendMessage() {
if (isMessageEmpty.value == true) return;
sendToWS({
messageChannel: newMessageChannel.value,
messageBody: newMessageBody.value,
static/src/translations.tsx
+6
View File
@@ -2,6 +2,7 @@
export const staticTextEnglish = {
channel: "Channel",
channel_placeholder: "my-channel",
info: "Info",
message: "Message",
messages: "Messages",
message_placeholder: "Hello, world!",
@@ -10,6 +11,7 @@ export const staticTextEnglish = {
messageLastReceived: "Last received message",
messagesReceived: "Received Messages",
send: "Send",
serverInfo: "Server Info",
settings: "Settings",
subscribeToChannel: "Subscribe to channel",
subscribe: "Subscribe",
@@ -21,6 +23,7 @@ export const translations: { [key: string]: typeof staticTextEnglish } = {
es: {
channel: "Canal",
channel_placeholder: "mi-canal",
info: "Info",
message: "Mensaje",
messages: "Mensajes",
message_placeholder: "Hola!",
@@ -29,6 +32,7 @@ export const translations: { [key: string]: typeof staticTextEnglish } = {
messageLastReceived: "Ültimo mensaje",
messagesReceived: "Todos los Mensajes",
send: "Enviar",
serverInfo: "Información",
settings: "Configuración",
subscribeToChannel: "Suscribirse a un canal",
subscribe: "Suscribirse",
@@ -37,6 +41,7 @@ export const translations: { [key: string]: typeof staticTextEnglish } = {
de: {
channel: "Kanal",
channel_placeholder: "mein-kanal",
info: "Daten",
message: "Nachricht",
messages: "Nachrichten",
message_placeholder: "Hallo!",
@@ -45,6 +50,7 @@ export const translations: { [key: string]: typeof staticTextEnglish } = {
messageLastReceived: "Letzte Nachrichte",
messagesReceived: "Empfangene Nachrichten",
send: "Senden",
serverInfo: "Serverdaten",
settings: "Einstellungen",
subscribeToChannel: "Kanal Abonnieren",
subscribe: "Abonnieren",