From 0dd973c5d6ac1bcf0ce86a8764499db308fda1e8 Mon Sep 17 00:00:00 2001
From: Joscha <joscha@plugh.de>
Date: Mon, 3 Mar 2025 00:49:09 +0100
Subject: [PATCH] Print text from UI

---
 .../src/components/CSegmentText.vue           | 29 +++++++++++++++----
 1 file changed, 24 insertions(+), 5 deletions(-)

diff --git a/showbits-thermal-printer-ui/src/components/CSegmentText.vue b/showbits-thermal-printer-ui/src/components/CSegmentText.vue
index fc1dd0e..5e61ae2 100644
--- a/showbits-thermal-printer-ui/src/components/CSegmentText.vue
+++ b/showbits-thermal-printer-ui/src/components/CSegmentText.vue
@@ -1,14 +1,33 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref } from "vue";
+
+const text = ref("");
+const forceWrap = ref(false);
+const feed = ref(true);
+
+async function submit(): Promise<void> {
+  try {
+    const data = new URLSearchParams();
+    data.append("text", text.value);
+    data.append("force_wrap", String(forceWrap.value));
+    data.append("feed", String(feed.value));
+    const response = await fetch("/api/text", { method: "POST", body: data });
+    console.log("POST succeeded:", await response.text());
+  } catch (err) {
+    console.log("POST failed:", err);
+  }
+}
+</script>
 
 <template>
   <section>
     <h2>Text</h2>
-    <textarea rows="10"></textarea>
+    <textarea v-model="text" rows="10"></textarea>
     <fieldset>
-      <label><input type="checkbox" /> Force-Wrap</label>
-      <label><input type="checkbox" checked /> Feed</label>
+      <label><input v-model="forceWrap" type="checkbox" /> Force-Wrap</label>
+      <label><input v-model="feed" type="checkbox" /> Feed</label>
     </fieldset>
-    <button>Print</button>
+    <button @click="submit">Print</button>
   </section>
 </template>