platypush/platypush/backend/http/templates/plugins/zwave/index.html

{% include 'plugins/zwave/node.html' %}
{% include 'plugins/zwave/group.html' %}
{% include 'plugins/zwave/value.html' %}

<script type="text/x-template" id="tmpl-zwave">
    <div class="zwave-container">
        {% include 'plugins/zwave/modals/network.html' %}
        {% include 'plugins/zwave/modals/group.html' %}

        <div class="view-options">
            <div class="view-selector col-s-9 col-m-10 col-l-11">
                <select @change="onViewChange">
                    <option v-for="_, view in views"
                            v-text="(view[0].toUpperCase() + view.slice(1)).replace('_', ' ')"
                            :key="view"
                            :selected="view == selected.view"
                            :value="view">
                    </option>
                </select>
            </div>

            <div class="buttons">
                <button class="btn btn-default" title="Add node" v-if="selected.view === 'nodes'"
                        @click="addNode" :disabled="commandRunning">
                    <i class="fa fa-plus"></i>
                </button>

                <button class="btn btn-default" title="Remove node" v-if="selected.view === 'nodes'"
                        @click="removeNode" :disabled="commandRunning">
                    <i class="fa fa-minus"></i>
                </button>

                <button class="btn btn-default" title="Add scene" v-if="selected.view === 'scenes'"
                        :disabled="commandRunning" @click="addScene">
                    <i class="fa fa-plus"></i>
                </button>

                <button class="btn btn-default" title="Network info" @click="onNetworkInfoModalOpen">
                    <i class="fa fa-info"></i>
                </button>

                <button class="btn btn-default" title="Network commands" @click="openNetworkCommandsDropdown">
                    <i class="fa fa-cog"></i>
                </button>

                <button class="btn btn-default" title="Refresh network" @click="refresh">
                    <i class="fa fa-sync-alt"></i>
                </button>
            </div>

            <dropdown ref="networkCommandsDropdown" :items="networkDropdownItems"></dropdown>
        </div>

        <div class="view nodes" v-if="selected.view == 'nodes'">
            <div class="no-items" v-if="Object.keys(nodes).length == 0">
                <div class="loading" v-if="loading.nodes">Loading nodes...</div>
                <div class="empty" v-else>No nodes available on the network</div>
            </div>

            <zwave-node
                    v-for="node, nodeId in nodes"
                    :key="nodeId"
                    :node="node"
                    :bus="bus"
                    :selected="selected.nodeId == nodeId">
            </zwave-node>
        </div>

        <div class="view groups" v-else-if="selected.view == 'groups'">
            <div class="no-items" v-if="Object.keys(groups).length == 0">
                <div class="loading" v-if="loading.groups">Loading groups...</div>
                <div class="empty" v-else>No groups available on the network</div>
            </div>

            <zwave-group
                    v-for="group, groupId in groups"
                    :key="groupId"
                    :group="group"
                    :nodes="groupId in groups ? groups[groupId].associations.map((node) => nodes[node]).reduce((nodes, node) => {nodes[node.node_id] = node; return nodes}, {}) : {}"
                    :selected="selected.groupId == groupId"
                    :bus="bus">
            </zwave-group>
        </div>

        <div class="view scenes" v-else-if="selected.view == 'scenes'">
            <div class="no-items" v-if="Object.keys(scenes).length == 0">
                <div class="loading" v-if="loading.scenes">Loading scenes...</div>
                <div class="empty" v-else>No scenes configured on the network</div>
            </div>

            <div class="item scene"
                 :class="{selected: selected.sceneId === sceneId}"
                 v-for="scene, sceneId in scenes"
                 :key="sceneId">
                <div class="row name vertical-center" :class="{selected: selected.sceneId === sceneId}"
                     v-text="scene.label" @click="onSceneClicked({sceneId: sceneId})"></div>

                <div class="params" v-if="selected.sceneId === sceneId">
                    <div class="row">
                        <div class="param-name">Activate</div>
                        <div class="param-value">
                            <toggle-switch :value="false" @toggled="activateScene(sceneId, true)"></toggle-switch>
                        </div>
                    </div>

                    <div class="section actions">
                        <div class="header">
                            <div class="title">Actions</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>

                            <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 class="section values" v-if="scene.values && scene.values.length">
                        <zwave-value
                                v-for="value, valueId in valuesMap"
                                v-if="value.id_on_network && value.id_on_network in scenes.values[sceneId]"
                                :key="valueId"
                                :value="value"
                                :node="node"
                                :sceneId="sceneId"
                                :bus="bus">
                        </zwave-value>
                    </div>
                </div>
            </div>
        </div>

        <div class="view values" v-else>
            <div class="no-items" v-if="Object.keys(nodes).length == 0">
                <div class="loading" v-if="loading.nodes">Loading nodes...</div>
                <div class="empty" v-else>No nodes found on the network</div>
            </div>

            <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"
                 v-for="node, nodeId in nodes"
                 :key="nodeId">
                <div class="row name vertical-center" :class="{selected: selected.nodeId === nodeId}" v-text="node.name" @click="onNodeClicked({nodeId: nodeId})"></div>

                <div class="params" v-if="selected.nodeId === nodeId">
                    <zwave-value
                            v-for="value, valueId in node.values"
                            v-if="value.id_on_network && (selected.view === 'values' || value.id_on_network in values[selected.view])"
                            :key="valueId"
                            :value="value"
                            :node="node"
                            :bus="bus">
                    </zwave-value>
                </div>
            </div>

            <dropdown ref="addToSceneDropdown" :items="addToSceneDropdownItems"></dropdown>
        </div>
    </div>
</script>