Lenaisten/advent22
4
0
Fork 0
Code Issues Pull requests 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
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"
>
<div class="container is-fluid has-text-centered">
<input
v-if="editing"
v-model="day_str"
@keyup="on_keyup"
class="input p-3 is-size-2"
type="number"
min="-1"
placeholder="Tag"
/>
<div v-else class="is-size-1 has-text-weight-bold">
<template v-if="door.day >= 0">{{ door.day }}</template>
</div>
<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">
<template v-if="door.day >= 0">{{ door.day }}</template>
</div>
</div>
</foreignObject>
@ -57,6 +56,10 @@ export default class extends Vue {
private editing = false;
private refreshKey = 0;
declare $refs: {
day_input: HTMLInputElement | null | undefined;
};
private refresh() {
window.setTimeout(() => {
// don't loop endlessly
@ -86,32 +89,45 @@ export default class extends Vue {
return result;
}
private get day_num(): number {
const result = Number(this.day_str);
return isNaN(result) ? -1 : result;
}
private toggle_editing() {
this.day_str = String(this.door.day);
this.editing = this.editable && !this.editing;
}
private on_click(event: MouseEvent) {
if (event.target === null) {
if (event.target === null || !(event.target instanceof HTMLDivElement)) {
return;
}
if (this.editing) {
this.door.day = Number(this.day_str);
if (!this.editing) {
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) {
return;
}
if (event.key === "Enter") {
this.door.day = Number(this.day_str);
this.door.day = this.day_num;
this.toggle_editing();
} else if (event.key === "Delete") {
this.door.day = -1;