112 lines
3.2 KiB
Vue
112 lines
3.2 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'
|
|
|
|
const props = defineProps({
|
|
room: String,
|
|
position: String,
|
|
ctrltype: [String, null]
|
|
})
|
|
|
|
const topicstrs = [ //TODO everything else
|
|
props.room + '/projectors/' + props.position + '/status/power',
|
|
props.room + '/projectors/' + props.position + '/status/shutter',
|
|
props.room + '/projectors/' + props.position + '/status/freeze',
|
|
props.room + '/projectors/' + props.position + '/status',
|
|
]
|
|
|
|
const isUnreachable = ref(false)
|
|
|
|
const subscriptions =
|
|
topicstrs.map(topic => {
|
|
// console.log('subbing to', topic)
|
|
$mqtt.subscribe(topic, (msg) => {
|
|
// console.log('received:', topic, msg)
|
|
handleIncomingMQTT(topic, msg)
|
|
})
|
|
})
|
|
|
|
function handleIncomingMQTT(topic: string, msg: string) {
|
|
console.log('Received on', topic, 'with message', msg)
|
|
if (topic.includes('status') && !topic.endsWith('status')) {
|
|
//console.log(topic.split('/'))
|
|
let typ = topic.split('/')[4]
|
|
handleProjectorStatus(typ, msg)
|
|
} else {
|
|
isUnreachable.value = msg.length > 1
|
|
}
|
|
}
|
|
|
|
function handleProjectorStatus(typ: string, msg: string) {
|
|
console.log('handling status')
|
|
//console.log(projStatus)
|
|
console.debug(props.room, projStatus.power, projStatus.shutter)
|
|
|
|
if (typ == 'power') { projStatus.power = msg == '1' }
|
|
else if (typ == 'shutter') { projStatus.shutter = msg == '1' }
|
|
else if (typ == 'freeze') { projStatus.freeze = msg == '1' }
|
|
}
|
|
|
|
onMounted(() => {
|
|
// console.log('test')
|
|
//$mqtt.publish('peepee', 'poopoo', 'Qr') // dela
|
|
|
|
})
|
|
|
|
function publishMQTTMsg(topic: string, msg: string) {
|
|
//msg = msg.toString()
|
|
console.log('Sending to [', topic, '] with message [', msg, ']')
|
|
$mqtt.publish(topic, msg, 'Fnr') //todo refactor to 1 or 0 maybe
|
|
console.log('sent')
|
|
}
|
|
|
|
|
|
|
|
const publishPrefix = ref(props.room + '/projectors/' + props.position + '/set/')
|
|
|
|
//TODO organize better, binds, etc.
|
|
|
|
const projStatus = reactive({
|
|
power: false,
|
|
shutter: false,
|
|
freeze: false,
|
|
})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<span v-if="isUnreachable">CONNECTION FAILED</span>
|
|
<!-- TODO lepš -->
|
|
<div>
|
|
<h4>Power</h4>
|
|
<button @click="publishMQTTMsg(publishPrefix + 'power', (!projStatus.power ? '1' : '0'))" :class="{currentlyActive: projStatus.power}">
|
|
Turn {{ projStatus.power ? 'OFF' : 'ON' }}</button>
|
|
</div>
|
|
<div :class="{ disabled: !projStatus.power }">
|
|
<div>
|
|
<h4>Shutter</h4>
|
|
<button @click="publishMQTTMsg(publishPrefix + 'shutter', (!projStatus.shutter ? '1' : '0'))" :class="{currentlyActive: projStatus.shutter}">
|
|
Turn {{ projStatus.shutter ? 'OFF' : 'ON' }}</button>
|
|
</div>
|
|
<div>
|
|
<h4>Freeze image</h4>
|
|
<button @click="publishMQTTMsg(publishPrefix + 'freeze', (!projStatus.freeze ? '1' : '0'))" :class="{currentlyActive: projStatus.freeze}">
|
|
Turn {{ projStatus.freeze ? 'OFF' : 'ON' }}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.disabled {
|
|
opacity: .5;
|
|
pointer-events: none;
|
|
}
|
|
button {
|
|
padding: 1rem;
|
|
width: 100%;
|
|
}
|
|
</style>
|