reworked relay controls with i2c relay boards, added lift controls to service panel on frontend

frontend/vju_display/.env.development

@@ -1,3 +1,3 @@
-VITE_MQTT_HOST=localhost
+VITE_MQTT_HOST=p01malina.local
 VITE_MQTT_PORT=8080
 VITE_MQTT_SSL=false

frontend/vju_display/src/App.vue

@@ -5,6 +5,7 @@ import ProjManualPage from './components/pages/ProjManualPage.vue';
 import VerticalTabs from './components/tabs/VerticalTabs.vue';
 import Tab from './components/tabs/Tab.vue';
 import LightingPage from './components/pages/LightingPage.vue';
+import ServisPage from './components/pages/ServisPage.vue';
 
 let urlParams = new URLSearchParams(window.location.search);
 
@@ -38,7 +39,9 @@ const pageNum = ref(0) // TODO spremen na 0
       <MainPage v-if="pageNum == 0" />
       <ProjManualPage v-else-if="pageNum == 1" :room="currentRoom" />
       
-      <LightingPage v-else-if="pageNum == 3" :room="currentRoom"/>
+      <LightingPage v-else-if="pageNum == 3" :room="currentRoom" />
+
+      <ServisPage v-else-if="pageNum == 4" :room="currentRoom" />
     </main>
   </div>
 </template>

frontend/vju_display/src/components/Lift.vue

@@ -0,0 +1,125 @@
+<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';
+
+const props = defineProps({
+    room: String,
+    position: String
+})
+
+const topicstrs = [ //TODO everything else
+  props.room + '/projectors/' + props.position + 'lift/status',
+  props.room + '/projectors/' + props.position + 'lift/status',
+]
+
+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]
+    // handlePlatnoStatus(msg)
+  }
+}
+
+// enum firankState {
+//   UP,
+//   DOWN,
+//   MOVING,
+//   STOPPED
+// }
+// const firankStatus = ref(firankState.STOPPED)
+
+// function handlePlatnoStatus(msg: string) {
+//   console.log('handling status')
+//   //console.log(projStatus)
+//   let newState: firankState
+//   switch (msg) {
+//     case "UP":
+//       newState = firankState.UP
+//       break
+//     case "DOWN":
+//       newState = firankState.DOWN
+//       break
+//     case "MOVING":
+//       newState = firankState.MOVING
+//       break
+//     default:
+//       newState = firankState.STOPPED
+//       break
+//   }
+//   firankStatus.value = newState
+// }
+
+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 + '/lift/')
+
+
+</script>
+
+<!--
+TODO: NE HARDCODANO
+-->
+
+<template>
+    <div style="display:flex; gap: 1rem">
+      <div>
+            <h4>Lifti {{ props.position }}</h4>
+            
+            <button 
+          @mousedown="publishMQTTMsg(publishPrefix + 'move/up', '1')" 
+          @mouseup="publishMQTTMsg(publishPrefix + 'move/up', '0')" >
+          <UpIcon /></button>
+          <button 
+          @mousedown="publishMQTTMsg(publishPrefix + 'move/down', '1')" 
+          @mouseup="publishMQTTMsg(publishPrefix + 'move/down', '0')" >
+          <DownIcon /></button>
+        </div><div>
+            <h4>Servis lifti {{ props.position }}</h4>
+            
+            <button 
+          @mousedown="publishMQTTMsg(publishPrefix + 'move/service_up', '1')" 
+          @mouseup="publishMQTTMsg(publishPrefix + 'move/service_up', '0')" >
+          <UpIcon /></button>
+          <button 
+          @mousedown="publishMQTTMsg(publishPrefix + 'move/service_down', '1')" 
+          @mouseup="publishMQTTMsg(publishPrefix + 'move/service_down', '0')" >
+          <DownIcon /></button>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.disabled {
+  opacity: .8;
+  pointer-events: none;
+}
+button {
+  padding: 1rem;
+  margin: 0.1rem;
+  width: 45%;
+}
+</style>

frontend/vju_display/src/components/pages/LightingPage.vue

@@ -107,6 +107,7 @@ const publishPrefix = ref(props.room + '/firanki/')
 }
 button {
   padding: 1rem;
-  width: 50%;
+  margin: 0.1rem;
+  width: 45%;
 }
 </style>

frontend/vju_display/src/components/pages/ServisPage.vue

@@ -0,0 +1,36 @@
+<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 Projektor from '../Projektor.vue'
+// import Platno from '../Platno.vue'
+import Lift from '../Lift.vue';
+
+const props = defineProps({
+    room: String,
+})
+const _glavni_position = ref('glavni')
+const _stranski_position = ref('stranski')
+
+</script>
+
+<template>
+    <div style="display: flex; gap: 1rem">
+        <div>
+          <Lift :room="props.room" :position="_glavni_position" />
+          <!-- <Projektor :room="props.room" :position="_glavni_position" /> -->
+            <!-- <Platno :room="props.room" :position="_glavni_position" /> -->
+             
+        </div>
+        <div>
+          <Lift :room="props.room" :position="_stranski_position" />
+            <!-- <Projektor :room="props.room" :position="_stranski_position" /> -->
+            <!-- <Platno :room="props.room" :position="_stranski_position" /> -->
+        </div>
+    </div>
+</template>
+
+<style scoped>
+
+</style>