103 lines
2.7 KiB
Vue
103 lines
2.7 KiB
Vue
<template>
|
|
<div class="item group" :class="{selected: selected}">
|
|
<div class="row name vertical-center" :class="{selected: selected}" v-text="group.label"
|
|
@click="$emit('select', group.index)" />
|
|
|
|
<div class="params" v-if="selected">
|
|
<div class="section nodes">
|
|
<div class="header">
|
|
<div class="title col-10">Nodes</div>
|
|
<div class="buttons col-2">
|
|
<button class="btn btn-default" title="Add to group" @click="$emit('open-add-nodes-to-group', group.index)"
|
|
v-if="!group.max_associations || Object.keys(nodes || {}).length < group.max_associations">
|
|
<i class="fa fa-plus" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="body">
|
|
<div class="row" v-for="(node, i) in nodes" :key="i">
|
|
<div class="col-10" v-text="node.name?.length ? node.name : `<Node ${node.node_id}>`" />
|
|
<div class="buttons col-2">
|
|
<button class="btn btn-default" title="Remove from group" :disabled="commandRunning"
|
|
@click="removeFromGroup(node.node_id)">
|
|
<i class="fa fa-trash" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section config">
|
|
<div class="header">
|
|
<div class="title">Parameters</div>
|
|
</div>
|
|
|
|
<div class="body">
|
|
<div class="row">
|
|
<div class="param-name">Index</div>
|
|
<div class="param-value" v-text="group.index"></div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="param-name">Max associations</div>
|
|
<div class="param-value" v-text="group.max_associations"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Utils from "@/Utils";
|
|
|
|
export default {
|
|
name: "Group",
|
|
emits: ['select', 'open-add-nodes-to-group'],
|
|
mixins: [Utils],
|
|
|
|
props: {
|
|
group: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
nodes: {
|
|
type: Object,
|
|
default: () => { return {} },
|
|
},
|
|
selected: {
|
|
type: Boolean,
|
|
default: false,
|
|
}
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
commandRunning: false,
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
async removeFromGroup(nodeId) {
|
|
if (!confirm('Are you sure that you want to remove this node from ' + this.group.label + '?'))
|
|
return
|
|
|
|
this.commandRunning = true
|
|
try {
|
|
await this.request('zwave.remove_node_from_group', {
|
|
node_id: nodeId,
|
|
group_index: this.group.index,
|
|
})
|
|
} finally {
|
|
this.commandRunning = false
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "common";
|
|
</style>
|