ui/.devcontainer/devcontainer.json

@@ -2,19 +2,15 @@
 // https://github.com/microsoft/vscode-dev-containers/tree/v0.245.2/containers/javascript-node
 {
   "name": "Advent22 UI",
-
   // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
-  "image": "mcr.microsoft.com/devcontainers/javascript-node:4-20-trixie",
-
+  "image": "mcr.microsoft.com/vscode/devcontainers/javascript-node:1-18-bookworm",
   // Features to add to the dev container. More info: https://containers.dev/features.
   "features": {
-    "ghcr.io/devcontainers/features/git-lfs:1": {},
     "ghcr.io/devcontainers-extra/features/apt-get-packages:1": {
-      "packages": "git-flow"
+      "packages": "git-flow, git-lfs"
     },
     "ghcr.io/devcontainers-extra/features/vue-cli:2": {}
   },
-
   // Configure tool-specific properties.
   "customizations": {
     // Configure properties specific to VS Code.
@@ -33,16 +29,11 @@
       ]
     }
   },
-
-  // Use 'postCreateCommand' to run commands after the container is created.
-  // "postCreateCommand": "yarn install",
-
-  // Use 'postStartCommand' to run commands after the container is started.
-	"postStartCommand": "npx --yes update-browserslist-db@latest && yarn install --production false"
-
   // Use 'forwardPorts' to make a list of ports inside the container available locally.
   // "forwardPorts": [],
-
-  // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
-  // "remoteUser": "root"
+  // Use 'postCreateCommand' to run commands after the container is created.
+  // "postCreateCommand": "yarn install",
+  "postStartCommand": "yarn install --production false",
+  // Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
+  "remoteUser": "node"
 }

ui/.eslintrc.js

@@ -30,9 +30,6 @@ module.exports = {
       env: {
         mocha: true,
       },
-      rules: {
-        "@typescript-eslint/no-unused-expressions": "off",
-      }
     },
   ],
 };

ui/.vscode/settings.json

@@ -1,23 +1,21 @@
 {
-  "[scss][vue][typescript][javascript][json][jsonc][jsonl]": {
+  "editor.formatOnSave": true,
+  "[vue]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
-
-  "[jsonc]": {
-    "editor.formatOnSave": false,
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
-
   "editor.codeActionsOnSave": {
     "source.organizeImports": "explicit"
   },
-
   "git.closeDiffOnOperation": true,
-  "editor.formatOnSave": true,
   "editor.tabSize": 2,
-
   "sass.disableAutoIndent": true,
   "sass.format.convert": false,
   "sass.format.deleteWhitespace": true,
-
-  "prettier.trailingComma": "all",
+  "volar.inlayHints.eventArgumentInInlineHandlers": false
 }

ui/babel.config.json

@@ -1,5 +1,3 @@
 {
-  "presets": [
-    "@vue/cli-plugin-babel/preset"
-  ]
+  "presets": ["@vue/cli-plugin-babel/preset"]
 }

ui/package.json

@@ -3,44 +3,46 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "serve": "vue-cli-service serve --host 0.0.0.0 --port 8080",
     "build": "vue-cli-service build",
     "test:unit": "vue-cli-service test:unit",
     "test:unit-watch": "vue-cli-service test:unit --watch",
-    "lint": "vue-cli-service lint",
-    "ui": "vue ui --host 0.0.0.0 --headless"
+    "lint": "vue-cli-service lint"
   },
   "devDependencies": {
-    "@fortawesome/fontawesome-svg-core": "^7.2.0",
-    "@fortawesome/free-solid-svg-icons": "^7.2.0",
-    "@fortawesome/vue-fontawesome": "^3.1.3",
-    "@types/chai": "^5.2.3",
-    "@types/luxon": "^3.7.1",
-    "@types/mocha": "^10.0.10",
-    "@typescript-eslint/eslint-plugin": "^8.55.0",
-    "@typescript-eslint/parser": "^8.55.0",
-    "@vue/cli-plugin-babel": "^5.0.9",
-    "@vue/cli-plugin-eslint": "^5.0.9",
-    "@vue/cli-plugin-typescript": "^5.0.9",
-    "@vue/cli-plugin-unit-mocha": "^5.0.9",
-    "@vue/cli-service": "^5.0.9",
+    "@fortawesome/fontawesome-svg-core": "^6.6.0",
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@fortawesome/vue-fontawesome": "^3.0.8",
+    "@types/chai": "^4.3.17",
+    "@types/luxon": "^3.4.2",
+    "@types/mocha": "^10.0.7",
+    "@typescript-eslint/eslint-plugin": "^7.3.1",
+    "@typescript-eslint/parser": "^7.3.1",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-plugin-typescript": "~5.0.0",
+    "@vue/cli-plugin-unit-mocha": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
     "@vue/eslint-config-typescript": "^13.0.0",
     "@vue/test-utils": "^2.4.6",
-    "@vue/tsconfig": "^0.8.1",
     "animate.css": "^4.1.1",
-    "axios": "^1.13.5",
-    "bulma": "^1.0.4",
+    "axios": "^1.7.3",
+    "bulma": "^1.0.2",
     "bulma-toast": "2.4.3",
-    "chai": "^6.2.2",
-    "core-js": "^3.48.0",
-    "eslint": "^8.57.1",
-    "eslint-plugin-vue": "^9.33.0",
-    "luxon": "^3.7.2",
-    "pinia": "^3.0.4",
-    "sass": "~1.94.3",
+    "chai": "^5.1.1",
+    "core-js": "^3.38.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-vue": "^9.27.0",
+    "luxon": "^3.5.0",
+    "pinia": "^2.2.1",
+    "sass": "^1.77.8",
     "sass-loader": "^16.0.0",
-    "typescript": "^5.9.3",
+    "typescript": "~5.5.4",
     "vue": "^3.5.25",
-    "vue-cli-plugin-webpack-bundle-analyzer": "^4.0.0"
+    "vue-class-component": "^8.0.0-0"
+  },
+  "dependencies": {},
+  "prettier": {
+    "trailingComma": "all"
   }
 }

ui/src/components/AdminButton.vue

@@ -12,7 +12,7 @@
 
 <script setup lang="ts">
 import { APIError } from "@/lib/api_error";
-import type { Credentials } from "@/lib/model";
+import { Credentials } from "@/lib/model";
 import { advent22Store } from "@/lib/store";
 import { ref } from "vue";
 

ui/src/components/Calendar.vue

@@ -49,15 +49,15 @@
 <script setup lang="ts">
 import { API } from "@/lib/api";
 import { APIError } from "@/lib/api_error";
-import { type VueLike, name_door, unwrap_loading } from "@/lib/helpers";
-import type { ImageData } from "@/lib/model";
+import { VueLike, name_door, unwrap_loading } from "@/lib/helpers";
+import { ImageData } from "@/lib/model";
 import { Door } from "@/lib/rects/door";
 import { advent22Store } from "@/lib/store";
 
 import { onBeforeUnmount } from "vue";
-import MultiModal, { type HMultiModal } from "./MultiModal.vue";
+import MultiModal, { HMultiModal } from "./MultiModal.vue";
 import BulmaButton from "./bulma/Button.vue";
-import BulmaToast, { type HBulmaToast } from "./bulma/Toast.vue";
+import BulmaToast, { HBulmaToast } from "./bulma/Toast.vue";
 import CalendarDoor from "./calendar/CalendarDoor.vue";
 import ThouCanvas from "./calendar/ThouCanvas.vue";
 

ui/src/components/LoginModal.vue

@@ -16,7 +16,7 @@
               ref="username_input"
               class="input"
               type="text"
-              v-model="creds.username"
+              v-model="creds[0]"
             />
           </div>
         </div>
@@ -24,7 +24,7 @@
         <div class="field">
           <label class="label">Passwort</label>
           <div class="control">
-            <input class="input" type="password" v-model="creds.password" />
+            <input class="input" type="password" v-model="creds[1]" />
           </div>
         </div>
       </section>
@@ -49,7 +49,7 @@
 
 <script setup lang="ts">
 import { wait_for } from "@/lib/helpers";
-import type { Credentials } from "@/lib/model";
+import { Credentials } from "@/lib/model";
 import { onBeforeUnmount, onMounted, ref, useTemplateRef } from "vue";
 import BulmaButton from "./bulma/Button.vue";
 
@@ -60,10 +60,7 @@ const emit = defineEmits<{
   (event: "cancel"): void;
 }>();
 
-const creds = ref<Credentials>({
-  username: "",
-  password: "",
-});
+const creds = ref<Credentials>(["", ""]);
 
 function submit(): void {
   emit("submit", creds.value);

ui/src/components/admin/CalendarAssistant.vue

@@ -48,10 +48,10 @@
 <script setup lang="ts">
 import { API } from "@/lib/api";
 import { name_door, objForEach } from "@/lib/helpers";
-import type { ImageData, NumStrDict } from "@/lib/model";
+import { ImageData, NumStrDict } from "@/lib/model";
 import { ref } from "vue";
 
-import MultiModal, { type HMultiModal } from "../MultiModal.vue";
+import MultiModal, { HMultiModal } from "../MultiModal.vue";
 import BulmaButton from "../bulma/Button.vue";
 import BulmaDrawer from "../bulma/Drawer.vue";
 

ui/src/components/admin/ConfigView.vue

@@ -191,7 +191,7 @@
 
 <script setup lang="ts">
 import { API } from "@/lib/api";
-import type { AdminConfigModel, Credentials, DoorSaved } from "@/lib/model";
+import { AdminConfigModel, Credentials, DoorSaved } from "@/lib/model";
 import { advent22Store } from "@/lib/store";
 import { DateTime } from "luxon";
 import { ref } from "vue";

ui/src/components/admin/DoorMapEditor.vue

@@ -71,11 +71,11 @@
 <script setup lang="ts">
 import { API } from "@/lib/api";
 import { APIError } from "@/lib/api_error";
-import type { DoorSaved } from "@/lib/model";
+import { DoorSaved } from "@/lib/model";
 import { Door } from "@/lib/rects/door";
 import { toast } from "bulma-toast";
 import { ref } from "vue";
-import type { BCStep } from "../bulma/Breadcrumbs.vue";
+import { BCStep } from "../bulma/Breadcrumbs.vue";
 
 import Calendar from "../Calendar.vue";
 import BulmaBreadcrumbs from "../bulma/Breadcrumbs.vue";

ui/src/components/bulma/Drawer.vue

@@ -58,19 +58,10 @@ const state = ref<"closed" | "loading" | "ok" | "err">("closed");
 const is_open = computed(() => state.value !== "closed");
 
 async function toggle(): Promise<void> {
-  switch (state.value) {
-    case "closed":
-      // start opening when closed
-      await load();
-      break;
-
-    case "loading":
-      // don't toggle when loading
-      break;
-
-    default:
+  if (is_open.value) {
     state.value = "closed";
-      break;
+  } else {
+    await load();
   }
 }
 

ui/src/components/bulma/Toast.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script setup lang="ts">
-import { type Options as ToastOptions, toast } from "bulma-toast";
+import { Options as ToastOptions, toast } from "bulma-toast";
 import { onMounted, useTemplateRef } from "vue";
 
 export type HBulmaToast = {

ui/src/components/calendar/CalendarDoor.vue

@@ -17,7 +17,7 @@
 import { Door } from "@/lib/rects/door";
 import { advent22Store } from "@/lib/store";
 
-import type { VueLike } from "@/lib/helpers";
+import { VueLike } from "@/lib/helpers";
 import SVGRect from "./SVGRect.vue";
 
 const store = advent22Store();

ui/src/components/calendar/SVGRect.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script setup lang="ts">
-import { type VueLike, unwrap_loading } from "@/lib/helpers";
+import { VueLike, unwrap_loading } from "@/lib/helpers";
 import { Rectangle } from "@/lib/rects/rectangle";
 import { advent22Store } from "@/lib/store";
 import { computed } from "vue";

ui/src/components/editor/DoorCanvas.vue

@@ -29,7 +29,7 @@ import { Rectangle } from "@/lib/rects/rectangle";
 import { Vector2D } from "@/lib/rects/vector2d";
 import { computed, ref } from "vue";
 
-import type { VueLike } from "@/lib/helpers";
+import { VueLike } from "@/lib/helpers";
 import CalendarDoor from "../calendar/CalendarDoor.vue";
 import SVGRect from "../calendar/SVGRect.vue";
 import ThouCanvas from "../calendar/ThouCanvas.vue";

ui/src/components/editor/DoorChooser.vue

@@ -24,7 +24,7 @@
 </template>
 
 <script setup lang="ts">
-import { type VueLike, unwrap_loading } from "@/lib/helpers";
+import { VueLike, unwrap_loading } from "@/lib/helpers";
 import { Door } from "@/lib/rects/door";
 import { advent22Store } from "@/lib/store";
 

ui/src/components/editor/DoorPlacer.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script setup lang="ts">
-import { type VueLike, unwrap_loading } from "@/lib/helpers";
+import { VueLike, unwrap_loading } from "@/lib/helpers";
 import { Door } from "@/lib/rects/door";
 import { advent22Store } from "@/lib/store";
 

ui/src/components/editor/PreviewDoor.vue

@@ -26,7 +26,7 @@
 import { Door } from "@/lib/rects/door";
 import { ref, useTemplateRef } from "vue";
 
-import { type VueLike, unwrap_vuelike, wait_for } from "@/lib/helpers";
+import { VueLike, unwrap_vuelike, wait_for } from "@/lib/helpers";
 import SVGRect from "../calendar/SVGRect.vue";
 
 const model = defineModel<VueLike<Door>>({ required: true });

ui/src/lib/api.ts

@@ -1,10 +1,9 @@
-import type {
+import axios, {
   AxiosBasicCredentials,
-  AxiosRequestConfig,
-  Method,
-  RawAxiosRequestHeaders,
+  type AxiosRequestConfig,
+  type Method,
+  type RawAxiosRequestHeaders,
 } from "axios";
-import axios from "axios";
 import { APIError } from "./api_error";
 
 interface Params {
@@ -22,8 +21,7 @@ export class API {
       return `${window.location.protocol}//${window.location.host}/api`;
     } else if (process.env.NODE_ENV !== "development") {
       // not in prouction or development mode
-      // eslint-disable-next-line no-console
-      console.warn("Unexpected NODE_ENV value: ", process.env.NODE_ENV);
+      console.warn("Unexpected NODE_ENV value");
     }
 
     // in development mode, return "proto://hostname:8000/api"
@@ -84,7 +82,6 @@ export class API {
       const response = await this.axios.request<T>(this.get_axios_config(p));
       return response.data;
     } catch (reason) {
-      // eslint-disable-next-line no-console
       console.error(`Failed to query ${p.endpoint}: ${reason}`);
       throw new APIError(reason, p.endpoint);
     }

ui/src/lib/helpers.ts

@@ -1,4 +1,4 @@
-import { nextTick, type UnwrapRef } from "vue";
+import { nextTick, UnwrapRef } from "vue";
 import { APIError } from "./api_error";
 
 export function objForEach<T>(
@@ -42,7 +42,6 @@ export function handle_error(error: unknown): void {
   if (error instanceof APIError) {
     error.alert();
   } else {
-    // eslint-disable-next-line no-console
     console.error(error);
   }
 }

ui/src/lib/rects/door.ts

@@ -1,5 +1,5 @@
-import { type VueLike, unwrap_vuelike } from "../helpers";
-import type { DoorSaved } from "../model";
+import { VueLike, unwrap_vuelike } from "../helpers";
+import { DoorSaved } from "../model";
 import { Rectangle } from "./rectangle";
 import { Vector2D } from "./vector2d";
 

ui/src/lib/store.ts

@@ -1,7 +1,7 @@
 import { acceptHMRUpdate, defineStore } from "pinia";
 import { API } from "./api";
-import type { Loading } from "./helpers";
-import type { Credentials, DoorSaved, ImageData, SiteConfigModel } from "./model";
+import { Loading } from "./helpers";
+import { Credentials, DoorSaved, ImageData, SiteConfigModel } from "./model";
 import { Door } from "./rects/door";
 
 declare global {
@@ -20,7 +20,9 @@ type State = {
   next_door_target: number | null;
 };
 
-export const advent22Store = defineStore("advent22", {
+export const advent22Store = defineStore({
+  id: "advent22",
+
   state: (): State => ({
     on_initialized: [],
     is_touch_device:
@@ -62,8 +64,8 @@ export const advent22Store = defineStore("advent22", {
         link.href = favicon.data_url;
 
         if (link.parentElement === null)
-          document.getElementsByTagName("head")[0]!.appendChild(link);
-      } catch { }
+          document.getElementsByTagName("head")[0].appendChild(link);
+      } catch {}
 
       try {
         const [is_admin, site_config, background_image, user_doors, next_door] =

ui/src/main.scss

@@ -20,4 +20,4 @@
 // main imports
 //==============
 
-@forward "animate.css/animate";
+@import "animate.css/animate";

ui/tsconfig.json

@@ -1,33 +1,30 @@
 {
-  "extends": "@vue/tsconfig/tsconfig.dom.json",
   "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "jsx": "preserve",
+    "moduleResolution": "node",
     "experimentalDecorators": true,
-    "lib": [
-      "es2020",
-      "dom",
-      "dom.iterable",
-      "es2022.object",
-      "es2023.array",
-    ],
-    // "moduleResolution": "node",
-    // "sourceMap": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "useDefineForClassFields": true,
+    "sourceMap": true,
     "baseUrl": ".",
-    "types": [
-      "webpack-env",
-      "mocha",
-      "chai",
-    ],
+    "types": ["webpack-env", "mocha", "chai"],
     "paths": {
-      "@/*": [
-        "src/*",
-      ]
+      "@/*": ["src/*"]
     },
+    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
   },
   "include": [
-    "src/**/*.vue",
     "src/**/*.ts",
-    // "src/**/*.tsx",
+    "src/**/*.tsx",
+    "src/**/*.vue",
     "tests/**/*.ts",
-    // "tests/**/*.tsx",
+    "tests/**/*.tsx"
   ],
+  "exclude": ["node_modules"]
 }

ui/vue.config.js

@@ -1,11 +1,10 @@
-/* eslint-disable @typescript-eslint/no-require-imports */
 const { defineConfig } = require("@vue/cli-service");
 const webpack = require("webpack");
 
 module.exports = defineConfig({
   transpileDependencies: true,
   devServer: {
-    host: "0.0.0.0",
+    host: "localhost",
   },
   pages: {
     index: {