Fixed glitches in new Z-Wave panel [WIP]

This commit is contained in:
Fabio Manganiello 2021-02-14 16:28:34 +01:00
parent a1e2bf9b3a
commit 297c18e176
12 changed files with 80 additions and 29 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-134ec1dc.849ccfd5.css" rel="prefetch"><link href="/static/css/chunk-13b07ca5.029dd736.css" rel="prefetch"><link href="/static/css/chunk-15e147cf.7e460329.css" rel="prefetch"><link href="/static/css/chunk-2606c898.75269c9b.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-2e526448.44bbe779.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-49211740.43a25f0f.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-5a1e13e4.f186cc51.css" rel="prefetch"><link href="/static/css/chunk-62c72861.1a52303d.css" rel="prefetch"><link href="/static/css/chunk-64076603.e451beea.css" rel="prefetch"><link href="/static/css/chunk-6ca797c1.5b949e24.css" rel="prefetch"><link href="/static/css/chunk-711696bb.b7730bd4.css" rel="prefetch"><link href="/static/css/chunk-7c7c5604.678c9c97.css" rel="prefetch"><link href="/static/css/chunk-7fae0422.c233115f.css" rel="prefetch"><link href="/static/css/chunk-81641df8.92b3713e.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-ed83bcf4.75b51be7.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-15e147cf.e4b94eac.js" rel="prefetch"><link href="/static/js/chunk-2606c898.c61d9a34.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-2e526448.03b6c08c.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-49211740.e4dea096.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-5a1e13e4.287f68a0.js" rel="prefetch"><link href="/static/js/chunk-62c72861.7013ee39.js" rel="prefetch"><link href="/static/js/chunk-64076603.2c344ed9.js" rel="prefetch"><link href="/static/js/chunk-6ca797c1.b1d321c6.js" rel="prefetch"><link href="/static/js/chunk-711696bb.a8f62738.js" rel="prefetch"><link href="/static/js/chunk-7c7c5604.430dfc96.js" rel="prefetch"><link href="/static/js/chunk-7fae0422.0d9be069.js" rel="prefetch"><link href="/static/js/chunk-81641df8.bad85c33.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-ed83bcf4.429119bf.js" rel="prefetch"><link href="/static/css/app.a59326af.css" rel="preload" as="style"><link href="/static/css/chunk-vendors.5dad8b00.css" rel="preload" as="style"><link href="/static/js/app.4738c3c8.js" rel="preload" as="script"><link href="/static/js/chunk-vendors.32426ed3.js" rel="preload" as="script"><link href="/static/css/chunk-vendors.5dad8b00.css" rel="stylesheet"><link href="/static/css/app.a59326af.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.32426ed3.js"></script><script src="/static/js/app.4738c3c8.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-15e147cf.7e460329.css" rel="prefetch"><link href="/static/css/chunk-2606c898.75269c9b.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-2e526448.44bbe779.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-49211740.43a25f0f.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-5a1e13e4.f186cc51.css" rel="prefetch"><link href="/static/css/chunk-64076603.e451beea.css" rel="prefetch"><link href="/static/css/chunk-6ca797c1.5b949e24.css" rel="prefetch"><link href="/static/css/chunk-711696bb.b7730bd4.css" rel="prefetch"><link href="/static/css/chunk-7c7c5604.678c9c97.css" rel="prefetch"><link href="/static/css/chunk-7fae0422.c233115f.css" rel="prefetch"><link href="/static/css/chunk-81641df8.92b3713e.css" rel="prefetch"><link href="/static/css/chunk-845a3022.9214de81.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-ed83bcf4.75b51be7.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-15e147cf.e4b94eac.js" rel="prefetch"><link href="/static/js/chunk-2606c898.c61d9a34.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-2e526448.03b6c08c.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-49211740.e4dea096.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-5a1e13e4.287f68a0.js" rel="prefetch"><link href="/static/js/chunk-64076603.2c344ed9.js" rel="prefetch"><link href="/static/js/chunk-6ca797c1.b1d321c6.js" rel="prefetch"><link href="/static/js/chunk-711696bb.a8f62738.js" rel="prefetch"><link href="/static/js/chunk-7c7c5604.430dfc96.js" rel="prefetch"><link href="/static/js/chunk-7fae0422.0d9be069.js" rel="prefetch"><link href="/static/js/chunk-81641df8.bad85c33.js" rel="prefetch"><link href="/static/js/chunk-845a3022.827b24b1.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-ed83bcf4.429119bf.js" rel="prefetch"><link href="/static/css/app.a59326af.css" rel="preload" as="style"><link href="/static/css/chunk-vendors.5dad8b00.css" rel="preload" as="style"><link href="/static/js/app.a92b1e47.js" rel="preload" as="script"><link href="/static/js/chunk-vendors.32426ed3.js" rel="preload" as="script"><link href="/static/css/chunk-vendors.5dad8b00.css" rel="stylesheet"><link href="/static/css/app.a59326af.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.32426ed3.js"></script><script src="/static/js/app.a92b1e47.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

@ -41,9 +41,9 @@
<div class="title">Select nodes to add</div> <div class="title">Select nodes to add</div>
</div> </div>
<div class="body"> <div class="body" v-if="selected.groupId != null">
<div class="row clickable" @click="addToGroup(node.node_id, selected.groupId)" :key="node.node_id" <div class="row clickable" @click="addToGroup(node.node_id, selected.groupId)" :key="node.node_id"
v-for="node in Object.values(nodes).filter((n) => groups[selected.groupId].associations.indexOf(n.node_id) < 0)"> v-for="node in Object.values(nodes || {}).filter((n) => groups[selected.groupId].associations.indexOf(n.node_id) < 0)">
<div class="param-name" v-text="node.name"></div> <div class="param-name" v-text="node.name"></div>
</div> </div>
</div> </div>
@ -172,10 +172,12 @@
</div> </div>
<div class="section values" v-if="scene.values?.length"> <div class="section values" v-if="scene.values?.length">
<div class="value-container" <div class="value-container" v-for="(value, valueId) in valuesMap" :key="valueId">
v-if="value.id_on_network && value.id_on_network in scenes.values[sceneId]" :scenes="scenes"> <div class="value-display"
<Value v-for="(value, valueId) in valuesMap" :key="valueId" :value="value" :node="node" :sceneId="sceneId" v-if="value.valueId && value.valueId in scenes.values[sceneId]" :scenes="scenes">
@add-to-scene="addValueToScene" @remove-from-scene="removeValueFromScene" @refresh="refreshNodes" /> <Value :value="value" :node="node" :sceneId="sceneId" @add-to-scene="addValueToScene"
@remove-from-scene="removeValueFromScene" @refresh="refreshNodes" />
</div>
</div> </div>
</div> </div>
</div> </div>
@ -188,20 +190,20 @@
<div class="empty">No nodes found on the network</div> <div class="empty">No nodes found on the network</div>
</div> </div>
<div class="node-container" <div class="node-container" v-for="(node, nodeId) in nodes" :key="nodeId">
v-if="selected.view === 'values' || Object.values(node.values).filter((value) => value.id_on_network in values[selected.view]).length > 0">
<div class="item node" <div class="item node"
:class="{selected: selected.nodeId === nodeId}" :class="{selected: selected.nodeId === nodeId}"
v-for="(node, nodeId) in nodes" v-if="selected.view === 'values' || Object.values(node.values).filter((value) => value.id_on_network in values[selected.view]).length > 0">
:key="nodeId">
<div class="row name vertical-center" :class="{selected: selected.nodeId === nodeId}" v-text="node.name" <div class="row name vertical-center" :class="{selected: selected.nodeId === nodeId}" v-text="node.name"
@click="onNodeClick(nodeId)"></div> @click="onNodeClick(nodeId)"></div>
<div class="params" v-if="selected.nodeId === nodeId"> <div class="params" v-if="selected.nodeId === nodeId">
<div class="value-container" <div class="value-container" v-for="(value, valueId) in node.values" :key="valueId">
v-if="value.id_on_network && (selected.view === 'values' || value.id_on_network in values[selected.view])"> <div class="value-display"
<Value v-for="(value, valueId) in node.values" :key="valueId" :value="value" :node="node" :scenes="scenes" v-if="valueId && (selected.view === 'values' || value.valueId in values[selected.view])">
@add-to-scene="addValueToScene" @remove-from-scene="removeValueFromScene" @refresh="refreshNodes" /> <Value :value="value" :node="node" :scenes="scenes" @add-to-scene="addValueToScene"
@remove-from-scene="removeValueFromScene" @refresh="refreshNodes" />
</div>
</div> </div>
</div> </div>
</div> </div>
@ -692,6 +694,7 @@ export default {
@import "common"; @import "common";
.zwave-container { .zwave-container {
width: 100%;
height: 100%; height: 100%;
padding: 0 .5em; padding: 0 .5em;
background: $container-bg; background: $container-bg;
@ -703,14 +706,24 @@ export default {
.view-options { .view-options {
display: flex; display: flex;
width: 100%; width: 100%;
height: $header-height;
justify-content: space-between; justify-content: space-between;
padding: 1em 0; align-items: center;
padding: 0;
background: $header-bg;
border-bottom: $default-border-2;
box-shadow: $border-shadow-bottom;
.view-selector { .view-selector {
display: inline-flex; display: inline-flex;
padding-left: .5em;
label {
width: 100%;
}
} }
.buttons { .view-selector {
display: inline-flex; display: inline-flex;
} }

View file

@ -7,7 +7,7 @@
<div class="row"> <div class="row">
<div class="param-name">Name</div> <div class="param-name">Name</div>
<div class="param-value"> <div class="param-value">
<div :class="{hidden: !editMode.name}"> <div class="edit-cell" :class="{hidden: !editMode.name}">
<form ref="nameForm" @submit.prevent="editName"> <form ref="nameForm" @submit.prevent="editName">
<label> <label>
<input type="text" name="name" :value="node.name" :disabled="commandRunning"> <input type="text" name="name" :value="node.name" :disabled="commandRunning">

View file

@ -26,6 +26,10 @@
background: $params-bg; background: $params-bg;
padding-bottom: 1em; padding-bottom: 1em;
.title {
font-size: 1.2em;
}
.section { .section {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -132,6 +136,17 @@
text-align: right; text-align: right;
} }
} }
.edit-cell {
width: 100%;
display: inline-flex;
justify-content: right;
align-items: center;
.buttons {
margin: 0;
}
}
} }
} }
@ -222,4 +237,25 @@
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
button {
background: none;
border: none;
padding: 0 .75em;
&:hover {
color: $default-hover-fg;
}
}
.buttons {
display: inline-flex;
margin: 0;
.dropdown {
.item {
padding: .5em 2em .5em .5em;
}
}
}
} }

View file

@ -5,8 +5,10 @@ $view-box-shadow: 1px 2px 2px #ccc;
$item-border: 1px solid #dddddd; $item-border: 1px solid #dddddd;
$no-items-color: #555555; $no-items-color: #555555;
$params-bg: white; $params-bg: white;
$param-even-row-bg: #ededed; $param-even-row-bg: #f0f0f0;
$param-odd-row-bg: white; $param-odd-row-bg: white;
$param-section-header-border: 1px solid #e8e8e8; $param-section-header-border: 1px solid #e8e8e8;
$selected-item-box-shadow: 0 2px 4px 0 #bbb; $selected-item-box-shadow: 0 2px 4px 0 #bbb;
$error-color: #aa0000; $error-color: #aa0000;
$header-bg: #f9fafa;
$header-height: 3.5em;