Merge branch 'feature/ui-rescaffold' into develop

This commit is contained in:
Jörn-Michael Miehe 2026-02-22 01:32:18 +00:00
commit d9f4042bd3
51 changed files with 2937 additions and 7706 deletions

View file

@ -25,9 +25,9 @@ RUN --mount=type=cache,id=ui,target=/root/.yarn \
set -ex; \
\
yarn dlx update-browserslist-db@latest; \
yarn build --dest /opt/advent22/ui; \
yarn build --outDir /opt/advent22/ui; \
# exclude webpack-bundle-analyzer output
rm -f /opt/advent22/ui/report.html;
rm -f /opt/advent22/ui/stats.html;
###############

View file

@ -1,4 +0,0 @@
> 1%
last 2 versions
not dead
not ie 11

View file

@ -1,51 +1,54 @@
// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
// https://github.com/microsoft/vscode-dev-containers/tree/v0.245.2/containers/javascript-node
{
"name": "Advent22 UI",
"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-24-trixie",
// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
"image": "mcr.microsoft.com/devcontainers/javascript-node:4-24-trixie",
// 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/zsh-plugins:0": {
"plugins": "git-flow npm nvm yarn"
},
"ghcr.io/devcontainers-extra/features/apt-get-packages:1": {
"packages": "git-flow"
},
"ghcr.io/devcontainers-extra/features/vue-cli:2": {}
// 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/zsh-plugins:0": {
"plugins": "git-flow npm nvm yarn"
},
// Configure tool-specific properties.
"customizations": {
// Configure properties specific to VS Code.
"vscode": {
// Set *default* container specific settings.json values on container create.
"settings": {
"terminal.integrated.defaultProfile.linux": "zsh"
},
// Add the IDs of extensions you want installed when the container is created.
"extensions": [
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode",
"mhutchie.git-graph",
"Syler.sass-indented",
"Vue.volar"
]
}
"ghcr.io/devcontainers-extra/features/apt-get-packages:1": {
"packages": "git-flow"
},
"ghcr.io/devcontainers-extra/features/vue-cli:2": {}
},
// Use 'postCreateCommand' to run commands after the container is created.
// "postCreateCommand": "yarn install",
// Configure tool-specific properties.
"customizations": {
// Configure properties specific to VS Code.
"vscode": {
// Set *default* container specific settings.json values on container create.
"settings": {
"terminal.integrated.defaultProfile.linux": "zsh"
},
// Add the IDs of extensions you want installed when the container is created.
"extensions": [
"dbaeumer.vscode-eslint",
"EditorConfig.EditorConfig",
"esbenp.prettier-vscode",
"mhutchie.git-graph",
"oxc.oxc-vscode",
"Syler.sass-indented",
"vitest.explorer",
"Vue.volar"
]
}
},
// Use 'postStartCommand' to run commands after the container is started.
"postStartCommand": "yarn dlx update-browserslist-db@latest && yarn install"
// Use 'postCreateCommand' to run commands after the container is created.
// "postCreateCommand": "yarn install",
// Use 'forwardPorts' to make a list of ports inside the container available locally.
// "forwardPorts": [],
// Use 'postStartCommand' to run commands after the container is started.
"postStartCommand": "yarn dlx update-browserslist-db@latest && yarn install"
// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
// "remoteUser": "root"
// 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"
}

8
ui/.editorconfig Normal file
View file

@ -0,0 +1,8 @@
[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue,css,scss,sass,less,styl}]
charset = utf-8
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true
end_of_line = lf
max_line_length = 100

View file

@ -1,38 +0,0 @@
module.exports = {
root: true,
env: {
node: true,
},
extends: [
"plugin:vue/vue3-essential",
"eslint:recommended",
"@vue/typescript/recommended",
],
parserOptions: {
ecmaVersion: 2020,
},
rules: {
"no-empty": "off",
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
},
overrides: [
{
files: [
"**/__tests__/*.{j,t}s?(x)",
"**/tests/unit/**/*.spec.{j,t}s?(x)",
],
env: {
mocha: true,
},
rules: {
"@typescript-eslint/no-unused-expressions": "off",
}
},
],
};

1
ui/.gitattributes vendored Normal file
View file

@ -0,0 +1 @@
* text=auto eol=lf

15
ui/.gitignore vendored
View file

@ -1,4 +1,19 @@
# from newly scaffolded vite project
.DS_Store
dist-ssr
coverage
*.local
# Cypress
/cypress/videos/
/cypress/screenshots/
# Vitest
__screenshots__/
# Vite
*.timestamp-*-*.mjs
# https://raw.githubusercontent.com/github/gitignore/refs/heads/main/Node.gitignore

10
ui/.oxlintrc.json Normal file
View file

@ -0,0 +1,10 @@
{
"$schema": "./node_modules/oxlint/configuration_schema.json",
"plugins": ["eslint", "typescript", "unicorn", "oxc", "vue", "vitest"],
"env": {
"browser": true
},
"categories": {
"correctness": "error"
}
}

7
ui/.prettierrc.json Normal file
View file

@ -0,0 +1,7 @@
{
"$schema": "https://json.schemastore.org/prettierrc",
"semi": true,
"singleQuote": false,
"printWidth": 100,
"trailingComma": "all"
}

View file

@ -1,3 +1,12 @@
{
"recommendations": ["sdras.vue-vscode-snippets"]
"recommendations": [
"dbaeumer.vscode-eslint",
"EditorConfig.EditorConfig",
"esbenp.prettier-vscode",
"mhutchie.git-graph",
"oxc.oxc-vscode",
"Syler.sass-indented",
"vitest.explorer",
"Vue.volar"
]
}

View file

@ -4,10 +4,11 @@
},
"[jsonc]": {
"editor.formatOnSave": false,
"editor.formatOnSave": false
},
"editor.codeActionsOnSave": {
"source.fixAll": "explicit",
"source.organizeImports": "explicit"
},
@ -15,9 +16,14 @@
"editor.formatOnSave": true,
"editor.tabSize": 2,
"explorer.fileNesting.enabled": true,
"explorer.fileNesting.patterns": {
"tsconfig.json": "tsconfig.*.json, env.d.ts, typed-router.d.ts",
"vite.config.*": "jsconfig*, vitest.config.*, cypress.config.*, playwright.config.*",
"package.json": "package-lock.json, pnpm*, .yarnrc*, yarn*, .eslint*, eslint*, .oxlint*, oxlint*, .oxfmt*, .prettier*, prettier*, .editorconfig"
},
"sass.disableAutoIndent": true,
"sass.format.convert": false,
"sass.format.deleteWhitespace": true,
"prettier.trailingComma": "all",
"sass.format.deleteWhitespace": true
}

17
ui/.vscode/tasks.json vendored
View file

@ -3,10 +3,21 @@
"tasks": [
{
"type": "npm",
"script": "serve",
"script": "dev",
"problemMatcher": [],
"label": "UI starten",
"detail": "vue-cli-service serve"
"label": "UI starten"
},
{
"type": "npm",
"script": "lint",
"problemMatcher": ["$eslint-compact"],
"label": "Linter"
},
{
"type": "npm",
"script": "format",
"problemMatcher": [],
"label": "Formatter"
}
]
}

View file

@ -1,29 +1,54 @@
# advent22_ui
## Project setup
This template should help get you started developing with Vue 3 in Vite.
```
yarn install
## Recommended IDE Setup
[VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
## Recommended Browser Setup
- Chromium-based browsers (Chrome, Edge, Brave, etc.):
- [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
- [Turn on Custom Object Formatter in Chrome DevTools](http://bit.ly/object-formatters)
- Firefox:
- [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
- [Turn on Custom Object Formatter in Firefox DevTools](https://fxdx.dev/firefox-devtools-custom-object-formatters/)
## Type Support for `.vue` Imports in TS
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
## Customize configuration
See [Vite Configuration Reference](https://vite.dev/config/).
## Project Setup
```sh
yarn
```
### Compiles and hot-reloads for development
### Compile and Hot-Reload for Development
```
yarn serve
```sh
yarn dev
```
### Compiles and minifies for production
### Type-Check, Compile and Minify for Production
```
```sh
yarn build
```
### Lints and fixes files
### Run Unit Tests with [Vitest](https://vitest.dev/)
```sh
yarn test:unit
```
### Lint with [ESLint](https://eslint.org/)
```sh
yarn lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

View file

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

1
ui/env.d.ts vendored Normal file
View file

@ -0,0 +1 @@
/// <reference types="vite/client" />

32
ui/eslint.config.ts Normal file
View file

@ -0,0 +1,32 @@
import { globalIgnores } from "eslint/config";
import { defineConfigWithVueTs, vueTsConfigs } from "@vue/eslint-config-typescript";
import pluginVue from "eslint-plugin-vue";
import pluginVitest from "@vitest/eslint-plugin";
import pluginOxlint from "eslint-plugin-oxlint";
import skipFormatting from "eslint-config-prettier/flat";
// To allow more languages other than `ts` in `.vue` files, uncomment the following lines:
// import { configureVueProject } from '@vue/eslint-config-typescript'
// configureVueProject({ scriptLangs: ['ts', 'tsx'] })
// More info at https://github.com/vuejs/eslint-config-typescript/#advanced-setup
export default defineConfigWithVueTs(
{
name: "app/files-to-lint",
files: ["**/*.{vue,ts,mts,tsx}"],
},
globalIgnores(["**/dist/**", "**/dist-ssr/**", "**/coverage/**"]),
...pluginVue.configs["flat/essential"],
vueTsConfigs.recommended,
{
...pluginVitest.configs.recommended,
files: ["src/**/__tests__/*"],
},
...pluginOxlint.buildFromOxlintConfigFile(".oxlintrc.json"),
skipFormatting,
);

View file

@ -1,11 +1,11 @@
<!DOCTYPE html>
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title><%= htmlWebpackPlugin.options.title %></title>
<meta charset="UTF-8" />
<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge" /> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="/favicon.ico" />
<title><%= title %></title>
<!-- Matomo -->
<script>
let _paq = (window._paq = window._paq || []);
@ -29,12 +29,11 @@
<body>
<noscript>
<strong
>Es tut uns leid, aber <%= htmlWebpackPlugin.options.title %>
funktioniert nicht richtig ohne JavaScript. Bitte aktivieren Sie es, um
fortzufahren.</strong
>Es tut uns leid, aber <%= title %> funktioniert nicht richtig ohne JavaScript. Bitte
aktivieren Sie es, um fortzufahren.</strong
>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="module" src="/src/main.ts"></script>
</body>
</html>

View file

@ -1,47 +1,62 @@
{
"name": "advent22_ui",
"version": "0.1.0",
"version": "0.0.0",
"private": true,
"type": "module",
"packageManager": "yarn@4.12.0",
"scripts": {
"serve": "vue-cli-service serve",
"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"
"dev": "vite --host",
"build": "run-p type-check \"build-only {@}\" --",
"preview": "vite preview --host",
"test:unit": "vitest",
"build-only": "vite build",
"type-check": "vue-tsc --build",
"lint": "run-s 'lint:*'",
"lint:oxlint": "oxlint . --fix",
"lint:eslint": "eslint . --fix --cache",
"format": "prettier --write --experimental-cli src/"
},
"dependencies": {
"pinia": "^3.0.4",
"vue": "^3.5.28"
},
"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",
"@vue/eslint-config-typescript": "^13.0.0",
"@tsconfig/node24": "^24.0.4",
"@types/jsdom": "^27.0.0",
"@types/luxon": "^3",
"@types/node": "^25.3.0",
"@vitejs/plugin-vue": "^6.0.4",
"@vitest/eslint-plugin": "^1.6.9",
"@vue/eslint-config-typescript": "^14.6.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",
"bulma-toast": "2.4.3",
"chai": "^6.2.2",
"core-js": "^3.48.0",
"eslint": "^8.57.1",
"eslint-plugin-vue": "^9.33.0",
"eslint": "^9.39.2",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-oxlint": "~1.46.0",
"eslint-plugin-vue": "~10.8.0",
"jiti": "^2.6.1",
"jsdom": "^28.1.0",
"luxon": "^3.7.2",
"pinia": "^3.0.4",
"sass": "~1.94.3",
"sass-loader": "^16.0.0",
"typescript": "^5.9.3",
"vue": "^3.5.25",
"vue-cli-plugin-webpack-bundle-analyzer": "^4.0.0"
"npm-run-all2": "^8.0.4",
"oxlint": "~1.47.0",
"prettier": "3.8.1",
"sass-embedded": "^1.97.3",
"typescript": "~5.9.3",
"vite": "^7.3.1",
"vite-bundle-analyzer": "^1.3.6",
"vite-plugin-html": "^3.2.2",
"vite-plugin-vue-devtools": "^8.0.6",
"vitest": "^4.0.18",
"vue-tsc": "^3.2.4"
},
"engines": {
"node": "^20.19.0 || >=22.12.0"
}
}

View file

@ -7,15 +7,8 @@
</section>
<section class="section px-3">
<progress
v-if="store.background_image === 'loading'"
class="progress is-primary"
max="100"
/>
<div
v-else-if="store.background_image === 'error'"
class="notification is-danger"
>
<progress v-if="store.background_image === 'loading'" class="progress is-primary" max="100" />
<div v-else-if="store.background_image === 'error'" class="notification is-danger">
Hintergrundbild konnte nicht geladen werden
</div>
<div v-else class="container">

View file

@ -1,4 +1,4 @@
import { expect } from "chai";
import { describe, expect, it } from "vitest";
import { Rectangle } from "@/lib/rects/rectangle";
import { Vector2D } from "@/lib/rects/vector2d";
@ -17,15 +17,15 @@ describe("Rectangle Tests", () => {
width: number,
height: number,
): void {
expect(r.left).to.equal(left);
expect(r.top).to.equal(top);
expect(r.left).toEqual(left);
expect(r.top).toEqual(top);
expect(r.width).to.equal(width);
expect(r.height).to.equal(height);
expect(r.area).to.equal(width * height);
expect(r.width).toEqual(width);
expect(r.height).toEqual(height);
expect(r.area).toEqual(width * height);
expect(r.middle.x).to.equal(left + 0.5 * width);
expect(r.middle.y).to.equal(top + 0.5 * height);
expect(r.middle.x).toEqual(left + 0.5 * width);
expect(r.middle.y).toEqual(top + 0.5 * height);
}
it("should create a default rectangle", () => {
@ -41,29 +41,29 @@ describe("Rectangle Tests", () => {
});
it("should compare rectangles", () => {
expect(r1.equals(r2)).to.be.true;
expect(r1.equals(new Rectangle())).to.be.false;
expect(r1.equals(r2)).toBe(true);
expect(r1.equals(new Rectangle())).toBe(false);
});
it("should create the same rectangle transposed", () => {
const v1t = new Vector2D(v1.x, v2.y);
const v2t = new Vector2D(v2.x, v1.y);
expect(r1.equals(new Rectangle(v1t, v2t))).to.be.true;
expect(r1.equals(new Rectangle(v1t, v2t))).toBe(true);
});
it("should contain itself", () => {
expect(r1.contains(v1)).to.be.true;
expect(r1.contains(v2)).to.be.true;
expect(r1.contains(v1)).toBe(true);
expect(r1.contains(v2)).toBe(true);
expect(r1.contains(r1.origin)).to.be.true;
expect(r1.contains(r1.corner)).to.be.true;
expect(r1.contains(r1.middle)).to.be.true;
expect(r1.contains(r1.origin)).toBe(true);
expect(r1.contains(r1.corner)).toBe(true);
expect(r1.contains(r1.middle)).toBe(true);
});
it("should not contain certain points", () => {
expect(r1.contains(new Vector2D(0, 0))).to.be.false;
expect(r1.contains(new Vector2D(100, 100))).to.be.false;
expect(r1.contains(new Vector2D(0, 0))).toBe(false);
expect(r1.contains(new Vector2D(100, 100))).toBe(false);
});
it("should update a rectangle", () => {

View file

@ -1,4 +1,4 @@
import { expect } from "chai";
import { describe, expect, it } from "vitest";
import { Vector2D } from "@/lib/rects/vector2d";
@ -7,35 +7,35 @@ describe("Vector2D Tests", () => {
it("should create a default vector", () => {
const v0 = new Vector2D();
expect(v0.x).to.equal(0);
expect(v0.y).to.equal(0);
expect(v0.x).toEqual(0);
expect(v0.y).toEqual(0);
});
it("should create a vector", () => {
expect(v.x).to.equal(1);
expect(v.y).to.equal(2);
expect(v.x).toEqual(1);
expect(v.y).toEqual(2);
});
it("should add vectors", () => {
const v2 = v.plus(new Vector2D(3, 4));
expect(v2.x).to.equal(4);
expect(v2.y).to.equal(6);
expect(v2.x).toEqual(4);
expect(v2.y).toEqual(6);
});
it("should subtract vectors", () => {
const v2 = v.minus(new Vector2D(3, 4));
expect(v2.x).to.equal(-2);
expect(v2.y).to.equal(-2);
expect(v2.x).toEqual(-2);
expect(v2.y).toEqual(-2);
});
it("should scale vectors", () => {
const v2 = v.scale(3);
expect(v2.x).to.equal(3);
expect(v2.y).to.equal(6);
expect(v2.x).toEqual(3);
expect(v2.y).toEqual(6);
});
it("should compare vectors", () => {
expect(v.equals(v.scale(1))).to.be.true;
expect(v.equals(v.scale(2))).to.be.false;
expect(v.equals(v.scale(1))).toBe(true);
expect(v.equals(v.scale(2))).toBe(false);
});
});

View file

@ -4,8 +4,8 @@
<BulmaToast @handle="on_toast_handle" class="content">
<p>
Du hast noch keine Türchen geöffnet, vielleicht gibt es ein Anzeigeproblem
in Deinem Webbrowser?
Du hast noch keine Türchen geöffnet, vielleicht gibt es ein Anzeigeproblem in Deinem
Webbrowser?
</p>
<div class="level">
<div class="level-item">

View file

@ -12,12 +12,7 @@
<div class="field">
<label class="label">Username</label>
<div class="control">
<input
ref="username_input"
class="input"
type="text"
v-model="creds.username"
/>
<input ref="username_input" class="input" type="text" v-model="creds.username" />
</div>
</div>

View file

@ -18,10 +18,7 @@
</template>
</div>
<button
v-if="state.show !== 'loading'"
class="modal-close is-large has-background-primary"
/>
<button v-if="state.show !== 'loading'" class="modal-close is-large has-background-primary" />
</div>
</template>

View file

@ -7,12 +7,9 @@
Alle {{ store.user_doors.length }} Türchen offen!
</template>
<template v-else>
<template v-if="store.user_doors.length === 0">
Zeit bis zum ersten Türchen:
</template>
<template v-if="store.user_doors.length === 0"> Zeit bis zum ersten Türchen: </template>
<template v-else>
{{ store.user_doors.length }} Türchen offen. Zeit bis zum nächsten
Türchen:
{{ store.user_doors.length }} Türchen offen. Zeit bis zum nächsten Türchen:
</template>
<CountDown :until="store.next_door_target" />
</template>

View file

@ -8,7 +8,7 @@
<h3>Zuordnung Buchstaben</h3>
<div class="tags are-medium">
<template v-for="(data, day) in day_data" :key="`part-${day}`">
<template v-for="[day, data] in day_data" :key="`part-${day}`">
<span v-if="data.part === ''" class="tag is-warning">
{{ day }}
</span>
@ -21,7 +21,7 @@
<h3>Zuordnung Bilder</h3>
<div class="tags are-medium">
<span
v-for="(data, day) in day_data"
v-for="[day, data] in day_data"
:key="`image-${day}`"
:class="'tag is-' + (data.part === '' ? 'warning' : 'primary')"
>
@ -32,7 +32,7 @@
<h3>Alle Türchen</h3>
<div class="tags are-medium">
<BulmaButton
v-for="(data, day) in day_data"
v-for="[day, data] in day_data"
:key="`btn-${day}`"
:class="'tag is-' + (data.part === '' ? 'warning' : 'info')"
:icon="['fas', 'fa-door-open']"
@ -48,14 +48,19 @@
<script setup lang="ts">
import { API } from "@/lib/api";
import { name_door, objForEach } from "@/lib/helpers";
import type { ImageData, NumStrDict } from "@/lib/model";
import type { ImageData } from "@/lib/model";
import { ref } from "vue";
import MultiModal, { type HMultiModal } from "../MultiModal.vue";
import BulmaButton from "../bulma/Button.vue";
import BulmaDrawer from "../bulma/Drawer.vue";
const day_data = ref<Record<number, { part: string; image_name: string }>>({});
interface DayData {
part: string;
image_name: string;
}
const day_data = ref<Map<number, DayData>>(new Map());
let modal: HMultiModal | undefined;
@ -65,24 +70,31 @@ function on_modal_handle(handle: HMultiModal): void {
async function on_open(): Promise<void> {
const [day_parts, day_image_names] = await Promise.all([
API.request<NumStrDict>("admin/day_parts"),
API.request<NumStrDict>("admin/day_image_names"),
API.request<Record<number, string>>("admin/day_parts"),
API.request<Record<number, string>>("admin/day_image_names"),
]);
const _ensure_day_in_data = (day: number) => {
if (!(day in day_data.value)) {
day_data.value[day] = { part: "", image_name: "" };
const _get_data = (day: number) => {
let result = day_data.value.get(day);
if (result === undefined) {
result = { part: "", image_name: "" };
day_data.value.set(day, result);
}
return result;
};
// for (const [day, part] of day_parts.entries()) {
// _get_data(day).part = part;
// }
objForEach(day_parts, (day, part) => {
_ensure_day_in_data(day);
day_data.value[day].part = part;
_get_data(day).part = part;
});
objForEach(day_image_names, (day, image_name) => {
_ensure_day_in_data(day);
day_data.value[day].image_name = image_name;
_get_data(day).image_name = image_name;
});
}

View file

@ -9,15 +9,11 @@
<dt>Wert</dt>
<dd>
Eingabe:
<span class="is-family-monospace">
"{{ admin_config_model.solution.value }}"
</span>
<span class="is-family-monospace"> "{{ admin_config_model.solution.value }}" </span>
</dd>
<dd>
Ausgabe:
<span class="is-family-monospace">
"{{ admin_config_model.solution.clean }}"
</span>
<span class="is-family-monospace"> "{{ admin_config_model.solution.clean }}" </span>
</dd>
<dt>Transformation</dt>
@ -47,9 +43,7 @@
<dd>{{ store.user_doors.length }}</dd>
<dt>Zeit zum nächsten Türchen</dt>
<dd v-if="store.next_door_target === null">
Kein nächstes Türchen
</dd>
<dd v-if="store.next_door_target === null">Kein nächstes Türchen</dd>
<dd v-else><CountDown :until="store.next_door_target" /></dd>
<dt>Erstes Türchen</dt>
@ -65,9 +59,7 @@
<dd>{{ fmt_puzzle_date("end") }}</dd>
<dt>Zufalls-Seed</dt>
<dd class="is-family-monospace">
"{{ admin_config_model.puzzle.seed }}"
</dd>
<dd class="is-family-monospace">"{{ admin_config_model.puzzle.seed }}"</dd>
<dt>Extra-Tage</dt>
<dd>
@ -121,10 +113,7 @@
<dd>{{ admin_config_model.image.border }} px</dd>
<dt>Schriftarten</dt>
<dd
v-for="(font, index) in admin_config_model.fonts"
:key="`font-${index}`"
>
<dd v-for="(font, index) in admin_config_model.fonts" :key="`font-${index}`">
{{ font.file }} ({{ font.size }} pt)
</dd>
</dl>
@ -243,7 +232,7 @@ const admin_config_model = ref<AdminConfigModel>({
});
const doors = ref<DoorSaved[]>([]);
const creds = ref<Record<string, Credentials>>({
const creds = ref({
dav: {
username: "",
password: "",
@ -276,10 +265,7 @@ async function on_open(): Promise<void> {
clear_credentials(creds.value.ui);
}
async function load_credentials(
creds: Credentials,
endpoint: string,
): Promise<void> {
async function load_credentials(creds: Credentials, endpoint: string): Promise<void> {
try {
const new_creds = await API.request<Credentials>(endpoint);

View file

@ -8,11 +8,7 @@
:icon="['fas', 'fa-backward']"
/>
<BulmaBreadcrumbs
:steps="steps"
v-model="current_step"
class="level-item mb-0"
/>
<BulmaBreadcrumbs :steps="steps" v-model="current_step" class="level-item mb-0" />
<BulmaButton
:disabled="current_step === 2"

View file

@ -3,11 +3,7 @@
<button class="button">
<slot name="default">
<span v-if="icon !== undefined" class="icon">
<FontAwesomeIcon
v-if="icon !== undefined"
:icon="icon"
:beat-fade="busy"
/>
<FontAwesomeIcon v-if="icon !== undefined" :icon="icon" :beat-fade="busy" />
</span>
</slot>
<span v-if="text !== undefined">{{ text }}</span>

View file

@ -6,18 +6,13 @@
<p v-if="refreshable && is_open" class="card-header-icon px-0">
<BulmaButton class="is-small is-primary" @click="load">
<FontAwesomeIcon
:icon="['fas', 'arrows-rotate']"
:spin="state === 'loading'"
/>
<FontAwesomeIcon :icon="['fas', 'arrows-rotate']" :spin="state === 'loading'" />
</BulmaButton>
</p>
<button class="card-header-icon" @click="toggle">
<span class="icon">
<FontAwesomeIcon
:icon="['fas', is_open ? 'angle-down' : 'angle-right']"
/>
<FontAwesomeIcon :icon="['fas', is_open ? 'angle-down' : 'angle-right']" />
</span>
</button>
</header>

View file

@ -6,7 +6,11 @@
>
<div
class="has-text-danger"
style="text-shadow: 0 0 10px white, 0 0 20px white"
style="
text-shadow:
0 0 10px white,
0 0 20px white;
"
>
{{ door.day }}
</div>

View file

@ -27,13 +27,7 @@ import { computed } from "vue";
const store = advent22Store();
type BulmaVariant =
| "primary"
| "link"
| "info"
| "success"
| "warning"
| "danger";
type BulmaVariant = "primary" | "link" | "info" | "success" | "warning" | "danger";
withDefaults(
defineProps<{

View file

@ -32,11 +32,7 @@ function get_event_thous(event: MouseEvent): Vector2D {
type TCEventType = "mousedown" | "mousemove" | "mouseup" | "click" | "dblclick";
const is_tceventtype = (t: unknown): t is TCEventType =>
t === "mousedown" ||
t === "mousemove" ||
t === "mouseup" ||
t === "click" ||
t === "dblclick";
t === "mousedown" || t === "mousemove" || t === "mouseup" || t === "click" || t === "dblclick";
const emit = defineEmits<{
(event: TCEventType, e: MouseEvent, point: Vector2D): void;

View file

@ -14,12 +14,7 @@
:door="door"
force_visible
/>
<SVGRect
v-if="preview_visible"
variant="success"
:rectangle="preview"
visible
/>
<SVGRect v-if="preview_visible" variant="success" :rectangle="preview" visible />
</ThouCanvas>
</template>

View file

@ -14,9 +14,10 @@
<img :src="unwrap_loading(store.background_image).data_url" />
<ThouCanvas>
<PreviewDoor
v-for="(_, index) in model"
v-for="(door, index) in model"
:key="`door-${index}`"
v-model="model[index]"
:model-value="door"
@update:model-value="updateAt(index, door)"
/>
</ThouCanvas>
</figure>
@ -24,7 +25,7 @@
</template>
<script setup lang="ts">
import { type VueLike, unwrap_loading } from "@/lib/helpers";
import { unwrap_loading, type VueLike } from "@/lib/helpers";
import { Door } from "@/lib/rects/door";
import { advent22Store } from "@/lib/store";
@ -32,5 +33,12 @@ import ThouCanvas from "../calendar/ThouCanvas.vue";
import PreviewDoor from "./PreviewDoor.vue";
const model = defineModel<VueLike<Door>[]>({ required: true });
function updateAt(i: number, val: VueLike<Door>) {
const copy = [...model.value];
copy[i] = val;
model.value = copy;
}
const store = advent22Store();
</script>

View file

@ -1,6 +0,0 @@
/* eslint-disable */
declare module "*.vue" {
import type { DefineComponent } from "vue";
const component: DefineComponent<{}, {}, any>;
export default component;
}

View file

@ -18,12 +18,8 @@ interface Params {
export class API {
private static get api_baseurl(): string {
// in production mode, return "proto://hostname/api"
if (process.env.NODE_ENV === "production") {
if (import.meta.env.PROD) {
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);
}
// in development mode, return "proto://hostname:8000/api"
@ -84,7 +80,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);
}

View file

@ -1,10 +1,7 @@
import { nextTick, type UnwrapRef } from "vue";
import { APIError } from "./api_error";
export function objForEach<T>(
obj: T,
f: (k: keyof T, v: T[keyof T]) => void,
): void {
export function objForEach<T>(obj: T, f: (k: keyof T, v: T[keyof T]) => void): void {
for (const k in obj) {
if (Object.prototype.hasOwnProperty.call(obj, k)) {
f(k, obj[k]);
@ -42,7 +39,6 @@ export function handle_error(error: unknown): void {
if (error instanceof APIError) {
error.alert();
} else {
// eslint-disable-next-line no-console
console.error(error);
}
}

View file

@ -45,10 +45,6 @@ export interface SiteConfigModel {
footer: string;
}
export interface NumStrDict {
[key: number]: string;
}
export interface DoorSaved {
day: number;
x1: number;

View file

@ -24,10 +24,7 @@ export class Door {
// integer coercion
let day = Number(value);
day =
!Number.isNaN(day) && Number.isFinite(day)
? Math.trunc(day)
: Door.MIN_DAY;
day = !Number.isNaN(day) && Number.isFinite(day) ? Math.trunc(day) : Door.MIN_DAY;
this._day = Math.max(day, Door.MIN_DAY);
}

View file

@ -71,9 +71,6 @@ export class Rectangle {
}
public move(vector: Vector2D): Rectangle {
return new Rectangle(
this.corner_1.plus(vector),
this.corner_2.plus(vector),
);
return new Rectangle(this.corner_1.plus(vector), this.corner_2.plus(vector));
}
}

View file

@ -1,4 +1,4 @@
import { acceptHMRUpdate, defineStore } from "pinia";
import { defineStore } from "pinia";
import { API } from "./api";
import type { Loading } from "./helpers";
import type { Credentials, DoorSaved, ImageData, SiteConfigModel } from "./model";
@ -55,31 +55,28 @@ export const advent22Store = defineStore("advent22", {
const favicon = await API.request<ImageData>("user/favicon");
const link: HTMLLinkElement =
document.querySelector("link[rel*='icon']") ??
document.createElement("link");
document.querySelector("link[rel*='icon']") ?? document.createElement("link");
link.rel = "shortcut icon";
link.type = "image/x-icon";
link.href = favicon.data_url;
if (link.parentElement === null)
document.getElementsByTagName("head")[0]!.appendChild(link);
} catch { }
} catch {}
try {
const [is_admin, site_config, background_image, user_doors, next_door] =
await Promise.all([
this.update_is_admin(),
API.request<SiteConfigModel>("user/site_config"),
API.request<ImageData>("user/background_image"),
API.request<DoorSaved[]>("user/doors"),
API.request<number | null>("user/next_door"),
]);
const [is_admin, site_config, background_image, user_doors, next_door] = await Promise.all([
this.update_is_admin(),
API.request<SiteConfigModel>("user/site_config"),
API.request<ImageData>("user/background_image"),
API.request<DoorSaved[]>("user/doors"),
API.request<number | null>("user/next_door"),
]);
void is_admin; // discard value
document.title = site_config.title;
if (site_config.subtitle !== "")
document.title += " " + site_config.subtitle;
if (site_config.subtitle !== "") document.title += " " + site_config.subtitle;
this.site_config = site_config;
this.background_image = background_image;
@ -123,9 +120,3 @@ export const advent22Store = defineStore("advent22", {
},
},
});
if (import.meta.webpackHot) {
import.meta.webpackHot.accept(
acceptHMRUpdate(advent22Store, import.meta.webpackHot),
);
}

12
ui/src/stores/counter.ts Normal file
View file

@ -0,0 +1,12 @@
import { ref, computed } from "vue";
import { defineStore } from "pinia";
export const useCounterStore = defineStore("counter", () => {
const count = ref(0);
const doubleCount = computed(() => count.value * 2);
function increment() {
count.value++;
}
return { count, doubleCount, increment };
});

14
ui/tsconfig.app.json Normal file
View file

@ -0,0 +1,14 @@
{
"extends": "@vue/tsconfig/tsconfig.dom.json",
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
"exclude": ["src/**/__tests__/*"],
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"lib": ["es2020", "dom", "dom.iterable", "es2022.object", "es2023.array"],
"paths": {
"@/*": ["./src/*"]
}
}
}

View file

@ -1,33 +1,14 @@
{
"extends": "@vue/tsconfig/tsconfig.dom.json",
"compilerOptions": {
"experimentalDecorators": true,
"lib": [
"es2020",
"dom",
"dom.iterable",
"es2022.object",
"es2023.array",
],
// "moduleResolution": "node",
// "sourceMap": true,
"baseUrl": ".",
"types": [
"webpack-env",
"mocha",
"chai",
],
"paths": {
"@/*": [
"src/*",
]
"files": [],
"references": [
{
"path": "./tsconfig.node.json"
},
},
"include": [
"src/**/*.vue",
"src/**/*.ts",
// "src/**/*.tsx",
"tests/**/*.ts",
// "tests/**/*.tsx",
],
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.vitest.json"
}
]
}

19
ui/tsconfig.node.json Normal file
View file

@ -0,0 +1,19 @@
{
"extends": "@tsconfig/node24/tsconfig.json",
"include": [
"vite.config.*",
"vitest.config.*",
"cypress.config.*",
"nightwatch.conf.*",
"playwright.config.*",
"eslint.config.*"
],
"compilerOptions": {
"noEmit": true,
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"module": "ESNext",
"moduleResolution": "Bundler",
"types": ["node"]
}
}

10
ui/tsconfig.vitest.json Normal file
View file

@ -0,0 +1,10 @@
{
"extends": "./tsconfig.app.json",
"include": ["src/**/__tests__/*", "env.d.ts"],
"exclude": [],
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.vitest.tsbuildinfo",
"types": ["node", "jsdom"]
}
}

33
ui/vite.config.ts Normal file
View file

@ -0,0 +1,33 @@
import { fileURLToPath, URL } from "node:url";
import vue from "@vitejs/plugin-vue";
import { defineConfig } from "vite";
import { analyzer } from "vite-bundle-analyzer";
import { createHtmlPlugin } from "vite-plugin-html";
import vueDevTools from "vite-plugin-vue-devtools";
// https://vite.dev/config/
export default defineConfig({
plugins: [
vue(),
vueDevTools(),
analyzer({
analyzerMode: "static",
}),
createHtmlPlugin({
inject: {
data: {
title: "Kalender-Gewinnspiel",
},
},
}),
],
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)),
},
},
build: {
sourcemap: true,
},
});

14
ui/vitest.config.ts Normal file
View file

@ -0,0 +1,14 @@
import { fileURLToPath } from "node:url";
import { mergeConfig, defineConfig, configDefaults } from "vitest/config";
import viteConfig from "./vite.config";
export default mergeConfig(
viteConfig,
defineConfig({
test: {
environment: "jsdom",
exclude: [...configDefaults.exclude, "e2e/**"],
root: fileURLToPath(new URL("./", import.meta.url)),
},
}),
);

View file

@ -1,26 +0,0 @@
/* eslint-disable @typescript-eslint/no-require-imports */
const { defineConfig } = require("@vue/cli-service");
const webpack = require("webpack");
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
host: "127.0.0.1",
},
pages: {
index: {
entry: "src/main.ts",
title: "Kalender-Gewinnspiel",
},
},
// https://stackoverflow.com/a/77765007
configureWebpack: {
plugins: [
new webpack.DefinePlugin({
// Vue CLI is in maintenance mode, and probably won't merge my PR to fix this in their tooling
// https://github.com/vuejs/vue-cli/pull/7443
__VUE_PROD_HYDRATION_MISMATCH_DETAILS__: "false",
}),
],
},
});

File diff suppressed because it is too large Load diff