More Z-Wave UI fixes [WIP]

This commit is contained in:
Fabio Manganiello 2021-02-14 21:43:11 +01:00
parent adbde5a681
commit c78420749b
10 changed files with 39 additions and 27 deletions

View file

@ -1 +1 @@
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>platypush</title><link href="/static/css/chunk-0809b062.5828e8bf.css" rel="prefetch"><link href="/static/css/chunk-134ec1dc.849ccfd5.css" rel="prefetch"><link href="/static/css/chunk-13b07ca5.029dd736.css" rel="prefetch"><link href="/static/css/chunk-1653b664.5b949e24.css" rel="prefetch"><link href="/static/css/chunk-23726328.7e460329.css" rel="prefetch"><link href="/static/css/chunk-283aacba.f186cc51.css" rel="prefetch"><link href="/static/css/chunk-2ca39dde.efa1eae8.css" rel="prefetch"><link href="/static/css/chunk-2f304dee.a8a2d99a.css" rel="prefetch"><link href="/static/css/chunk-3b435dde.f186cc51.css" rel="prefetch"><link href="/static/css/chunk-487896e7.b7730bd4.css" rel="prefetch"><link href="/static/css/chunk-49211740.43a25f0f.css" rel="prefetch"><link href="/static/css/chunk-4dae396b.92b3713e.css" rel="prefetch"><link href="/static/css/chunk-5145872a.197de139.css" rel="prefetch"><link href="/static/css/chunk-53e279b3.f186cc51.css" rel="prefetch"><link href="/static/css/chunk-595ffc05.678c9c97.css" rel="prefetch"><link href="/static/css/chunk-5a1e13e4.f186cc51.css" rel="prefetch"><link href="/static/css/chunk-5d5c4530.75269c9b.css" rel="prefetch"><link href="/static/css/chunk-64076603.e451beea.css" rel="prefetch"><link href="/static/css/chunk-675c7703.75b51be7.css" rel="prefetch"><link href="/static/css/chunk-7fae0422.c233115f.css" rel="prefetch"><link href="/static/css/chunk-d22da0c0.7c71cffb.css" rel="prefetch"><link href="/static/css/chunk-d28a86c4.cdd32c08.css" rel="prefetch"><link href="/static/css/chunk-da9476ec.f1965e2d.css" rel="prefetch"><link href="/static/css/chunk-ee62c128.44bbe779.css" rel="prefetch"><link href="/static/js/chunk-0809b062.456fccc0.js" rel="prefetch"><link href="/static/js/chunk-134ec1dc.87638287.js" rel="prefetch"><link href="/static/js/chunk-13b07ca5.11833bcd.js" rel="prefetch"><link href="/static/js/chunk-1653b664.4bba37ff.js" rel="prefetch"><link href="/static/js/chunk-23726328.7a638dfb.js" rel="prefetch"><link href="/static/js/chunk-283aacba.52472391.js" rel="prefetch"><link href="/static/js/chunk-2ca39dde.bfb67629.js" rel="prefetch"><link href="/static/js/chunk-2d0cc2be.71e3fcd8.js" rel="prefetch"><link href="/static/js/chunk-2d2091df.90a98553.js" rel="prefetch"><link href="/static/js/chunk-2d21da1a.707bd994.js" rel="prefetch"><link href="/static/js/chunk-2d237d41.b4b87abb.js" rel="prefetch"><link href="/static/js/chunk-2f304dee.649e4dc7.js" rel="prefetch"><link href="/static/js/chunk-3b435dde.bd4904a1.js" rel="prefetch"><link href="/static/js/chunk-487896e7.69cdcafb.js" rel="prefetch"><link href="/static/js/chunk-49211740.e4dea096.js" rel="prefetch"><link href="/static/js/chunk-4dae396b.0ee6bb40.js" rel="prefetch"><link href="/static/js/chunk-5145872a.f0bd0577.js" rel="prefetch"><link href="/static/js/chunk-53e279b3.cf489a46.js" rel="prefetch"><link href="/static/js/chunk-595ffc05.8affd7fe.js" rel="prefetch"><link href="/static/js/chunk-5a1e13e4.287f68a0.js" rel="prefetch"><link href="/static/js/chunk-5d5c4530.f0675a96.js" rel="prefetch"><link href="/static/js/chunk-64076603.2c344ed9.js" rel="prefetch"><link href="/static/js/chunk-675c7703.7c7378cd.js" rel="prefetch"><link href="/static/js/chunk-7fae0422.0d9be069.js" rel="prefetch"><link href="/static/js/chunk-d22da0c0.da01e99e.js" rel="prefetch"><link href="/static/js/chunk-d28a86c4.d0c1f74e.js" rel="prefetch"><link href="/static/js/chunk-da9476ec.f8c15985.js" rel="prefetch"><link href="/static/js/chunk-ee62c128.c11fb53e.js" rel="prefetch"><link href="/static/css/app.011e7c1b.css" rel="preload" as="style"><link href="/static/css/chunk-vendors.5dad8b00.css" rel="preload" as="style"><link href="/static/js/app.bec3073c.js" rel="preload" as="script"><link href="/static/js/chunk-vendors.948dc2e5.js" rel="preload" as="script"><link href="/static/css/chunk-vendors.5dad8b00.css" rel="stylesheet"><link href="/static/css/app.011e7c1b.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but platypush doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/static/js/chunk-vendors.948dc2e5.js"></script><script src="/static/js/app.bec3073c.js"></script></body></html> <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>platypush</title><link href="/static/css/chunk-134ec1dc.849ccfd5.css" rel="prefetch"><link href="/static/css/chunk-13b07ca5.029dd736.css" rel="prefetch"><link href="/static/css/chunk-1653b664.5b949e24.css" rel="prefetch"><link href="/static/css/chunk-23726328.7e460329.css" rel="prefetch"><link href="/static/css/chunk-283aacba.f186cc51.css" rel="prefetch"><link href="/static/css/chunk-2ca39dde.efa1eae8.css" rel="prefetch"><link href="/static/css/chunk-2f304dee.a8a2d99a.css" rel="prefetch"><link href="/static/css/chunk-3b435dde.f186cc51.css" rel="prefetch"><link href="/static/css/chunk-487896e7.b7730bd4.css" rel="prefetch"><link href="/static/css/chunk-49211740.43a25f0f.css" rel="prefetch"><link href="/static/css/chunk-4dae396b.92b3713e.css" rel="prefetch"><link href="/static/css/chunk-5145872a.197de139.css" rel="prefetch"><link href="/static/css/chunk-53e279b3.f186cc51.css" rel="prefetch"><link href="/static/css/chunk-595ffc05.678c9c97.css" rel="prefetch"><link href="/static/css/chunk-5a1e13e4.f186cc51.css" rel="prefetch"><link href="/static/css/chunk-5d5c4530.75269c9b.css" rel="prefetch"><link href="/static/css/chunk-64076603.e451beea.css" rel="prefetch"><link href="/static/css/chunk-643d80e6.4d467174.css" rel="prefetch"><link href="/static/css/chunk-675c7703.75b51be7.css" rel="prefetch"><link href="/static/css/chunk-7fae0422.c233115f.css" rel="prefetch"><link href="/static/css/chunk-d22da0c0.7c71cffb.css" rel="prefetch"><link href="/static/css/chunk-d28a86c4.cdd32c08.css" rel="prefetch"><link href="/static/css/chunk-da9476ec.f1965e2d.css" rel="prefetch"><link href="/static/css/chunk-ee62c128.44bbe779.css" rel="prefetch"><link href="/static/js/chunk-134ec1dc.87638287.js" rel="prefetch"><link href="/static/js/chunk-13b07ca5.11833bcd.js" rel="prefetch"><link href="/static/js/chunk-1653b664.4bba37ff.js" rel="prefetch"><link href="/static/js/chunk-23726328.7a638dfb.js" rel="prefetch"><link href="/static/js/chunk-283aacba.52472391.js" rel="prefetch"><link href="/static/js/chunk-2ca39dde.bfb67629.js" rel="prefetch"><link href="/static/js/chunk-2d0cc2be.71e3fcd8.js" rel="prefetch"><link href="/static/js/chunk-2d2091df.90a98553.js" rel="prefetch"><link href="/static/js/chunk-2d21da1a.707bd994.js" rel="prefetch"><link href="/static/js/chunk-2d237d41.b4b87abb.js" rel="prefetch"><link href="/static/js/chunk-2f304dee.649e4dc7.js" rel="prefetch"><link href="/static/js/chunk-3b435dde.bd4904a1.js" rel="prefetch"><link href="/static/js/chunk-487896e7.69cdcafb.js" rel="prefetch"><link href="/static/js/chunk-49211740.e4dea096.js" rel="prefetch"><link href="/static/js/chunk-4dae396b.0ee6bb40.js" rel="prefetch"><link href="/static/js/chunk-5145872a.f0bd0577.js" rel="prefetch"><link href="/static/js/chunk-53e279b3.cf489a46.js" rel="prefetch"><link href="/static/js/chunk-595ffc05.8affd7fe.js" rel="prefetch"><link href="/static/js/chunk-5a1e13e4.287f68a0.js" rel="prefetch"><link href="/static/js/chunk-5d5c4530.f0675a96.js" rel="prefetch"><link href="/static/js/chunk-64076603.2c344ed9.js" rel="prefetch"><link href="/static/js/chunk-643d80e6.66a84c0f.js" rel="prefetch"><link href="/static/js/chunk-675c7703.7c7378cd.js" rel="prefetch"><link href="/static/js/chunk-7fae0422.0d9be069.js" rel="prefetch"><link href="/static/js/chunk-d22da0c0.da01e99e.js" rel="prefetch"><link href="/static/js/chunk-d28a86c4.d0c1f74e.js" rel="prefetch"><link href="/static/js/chunk-da9476ec.f8c15985.js" rel="prefetch"><link href="/static/js/chunk-ee62c128.c11fb53e.js" rel="prefetch"><link href="/static/css/app.011e7c1b.css" rel="preload" as="style"><link href="/static/css/chunk-vendors.5dad8b00.css" rel="preload" as="style"><link href="/static/js/app.05a36220.js" rel="preload" as="script"><link href="/static/js/chunk-vendors.948dc2e5.js" rel="preload" as="script"><link href="/static/css/chunk-vendors.5dad8b00.css" rel="stylesheet"><link href="/static/css/app.011e7c1b.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but platypush doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/static/js/chunk-vendors.948dc2e5.js"></script><script src="/static/js/app.05a36220.js"></script></body></html>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -65,15 +65,12 @@
<div class="buttons col-s-4 col-m-3 col-l-2"> <div class="buttons col-s-4 col-m-3 col-l-2">
<Dropdown title="Network commands" icon-class="fa fa-cog"> <Dropdown title="Network commands" icon-class="fa fa-cog">
<DropdownItem text="Network Info" :disabled="commandRunning" icon-class="fa fa-info" <DropdownItem text="Network Info" :disabled="commandRunning" @click="networkInfoModalOpen" />
@click="networkInfoModalOpen" />
<DropdownItem text="Start Network" :disabled="commandRunning" @click="startNetwork" /> <DropdownItem text="Start Network" :disabled="commandRunning" @click="startNetwork" />
<DropdownItem text="Stop Network" :disabled="commandRunning" @click="stopNetwork" /> <DropdownItem text="Stop Network" :disabled="commandRunning" @click="stopNetwork" />
<DropdownItem text="Add Scene" :disabled="commandRunning" icon-class="fa fa-plus" @click="addScene" <DropdownItem text="Add Scene" :disabled="commandRunning" @click="addScene" v-if="selected.view === 'scenes'" />
v-if="selected.view === 'scenes'" /> <DropdownItem text="Add Node" :disabled="commandRunning" @click="addNode" v-if="selected.view === 'nodes'" />
<DropdownItem text="Add Node" :disabled="commandRunning" icon-class="fa fa-plus" @click="addNode" <DropdownItem text="Remove Node" :disabled="commandRunning" @click="removeNode"
v-if="selected.view === 'nodes'" />
<DropdownItem text="Remove Node" :disabled="commandRunning" icon-class="fa fa-minus" @click="removeNode"
v-if="selected.view === 'nodes'" /> v-if="selected.view === 'nodes'" />
<DropdownItem text="Switch All On" :disabled="commandRunning" @click="switchAll(true)" /> <DropdownItem text="Switch All On" :disabled="commandRunning" @click="switchAll(true)" />
<DropdownItem text="Switch All Off" :disabled="commandRunning" @click="switchAll(false)" /> <DropdownItem text="Switch All Off" :disabled="commandRunning" @click="switchAll(false)" />
@ -685,7 +682,6 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 0; padding: 0;
background: $container-bg;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -718,6 +714,7 @@ export default {
.buttons { .buttons {
display: inline-flex; display: inline-flex;
justify-content: right; justify-content: right;
margin: 0 !important;
button { button {
border: none; border: none;

View file

@ -23,8 +23,7 @@
<div :class="['col-' + (value.units?.length ? '11' : '12')]"> <div :class="['col-' + (value.units?.length ? '11' : '12')]">
<div class="list" v-if="value.type === 'List'"> <div class="list" v-if="value.type === 'List'">
<label> <label>
<select @change="onValueChange" <select @change="onValueChange">
:data-id-on-network="value.id_on_network">
<option v-for="(data, index) in value.data_items" <option v-for="(data, index) in value.data_items"
v-text="data" v-text="data"
:key="index" :key="index"
@ -43,21 +42,19 @@
</div> </div>
<div class="row"> <div class="row">
<label> <label>
<Slider :range="[value.min, value.max]" :value="value.data" <Slider :range="[value.min, value.max]" :value="value.data" @change="onValueChange" />
:data-id-on-network="value.id_on_network" @change="onValueChange" />
</label> </label>
</div> </div>
</div> </div>
<div class="col-2"> <div class="col-2">
<label> <label>
<input type="text" :data-id-on-network="value.id_on_network" :value="value.data" <input type="text" :value="value.data" @change="onValueChange">
@change="onValueChange">
</label> </label>
</div> </div>
</div> </div>
<div class="boolean" v-else-if="['Bool', 'Button'].indexOf(value.type) >= 0"> <div class="boolean" v-else-if="['Bool', 'Button'].indexOf(value.type) >= 0">
<ToggleSwitch :value="value.data" :data-id-on-network="value.id_on_network" @input="onValueChange" /> <ToggleSwitch :value="value.data" @input="onValueChange" />
</div> </div>
<div class="value-data" v-text="value.data" v-else /> <div class="value-data" v-text="value.data" v-else />
@ -165,8 +162,8 @@ export default {
}, },
methods: { methods: {
async editName(event) { async editName() {
const value = this.node.values[event.target.parentElement.dataset.idOnNetwork] const value = this.node.values[this.value.id_on_network]
let name = prompt('New name', value.label) let name = prompt('New name', value.label)
if (name?.length) if (name?.length)
name = name.trim() name = name.trim()
@ -194,7 +191,7 @@ export default {
async onValueChange(event) { async onValueChange(event) {
const target = event.target ? event.target : event.event.target.parentElement const target = event.target ? event.target : event.event.target.parentElement
const value = this.node.values[target.dataset.idOnNetwork] const value = this.node.values[this.value.id_on_network]
const data = value.type === 'List' ? value.data_items[event.target.value] : (target.value || event.value) const data = value.type === 'List' ? value.data_items[event.target.value] : (target.value || event.value)
this.commandRunning = true this.commandRunning = true
@ -221,4 +218,22 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import "common"; @import "common";
.node-container {
&:first-child {
.item.node {
&:hover {
border-radius: 1.5em 1.5em 0 0;
}
}
}
&:last-child {
.item.node {
&:hover {
border-radius: 0 0 1.5em 1.5em;
}
}
}
}
</style> </style>