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

DoorChooser keyboard input method

Browse source
This commit is contained in:
Jörn-Michael Miehe 2023-02-02 23:16:44 +00:00
parent 1ab02e6905
commit 67c371b483
1 changed files with 58 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -3,8 +3,11 @@
<div class="content">
<p class="title is-5">Steuerung</p>
<ul>
<li>Linksklick: Türchen hochzählen</li>
<li>Rechtsklick: Türchen runterzählen</li>
<li>Linksklick: Türchen auswählen</li>
<li>Tastatur [0]-[9], [Rücktaste]: Tag eingeben</li>
<li>Tastatur [Enter]: Tag speichern</li>
<li>Tastatur [Esc]: Eingabe Abbrechen</li>
<li>Tastatur [Entf]: Tag entfernen</li>
</ul>
</div>
<figure class="image">
@ -18,10 +21,8 @@
/>
<SVGRect
:rectangle="door.position"
:focused="door.day >= 0"
@click.left="door.day++"
@click.right="door.day--"
style="cursor: pointer"
:focused="index === focused"
@click.left="click_door(index)"
/>
</template>
</ThouCanvas>
@ -50,6 +51,53 @@ import SVGRectText from "../rects/SVGRectText.vue";
})
export default class extends Vue {
private doors!: Door[];
private focused = -1;
private click_door(index: number) {
if (this.focused >= 0) {
return;
}
this.focused = index;
const listener = (() => {
let old_day = this.doors[index].day;
let num_input = "";
return (event: KeyboardEvent) => {
if (event.key >= "0" && event.key <= "9") {
// number input
num_input += event.key;
this.doors[this.focused].day = Number(num_input);
} else if (event.key === "Backspace") {
// remove char
num_input = num_input.slice(0, -1);
this.doors[this.focused].day = Number(num_input);
} else if (event.key === "Enter") {
// accept
this.focused = -1;
window.removeEventListener("keydown", listener);
} else if (event.key === "Escape") {
// abort
this.doors[this.focused].day = old_day;
this.focused = -1;
window.removeEventListener("keydown", listener);
} else if (event.key === "Delete") {
// delete
this.doors[this.focused].day = -1;
this.focused = -1;
window.removeEventListener("keydown", listener);
}
};
})();
window.addEventListener("keydown", listener);
}
public beforeUnmount() {
this.$emit("update:doors", this.doors);
@ -60,5 +108,9 @@ export default class extends Vue {
<style lang="scss" scoped>
section > figure {
user-select: none;
svg > rect {
cursor: pointer;
}
}
</style>