grafic desijn is my pashion

frontend/vju_display/src/components/Projektor.vue

@@ -0,0 +1,103 @@
+<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
+})
+
+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',
+]
+
+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')) {
+    //console.log(topic.split('/'))
+    let typ = topic.split('/')[4]
+    handleProjectorStatus(typ, msg)
+  }
+}
+
+function handleProjectorStatus(typ: string, msg: string) {
+  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: string, msg: string) {
+  //msg = msg.toString()
+  console.log('Sending to [', topic, '] with message [', msg, ']')
+  $mqtt.publish(topic, msg, 'Qr') //todo refactor to 1 or 0 maybe
+  console.log('sent')
+}
+
+
+
+const publishPrefix = ref(props.room + '/projectors/' + props.position + '/command/')
+
+//TODO organize better, binds, etc.
+
+const projStatus = reactive({
+  power: false,
+  shutter: false,
+  freeze: false,
+})
+
+</script>
+
+<template>
+  <div>
+    <!-- TODO lepš -->
+    <div>
+      <h5>Power: {{ (projStatus.power ? "ON" : "OFF") }}</h5>
+      <button @click="publishMQTTMsg(publishPrefix + 'power', (!projStatus.power ? '1' : '0'))">
+        Turn {{ projStatus.power ? 'OFF' : 'ON' }}</button>
+    </div>
+    <div :class="{ disabled: !projStatus.power }">
+      <div>
+        <h5>Shutter: {{ (projStatus.shutter ? "ON" : "OFF") }}</h5>
+        <button @click="publishMQTTMsg(publishPrefix + 'shutter', (!projStatus.shutter ? '1' : '0'))">
+          Turn {{ projStatus.shutter ? 'OFF' : 'ON' }}</button>
+      </div>
+      <div>
+        <h5>Freeze image: {{ (projStatus.freeze ? "ON" : "OFF") }}</h5>
+        <button @click="publishMQTTMsg(publishPrefix + 'freeze', (!projStatus.freeze ? '1' : '0'))">
+          Turn {{ projStatus.freeze ? 'OFF' : 'ON' }}</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.disabled {
+  opacity: .8;
+  pointer-events: none;
+}
+button {
+  padding: 1rem;
+  width: 100%;
+}
+</style>