rc/predavalnice-kontroler
5
0
Fork 0
Code Issues 3 Pull requests Projects Releases Packages Wiki Activity Actions

Adjusted the page tabs to reflect main and advanced use, fixed and cleaned up icons

Browse source
This commit is contained in:
Katja 2025-10-07 19:55:10 +02:00
parent b46ba4fe84
commit 3655a5f6e2
11 changed files with 49 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

4
frontend/package-lock.json generated
View file

@ -711,6 +711,7 @@
"integrity": "sha512-vOTpLduLkZXePLxHiHsBLp98mHGnl8RptV4YAO3HfKO5UHjDvySGbxKtpYfy8Sx5+WKcgc45qNreJJRVM3L6mw==", "integrity": "sha512-vOTpLduLkZXePLxHiHsBLp98mHGnl8RptV4YAO3HfKO5UHjDvySGbxKtpYfy8Sx5+WKcgc45qNreJJRVM3L6mw==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"undici-types": "~6.19.2" "undici-types": "~6.19.2"
} }
@ -1384,6 +1385,7 @@
"integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==", "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
"devOptional": true, "devOptional": true,
"license": "Apache-2.0", "license": "Apache-2.0",
"peer": true,
"bin": { "bin": {
"tsc": "bin/tsc", "tsc": "bin/tsc",
"tsserver": "bin/tsserver" "tsserver": "bin/tsserver"
@ -1405,6 +1407,7 @@
"integrity": "sha512-EK5cY7Q1D8JNhSaPKVK4pwBFvaTmZxEnoKXLG/U9gmdDcihQGNzFlgIvaxezFR4glP1LsuiedwMBqCXH3wZccA==", "integrity": "sha512-EK5cY7Q1D8JNhSaPKVK4pwBFvaTmZxEnoKXLG/U9gmdDcihQGNzFlgIvaxezFR4glP1LsuiedwMBqCXH3wZccA==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"esbuild": "^0.21.3", "esbuild": "^0.21.3",
"postcss": "^8.4.43", "postcss": "^8.4.43",
@ -1471,6 +1474,7 @@
"resolved": "https://registry.npmjs.org/vue/-/vue-3.5.12.tgz", "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.12.tgz",
"integrity": "sha512-CLVZtXtn2ItBIi/zHZ0Sg1Xkb7+PU32bJJ8Bmy7ts3jxXTcbfsEfBivFYYWz1Hur+lalqGAh65Coin0r+HRUfg==", "integrity": "sha512-CLVZtXtn2ItBIi/zHZ0Sg1Xkb7+PU32bJJ8Bmy7ts3jxXTcbfsEfBivFYYWz1Hur+lalqGAh65Coin0r+HRUfg==",
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"@vue/compiler-dom": "3.5.12", "@vue/compiler-dom": "3.5.12",
"@vue/compiler-sfc": "3.5.12", "@vue/compiler-sfc": "3.5.12",

8
frontend/src/App.vue
View file

@ -8,6 +8,8 @@ import LightingPage from './components/pages/LightingPage.vue';
import ServisPage from './components/pages/ServisPage.vue'; import ServisPage from './components/pages/ServisPage.vue';
import {$mqtt} from "vue-paho-mqtt" import {$mqtt} from "vue-paho-mqtt"
import AudioPage from "@/components/pages/AudioPage.vue"; import AudioPage from "@/components/pages/AudioPage.vue";
import HomeIcon from "@/components/icons/HomeIcon.vue";
import LightbulbIcon from "@/components/icons/LightbulbIcon.vue";
document.addEventListener('contextmenu', event => event.preventDefault()); document.addEventListener('contextmenu', event => event.preventDefault());
@ -46,10 +48,12 @@ watch(pageNum, (_, newState) => {
<h1>{{ currentRoom.toUpperCase() }}</h1> <h1>{{ currentRoom.toUpperCase() }}</h1>
<VerticalTabs id="nav"> <VerticalTabs id="nav">
<Tab @click="pageNum=0" :selected="pageNum==0">Priprava</Tab> <Tab @click="pageNum=0" :selected="pageNum==0"><HomeIcon /></Tab>
<Tab @click="pageNum=3" :selected="pageNum==3"><LightbulbIcon /></Tab>
<br />
<h4>NAPREDNO</h4>
<Tab @click="pageNum=1" :selected="pageNum==1">Video</Tab> <Tab @click="pageNum=1" :selected="pageNum==1">Video</Tab>
<Tab @click="pageNum=2" :selected="pageNum==2">Audio</Tab> <Tab @click="pageNum=2" :selected="pageNum==2">Audio</Tab>
<Tab @click="pageNum=3" :selected="pageNum==3">Lučke</Tab>
<Tab @click="pageNum=4" :selected="pageNum==4">Servis</Tab> <Tab @click="pageNum=4" :selected="pageNum==4">Servis</Tab>
</VerticalTabs> </VerticalTabs>
<div class="mstatus" v-if="$mqtt.status() != 'connected'">{{ $mqtt.status()?.toUpperCase() }}</div> <div class="mstatus" v-if="$mqtt.status() != 'connected'">{{ $mqtt.status()?.toUpperCase() }}</div>

14
frontend/src/components/Lift.vue
View file

@ -5,6 +5,8 @@ import {ref, onMounted, reactive} from 'vue'
import {$mqtt} from 'vue-paho-mqtt' import {$mqtt} from 'vue-paho-mqtt'
import DownIcon from './icons/DownIcon.vue'; import DownIcon from './icons/DownIcon.vue';
import UpIcon from './icons/UpIcon.vue'; import UpIcon from './icons/UpIcon.vue';
import ChevronUpIcon from "@/components/icons/ChevronUpIcon.vue";
import ChevronDownIcon from "@/components/icons/ChevronDownIcon.vue";
const props = defineProps({ const props = defineProps({
room: String, room: String,
@ -45,14 +47,14 @@ TODO: NE HARDCODANO
@touchstart="publishMQTTMsg(publishPrefix + 'manual/up', '1')" @touchstart="publishMQTTMsg(publishPrefix + 'manual/up', '1')"
@mouseup="publishMQTTMsg(publishPrefix + 'manual/up', '0')" @mouseup="publishMQTTMsg(publishPrefix + 'manual/up', '0')"
@touchend="publishMQTTMsg(publishPrefix + 'manual/up', '0')"> @touchend="publishMQTTMsg(publishPrefix + 'manual/up', '0')">
<UpIcon/> <ChevronUpIcon/>
</button> </button>
<button <button
@mousedown="publishMQTTMsg(publishPrefix + 'manual/down', '1')" @mousedown="publishMQTTMsg(publishPrefix + 'manual/down', '1')"
@touchstart="publishMQTTMsg(publishPrefix + 'manual/down', '1')" @touchstart="publishMQTTMsg(publishPrefix + 'manual/down', '1')"
@mouseup="publishMQTTMsg(publishPrefix + 'manual/down', '0')" @mouseup="publishMQTTMsg(publishPrefix + 'manual/down', '0')"
@touchend="publishMQTTMsg(publishPrefix + 'manual/down', '0')"> @touchend="publishMQTTMsg(publishPrefix + 'manual/down', '0')">
<DownIcon/> <ChevronDownIcon/>
</button> </button>
</div> </div>
<div> <div>
@ -63,14 +65,14 @@ TODO: NE HARDCODANO
@touchstart="publishMQTTMsg(publishPrefix + 'manual/service_up', '1')" @touchstart="publishMQTTMsg(publishPrefix + 'manual/service_up', '1')"
@mouseup="publishMQTTMsg(publishPrefix + 'manual/service_up', '0')" @mouseup="publishMQTTMsg(publishPrefix + 'manual/service_up', '0')"
@touchend="publishMQTTMsg(publishPrefix + 'manual/service_up', '0')"> @touchend="publishMQTTMsg(publishPrefix + 'manual/service_up', '0')">
<UpIcon/> <ChevronUpIcon/>
</button> </button>
<button <button
@mousedown="publishMQTTMsg(publishPrefix + 'manual/service_down', '1')" @mousedown="publishMQTTMsg(publishPrefix + 'manual/service_down', '1')"
@touchstart="publishMQTTMsg(publishPrefix + 'manual/service_down', '1')" @touchstart="publishMQTTMsg(publishPrefix + 'manual/service_down', '1')"
@mouseup="publishMQTTMsg(publishPrefix + 'manual/service_down', '0')" @mouseup="publishMQTTMsg(publishPrefix + 'manual/service_down', '0')"
@touchend="publishMQTTMsg(publishPrefix + 'manual/service_down', '0')"> @touchend="publishMQTTMsg(publishPrefix + 'manual/service_down', '0')">
<DownIcon/> <ChevronDownIcon/>
</button> </button>
</div> </div>
</div> </div>
@ -80,11 +82,11 @@ TODO: NE HARDCODANO
<button <button
@click="publishMQTTMsg(publishPrefix + 'goto', 'UP')"> @click="publishMQTTMsg(publishPrefix + 'goto', 'UP')">
<UpIcon/> <ChevronUpIcon/>
</button> </button>
<button <button
@click="publishMQTTMsg(publishPrefix + 'goto', 'DOWN')"> @click="publishMQTTMsg(publishPrefix + 'goto', 'DOWN')">
<DownIcon/> <ChevronDownIcon/>
</button> </button>
</div> </div>
</div> </div>

10
frontend/src/components/Platno.vue
View file

@ -5,6 +5,8 @@ import {ref, onMounted, reactive} from 'vue'
import {$mqtt} from 'vue-paho-mqtt' import {$mqtt} from 'vue-paho-mqtt'
import DownIcon from './icons/DownIcon.vue'; import DownIcon from './icons/DownIcon.vue';
import UpIcon from './icons/UpIcon.vue'; import UpIcon from './icons/UpIcon.vue';
import ChevronUpIcon from "@/components/icons/ChevronUpIcon.vue";
import ChevronDownIcon from "@/components/icons/ChevronDownIcon.vue";
const props = defineProps({ const props = defineProps({
room: String, room: String,
@ -92,11 +94,11 @@ const platnoStatus = ref(platnoState.UNKNOWN)
<div class="updown"> <div class="updown">
<button <button
@click="publishMQTTMsg(publishPrefix + 'goto', 'UP')"> @click="publishMQTTMsg(publishPrefix + 'goto', 'UP')">
<UpIcon/> <ChevronUpIcon />
</button> </button>
<button <button
@click="publishMQTTMsg(publishPrefix + 'goto', 'DOWN')"> @click="publishMQTTMsg(publishPrefix + 'goto', 'DOWN')">
<DownIcon/> <ChevronDownIcon/>
</button> </button>
</div> </div>
<div v-if="props.ctrlType == 'service'"> <div v-if="props.ctrlType == 'service'">
@ -108,14 +110,14 @@ const platnoStatus = ref(platnoState.UNKNOWN)
@touchstart="publishMQTTMsg(publishPrefix + 'move', 'UP')" @touchstart="publishMQTTMsg(publishPrefix + 'move', 'UP')"
@mouseup="publishMQTTMsg(publishPrefix + 'move', 'STOP')" @mouseup="publishMQTTMsg(publishPrefix + 'move', 'STOP')"
@touchend="publishMQTTMsg(publishPrefix + 'move', 'STOP')"> @touchend="publishMQTTMsg(publishPrefix + 'move', 'STOP')">
<UpIcon/> <ChevronUpIcon/>
</button> </button>
<button <button
@mousedown="publishMQTTMsg(publishPrefix + 'move', 'DOWN')" @mousedown="publishMQTTMsg(publishPrefix + 'move', 'DOWN')"
@touchstart="publishMQTTMsg(publishPrefix + 'move', 'DOWN')" @touchstart="publishMQTTMsg(publishPrefix + 'move', 'DOWN')"
@mouseup="publishMQTTMsg(publishPrefix + 'move', 'STOP')" @mouseup="publishMQTTMsg(publishPrefix + 'move', 'STOP')"
@touchend="publishMQTTMsg(publishPrefix + 'move', 'STOP')"> @touchend="publishMQTTMsg(publishPrefix + 'move', 'STOP')">
<DownIcon/> <ChevronDownIcon/>
</button> </button>
</div> </div>
</div> </div>

3
frontend/src/components/icons/ChevronDownIcon.vue Normal file
View file

@ -0,0 +1,3 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>
</template>

3
frontend/src/components/icons/ChevronUpIcon.vue Normal file
View file

@ -0,0 +1,3 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-up-icon lucide-chevron-up"><path d="m18 15-6-6-6 6"/></svg>
</template>

3
frontend/src/components/icons/FloppyIcon.vue Normal file
View file

@ -0,0 +1,3 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-save-icon lucide-save"><path d="M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"/><path d="M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7"/><path d="M7 3v4a1 1 0 0 0 1 1h7"/></svg>
</template>

3
frontend/src/components/icons/HomeIcon.vue Normal file
View file

@ -0,0 +1,3 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-house-icon lucide-house"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"/><path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>
</template>

3
frontend/src/components/icons/LightbulbIcon.vue Normal file
View file

@ -0,0 +1,3 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-lightbulb-icon lucide-lightbulb"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/></svg>
</template>

3
frontend/src/components/icons/ProjectorIcon.vue Normal file
View file

@ -0,0 +1,3 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-projector-icon lucide-projector"><path d="M5 7 3 5"/><path d="M9 6V3"/><path d="m13 7 2-2"/><circle cx="9" cy="13" r="3"/><path d="M11.83 12H20a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h2.17"/><path d="M16 16h2"/></svg>
</template>

11
frontend/src/components/pages/LightingPage.vue
View file

@ -6,6 +6,9 @@ import {$mqtt} from 'vue-paho-mqtt'
import DownIcon from '../icons/DownIcon.vue'; import DownIcon from '../icons/DownIcon.vue';
import UpIcon from '../icons/UpIcon.vue'; import UpIcon from '../icons/UpIcon.vue';
import LightControl from '../LightControl.vue'; import LightControl from '../LightControl.vue';
import ChevronUpIcon from "@/components/icons/ChevronUpIcon.vue";
import ChevronDownIcon from "@/components/icons/ChevronDownIcon.vue";
import FloppyIcon from "@/components/icons/FloppyIcon.vue";
const props = defineProps({ const props = defineProps({
room: String, room: String,
@ -146,7 +149,7 @@ const lights = [
v-if="showCustom"> v-if="showCustom">
CUSTOM 5 CUSTOM 5
</button> </button>
<button class="saveButton" @click="publishMQTTMsg(publishPrefix + 'lucke/preset/save', '5')">💾</button> <button class="saveButton" @click="publishMQTTMsg(publishPrefix + 'lucke/preset/save', '5')"><FloppyIcon /></button>
</div> </div>
</div> </div>
@ -163,7 +166,7 @@ const lights = [
v-if="showCustom"> v-if="showCustom">
CUSTOM 6 CUSTOM 6
</button> </button>
<button class="saveButton" @click="publishMQTTMsg(publishPrefix + 'lucke/preset/save', '6')">💾</button> <button class="saveButton" @click="publishMQTTMsg(publishPrefix + 'lucke/preset/save', '6')"><FloppyIcon /></button>
</div> </div>
</div> </div>
@ -182,7 +185,7 @@ const lights = [
@touchstart="publishMQTTMsg(publishPrefix + 'shades/move', 'MOVE_UP')" @touchstart="publishMQTTMsg(publishPrefix + 'shades/move', 'MOVE_UP')"
@mouseup="publishMQTTMsg(publishPrefix + 'shades/move', 'STOP')" @mouseup="publishMQTTMsg(publishPrefix + 'shades/move', 'STOP')"
@touchend="publishMQTTMsg(publishPrefix + 'shades/move', 'STOP')"> @touchend="publishMQTTMsg(publishPrefix + 'shades/move', 'STOP')">
<UpIcon/> <ChevronUpIcon/>
</button> </button>
<button <button
:class="{currentlyActive: (platnoStatus == 'MOVING_DOWN')}" :class="{currentlyActive: (platnoStatus == 'MOVING_DOWN')}"
@ -190,7 +193,7 @@ const lights = [
@mousedown="publishMQTTMsg(publishPrefix + 'shades/move', 'MOVE_DOWN')" @mousedown="publishMQTTMsg(publishPrefix + 'shades/move', 'MOVE_DOWN')"
@mouseup="publishMQTTMsg(publishPrefix + 'shades/move', 'STOP')" @mouseup="publishMQTTMsg(publishPrefix + 'shades/move', 'STOP')"
@touchend="publishMQTTMsg(publishPrefix + 'shades/move', 'STOP')"> @touchend="publishMQTTMsg(publishPrefix + 'shades/move', 'STOP')">
<DownIcon/> <ChevronDownIcon/>
</button> </button>
</div> </div>