67 lines
1.6 KiB
Vue
67 lines
1.6 KiB
Vue
|
|
<template>
|
|
<RadioButtonGroup
|
|
group_name="pattern"
|
|
:label_list="['pulse', 'travel', 'strobe']"
|
|
:checked_index="pattern"
|
|
:callback="patternSelectCallback"
|
|
></RadioButtonGroup>
|
|
<div class="w-100 d-block d-lg-none"></div>
|
|
<RadioButtonGroup
|
|
group_name="channel"
|
|
:label_list="['0', '1', '2', '3', '4', '5', '6', '7', 'all']"
|
|
:checked_index="channel"
|
|
:callback="channelSelectCallback"
|
|
>
|
|
channels
|
|
</RadioButtonGroup>
|
|
|
|
<PulsePattern v-if="pattern == 0"></PulsePattern>
|
|
<TravelPattern v-else-if="pattern == 1"></TravelPattern>
|
|
<StrobePattern v-else-if="pattern == 2"></StrobePattern>
|
|
</template>
|
|
|
|
<script>
|
|
import RadioButtonGroup from "./ui/RadioButtonGroup.vue";
|
|
|
|
import PulsePattern from "./patterns/Pulse.vue";
|
|
import StrobePattern from "./patterns/Strobe.vue";
|
|
import TravelPattern from "./patterns/Travel.vue";
|
|
|
|
const data = {
|
|
pattern: 1,
|
|
channel: 8,
|
|
};
|
|
|
|
export default {
|
|
name: "AutoMode",
|
|
components: {
|
|
RadioButtonGroup,
|
|
PulsePattern,
|
|
TravelPattern,
|
|
StrobePattern,
|
|
},
|
|
data() {
|
|
return data;
|
|
},
|
|
methods: {
|
|
patternSelectCallback: function (event) {
|
|
if (event.target.nodeName == "INPUT") {
|
|
this.pattern = Number(event.target.value);
|
|
console.log("p:" + this.pattern);
|
|
}
|
|
},
|
|
channelSelectCallback: function (event) {
|
|
if (event.target.nodeName == "INPUT") {
|
|
let selectedChannel = event.target.id.split("-")[0];
|
|
if (selectedChannel == "all") {
|
|
this.channel = 8;
|
|
} else {
|
|
this.channel = Number(selectedChannel);
|
|
}
|
|
console.log("c:" + this.channel);
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script> |