add stats to frontend

static/src/index.tsx

@@ -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

@@ -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

@@ -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

@@ -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",