Add xkcd document

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

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { useApiRequest } from "@/apiRequest";
+import { ref, useTemplateRef } from "vue";
+import CError from "./CError.vue";
+
+const { disabled, error, makeRequest } = useApiRequest();
+const form = useTemplateRef<HTMLFormElement>("form");
+
+const number = ref<number>();
+const feed = ref(true);
+
+function submit() {
+  const data = new URLSearchParams();
+  if (typeof number.value === "number")
+    data.append("number", number.value.toFixed());
+  data.append("feed", String(feed.value));
+  void makeRequest("api/xkcd", data);
+}
+</script>
+
+<template>
+  <form ref="form" @submit.prevent="submit">
+    <h2>xkcd</h2>
+
+    <label class="wide">
+      Number:
+      <input
+        v-model="number"
+        type="number"
+        min="1"
+        placeholder="current"
+        :disabled
+      />
+    </label>
+
+    <label><input v-model="feed" type="checkbox" :disabled /> Feed</label>
+
+    <button :disabled>Print</button>
+    <CError :message="error" />
+  </form>
+</template>
+
+<style scoped>
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.wide {
+  display: flex;
+  flex-direction: column;
+}
+</style>

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

@@ -8,6 +8,7 @@ import CDocumentImage from "./CDocumentImage.vue";
 import CDocumentSunrise from "./CDocumentSunrise.vue";
 import CDocumentText from "./CDocumentText.vue";
 import CDocumentTictactoe from "./CDocumentTictactoe.vue";
+import CDocumentXkcd from "./CDocumentXkcd.vue";
 
 const mode = ref<
   | "calendar"
@@ -18,6 +19,7 @@ const mode = ref<
   | "sunrise"
   | "text"
   | "tictactoe"
+  | "xkcd"
 >();
 </script>
 
@@ -32,6 +34,7 @@ const mode = ref<
     <CDocumentSunrise v-if="mode === 'sunrise'" />
     <CDocumentText v-if="mode === 'text'" />
     <CDocumentTictactoe v-if="mode === 'tictactoe'" />
+    <CDocumentXkcd v-if="mode === 'xkcd'" />
     <hr v-if="mode !== undefined" />
     <section>
       <p>What do you want to print?</p>
@@ -44,6 +47,7 @@ const mode = ref<
         <button @click="mode = 'sunrise'">Sunrise and Sunset</button>
         <button @click="mode = 'text'">Text</button>
         <button @click="mode = 'tictactoe'">Tic Tac Toe</button>
+        <button @click="mode = 'xkcd'">xkcd</button>
         <a href="photo.html">Take a photo</a>
       </div>
     </section>