Add sunrise/sunset document

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

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { useApiRequest } from "@/apiRequest";
+import { ref } from "vue";
+import CError from "./CError.vue";
+
+const { disabled, error, makeRequest } = useApiRequest();
+
+const today = new Date();
+const latitude = ref<number>();
+const longitude = ref<number>();
+const year = ref(today.getFullYear());
+const month = ref(today.getMonth() + 1);
+const feed = ref(true);
+
+function submit() {
+  if (typeof latitude.value !== "number") return;
+  if (typeof longitude.value !== "number") return;
+  const data = new URLSearchParams();
+  data.append("latitude", latitude.value.toFixed(5));
+  data.append("longitude", longitude.value.toFixed(5));
+  data.append("year", year.value.toFixed());
+  data.append("month", month.value.toFixed());
+  data.append("feed", String(feed.value));
+  void makeRequest("api/sunrise", data);
+}
+</script>
+
+<template>
+  <form @submit.prevent="submit">
+    <h2>Sunrise and Sunset</h2>
+
+    <label class="wide">
+      Latitude:
+      <input
+        v-model="latitude"
+        type="number"
+        step="any"
+        min="-90"
+        max="90"
+        required
+        :disabled
+      />
+    </label>
+
+    <label class="wide">
+      Longitude:
+      <input
+        v-model="longitude"
+        type="number"
+        step="any"
+        min="-180"
+        max="180"
+        required
+        :disabled
+      />
+    </label>
+
+    <label class="wide">
+      Year:
+      <input
+        v-model="year"
+        type="number"
+        min="-9999"
+        max="9999"
+        required
+        :disabled
+      />
+    </label>
+
+    <label class="wide">
+      Month:
+      <input
+        v-model="month"
+        type="number"
+        min="1"
+        max="12"
+        required
+        :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

@@ -5,11 +5,19 @@ import CDocumentCells from "./CDocumentCells.vue";
 import CDocumentChat from "./CDocumentChat.vue";
 import CDocumentEgg from "./CDocumentEgg.vue";
 import CDocumentImage from "./CDocumentImage.vue";
+import CDocumentSunrise from "./CDocumentSunrise.vue";
 import CDocumentText from "./CDocumentText.vue";
 import CDocumentTictactoe from "./CDocumentTictactoe.vue";
 
 const mode = ref<
-  "calendar" | "chat" | "cells" | "egg" | "image" | "text" | "tictactoe"
+  | "calendar"
+  | "cells"
+  | "chat"
+  | "egg"
+  | "image"
+  | "sunrise"
+  | "text"
+  | "tictactoe"
 >();
 </script>
 
@@ -17,10 +25,11 @@ const mode = ref<
   <div class="outer">
     <button v-if="mode" class="close" @click="mode = undefined">X</button>
     <CDocumentCalendar v-if="mode === 'calendar'" />
-    <CDocumentChat v-if="mode === 'chat'" />
     <CDocumentCells v-if="mode === 'cells'" />
+    <CDocumentChat v-if="mode === 'chat'" />
     <CDocumentEgg v-if="mode === 'egg'" />
     <CDocumentImage v-if="mode === 'image'" />
+    <CDocumentSunrise v-if="mode === 'sunrise'" />
     <CDocumentText v-if="mode === 'text'" />
     <CDocumentTictactoe v-if="mode === 'tictactoe'" />
     <hr v-if="mode !== undefined" />
@@ -32,6 +41,7 @@ const mode = ref<
         <button @click="mode = 'chat'">Chat Message</button>
         <button @click="mode = 'egg'">Easter Egg</button>
         <button @click="mode = 'image'">Image</button>
+        <button @click="mode = 'sunrise'">Sunrise and Sunset</button>
         <button @click="mode = 'text'">Text</button>
         <button @click="mode = 'tictactoe'">Tic Tac Toe</button>
         <a href="photo.html">Take a photo</a>