Add catfishing endpoint and UI

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

@@ -0,0 +1,49 @@
+<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 day = ref<number>(448);
+const feed = ref(true);
+
+function submit() {
+  const data = new URLSearchParams();
+  if (typeof day.value === "number") data.append("day", day.value.toFixed());
+  data.append("feed", String(feed.value));
+  void makeRequest("api/catfishing", data);
+}
+</script>
+
+<template>
+  <form ref="form" @submit.prevent="submit">
+    <h2>catfishing</h2>
+
+    <label class="wide">
+      Day:
+      <input v-model="day" type="number" min="1" :disabled />
+    </label>
+
+    <div class="wide">
+      <label><input v-model="feed" type="checkbox" :disabled /> Feed</label>
+    </div>
+
+    <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

@@ -2,6 +2,7 @@
 import { ref } from "vue";
 import CDocumentBanner from "./CDocumentBanner.vue";
 import CDocumentCalendar from "./CDocumentCalendar.vue";
+import CDocumentsCatfishing from "./CDocumentCatfishing.vue";
 import CDocumentCells from "./CDocumentCells.vue";
 import CDocumentChat from "./CDocumentChat.vue";
 import CDocumentEgg from "./CDocumentEgg.vue";
@@ -14,6 +15,7 @@ import CDocumentXkcd from "./CDocumentXkcd.vue";
 const mode = ref<
   | "banner"
   | "calendar"
+  | "catfishing"
   | "cells"
   | "chat"
   | "egg"
@@ -30,6 +32,7 @@ const mode = ref<
     <button v-if="mode" class="close" @click="mode = undefined">X</button>
     <CDocumentBanner v-if="mode === 'banner'" />
     <CDocumentCalendar v-if="mode === 'calendar'" />
+    <CDocumentsCatfishing v-if="mode === 'catfishing'" />
     <CDocumentCells v-if="mode === 'cells'" />
     <CDocumentChat v-if="mode === 'chat'" />
     <CDocumentEgg v-if="mode === 'egg'" />
@@ -44,6 +47,7 @@ const mode = ref<
       <div class="list">
         <button @click="mode = 'banner'">Banner</button>
         <button @click="mode = 'calendar'">Calendar</button>
+        <button @click="mode = 'catfishing'">Catfishing</button>
         <button @click="mode = 'cells'">Cellular Automaton</button>
         <button @click="mode = 'chat'">Chat Message</button>
         <button @click="mode = 'egg'">Easter Egg</button>