switching to vue frontend, basic barco control working - still needs styling

frontend/vju_display/src/Projektor.vue

@@ -0,0 +1,91 @@
+<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: '',
+    position: ''
+})
+
+const topicstrs = [ //TODO everything else
+  props.room + '/projektorji/' + props.position + '/status/power',
+  props.room + '/projektorji/' + props.position + '/status/shutter',
+  props.room + '/projektorji/' + props.position + '/status/freeze',
+]
+
+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, msg) {
+  console.log('Received on', topic, 'with message', msg)
+  if (topic.includes('status')) {
+    //console.log(topic.split('/'))
+    let typ = topic.split('/')[4]
+    handleProjectorStatus(typ, msg)
+  }
+}
+
+function handleProjectorStatus(typ, msg) {
+  console.log('handling status')
+  //console.log(projStatus)
+  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, msg) {
+  //msg = msg.toString()
+  console.log('Sending to [', topic, '] with message [', (msg ? 'ON' : 'OFF'), ']')
+  $mqtt.publish(topic, (msg ? 'ON' : 'OFF'), 'Qr')
+  console.log('sent')
+}
+
+
+
+const publishPrefix = ref(props.room + '/projektorji/' + props.position + '/ukaz/')
+
+//TODO organize better, binds, etc.
+
+const projStatus = reactive({
+    power : false,
+    shutter : false,
+    freeze : false,
+})
+
+</script>
+
+<template>
+    <div>
+        <!-- <h3>{{ props.room }}</h3> -->
+    <!-- <form> -->
+      <h4>barko {{ props.position }}</h4>
+      <button 
+        @click="publishMQTTMsg(publishPrefix + 'power', !projStatus.power)">
+        power {{ projStatus.power ? 'OFF' : 'ON' }}</button>
+      <button 
+        @click="publishMQTTMsg(publishPrefix + 'shutter', !projStatus.shutter)">
+        shutter {{ projStatus.shutter ? 'OFF' : 'ON' }}</button>
+      <button 
+        @click="publishMQTTMsg(publishPrefix + 'freeze', !projStatus.freeze)">
+        freeze {{ projStatus.freeze ? 'OFF' : 'ON' }}</button>
+    <!-- </form> -->
+    </div>
+</template>
+
+<style scoped>
+
+</style>