From 1c9bff704a0b0c10dde966d76dbc745c2591aaa5 Mon Sep 17 00:00:00 2001
From: 0xEmm <goljatsara@gmail.com>
Date: Thu, 31 Oct 2024 17:25:45 +0100
Subject: [PATCH] added pages and most of projector control to UI

---
 frontend/vju_display/src/App.vue            |  30 +++--
 frontend/vju_display/src/MainPage.vue       |   3 +
 frontend/vju_display/src/Platno.vue         | 116 ++++++++++++++++++++
 frontend/vju_display/src/ProjManualPage.vue |  35 ++++++
 frontend/vju_display/src/Projektor.vue      |  44 +++++---
 5 files changed, 201 insertions(+), 27 deletions(-)
 create mode 100644 frontend/vju_display/src/MainPage.vue
 create mode 100644 frontend/vju_display/src/Platno.vue
 create mode 100644 frontend/vju_display/src/ProjManualPage.vue

diff --git a/frontend/vju_display/src/App.vue b/frontend/vju_display/src/App.vue
index 1a8df93..3f311ca 100644
--- a/frontend/vju_display/src/App.vue
+++ b/frontend/vju_display/src/App.vue
@@ -4,11 +4,17 @@
 import {ref, onMounted } from 'vue'
 //import { $mqtt } from 'vue-paho-mqtt'
 import Projektor from './Projektor.vue'
-
+import Platno from './Platno.vue'
+import MainPage from './MainPage.vue';
+import ProjManualPage from './ProjManualPage.vue';
 
 const _p1_room = ref('p1')
-const _glavni_position = ref('glavni')
-const _stranski_position = ref('stranski')
+
+
+const pageNum = ref(0) // TODO spremen na 0
+
+
+
 </script>
 
 <template>
@@ -18,19 +24,23 @@ const _stranski_position = ref('stranski')
     <div class="wrapper">
       <!-- <HelloWorld msg="You did it!" /> -->
        <h2>turbo odličen super mega kontrol panel</h2>
+       <h3>Predavalnica {{ _p1_room }}</h3>
+    </div>
+    <div>
+      <button @click="pageNum = 0">Page 1</button>
+      <button @click="pageNum = 1">Page 2</button>
+      <button @click="pageNum = 2">Page 3</button>
     </div>
   </header>
 
   <main>
-    <div>
-      <h3>{{ _p1_room }}</h3>
-      <!-- <h4>Glavni</h4> -->
-      <Projektor :room="_p1_room" :position="_glavni_position" />
+    <div v-if="pageNum == 0">
+      <MainPage />
     </div>
-    <div>
-      <!-- <h4>Stranski</h4> -->
-      <Projektor :room="_p1_room" :position="_stranski_position" />
+    <div v-else-if="pageNum == 1">
+      <ProjManualPage :room="_p1_room" />
     </div>
+    <div v-else-if="pageNum == 2">temp</div>
   </main>
 </template>
 
diff --git a/frontend/vju_display/src/MainPage.vue b/frontend/vju_display/src/MainPage.vue
new file mode 100644
index 0000000..24033d6
--- /dev/null
+++ b/frontend/vju_display/src/MainPage.vue
@@ -0,0 +1,3 @@
+<script setup lang="ts"></script>
+
+<template>tukaj pride hecn gumbek za vse prižgat</template>
\ No newline at end of file
diff --git a/frontend/vju_display/src/Platno.vue b/frontend/vju_display/src/Platno.vue
new file mode 100644
index 0000000..72d0c81
--- /dev/null
+++ b/frontend/vju_display/src/Platno.vue
@@ -0,0 +1,116 @@
+<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 + 'platno/status',
+  props.room + '/projectors/' + props.position + 'platno/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)
+  }
+}
+
+function handlePlatnoStatus(msg: string) {
+  console.log('handling status')
+  //console.log(projStatus)
+  let newState: platnoState
+  switch (msg) {
+    case "UP":
+      newState = platnoState.UP
+      break
+    case "DOWN":
+      newState = platnoState.DOWN
+      break
+    case "MOVING":
+      newState = platnoState.MOVING
+      break
+    default:
+      newState = platnoState.UNKNOWN
+      break
+  }
+  platnoStatus.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 + '/platno/')
+
+//TODO organize better, binds, etc.
+
+enum platnoState {
+  UP,
+  DOWN,
+  MOVING,
+  UNKNOWN
+}
+
+const platnoStatus = ref(platnoState.UNKNOWN)
+
+</script>
+
+<template>
+    <div>
+        <!-- <h3>{{ props.room }}</h3> -->
+    <!-- <form> -->
+      <!-- TODO lepš -->
+      <h4>platna {{ props.position }}</h4>
+      <button 
+        @click="publishMQTTMsg(publishPrefix + 'go', 'UP')">
+        Go UP</button>
+      <button 
+      @click="publishMQTTMsg(publishPrefix + 'go', 'DOWN')">
+      Go DOWN</button>
+      <div>
+        <h5>Manual control</h5>
+        <button 
+          @mousedown="publishMQTTMsg(publishPrefix + 'move', 'UP')" 
+          @mouseup="publishMQTTMsg(publishPrefix + 'move', 'STOP')" >
+          Move up</button>
+          <button 
+          @mousedown="publishMQTTMsg(publishPrefix + 'move', 'DOWN')" 
+          @mouseup="publishMQTTMsg(publishPrefix + 'move', 'STOP')" >
+          Move down</button>
+      </div>
+
+    <!-- </form> -->
+    </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/frontend/vju_display/src/ProjManualPage.vue b/frontend/vju_display/src/ProjManualPage.vue
new file mode 100644
index 0000000..03f1e1d
--- /dev/null
+++ b/frontend/vju_display/src/ProjManualPage.vue
@@ -0,0 +1,35 @@
+<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'
+
+const props = defineProps({
+    room: String,
+})
+const _glavni_position = ref('glavni')
+const _stranski_position = ref('stranski')
+
+</script>
+
+<template>
+    <div>
+        <div>
+            <!-- <h3>{{ _p1_room }} (prestavi to na levo verjetno)</h3> -->
+            <!-- <h4>Glavni</h4> -->
+            <Projektor :room="props.room" :position="_glavni_position" />
+            <Platno :room="props.room" :position="_glavni_position" />
+        </div>
+        <div>
+            <!-- <h4>Stranski</h4> -->
+            <Projektor :room="props.room" :position="_stranski_position" />
+            <Platno :room="props.room" :position="_stranski_position" />
+        </div>
+    </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/frontend/vju_display/src/Projektor.vue b/frontend/vju_display/src/Projektor.vue
index ecfea77..f92c5c9 100644
--- a/frontend/vju_display/src/Projektor.vue
+++ b/frontend/vju_display/src/Projektor.vue
@@ -5,14 +5,14 @@ import {ref, onMounted, reactive } from 'vue'
 import { $mqtt } from 'vue-paho-mqtt'
 
 const props = defineProps({
-    room: '',
-    position: ''
+    room: String,
+    position: String
 })
 
 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',
+  props.room + '/projectors/' + props.position + '/status/power',
+  props.room + '/projectors/' + props.position + '/status/shutter',
+  props.room + '/projectors/' + props.position + '/status/freeze',
 ]
 
 const subscriptions = 
@@ -24,7 +24,7 @@ topicstrs.map(topic => {
   })
 })
 
-function 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('/'))
@@ -33,7 +33,7 @@ function handleIncomingMQTT(topic, msg) {
   }
 }
 
-function handleProjectorStatus(typ, msg) {
+function handleProjectorStatus(typ: string, msg: string) {
   console.log('handling status')
   //console.log(projStatus)
   if (typ == 'power') {projStatus.power = msg == '1'}
@@ -47,16 +47,16 @@ onMounted(() => {
   
 })
 
-function publishMQTTMsg(topic, msg) {
+function publishMQTTMsg(topic: string, msg: string) {
   //msg = msg.toString()
-  console.log('Sending to [', topic, '] with message [', (msg ? 'ON' : 'OFF'), ']')
-  $mqtt.publish(topic, (msg ? 'ON' : 'OFF'), 'Qr')
+  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 + '/projektorji/' + props.position + '/ukaz/')
+const publishPrefix = ref(props.room + '/projectors/' + props.position + '/command/')
 
 //TODO organize better, binds, etc.
 
@@ -72,16 +72,26 @@ const projStatus = reactive({
     <div>
         <!-- <h3>{{ props.room }}</h3> -->
     <!-- <form> -->
+      <!-- TODO lepš -->
       <h4>barko {{ props.position }}</h4>
+      <div>
+      <h5>Power: {{ (projStatus.power ? "ON" : "OFF") }}</h5>
       <button 
-        @click="publishMQTTMsg(publishPrefix + 'power', !projStatus.power)">
-        power {{ projStatus.power ? 'OFF' : 'ON' }}</button>
+        @click="publishMQTTMsg(publishPrefix + 'power', (!projStatus.power ? '1' : '0'))">
+        Turn power {{ projStatus.power ? 'OFF' : 'ON' }}</button>
+      </div>
+      <div>
+      <h5>Shutter: {{ (projStatus.shutter ? "ON" : "OFF") }}</h5>
       <button 
-        @click="publishMQTTMsg(publishPrefix + 'shutter', !projStatus.shutter)">
-        shutter {{ projStatus.shutter ? 'OFF' : 'ON' }}</button>
+        @click="publishMQTTMsg(publishPrefix + 'shutter', (!projStatus.shutter ? '1' : '0'))">
+        Turn shutter {{ projStatus.shutter ? 'OFF' : 'ON' }}</button>
+      </div>
+      <div>
+      <h5>Freeze image: {{ (projStatus.freeze ? "ON" : "OFF") }}</h5>
       <button 
-        @click="publishMQTTMsg(publishPrefix + 'freeze', !projStatus.freeze)">
-        freeze {{ projStatus.freeze ? 'OFF' : 'ON' }}</button>
+        @click="publishMQTTMsg(publishPrefix + 'freeze', (!projStatus.freeze ? '1' : '0'))">
+        Turn freeze {{ projStatus.freeze ? 'OFF' : 'ON' }}</button>
+      </div>
     <!-- </form> -->
     </div>
 </template>