106 lines
3 KiB
Vue
106 lines
3 KiB
Vue
<script setup lang="ts">
|
|
//import HelloWorld from './components/HelloWorld.vue'
|
|
//import TheWelcome from './components/TheWelcome.vue'
|
|
import {ref, onMounted, reactive} from 'vue'
|
|
import {$mqtt} from 'vue-paho-mqtt'
|
|
import DownIcon from './icons/DownIcon.vue';
|
|
import UpIcon from './icons/UpIcon.vue';
|
|
import ChevronUpIcon from "@/components/icons/ChevronUpIcon.vue";
|
|
import ChevronDownIcon from "@/components/icons/ChevronDownIcon.vue";
|
|
|
|
const props = defineProps({
|
|
room: String,
|
|
position: String
|
|
})
|
|
|
|
const topicPrefix = `${props.room}/projectors/${props.position}`
|
|
|
|
const status = reactive({
|
|
status: "-",
|
|
})
|
|
|
|
$mqtt.subscribe(`${topicPrefix}/lift/status`, (message) => {
|
|
status.status = message;
|
|
});
|
|
|
|
function publishMQTTMsg(topic: string, msg: string) {
|
|
console.log('Sending to [', topic, '] with message [', msg, ']')
|
|
$mqtt.publish(topic, msg, 'Fnr')
|
|
}
|
|
|
|
const publishPrefix = ref(props.room + '/projectors/' + props.position + '/lift/')
|
|
|
|
|
|
</script>
|
|
|
|
<!--
|
|
TODO: NE HARDCODANO
|
|
-->
|
|
|
|
<template>
|
|
<div style="display:flex; gap: 1rem">
|
|
<div>
|
|
<h4>Lifti ({{status.status}})</h4>
|
|
|
|
<button
|
|
@mousedown="publishMQTTMsg(publishPrefix + 'manual/up', '1')"
|
|
@touchstart="publishMQTTMsg(publishPrefix + 'manual/up', '1')"
|
|
@mouseup="publishMQTTMsg(publishPrefix + 'manual/up', '0')"
|
|
@touchend="publishMQTTMsg(publishPrefix + 'manual/up', '0')">
|
|
<ChevronUpIcon/>
|
|
</button>
|
|
<button
|
|
@mousedown="publishMQTTMsg(publishPrefix + 'manual/down', '1')"
|
|
@touchstart="publishMQTTMsg(publishPrefix + 'manual/down', '1')"
|
|
@mouseup="publishMQTTMsg(publishPrefix + 'manual/down', '0')"
|
|
@touchend="publishMQTTMsg(publishPrefix + 'manual/down', '0')">
|
|
<ChevronDownIcon/>
|
|
</button>
|
|
</div>
|
|
<div>
|
|
<h4>Servis</h4>
|
|
|
|
<button
|
|
@mousedown="publishMQTTMsg(publishPrefix + 'manual/service_up', '1')"
|
|
@touchstart="publishMQTTMsg(publishPrefix + 'manual/service_up', '1')"
|
|
@mouseup="publishMQTTMsg(publishPrefix + 'manual/service_up', '0')"
|
|
@touchend="publishMQTTMsg(publishPrefix + 'manual/service_up', '0')">
|
|
<ChevronUpIcon/>
|
|
</button>
|
|
<button
|
|
@mousedown="publishMQTTMsg(publishPrefix + 'manual/service_down', '1')"
|
|
@touchstart="publishMQTTMsg(publishPrefix + 'manual/service_down', '1')"
|
|
@mouseup="publishMQTTMsg(publishPrefix + 'manual/service_down', '0')"
|
|
@touchend="publishMQTTMsg(publishPrefix + 'manual/service_down', '0')">
|
|
<ChevronDownIcon/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>
|
|
<h4>GOTO</h4>
|
|
|
|
<button
|
|
@click="publishMQTTMsg(publishPrefix + 'goto', 'UP')">
|
|
<ChevronUpIcon/>
|
|
</button>
|
|
<button
|
|
@click="publishMQTTMsg(publishPrefix + 'goto', 'DOWN')">
|
|
<ChevronDownIcon/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.disabled {
|
|
opacity: .8;
|
|
pointer-events: none;
|
|
}
|
|
|
|
button {
|
|
padding: 1rem;
|
|
margin: 0.1rem;
|
|
width: 45%;
|
|
}
|
|
</style>
|