🚧 wip on ui: rework for vue 3 composition API

ui/src/components/Calendar.vue

@@ -45,14 +45,13 @@
   </figure>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { API } from "@/lib/api";
 import { APIError } from "@/lib/api_error";
 import { ensure_loaded, Loading, name_door } from "@/lib/helpers";
 import { ImageData } from "@/lib/model";
 import { Door } from "@/lib/rects/door";
 import { advent22Store } from "@/lib/store";
-import { Options, Vue } from "vue-class-component";
 
 import MultiModal from "./MultiModal.vue";
 import BulmaButton from "./bulma/Button.vue";

ui/src/components/admin/AdminView.vue

@@ -4,19 +4,8 @@
   <DoorMapEditor />
 </template>
 
-<script lang="ts">
-import { Options, Vue } from "vue-class-component";
-
+<script setup lang="ts">
 import CalendarAssistant from "./CalendarAssistant.vue";
 import ConfigView from "./ConfigView.vue";
 import DoorMapEditor from "./DoorMapEditor.vue";
-
-@Options({
-  components: {
-    ConfigView,
-    CalendarAssistant,
-    DoorMapEditor,
-  },
-})
-export default class extends Vue {}
 </script>

ui/src/components/admin/CalendarAssistant.vue

@@ -36,7 +36,7 @@
             :key="`btn-${day}`"
             :class="'tag is-' + (data.part === '' ? 'warning' : 'info')"
             icon="fa-solid fa-door-open"
-            :text="day"
+            :text="day.toString()"
             @click.left="door_click(day)"
           />
         </div>
@@ -45,74 +45,64 @@
   </BulmaDrawer>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { API } from "@/lib/api";
 import { name_door, objForEach } from "@/lib/helpers";
 import { ImageData, NumStrDict } from "@/lib/model";
-import { Options, Vue } from "vue-class-component";
 
 import MultiModal from "../MultiModal.vue";
 import BulmaButton from "../bulma/Button.vue";
 import BulmaDrawer from "../bulma/Drawer.vue";
 
-@Options({
-  components: {
-    BulmaButton,
-    BulmaDrawer,
-    MultiModal,
-  },
-})
-export default class extends Vue {
-  public day_data: {
-    [day: number]: {
-      part: string;
-      image_name: string;
-    };
-  } = {};
+const day_data: {
+  [day: number]: {
+    part: string;
+    image_name: string;
+  };
+} = {};
 
-  private multi_modal?: MultiModal;
+let multi_modal: MultiModal | undefined;
 
-  public modal_handle(modal: MultiModal) {
-    this.multi_modal = modal;
-  }
+function modal_handle(modal: MultiModal) {
+  multi_modal = modal;
+}
 
-  public on_open(ready: () => void, fail: () => void): void {
-    Promise.all([
-      API.request<NumStrDict>("admin/day_parts"),
-      API.request<NumStrDict>("admin/day_image_names"),
-    ])
-      .then(([day_parts, day_image_names]) => {
-        const _ensure_day_in_data = (day: number) => {
-          if (!(day in this.day_data)) {
-            this.day_data[day] = { part: "", image_name: "" };
-          }
-        };
+function on_open(ready: () => void, fail: () => void) {
+  Promise.all([
+    API.request<NumStrDict>("admin/day_parts"),
+    API.request<NumStrDict>("admin/day_image_names"),
+  ])
+    .then(([day_parts, day_image_names]) => {
+      const _ensure_day_in_data = (day: number) => {
+        if (!(day in day_data)) {
+          day_data[day] = { part: "", image_name: "" };
+        }
+      };
 
-        objForEach(day_parts, (day, part) => {
-          _ensure_day_in_data(day);
-          this.day_data[day].part = part;
-        });
+      objForEach(day_parts, (day, part) => {
+        _ensure_day_in_data(day);
+        day_data[day].part = part;
+      });
 
-        objForEach(day_image_names, (day, image_name) => {
-          _ensure_day_in_data(day);
-          this.day_data[day].image_name = image_name;
-        });
+      objForEach(day_image_names, (day, image_name) => {
+        _ensure_day_in_data(day);
+        day_data[day].image_name = image_name;
+      });
 
-        ready();
-      })
-      .catch(fail);
-  }
+      ready();
+    })
+    .catch(fail);
+}
 
-  public async door_click(day: number) {
-    if (this.multi_modal === undefined) return;
-    this.multi_modal.show_progress();
+async function door_click(day: number) {
+  if (multi_modal === undefined) return;
+  multi_modal.show_progress();
 
-    try {
-      const day_image = await API.request<ImageData>(`user/image_${day}`);
-      this.multi_modal!.show_image(day_image.data_url, name_door(day));
-    } catch (error) {
-      this.multi_modal!.hide();
-    }
+  try {
+    const day_image = await API.request<ImageData>(`user/image_${day}`);
+    multi_modal!.show_image(day_image.data_url, name_door(day));
+  } catch (error) {
+    multi_modal!.hide();
   }
 }
 </script>

ui/src/components/admin/ConfigView.vue

@@ -183,105 +183,96 @@
   </BulmaDrawer>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { API } from "@/lib/api";
 import { AdminConfigModel, Credentials, DoorSaved } from "@/lib/model";
 import { advent22Store } from "@/lib/store";
 import { DateTime } from "luxon";
-import { Options, Vue } from "vue-class-component";
 
 import BulmaDrawer from "../bulma/Drawer.vue";
 import BulmaSecret from "../bulma/Secret.vue";
 import CountDown from "../CountDown.vue";
 
-@Options({
-  components: {
-    BulmaDrawer,
-    BulmaSecret,
-    CountDown,
+const store = advent22Store();
+
+let admin_config_model: AdminConfigModel = {
+  solution: {
+    value: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
+    whitespace: "KEEP",
+    special_chars: "KEEP",
+    case: "KEEP",
+    clean: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
   },
-})
-export default class extends Vue {
-  public readonly store = advent22Store();
+  puzzle: {
+    first: "2023-12-01",
+    next: "2023-12-01",
+    last: "2023-12-24",
+    end: "2024-04-01",
+    seed: "",
+    extra_days: [],
+    skip_empty: true,
+  },
+  calendar: {
+    config_file: "lorem ipsum",
+    background: "dolor sit",
+    favicon: "sit amet",
+  },
+  image: {
+    size: 500,
+    border: 0,
+  },
+  fonts: [{ file: "consetetur", size: 0 }],
+  redis: {
+    host: "0.0.0.0",
+    port: 6379,
+    db: 0,
+    protocol: 3,
+  },
+  webdav: {
+    url: "sadipscing elitr",
+    cache_ttl: 0,
+    config_file: "sed diam nonumy",
+  },
+};
 
-  public admin_config_model: AdminConfigModel = {
-    solution: {
-      value: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
-      whitespace: "KEEP",
-      special_chars: "KEEP",
-      case: "KEEP",
-      clean: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
-    },
-    puzzle: {
-      first: "2023-12-01",
-      next: "2023-12-01",
-      last: "2023-12-24",
-      end: "2024-04-01",
-      seed: "",
-      extra_days: [],
-      skip_empty: true,
-    },
-    calendar: {
-      config_file: "lorem ipsum",
-      background: "dolor sit",
-      favicon: "sit amet",
-    },
-    image: {
-      size: 500,
-      border: 0,
-    },
-    fonts: [{ file: "consetetur", size: 0 }],
-    redis: {
-      host: "0.0.0.0",
-      port: 6379,
-      db: 0,
-      protocol: 3,
-    },
-    webdav: {
-      url: "sadipscing elitr",
-      cache_ttl: 0,
-      config_file: "sed diam nonumy",
-    },
-  };
-  public doors: DoorSaved[] = [];
-  public dav_credentials: Credentials = ["", ""];
-  public ui_credentials: Credentials = ["", ""];
+let doors: DoorSaved[] = [];
+let dav_credentials: Credentials = ["", ""];
+let ui_credentials: Credentials = ["", ""];
 
-  public fmt_puzzle_date(name: keyof AdminConfigModel["puzzle"]): string {
-    const iso_date = this.admin_config_model.puzzle[name];
-    if (!(typeof iso_date == "string")) return "-";
+function fmt_puzzle_date(name: keyof AdminConfigModel["puzzle"]): string {
+  const iso_date = admin_config_model.puzzle[name];
+  if (!(typeof iso_date == "string")) return "-";
 
-    return DateTime.fromISO(iso_date).toLocaleString(DateTime.DATE_SHORT);
-  }
+  return DateTime.fromISO(iso_date).toLocaleString(DateTime.DATE_SHORT);
+}
 
-  public on_open(ready: () => void, fail: () => void): void {
-    Promise.all([
-      this.store.update(),
-      API.request<AdminConfigModel>("admin/config_model"),
-      API.request<DoorSaved[]>("admin/doors"),
-    ])
-      .then(([store_update, admin_config_model, doors]) => {
-        store_update; // discard value
+function on_open(ready: () => void, fail: () => void): void {
+  Promise.all([
+    store.update(),
+    API.request<AdminConfigModel>("admin/config_model"),
+    API.request<DoorSaved[]>("admin/doors"),
+  ])
+    .then(([store_update, new_admin_config_model, new_doors]) => {
+      store_update; // discard value
 
-        this.admin_config_model = admin_config_model;
-        this.doors = doors;
+      admin_config_model = new_admin_config_model;
+      doors = new_doors;
 
-        ready();
-      })
-      .catch(fail);
-  }
+      ready();
+    })
+    .catch(fail);
+}
 
-  public load_dav_credentials(): void {
-    API.request<Credentials>("admin/dav_credentials")
-      .then((creds) => (this.dav_credentials = creds))
-      .catch(() => {});
-  }
+function load_dav_credentials(): void {
+  API.request<Credentials>("admin/dav_credentials")
+    .then((creds) => (dav_credentials = creds))
+    .catch(() => {});
+}
 
-  public load_ui_credentials(): void {
-    API.request<Credentials>("admin/ui_credentials")
-      .then((creds) => (this.ui_credentials = creds))
-      .catch(() => {});
-  }
+function load_ui_credentials(): void {
+  API.request<Credentials>("admin/ui_credentials")
+    .then((creds) => (ui_credentials = creds))
+    .catch(() => {});
 }
 </script>
 

ui/src/components/bulma/Breadcrumbs.vue

@@ -28,7 +28,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-  "update:modelValue": [number];
+  (event: "update:modelValue", value: number): void;
 }>();
 
 function change_step(next_step: number) {

ui/src/components/bulma/Drawer.vue

@@ -53,12 +53,7 @@ withDefaults(
 );
 
 const emit = defineEmits<{
-  open: [
-    {
-      ready(): void;
-      fail(): void;
-    },
-  ];
+  (event: "open", ready: () => void, fail: () => void): void;
 }>();
 
 const is_open = ref(false);
@@ -70,10 +65,11 @@ function toggle() {
   if (is_open.value) {
     state.value = "loading";
 
-    emit("open", {
-      ready: () => (state.value = "ready"),
-      fail: () => (state.value = "failed"),
-    });
+    emit(
+      "open",
+      () => (state.value = "ready"),
+      () => (state.value = "failed"),
+    );
   }
 }
 

ui/src/components/bulma/Secret.vue

@@ -16,7 +16,7 @@ import { ref } from "vue";
 import BulmaButton from "./Button.vue";
 
 const emit = defineEmits<{
-  load: [];
+  (event: "load"): void;
 }>();
 
 const state = ref<"start" | "click" | "show">("start");

ui/src/components/bulma/Toast.vue

@@ -12,19 +12,19 @@ import * as bulmaToast from "bulma-toast";
 import { onMounted, ref } from "vue";
 
 const emit = defineEmits<{
-  handle: [
-    {
-      show(options: bulmaToast.Options): void;
-      hide(): void;
-    },
-  ];
+  (
+    event: "handle",
+    show: (options: bulmaToast.Options) => void,
+    hide: () => void,
+  ): void;
 }>();
 
 const message = ref<HTMLDivElement | null>(null);
 
 onMounted(() =>
-  emit("handle", {
-    show(options: bulmaToast.Options = {}) {
+  emit(
+    "handle",
+    (options: bulmaToast.Options = {}) => {
       if (!(message.value instanceof HTMLElement)) return;
 
       bulmaToast.toast({
@@ -33,7 +33,7 @@ onMounted(() =>
         message: message.value,
       });
     },
-    hide() {
+    () => {
       if (!(message.value instanceof HTMLElement)) return;
 
       const toast_div = message.value.parentElement;
@@ -44,6 +44,6 @@ onMounted(() =>
 
       dbutton.click();
     },
-  }),
+  ),
 );
 </script>

ui/src/components/calendar/SVGRect.vue

@@ -49,6 +49,9 @@ function get_bg_aspect_ratio(): number {
   if (!loading_success(store.background_image)) return 1;
 
   return store.background_image.height / store.background_image.width;
+
+  // aspect_ratio is width/height!
+  // return store.background_image.aspect_ratio;
 }
 </script>
 

ui/src/lib/model.ts

@@ -58,8 +58,9 @@ export interface DoorSaved {
 }
 
 export interface ImageData {
-  height: number;
   width: number;
+  height: number;
+  aspect_ratio: number;
   data_url: string;
 }