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

various minor improvements

Browse source
This commit is contained in:
Jörn-Michael Miehe 2023-02-18 00:43:07 +00:00
parent 2551b0480b
commit b9594ade83
1 changed files with 38 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -9,22 +9,21 @@
> >
<div <div
xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml"
class="is-flex is-align-items-center" class="is-flex is-align-items-center is-justify-content-center"
@click.left="on_click" @click.left="on_click"
> >
<div class="container is-fluid has-text-centered"> <input
<input v-if="editing"
v-if="editing" v-model="day_str"
v-model="day_str" ref="day_input"
@keyup="on_keyup" class="input is-large"
class="input p-3 is-size-2" type="number"
type="number" min="-1"
min="-1" placeholder="Tag"
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> </div>
</div> </div>
</foreignObject> </foreignObject>
@ -57,6 +56,10 @@ export default class extends Vue {
private editing = false; private editing = false;
private refreshKey = 0; private refreshKey = 0;
declare $refs: {
day_input: HTMLInputElement | null | undefined;
};
private refresh() { private refresh() {
window.setTimeout(() => { window.setTimeout(() => {
// don't loop endlessly // don't loop endlessly
@ -86,32 +89,45 @@ export default class extends Vue {
return result; return result;
} }
private get day_num(): number {
const result = Number(this.day_str);
return isNaN(result) ? -1 : result;
}
private toggle_editing() { private toggle_editing() {
this.day_str = String(this.door.day); this.day_str = String(this.door.day);
this.editing = this.editable && !this.editing; this.editing = this.editable && !this.editing;
} }
private on_click(event: MouseEvent) { private on_click(event: MouseEvent) {
if (event.target === null) { if (event.target === null || !(event.target instanceof HTMLDivElement)) {
return; return;
} }
if (this.editing) { if (!this.editing) {
this.door.day = Number(this.day_str); const day_input_focus = () => {
if (this.$refs.day_input instanceof HTMLInputElement) {
this.$refs.day_input.focus();
return;
}
this.$nextTick(day_input_focus);
};
day_input_focus();
} else {
this.door.day = this.day_num;
} }
if (event.target instanceof HTMLDivElement) { this.toggle_editing();
this.toggle_editing();
}
} }
private on_keyup(event: KeyboardEvent) { private on_keydown(event: KeyboardEvent) {
if (!this.editing) { if (!this.editing) {
return; return;
} }
if (event.key === "Enter") { if (event.key === "Enter") {
this.door.day = Number(this.day_str); this.door.day = this.day_num;
this.toggle_editing(); this.toggle_editing();
} else if (event.key === "Delete") { } else if (event.key === "Delete") {
this.door.day = -1; this.door.day = -1;