Lenaisten/advent22
1
0
Fork 0
mirror of https://code.lenaisten.de/Lenaisten/advent22.git synced 2024-11-23 08:13:01 +00:00
Code Issues Projects Releases Packages Wiki Activity

VSCode: "octref.vetur" -> "Vue.volar"

Browse source
This commit is contained in:
Jörn-Michael Miehe 2023-09-06 16:25:35 +00:00
parent 17b6950491
commit 391f3e8fba
13 changed files with 72 additions and 130 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ui/.devcontainer/devcontainer.json
View file

@ -23,8 +23,8 @@
"extensions": [ "extensions": [
"dbaeumer.vscode-eslint", "dbaeumer.vscode-eslint",
"mhutchie.git-graph", "mhutchie.git-graph",
"octref.vetur", "Syler.sass-indented",
"Syler.sass-indented" "Vue.volar"
] ]
} }
}, },

9
ui/src/App.vue
View file

@ -11,12 +11,7 @@
<DoorMapEditor /> <DoorMapEditor />
<CalendarDoor <CalendarDoor v-for="(_, index) in 24" :key="index" :day="index" @openDoor="open_calendar_door" />
v-for="(_, index) in 24"
:key="index"
:day="index"
@openDoor="open_calendar_door"
/>
</div> </div>
<div class="section"> <div class="section">
@ -65,7 +60,7 @@ export default class extends Vue {
); );
} }
private open_calendar_door(image_src: string) { public open_calendar_door(image_src: string) {
this.$refs.image_modal.show_src(image_src); this.$refs.image_modal.show_src(image_src);
} }
} }

14
ui/src/components/BulmaBreadcrumbs.vue
View file

@ -1,12 +1,8 @@
<template> <template>
<nav class="breadcrumb has-succeeds-separator"> <nav class="breadcrumb has-succeeds-separator">
<ul> <ul>
<li <li v-for="(step, index) in steps" :key="`step-${index}`" :class="modelValue === index ? 'is-active' : ''"
v-for="(step, index) in steps" @click="change_step(index)">
:key="`step-${index}`"
:class="modelValue === index ? 'is-active' : ''"
@click="change_step(index)"
>
<a> <a>
<span class="icon is-small"> <span class="icon is-small">
<font-awesome-icon :icon="step.icon" /> <font-awesome-icon :icon="step.icon" />
@ -34,10 +30,10 @@ export interface Step {
emits: ["update:modelValue"], emits: ["update:modelValue"],
}) })
export default class extends Vue { export default class extends Vue {
private steps!: Step[]; public steps!: Step[];
private modelValue!: number; public modelValue!: number;
private change_step(next_step: number) { public change_step(next_step: number) {
if (next_step === this.modelValue) { if (next_step === this.modelValue) {
return; return;
} }

4
ui/src/components/CalendarDoor.vue
View file

@ -3,7 +3,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { Vue, Options } from "vue-class-component"; import { Options, Vue } from "vue-class-component";
@Options({ @Options({
props: { props: {
@ -13,7 +13,7 @@ import { Vue, Options } from "vue-class-component";
export default class extends Vue { export default class extends Vue {
day!: number; day!: number;
private on_click() { public on_click() {
this.$advent22.api_get_blob(`days/image/${this.day}`, (data) => { this.$advent22.api_get_blob(`days/image/${this.day}`, (data) => {
this.$emit("openDoor", data); this.$emit("openDoor", data);
}); });

10
ui/src/components/DoorMapEditor.vue
View file

@ -11,12 +11,12 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { Vue, Options } from "vue-class-component"; import { Options, Vue } from "vue-class-component";
import { Door } from "./door_map/calendar"; import { Door } from "./door_map/calendar";
import BulmaBreadcrumbs, { Step } from "./BulmaBreadcrumbs.vue"; import BulmaBreadcrumbs, { Step } from "./BulmaBreadcrumbs.vue";
import DoorPlacer from "./door_map/DoorPlacer.vue";
import DoorChooser from "./door_map/DoorChooser.vue"; import DoorChooser from "./door_map/DoorChooser.vue";
import DoorPlacer from "./door_map/DoorPlacer.vue";
@Options({ @Options({
components: { components: {
@ -26,12 +26,12 @@ import DoorChooser from "./door_map/DoorChooser.vue";
}, },
}) })
export default class extends Vue { export default class extends Vue {
private readonly steps: Step[] = [ public readonly steps: Step[] = [
{ label: "Platzieren", icon: "fa-solid fa-crosshairs" }, { label: "Platzieren", icon: "fa-solid fa-crosshairs" },
{ label: "Ordnen", icon: "fa-solid fa-list-ol" }, { label: "Ordnen", icon: "fa-solid fa-list-ol" },
{ label: "Überprüfen", icon: "fa-solid fa-check" }, { label: "Überprüfen", icon: "fa-solid fa-check" },
]; ];
private current_step = 0; public current_step = 0;
private doors: Door[] = []; public doors: Door[] = [];
} }
</script> </script>

2
ui/src/components/ImageModal.vue
View file

@ -14,7 +14,7 @@
import { Vue } from "vue-class-component"; import { Vue } from "vue-class-component";
export default class extends Vue { export default class extends Vue {
private active = false; public active = false;
public image_src = ""; public image_src = "";
public created() { public created() {

8
ui/src/components/LoginModal.vue
View file

@ -40,9 +40,9 @@
import { Vue } from "vue-class-component"; import { Vue } from "vue-class-component";
export default class extends Vue { export default class extends Vue {
private active = false; public active = false;
private username = ""; public username = "";
private password = ""; public password = "";
public created() { public created() {
window.addEventListener("keydown", (e) => { window.addEventListener("keydown", (e) => {
@ -57,7 +57,7 @@ export default class extends Vue {
this.password = ""; this.password = "";
} }
private submit() { public submit() {
this.$advent22.set_api_auth(this.username, this.password); this.$advent22.set_api_auth(this.username, this.password);
this.set_active(false); this.set_active(false);
} }

8
ui/src/components/door_map/DoorChooser.vue
View file

@ -13,11 +13,7 @@
<figure class="image"> <figure class="image">
<img :src="$advent22.api_url('general/background')" /> <img :src="$advent22.api_url('general/background')" />
<ThouCanvas> <ThouCanvas>
<PreviewDoor <PreviewDoor v-for="(_, index) in doors" :key="`door-${index}`" v-model:door="doors[index]" />
v-for="(_, index) in doors"
:key="`door-${index}`"
v-model:door="doors[index]"
/>
</ThouCanvas> </ThouCanvas>
</figure> </figure>
</section> </section>
@ -41,7 +37,7 @@ import PreviewDoor from "./PreviewDoor.vue";
emits: ["update:doors"], emits: ["update:doors"],
}) })
export default class extends Vue { export default class extends Vue {
private doors!: Door[]; public doors!: Door[];
public beforeUnmount() { public beforeUnmount() {
this.$emit("update:doors", this.doors); this.$emit("update:doors", this.doors);

21
ui/src/components/door_map/DoorPlacer.vue
View file

@ -10,21 +10,16 @@
</div> </div>
<figure class="image"> <figure class="image">
<img :src="$advent22.api_url('general/background')" /> <img :src="$advent22.api_url('general/background')" />
<RectangleCanvas <RectangleCanvas :rectangles="rectangles" @draw="on_draw" @drag="on_drag" @remove="on_remove" />
:rectangles="rectangles"
@draw="on_draw"
@drag="on_drag"
@remove="on_remove"
/>
</figure> </figure>
</section> </section>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Vue, Options } from "vue-class-component"; import { Options, Vue } from "vue-class-component";
import { Rectangle } from "../rects/rectangles"; import { Rectangle } from "../rects/rectangles";
import { Door } from "./calendar";
import RectangleCanvas from "./RectangleCanvas.vue"; import RectangleCanvas from "./RectangleCanvas.vue";
import { Door } from "./calendar";
@Options({ @Options({
components: { components: {
@ -38,19 +33,19 @@ import RectangleCanvas from "./RectangleCanvas.vue";
export default class extends Vue { export default class extends Vue {
private doors!: Door[]; private doors!: Door[];
private get rectangles() { public get rectangles() {
return this.doors.map((door) => door.position); return this.doors.map((door) => door.position);
} }
private on_draw(position: Rectangle) { public on_draw(position: Rectangle) {
this.doors.push(new Door(position)); this.doors.push(new Door(position));
} }
private find_door_index(position: Rectangle): number { public find_door_index(position: Rectangle): number {
return this.doors.findIndex((door) => door.position.equals(position)); return this.doors.findIndex((door) => door.position.equals(position));
} }
private on_drag(old_pos: Rectangle, new_pos: Rectangle) { public on_drag(old_pos: Rectangle, new_pos: Rectangle) {
const idx = this.find_door_index(old_pos); const idx = this.find_door_index(old_pos);
if (idx === -1) { if (idx === -1) {
@ -60,7 +55,7 @@ export default class extends Vue {
this.doors[idx].position = new_pos; this.doors[idx].position = new_pos;
} }
private on_remove(position: Rectangle) { public on_remove(position: Rectangle) {
const idx = this.find_door_index(position); const idx = this.find_door_index(position);
if (idx === -1) { if (idx === -1) {

41
ui/src/components/door_map/PreviewDoor.vue
View file

@ -1,27 +1,12 @@
<template> <template>
<SVGRect :rectangle="door.position" :focused="editing" /> <SVGRect :rectangle="door.position" :focused="editing" />
<foreignObject <foreignObject :x="Math.round(parent_aspect_ratio * door.position.left)" :y="door.position.top"
:x="Math.round(parent_aspect_ratio * door.position.left)" :width="Math.round(parent_aspect_ratio * door.position.width)" :height="door.position.height"
:y="door.position.top" :style="`transform: scaleX(${1 / parent_aspect_ratio})`">
:width="Math.round(parent_aspect_ratio * door.position.width)" <div xmlns="http://www.w3.org/1999/xhtml" class="is-flex is-align-items-center is-justify-content-center"
:height="door.position.height" @click.left="on_click">
:style="`transform: scaleX(${1 / parent_aspect_ratio})`" <input v-if="editing" v-model="day_str" ref="day_input" class="input is-large" type="number" min="-1"
> placeholder="Tag" @keydown="on_keydown" />
<div
xmlns="http://www.w3.org/1999/xhtml"
class="is-flex is-align-items-center is-justify-content-center"
@click.left="on_click"
>
<input
v-if="editing"
v-model="day_str"
ref="day_input"
class="input is-large"
type="number"
min="-1"
placeholder="Tag"
@keydown="on_keydown"
/>
<div v-else class="is-size-1 has-text-weight-bold"> <div v-else class="is-size-1 has-text-weight-bold">
<template v-if="door.day >= 0">{{ door.day }}</template> <template v-if="door.day >= 0">{{ door.day }}</template>
</div> </div>
@ -49,11 +34,11 @@ import SVGRect from "../rects/SVGRect.vue";
emits: ["update:door"], emits: ["update:door"],
}) })
export default class extends Vue { export default class extends Vue {
private door!: Door; public door!: Door;
private editable!: boolean; private editable!: boolean;
private day_str = ""; public day_str = "";
private editing = false; public editing = false;
private refreshKey = 0; private refreshKey = 0;
declare $refs: { declare $refs: {
@ -69,7 +54,7 @@ export default class extends Vue {
}, 100); }, 100);
} }
private get parent_aspect_ratio(): number { public get parent_aspect_ratio(): number {
this.refreshKey; // read it just to force recompute on change this.refreshKey; // read it just to force recompute on change
if (!(this.$el instanceof Text) || this.$el.parentElement === null) { if (!(this.$el instanceof Text) || this.$el.parentElement === null) {
@ -99,7 +84,7 @@ export default class extends Vue {
this.editing = this.editable && !this.editing; this.editing = this.editable && !this.editing;
} }
private on_click(event: MouseEvent) { public on_click(event: MouseEvent) {
if (event.target === null || !(event.target instanceof HTMLDivElement)) { if (event.target === null || !(event.target instanceof HTMLDivElement)) {
return; return;
} }
@ -121,7 +106,7 @@ export default class extends Vue {
this.toggle_editing(); this.toggle_editing();
} }
private on_keydown(event: KeyboardEvent) { public on_keydown(event: KeyboardEvent) {
if (!this.editing) { if (!this.editing) {
return; return;
} }

41
ui/src/components/door_map/RectangleCanvas.vue
View file

@ -1,27 +1,16 @@
<template> <template>
<ThouCanvas <ThouCanvas @mousedown.left="draw_start" @mouseup.left="draw_finish" @mousedown.right="drag_start"
@mousedown.left="draw_start" @mouseup.right="drag_finish" @mousemove="on_mousemove" @click.middle="remove_rect" @dblclick.left="remove_rect">
@mouseup.left="draw_finish" <SVGRect v-for="(rect, index) in rectangles" :key="`rect-${index}`" :rectangle="rect" />
@mousedown.right="drag_start"
@mouseup.right="drag_finish"
@mousemove="on_mousemove"
@click.middle="remove_rect"
@dblclick.left="remove_rect"
>
<SVGRect
v-for="(rect, index) in rectangles"
:key="`rect-${index}`"
:rectangle="rect"
/>
<SVGRect v-if="preview_visible" :focused="true" :rectangle="preview_rect" /> <SVGRect v-if="preview_visible" :focused="true" :rectangle="preview_rect" />
</ThouCanvas> </ThouCanvas>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Vue, Options } from "vue-class-component"; import { Options, Vue } from "vue-class-component";
import { Vector2D, Rectangle } from "../rects/rectangles";
import ThouCanvas from "../rects/ThouCanvas.vue";
import SVGRect from "../rects/SVGRect.vue"; import SVGRect from "../rects/SVGRect.vue";
import ThouCanvas from "../rects/ThouCanvas.vue";
import { Rectangle, Vector2D } from "../rects/rectangles";
enum CanvasState { enum CanvasState {
Idle, Idle,
@ -42,12 +31,12 @@ enum CanvasState {
export default class extends Vue { export default class extends Vue {
private readonly min_rect_area = 300; private readonly min_rect_area = 300;
private state = CanvasState.Idle; private state = CanvasState.Idle;
private preview_rect = new Rectangle(); public preview_rect = new Rectangle();
private drag_rect?: Rectangle; private drag_rect?: Rectangle;
private drag_origin = new Vector2D(); private drag_origin = new Vector2D();
private rectangles!: Rectangle[]; public rectangles!: Rectangle[];
private get preview_visible(): boolean { public get preview_visible(): boolean {
return this.state !== CanvasState.Idle; return this.state !== CanvasState.Idle;
} }
@ -61,7 +50,7 @@ export default class extends Vue {
return this.rectangles.splice(idx, 1)[0]; return this.rectangles.splice(idx, 1)[0];
} }
private draw_start(event: MouseEvent, point: Vector2D) { public draw_start(event: MouseEvent, point: Vector2D) {
if (this.preview_visible) { if (this.preview_visible) {
return; return;
} }
@ -70,7 +59,7 @@ export default class extends Vue {
this.preview_rect = new Rectangle(point, point); this.preview_rect = new Rectangle(point, point);
} }
private draw_finish() { public draw_finish() {
if (this.state !== CanvasState.Drawing || this.preview_rect === undefined) { if (this.state !== CanvasState.Drawing || this.preview_rect === undefined) {
return; return;
} }
@ -85,7 +74,7 @@ export default class extends Vue {
this.$emit("draw", this.preview_rect); this.$emit("draw", this.preview_rect);
} }
private drag_start(event: MouseEvent, point: Vector2D) { public drag_start(event: MouseEvent, point: Vector2D) {
if (this.preview_visible) { if (this.preview_visible) {
return; return;
} }
@ -102,7 +91,7 @@ export default class extends Vue {
this.preview_rect = this.drag_rect; this.preview_rect = this.drag_rect;
} }
private drag_finish() { public drag_finish() {
if ( if (
this.state !== CanvasState.Dragging || this.state !== CanvasState.Dragging ||
this.preview_rect === undefined this.preview_rect === undefined
@ -115,7 +104,7 @@ export default class extends Vue {
this.$emit("drag", this.drag_rect, this.preview_rect); this.$emit("drag", this.drag_rect, this.preview_rect);
} }
private on_mousemove(event: MouseEvent, point: Vector2D) { public on_mousemove(event: MouseEvent, point: Vector2D) {
if (this.preview_rect === undefined) { if (this.preview_rect === undefined) {
return; return;
} }
@ -128,7 +117,7 @@ export default class extends Vue {
} }
} }
private remove_rect(event: MouseEvent, point: Vector2D) { public remove_rect(event: MouseEvent, point: Vector2D) {
if (this.preview_visible) { if (this.preview_visible) {
return; return;
} }

15
ui/src/components/rects/SVGRect.vue
View file

@ -1,15 +1,10 @@
<template> <template>
<rect <rect :class="focused ? 'focus' : ''" :x="rectangle.left" :y="rectangle.top" :width="rectangle.width"
:class="focused ? 'focus' : ''" :height="rectangle.height" />
:x="rectangle.left"
:y="rectangle.top"
:width="rectangle.width"
:height="rectangle.height"
/>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Vue, Options } from "vue-class-component"; import { Options, Vue } from "vue-class-component";
import { Rectangle } from "./rectangles"; import { Rectangle } from "./rectangles";
@Options({ @Options({
@ -22,8 +17,8 @@ import { Rectangle } from "./rectangles";
}, },
}) })
export default class extends Vue { export default class extends Vue {
private focused!: boolean; public focused!: boolean;
private rectangle!: Rectangle; public rectangle!: Rectangle;
} }
</script> </script>

19
ui/src/components/rects/ThouCanvas.vue
View file

@ -1,22 +1,13 @@
<template> <template>
<svg <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1000 1000" preserveAspectRatio="none"
xmlns="http://www.w3.org/2000/svg" @contextmenu.prevent @mousedown="transform_mouse_event" @mousemove="transform_mouse_event"
version="1.1" @mouseup="transform_mouse_event" @click="transform_mouse_event" @dblclick="transform_mouse_event">
viewBox="0 0 1000 1000"
preserveAspectRatio="none"
@contextmenu.prevent
@mousedown="transform_mouse_event"
@mousemove="transform_mouse_event"
@mouseup="transform_mouse_event"
@click="transform_mouse_event"
@dblclick="transform_mouse_event"
>
<slot name="default" /> <slot name="default" />
</svg> </svg>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Vue, Options } from "vue-class-component"; import { Options, Vue } from "vue-class-component";
import { Vector2D } from "./rectangles"; import { Vector2D } from "./rectangles";
function get_event_thous(event: MouseEvent): Vector2D { function get_event_thous(event: MouseEvent): Vector2D {
@ -56,7 +47,7 @@ function mouse_event_validator(event: object, point: object): boolean {
}, },
}) })
export default class extends Vue { export default class extends Vue {
private transform_mouse_event(event: MouseEvent) { public transform_mouse_event(event: MouseEvent) {
const point = get_event_thous(event); const point = get_event_thous(event);
this.$emit(event.type, event, point); this.$emit(event.type, event, point);
} }