111 lines
5.9 KiB
HTML
111 lines
5.9 KiB
HTML
<script type="text/x-template" id="tmpl-zwave-value">
|
|
<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="section value"
|
|
v-for="value in node.values"
|
|
v-if="values.indexOf(value.id_on_network) >= 0"
|
|
:key="value.id_on_network">
|
|
<div class="header">
|
|
<div class="title">
|
|
<button class="btn btn-default btn-value-name-edit" title="Edit value name"
|
|
:data-id-on-network="value.id_on_network" @click="editName">
|
|
<i class="fa fa-edit"></i>
|
|
</button>
|
|
{% raw %}{{ value.label }}{% endraw %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="body">
|
|
<div class="row">
|
|
<div class="param-name">Value</div>
|
|
<div class="param-value">
|
|
<div class="value-view" v-if="value.is_read_only">
|
|
<div class="value-data" v-text="value.data" ></div>
|
|
<div class="unit" v-text="value.units" v-if="value.units && value.units.length">
|
|
{% raw %}{{ value.units }}{% endraw %}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="value-edit" v-else>
|
|
<div :class="['col-' + (value.units && value.units.length ? '11' : '12')]">
|
|
<div class="list" v-if="value.type === 'List'">
|
|
<select @change="onValueChanged"
|
|
:data-id-on-network="value.id_on_network">
|
|
<option v-for="data, index in value.data_items"
|
|
v-text="data"
|
|
:key="index"
|
|
:selected="value.data == data"
|
|
:value="index">
|
|
</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="numeric slider-container" v-else-if="['Byte', 'Decimal', 'Short'].indexOf(value.type) >= 0">
|
|
<div class="col-10">
|
|
<div class="row">
|
|
<span class="value-min" v-text="value.min"></span>
|
|
<span class="value-max" v-text="value.max"></span>
|
|
</div>
|
|
<div class="row">
|
|
<input class="slider" type="range" :min="value.min" :max="value.max"
|
|
:value="value.data" :data-id-on-network="value.id_on_network"
|
|
@change="onValueChanged">
|
|
</div>
|
|
</div>
|
|
<div class="col-2">
|
|
<input type="text" :data-id-on-network="value.id_on_network" :value="value.data"
|
|
@change="onValueChanged">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="boolean" v-else-if="['Bool', 'Button'].indexOf(value.type) >= 0">
|
|
<toggle-switch :value="value.data" :data-id-on-network="value.id_on_network"
|
|
@toggled="onValueChanged"></toggle-switch>
|
|
</div>
|
|
|
|
<div class="value-data" v-text="value.data" v-else></div>
|
|
</div>
|
|
|
|
<div class="col-1 unit" v-text="value.units" v-if="value.units && value.units.length">
|
|
{% raw %}{{ value.units }}{% endraw %}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" v-if="value.help && value.help.length">
|
|
<div class="param-name">Help</div>
|
|
<div class="param-value" v-text="value.help"></div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="param-name">Value ID</div>
|
|
<div class="param-value" v-text="value.value_id"></div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="param-name">ID on Network</div>
|
|
<div class="param-value" v-text="value.id_on_network"></div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="param-name">Command Class</div>
|
|
<div class="param-value" v-text="value.command_class"></div>
|
|
</div>
|
|
|
|
<div class="row" v-if="value.last_update">
|
|
<div class="param-name">Last Update</div>
|
|
<div class="param-value" v-text="value.last_update"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</script>
|
|
|
|
<script type="application/javascript" src="{{ url_for('static', filename='js/plugins/zwave/value.js') }}"></script>
|
|
|