Print text from UI

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>