Add chat segment

showbits-thermal-printer-ui/src/components/CSegment.vue

@@ -5,14 +5,18 @@ import CSegmentEgg from "./CSegmentEgg.vue";
 import CSegmentText from "./CSegmentText.vue";
 import CSegmentTictactoe from "./CSegmentTictactoe.vue";
 import CSegmentCells from "./CSegmentCells.vue";
+import CSegmentChat from "./CSegmentChat.vue";
 
-const mode = ref<"calendar" | "cells" | "egg" | "text" | "tictactoe">();
+const mode = ref<
+  "calendar" | "chat" | "cells" | "egg" | "text" | "tictactoe"
+>();
 </script>
 
 <template>
   <div class="outer">
     <button v-if="mode" class="close" @click="mode = undefined">X</button>
     <CSegmentCalendar v-if="mode === 'calendar'" />
+    <CSegmentChat v-if="mode === 'chat'" />
     <CSegmentCells v-if="mode === 'cells'" />
     <CSegmentEgg v-if="mode === 'egg'" />
     <CSegmentText v-if="mode === 'text'" />
@@ -23,7 +27,7 @@ const mode = ref<"calendar" | "cells" | "egg" | "text" | "tictactoe">();
       <div class="list">
         <button @click="mode = 'calendar'">Calendar</button>
         <button @click="mode = 'cells'">Cellular Automaton</button>
-        <button @click="mode = 'text'">Chat Message</button>
+        <button @click="mode = 'chat'">Chat Message</button>
         <button @click="mode = 'egg'">Easter Egg</button>
         <button @click="mode = 'text'">Text</button>
         <button @click="mode = 'tictactoe'">Tic Tac Toe</button>

showbits-thermal-printer-ui/src/components/CSegmentChat.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { useApiRequest } from "@/apiRequest";
+import { ref, useTemplateRef } from "vue";
+import CSegmentError from "./CSegmentError.vue";
+
+const { disabled, error, makeRequest } = useApiRequest();
+const form = useTemplateRef<HTMLFormElement>("form");
+
+const username = ref("");
+const content = ref("");
+const feed = ref(false);
+
+// Ctrl+Enter in textarea should submit form.
+function textareaKeypress(ev: KeyboardEvent): void {
+  if (ev.ctrlKey && ev.key === "Enter") {
+    form.value?.requestSubmit();
+  }
+}
+
+function submit() {
+  const data = new URLSearchParams();
+  data.append("username", username.value);
+  data.append("content", content.value);
+  data.append("feed", String(feed.value));
+  void makeRequest("/api/chat", data);
+}
+</script>
+
+<template>
+  <form ref="form" @submit.prevent="submit">
+    <h2>Chat Message</h2>
+
+    <label class="wide">
+      Name:
+      <input
+        v-model="username"
+        type="text"
+        required
+        minlength="1"
+        maxlength="32"
+      />
+    </label>
+
+    <label for="content">Content:</label>
+    <!-- For some reason one col = 2 characters. -->
+    <textarea
+      id="content"
+      v-model="content"
+      rows="10"
+      cols="24"
+      :disabled
+      @keypress="textareaKeypress"
+    ></textarea>
+
+    <label><input v-model="feed" type="checkbox" :disabled /> Feed</label>
+
+    <button :disabled>Print</button>
+    <CSegmentError :message="error" />
+  </form>
+</template>
+
+<style scoped>
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+textarea {
+  margin-top: -16px;
+
+  align-self: center;
+  width: fit-content;
+
+  /* Prevent manual resizing from changing the width. */
+  min-width: fit-content;
+  max-width: fit-content;
+
+  /* Emulate how typst wraps text. */
+  overflow-wrap: normal;
+}
+
+.wide {
+  display: flex;
+  flex-direction: column;
+}
+</style>