Browse Source

Increment day only when selection not focused

Manual increment will be done only if the selection element is not
focused, otherwise it would be incremented by two days.
master
Schneider 6 years ago
parent
commit
32e40891f4
  1. 28
      src/App.vue

28
src/App.vue

@ -6,7 +6,7 @@
<option v-for="mensa in mensen" :value="mensa.url">{{mensa.name}}</option> <option v-for="mensa in mensen" :value="mensa.url">{{mensa.name}}</option>
</select> </select>
Wann? <select v-model="when">
Wann? <select v-model="when" id="selWhen">
<option v-for="day in days" :value="day" :key="day">{{dayOfWeek[day]}}</option> <option v-for="day in days" :value="day" :key="day">{{dayOfWeek[day]}}</option>
</select> </select>
<router-view></router-view> <router-view></router-view>
@ -30,7 +30,7 @@ export default {
name: 'app', name: 'app',
data() { data() {
return { return {
menu: {},
selWhen: {},
mensen: Mensen, mensen: Mensen,
days: [1, 2, 3, 4, 5, 6], days: [1, 2, 3, 4, 5, 6],
dayOfWeek: { dayOfWeek: {
@ -45,10 +45,10 @@ export default {
}, },
methods: { methods: {
previousDay() { previousDay() {
this.when === 1 ? this.when = 6 : this.when--
this.when === 1 ? (this.when = 6) : this.when--
}, },
nextDay() { nextDay() {
this.when === 6 ? this.when = 1 : this.when++
this.when === 6 ? (this.when = 1) : this.when++
} }
}, },
filters: { filters: {
@ -86,26 +86,38 @@ export default {
where: this.where where: this.where
}) })
let vm = this let vm = this
document.onkeydown = (evt) => {
document.onkeydown = evt => {
evt = evt || window.event evt = evt || window.event
switch (evt.keyCode) { switch (evt.keyCode) {
case 37: case 37:
if (vm.selWhen !== document.activeElement) {
// increment only if selection is not focused, avoid double execution
vm.previousDay() vm.previousDay()
}
break break
case 39: case 39:
if (vm.selWhen !== document.activeElement) {
// increment only if selection is not focused, avoid double execution
vm.nextDay() vm.nextDay()
break break
} }
} }
} }
},
mounted() {
this.selWhen = document.getElementById('selWhen')
}
} }
</script> </script>
<style src="./assets/base.css"></style>
<style src="./assets/links.css"></style>
<style src="./assets/base.css">
</style>
<style src="./assets/links.css">
</style>
<style> <style>
#app { #app {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
text-align: center; text-align: center;

Loading…
Cancel
Save