chat page

public/js/api/chat.js

@@ -1,6 +1,6 @@
-export const get_latest_chat_messages = channel => fetch(`api/chat/${channel}`).then(r => r.json());
+export const get_latest_chat_messages = channel => fetch(`api/chat/${channel}/latest`).then(r => r.json());
 
-export const set_feature = msg => fetch("api/chat", {
+export const send_message = msg => fetch("api/chat", {
     method: "POST",
     body: JSON.stringify(msg)
 })

public/js/components/NavBar.js

@@ -47,6 +47,11 @@ export default {
 							<i class="fa-solid fa-terminal"></i> Shell
 						</router-link>
 					</li>
+					<li class="nav-item" v-if="has_priv('shout') && !maintenance">
+						<router-link to="/chat" class="nav-link">
+							<i class="fa-solid fa-comment"></i> Chat
+						</router-link>
+					</li>
 					<li class="nav-item">
 						<router-link to="/online-players" class="nav-link" v-if="!maintenance">
 							<i class="fa fa-users"></i> Online players

public/js/components/pages/Chat.js

@@ -0,0 +1,69 @@
+import DefaultLayout from "../layouts/DefaultLayout.js";
+
+import { START } from "../Breadcrumb.js";
+import { get_latest_chat_messages, send_message } from "../../api/chat.js";
+
+export default {
+    components: {
+        "default-layout": DefaultLayout
+    },
+    data: function() {
+        return {
+            history: "",
+            msg: "",
+            handle: null,
+            channel: "main",
+            breadcrumb: [START, {
+                name: "Chat",
+                icon: "comment",
+                link: ""
+            }]
+        };
+    },
+    created: function() {
+        this.update();
+        this.handle = setInterval(() => this.update(), 1000);
+    },
+    unmounted: function() {
+        clearInterval(this.handle);
+    },
+    methods: {
+        send: function() {
+            send_message({
+                channel: this.channel,
+                message: this.msg
+            })
+            .then(() => {
+                this.update();
+                this.msg = "";
+            });
+        },
+        update: function() {
+            get_latest_chat_messages(this.channel)
+            .then(msgs => {
+                let history = "";
+                msgs.forEach(msg => history += `<${msg.name}> ${msg.message}\n`);
+                this.history = history;
+                this.$refs.chat_pre.scrollTop = this.$refs.chat_pre.scrollTopMax;
+            });
+        }
+    },
+    template: /*html*/`
+        <default-layout title="Chat" icon="comment" :breadcrumb="breadcrumb">
+            <div class="row">
+                <div class="col-12">
+                    <pre ref="chat_pre" class="w-100" style="height: 400px; background-color: grey;">{{history}}</pre>
+                </div>
+            </div>
+            <form @submit.prevent="send" class="row">
+                <div class="input-group">
+                    <input type="text" placeholder="Message" v-model="msg" class="form-control"/>
+                    <button class="btn btn-success" type="submit">
+                        <i class="fa-solid fa-paper-plane"></i>
+                        Send
+                    </button>
+                </div>
+            </form>
+        </default-layout>
+    `
+};

public/js/routes.js

@@ -31,6 +31,7 @@ import ContentBrowse from './components/pages/cdb/Browse.js';
 import ContentdbDetail from './components/pages/cdb/Detail.js';
 import InstallCDB from './components/pages/cdb/Install.js';
 import Wizard from './components/pages/wizard/Wizard.js';
+import Chat from './components/pages/Chat.js';
 
 export default [{
 	path: "/", component: Start,
@@ -47,6 +48,9 @@ export default [{
 	path: "/onboard", component: Onboard
 }, {
 	path: "/signup", component: Signup
+}, {
+	path: "/chat", component: Chat,
+	meta: { requiredPriv: "shout" }
 }, {
 	path: "/wizard/:step", component: Wizard, props: true,
 	meta: { requiredPriv: "server" }