From 8eaf465101feb55f488dce847eadb5dff3c82541 Mon Sep 17 00:00:00 2001
From: Joscha <joscha@plugh.de>
Date: Sun, 2 Mar 2025 21:57:07 +0100
Subject: [PATCH] Design rudimentary UI for printing text

---
 showbits-thermal-printer-ui/src/App.vue       | 27 ++++-----------
 .../src/components/CSegment.vue               | 33 +++++++++++++++++++
 .../src/components/CSegmentText.vue           | 27 +++++++++++++++
 3 files changed, 67 insertions(+), 20 deletions(-)
 create mode 100644 showbits-thermal-printer-ui/src/components/CSegment.vue
 create mode 100644 showbits-thermal-printer-ui/src/components/CSegmentText.vue

diff --git a/showbits-thermal-printer-ui/src/App.vue b/showbits-thermal-printer-ui/src/App.vue
index b9bf3f4..e720548 100644
--- a/showbits-thermal-printer-ui/src/App.vue
+++ b/showbits-thermal-printer-ui/src/App.vue
@@ -1,18 +1,10 @@
+<script setup lang="ts">
+import CSegment from "./components/CSegment.vue";
+</script>
+
 <template>
-  <div class="glow">
-    <div class="strip">
-      <h2>Thing</h2>
-      Hello World
-      <br />
-      World Hello
-      <br />
-      <input type="file" />
-      <input />
-      <br />
-      <button>Foo</button>
-      <button>Foo</button>
-      <button>Foo</button>
-    </div>
+  <div class="strip">
+    <CSegment />
   </div>
 </template>
 
@@ -23,12 +15,6 @@
   padding: 32px;
 
   background-color: white;
-  mask: conic-gradient(from 100deg at top, #000 160deg, #0000 160deg)
-    center/64px;
-}
-
-.glow {
-  filter: drop-shadow(0 0 50px rgb(255, 238, 214));
 }
 </style>
 
@@ -53,6 +39,7 @@
   padding: 0;
 }
 
+h1,
 h2 {
   font-size: 32px;
 }
diff --git a/showbits-thermal-printer-ui/src/components/CSegment.vue b/showbits-thermal-printer-ui/src/components/CSegment.vue
new file mode 100644
index 0000000..92d910a
--- /dev/null
+++ b/showbits-thermal-printer-ui/src/components/CSegment.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import CSegmentText from "./CSegmentText.vue";
+
+const mode = ref<"text">();
+</script>
+
+<template>
+  <CSegmentText v-if="mode === 'text'" />
+  <section v-else class="choose">
+    <p>What do you want to print?</p>
+    <div class="list">
+      <button @click="mode = 'text'">Calendar</button>
+      <button @click="mode = 'text'">Cellular Automaton</button>
+      <button @click="mode = 'text'">Chat Message</button>
+      <button @click="mode = 'text'">Easter Egg</button>
+      <button @click="mode = 'text'">Text</button>
+      <button @click="mode = 'text'">Tic Tac Toe</button>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+p {
+  margin-bottom: 1ch;
+}
+
+.list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1ch;
+}
+</style>
diff --git a/showbits-thermal-printer-ui/src/components/CSegmentText.vue b/showbits-thermal-printer-ui/src/components/CSegmentText.vue
new file mode 100644
index 0000000..fc1dd0e
--- /dev/null
+++ b/showbits-thermal-printer-ui/src/components/CSegmentText.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts"></script>
+
+<template>
+  <section>
+    <h2>Text</h2>
+    <textarea rows="10"></textarea>
+    <fieldset>
+      <label><input type="checkbox" /> Force-Wrap</label>
+      <label><input type="checkbox" checked /> Feed</label>
+    </fieldset>
+    <button>Print</button>
+  </section>
+</template>
+
+<style scoped>
+section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+fieldset {
+  display: flex;
+  flex-direction: column;
+  border: none;
+}
+</style>