Add sunrise/sunset document

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>