More Z-Wave UI fixes [WIP]
This commit is contained in:
parent
b922f29bb8
commit
80aa9b968d
10 changed files with 103 additions and 88 deletions
2
platypush/backend/http/dist/index.html
vendored
2
platypush/backend/http/dist/index.html
vendored
|
|
@ -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-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-597b35e6.4a81cf33.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-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-597b35e6.122f119a.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.a59326af.css" rel="preload" as="style"><link href="/static/css/chunk-vendors.5dad8b00.css" rel="preload" as="style"><link href="/static/js/app.a6638873.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.a6638873.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-2ad4c3a6.1e014b2b.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-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-2ad4c3a6.3d409968.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.a59326af.css" rel="preload" as="style"><link href="/static/css/chunk-vendors.5dad8b00.css" rel="preload" as="style"><link href="/static/js/app.15e9cea6.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.15e9cea6.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
2
platypush/backend/http/dist/static/js/chunk-2ad4c3a6.3d409968.js
vendored
Normal file
2
platypush/backend/http/dist/static/js/chunk-2ad4c3a6.3d409968.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
platypush/backend/http/dist/static/js/chunk-2ad4c3a6.3d409968.js.map
vendored
Normal file
1
platypush/backend/http/dist/static/js/chunk-2ad4c3a6.3d409968.js.map
vendored
Normal file
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
|
|
@ -53,7 +53,7 @@
|
|||
</Modal>
|
||||
|
||||
<div class="view-options">
|
||||
<div class="view-selector col-s-9 col-m-10 col-l-11">
|
||||
<div class="view-selector col-s-8 col-m-9 col-l-10">
|
||||
<label>
|
||||
<select @change="selected.view = $event.target.value">
|
||||
<option v-for="(id, view) in views" :key="id"
|
||||
|
|
@ -63,7 +63,7 @@
|
|||
</label>
|
||||
</div>
|
||||
|
||||
<div class="buttons">
|
||||
<div class="buttons col-s-4 col-m-3 col-l-2">
|
||||
<Dropdown title="Network commands" icon-class="fa fa-cog">
|
||||
<DropdownItem text="Network Info" :disabled="commandRunning" icon-class="fa fa-info"
|
||||
@click="networkInfoModalOpen" />
|
||||
|
|
@ -93,102 +93,104 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="view nodes" v-if="selected.view === 'nodes'">
|
||||
<Loading v-if="loading.nodes" />
|
||||
<div class="no-items" v-else-if="!Object.keys(nodes || {}).length">
|
||||
<div class="empty">No nodes available on the network</div>
|
||||
<div class="view-container">
|
||||
<div class="view nodes" v-if="selected.view === 'nodes'">
|
||||
<Loading v-if="loading.nodes" />
|
||||
<div class="no-items" v-else-if="!Object.keys(nodes || {}).length">
|
||||
<div class="empty">No nodes available on the network</div>
|
||||
</div>
|
||||
|
||||
<Node v-for="(node, nodeId) in nodes" :key="nodeId" :node="node" :selected="selected.nodeId === nodeId"
|
||||
@select="onNodeClick(nodeId)" />
|
||||
</div>
|
||||
|
||||
<Node v-for="(node, nodeId) in nodes" :key="nodeId" :node="node" :selected="selected.nodeId === nodeId"
|
||||
@select="onNodeClick(nodeId)" />
|
||||
</div>
|
||||
<div class="view groups" v-else-if="selected.view === 'groups'">
|
||||
<Loading v-if="loading.groups" />
|
||||
<div class="no-items" v-else-if="!Object.keys(groups || {}).length">
|
||||
<div class="empty">No groups available on the network</div>
|
||||
</div>
|
||||
|
||||
<div class="view groups" v-else-if="selected.view === 'groups'">
|
||||
<Loading v-if="loading.groups" />
|
||||
<div class="no-items" v-else-if="!Object.keys(groups || {}).length">
|
||||
<div class="empty">No groups available on the network</div>
|
||||
</div>
|
||||
|
||||
<Group v-for="(group, groupId) in groups" :key="groupId" :group="group" :selected="selected.groupId === groupId"
|
||||
:nodes="groupId in groups ? groups[groupId].associations.map((node) => nodes[node]).
|
||||
<Group v-for="(group, groupId) in groups" :key="groupId" :group="group" :selected="selected.groupId === groupId"
|
||||
:nodes="groupId in groups ? groups[groupId].associations.map((node) => nodes[node]).
|
||||
reduce((nodes, node) => {nodes[node.node_id] = node; return nodes}, {}) : {}"
|
||||
@select="selected.groupId = groupId === selected.groupId ? undefined : groupId"
|
||||
@open-add-nodes-to-group="$refs.addNodesToGroupModal.show()" />
|
||||
</div>
|
||||
|
||||
<div class="view scenes" v-else-if="selected.view === 'scenes'">
|
||||
<Loading v-if="loading.scenes" />
|
||||
<div class="no-items" v-else-if="!Object.keys(scenes || {}).length">
|
||||
<div class="empty">No scenes configured on the network</div>
|
||||
@select="selected.groupId = groupId === selected.groupId ? undefined : groupId"
|
||||
@open-add-nodes-to-group="$refs.addNodesToGroupModal.show()" />
|
||||
</div>
|
||||
|
||||
<div class="item scene" :class="{selected: selected.sceneId === sceneId}"
|
||||
v-for="(scene, sceneId) in scenes" :key="sceneId">
|
||||
<div class="row name header vertical-center" :class="{selected: selected.sceneId === sceneId}" v-text="scene.label"
|
||||
@click="selected.sceneId = sceneId === selected.sceneId ? undefined : sceneId" />
|
||||
<div class="view scenes" v-else-if="selected.view === 'scenes'">
|
||||
<Loading v-if="loading.scenes" />
|
||||
<div class="no-items" v-else-if="!Object.keys(scenes || {}).length">
|
||||
<div class="empty">No scenes configured on the network</div>
|
||||
</div>
|
||||
|
||||
<div class="params" v-if="selected.sceneId === sceneId">
|
||||
<div class="row">
|
||||
<div class="param-name">Activate</div>
|
||||
<div class="param-value">
|
||||
<ToggleSwitch :value="false" @input="activateScene(sceneId)" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="item scene" :class="{selected: selected.sceneId === sceneId}"
|
||||
v-for="(scene, sceneId) in scenes" :key="sceneId">
|
||||
<div class="row name header vertical-center" :class="{selected: selected.sceneId === sceneId}" v-text="scene.label"
|
||||
@click="selected.sceneId = sceneId === selected.sceneId ? undefined : sceneId" />
|
||||
|
||||
<div class="section actions">
|
||||
<div class="header">
|
||||
<div class="title">Actions</div>
|
||||
<div class="params" v-if="selected.sceneId === sceneId">
|
||||
<div class="row">
|
||||
<div class="param-name">Activate</div>
|
||||
<div class="param-value">
|
||||
<ToggleSwitch :value="false" @input="activateScene(sceneId)" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="body">
|
||||
<div class="row" @click="removeScene(sceneId)">
|
||||
<div class="param-name">Remove Scene</div>
|
||||
<div class="param-value">
|
||||
<i class="fa fa-trash"></i>
|
||||
</div>
|
||||
<div class="section actions">
|
||||
<div class="header">
|
||||
<div class="title">Actions</div>
|
||||
</div>
|
||||
|
||||
<div class="row" @click="renameScene(sceneId)">
|
||||
<div class="param-name">Rename Scene</div>
|
||||
<div class="param-value">
|
||||
<i class="fa fa-edit"></i>
|
||||
<div class="body">
|
||||
<div class="row" @click="removeScene(sceneId)">
|
||||
<div class="param-name">Remove Scene</div>
|
||||
<div class="param-value">
|
||||
<i class="fa fa-trash"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" @click="renameScene(sceneId)">
|
||||
<div class="param-name">Rename Scene</div>
|
||||
<div class="param-value">
|
||||
<i class="fa fa-edit"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section values" v-if="scene.values?.length">
|
||||
<div class="value-container" v-for="(value, valueId) in valuesMap" :key="valueId">
|
||||
<div class="value-display"
|
||||
v-if="value.valueId && value.valueId in scenes.values[sceneId]" :scenes="scenes">
|
||||
<Value :value="value" :node="node" :sceneId="sceneId" @add-to-scene="addValueToScene"
|
||||
@remove-from-scene="removeValueFromScene" @refresh="refreshNodes" />
|
||||
<div class="section values" v-if="scene.values?.length">
|
||||
<div class="value-container" v-for="(value, valueId) in valuesMap" :key="valueId">
|
||||
<div class="value-display"
|
||||
v-if="value.valueId && value.valueId in scenes.values[sceneId]" :scenes="scenes">
|
||||
<Value :value="value" :node="node" :sceneId="sceneId" @add-to-scene="addValueToScene"
|
||||
@remove-from-scene="removeValueFromScene" @refresh="refreshNodes" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="view values" v-else>
|
||||
<Loading v-if="loading.nodes" />
|
||||
<div class="no-items" v-else-if="!Object.keys(nodes || {}).length">
|
||||
<div class="empty">No nodes found on the network</div>
|
||||
</div>
|
||||
<div class="view values" v-else>
|
||||
<Loading v-if="loading.nodes" />
|
||||
<div class="no-items" v-else-if="!Object.keys(nodes || {}).length">
|
||||
<div class="empty">No nodes found on the network</div>
|
||||
</div>
|
||||
|
||||
<div class="node-container" v-for="(node, nodeId) in nodes" :key="nodeId">
|
||||
<div class="item node"
|
||||
:class="{selected: selected.nodeId === nodeId}"
|
||||
v-if="selected.view === 'values' || Object.values(node.values).filter((value) => value.id_on_network in values[selected.view]).length > 0">
|
||||
<div class="row name header vertical-center" :class="{selected: selected.nodeId === nodeId}" v-text="node.name"
|
||||
@click="onNodeClick(nodeId)"></div>
|
||||
<div class="node-container" v-for="(node, nodeId) in nodes" :key="nodeId">
|
||||
<div class="item node"
|
||||
:class="{selected: selected.nodeId === nodeId}"
|
||||
v-if="selected.view === 'values' || Object.values(node.values).filter((value) => value.id_on_network in values[selected.view]).length > 0">
|
||||
<div class="row name header vertical-center" :class="{selected: selected.nodeId === nodeId}" v-text="node.name"
|
||||
@click="onNodeClick(nodeId)"></div>
|
||||
|
||||
<div class="params" v-if="selected.nodeId === nodeId">
|
||||
<div class="value-container" v-for="(value, valueId) in node.values" :key="valueId">
|
||||
<div class="value-display"
|
||||
v-if="valueId && (selected.view === 'values' || value.valueId in values[selected.view])">
|
||||
<Value :value="value" :node="node" :scenes="scenes" @add-to-scene="addValueToScene"
|
||||
@remove-from-scene="removeValueFromScene" @refresh="refreshNodes" />
|
||||
<div class="params" v-if="selected.nodeId === nodeId">
|
||||
<div class="value-container" v-for="(value, valueId) in node.values" :key="valueId">
|
||||
<div class="value-display"
|
||||
v-if="valueId && (selected.view === 'values' || value.valueId in values[selected.view])">
|
||||
<Value :value="value" :node="node" :scenes="scenes" @add-to-scene="addValueToScene"
|
||||
@remove-from-scene="removeValueFromScene" @refresh="refreshNodes" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -727,5 +729,10 @@ export default {
|
|||
.network-info {
|
||||
margin: -1em;
|
||||
}
|
||||
|
||||
button {
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -274,12 +274,17 @@
|
|||
text-align: right;
|
||||
}
|
||||
|
||||
.view-container {
|
||||
width: 100%;
|
||||
height: calc(100% - #{$header-height});
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.view {
|
||||
min-width: 400pt;
|
||||
max-width: 750pt;
|
||||
background: $view-bg;
|
||||
border: $view-border;
|
||||
border-radius: 1.5em;
|
||||
box-shadow: $view-box-shadow;
|
||||
}
|
||||
|
||||
|
|
@ -293,6 +298,9 @@
|
|||
|
||||
@media screen and (min-width: $desktop) {
|
||||
.view {
|
||||
min-width: 400pt;
|
||||
max-width: 750pt;
|
||||
border-radius: 1.5em;
|
||||
margin-top: 1em;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue