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

<script type="text/x-template" id="tmpl-zwave-node">
    <div class="item node" :class="{selected: selected}">
        <div class="row name vertical-center" :class="{selected: selected}"
             v-text="node.name" @click="onNodeClicked"></div>

        <div class="params" v-if="selected">
            <div class="row">
                <div class="param-name">Name</div>
                <div class="param-value">
                    <div :class="{hidden: !editMode.name}">
                        <form ref="nameForm" @submit.prevent="editName">
                            <input type="text" name="name" :value="node.name">

                            <span class="buttons">
                                <button type="button" class="btn btn-default" @click="editMode.name = false">
                                    <i class="fas fa-times"></i>
                                </button>

                                <button type="submit" class="btn btn-default">
                                    <i class="fa fa-check"></i>
                                </button>
                            </span>
                        </form>
                    </div>

                    <div :class="{hidden: editMode.name}">
                        <span v-text="node.name && node.name.length ? node.name : '<Node ' + node.node_id + '>'"></span>
                        <span class="buttons">
                            <button type="button" class="btn btn-default" @click="onEditMode('name')">
                                <i class="fa fa-edit"></i>
                            </button>
                        </span>
                    </div>
                </div>
            </div>

            <div class="row" v-if="node.location && node.location.length">
                <div class="param-name">Location</div>
                <div class="param-value" v-text="node.location"></div>
            </div>

            <div class="row">
                <div class="param-name">Type</div>
                <div class="param-value" v-text="node.type"></div>
            </div>

            <div class="row">
                <div class="param-name">Role</div>
                <div class="param-value" v-text="node.role"></div>
            </div>

            <div class="row">
                <div class="param-name">Node ID</div>
                <div class="param-value" v-text="node.node_id"></div>
            </div>

            <div class="row">
                <div class="param-name">Is Ready</div>
                <div class="param-value" v-text="node.is_ready"></div>
            </div>

            <div class="row">
                <div class="param-name">Is Failed</div>
                <div class="param-value" v-text="node.is_failed"></div>
            </div>

            <div class="row">
                <div class="param-name">Product ID</div>
                <div class="param-value" v-text="node.manufacturer_id"></div>
            </div>

            <div class="row">
                <div class="param-name">Product Type</div>
                <div class="param-value" v-text="node.product_type"></div>
            </div>

            <div class="row" v-if="node.product_name && node.product_name.length">
                <div class="param-name">Product Name</div>
                <div class="param-value" v-text="node.product_name"></div>
            </div>

            <div class="row">
                <div class="param-name">Manufacturer ID</div>
                <div class="param-value" v-text="node.manufacturer_id"></div>
            </div>

            <div class="row" v-if="node.manufacturer_name && node.manufacturer_name.length">
                <div class="param-name">Manufacturer Name</div>
                <div class="param-value" v-text="node.manufacturer_name"></div>
            </div>

            <div class="row">
                <div class="param-name">Capabilities</div>
                <div class="param-value" v-text="node.capabilities.join(', ')"></div>
            </div>

            <div class="row">
                <div class="param-name">Command Classes</div>
                <div class="param-value" v-text="node.command_classes.join(', ')"></div>
            </div>

            <div class="row">
                <div class="param-name">Groups</div>
                <div class="param-value" v-text="Object.values(node.groups).map((g) => g.label || '').join(', ')"></div>
            </div>

            <div class="row">
                <div class="param-name">Home ID</div>
                <div class="param-value" v-text="node.home_id.toString(16)"></div>
            </div>

            <div class="row">
                <div class="param-name">Is Awake</div>
                <div class="param-value" v-text="node.is_awake"></div>
            </div>

            <div class="row">
                <div class="param-name">Is Locked</div>
                <div class="param-value" v-text="node.is_locked"></div>
            </div>

            <div class="row" v-if="node.last_update">
                <div class="param-name">Last Update</div>
                <div class="param-value" v-text="node.last_update"></div>
            </div>

            <div class="row" v-if="node.last_update">
                <div class="param-name">Max Baud Rate</div>
                <div class="param-value" v-text="node.max_baud_rate"></div>
            </div>

            <div class="section actions">
                <div class="header">
                    <div class="title">Actions</div>
                </div>

                <div class="body">
                    <div class="row error" v-if="node.is_failed" @click="removeFailedNode">
                        <div class="param-name">Remove Failed Node</div>
                        <div class="param-value">
                            <i class="fa fa-trash"></i>
                        </div>
                    </div>

                    <div class="row error" v-if="node.is_failed" @click="replaceFailedNode">
                        <div class="param-name">Replace Failed Node</div>
                        <div class="param-value">
                            <i class="fa fa-sync-alt"></i>
                        </div>
                    </div>

                    <div class="row" @click="heal">
                        <div class="param-name">Heal Node</div>
                        <div class="param-value">
                            <i class="fas fa-wrench"></i>
                        </div>
                    </div>

                    <div class="row" @click="replicationSend">
                        <div class="param-name">Replicate info to secondary controller</div>
                        <div class="param-value">
                            <i class="fa fa-clone"></i>
                        </div>
                    </div>

                    <div class="row" @click="requestNetworkUpdate">
                        <div class="param-name">Request network update</div>
                        <div class="param-value">
                            <i class="fas fa-wifi"></i>
                        </div>
                    </div>

                    <div class="row" @click="requestNeighbourUpdate">
                        <div class="param-name">Request neighbours update</div>
                        <div class="param-value">
                            <i class="fas fa-network-wired"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</script>

<script type="application/javascript" src="{{ url_for('static', filename='js/plugins/zwave/node.js') }}"></script>