From fe906d92425a2f72bfd7ca3d0e281056402fe3c1 Mon Sep 17 00:00:00 2001
From: Joscha <joscha@plugh.de>
Date: Mon, 3 Mar 2025 01:45:06 +0100
Subject: [PATCH] Improve text-printing UI

- UI elements are now inside a form
- ctrl+enter on textarea submits the form
- UI becomes greyed-out while printing, as visual feedback
---
 .../src/components/CSegmentText.vue           | 65 ++++++++++++++++---
 1 file changed, 57 insertions(+), 8 deletions(-)

diff --git a/showbits-thermal-printer-ui/src/components/CSegmentText.vue b/showbits-thermal-printer-ui/src/components/CSegmentText.vue
index 5e61ae2..5c502ba 100644
--- a/showbits-thermal-printer-ui/src/components/CSegmentText.vue
+++ b/showbits-thermal-printer-ui/src/components/CSegmentText.vue
@@ -1,11 +1,37 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { computed, ref, type StyleValue, useTemplateRef } from "vue";
+
+const form = useTemplateRef<HTMLFormElement>("form");
+const disabled = ref(false);
 
 const text = ref("");
 const forceWrap = ref(false);
 const feed = ref(true);
 
+// Emulate how typst is wrapping text.
+const textareaStyle = computed<StyleValue>(() =>
+  forceWrap.value ? { wordBreak: "break-all" } : { overflowWrap: "normal" },
+);
+
+// Ctrl+Enter in textarea should submit form.
+function textareaKeypress(ev: KeyboardEvent): void {
+  if (ev.ctrlKey && ev.key === "Enter") {
+    form.value?.requestSubmit();
+  }
+}
+
+async function waitAtLeast(duration: number, since: number): Promise<void> {
+  const now = Date.now();
+  const wait = duration - (now - since);
+  if (wait > 0) {
+    await new Promise((resolve) => setTimeout(resolve, wait));
+  }
+}
+
 async function submit(): Promise<void> {
+  const start = Date.now();
+  disabled.value = true;
+
   try {
     const data = new URLSearchParams();
     data.append("text", text.value);
@@ -16,28 +42,51 @@ async function submit(): Promise<void> {
   } catch (err) {
     console.log("POST failed:", err);
   }
+
+  await waitAtLeast(500, start);
+  disabled.value = false;
 }
 </script>
 
 <template>
-  <section>
+  <form ref="form" @submit.prevent="submit">
     <h2>Text</h2>
-    <textarea v-model="text" rows="10"></textarea>
+    <!-- For some reason one col = 2 characters. -->
+    <textarea
+      v-model="text"
+      rows="10"
+      cols="24"
+      :style="textareaStyle"
+      :disabled
+      @keypress="textareaKeypress"
+    ></textarea>
     <fieldset>
-      <label><input v-model="forceWrap" type="checkbox" /> Force-Wrap</label>
-      <label><input v-model="feed" type="checkbox" /> Feed</label>
+      <label>
+        <input v-model="forceWrap" type="checkbox" :disabled />
+        Force-Wrap
+      </label>
+      <label><input v-model="feed" type="checkbox" :disabled /> Feed</label>
     </fieldset>
-    <button @click="submit">Print</button>
-  </section>
+    <button :disabled>Print</button>
+  </form>
 </template>
 
 <style scoped>
-section {
+form {
   display: flex;
   flex-direction: column;
   gap: 16px;
 }
 
+textarea {
+  align-self: center;
+  width: fit-content;
+
+  /* Prevent manual resizing from changing the width. */
+  min-width: fit-content;
+  max-width: fit-content;
+}
+
 fieldset {
   display: flex;
   flex-direction: column;