fix(ui): better associations user interface

zwave-js · Nov 12, 2020 · 29ba832 · 29ba832
1 parent 95292f5
commit 29ba832
Show file tree

Hide file tree

Showing 3 changed files with 116 additions and 77 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -118,7 +118,7 @@
     "vue-router": "^3.4.3",
     "vuetify": "^2.3.10",
     "vuex": "^3.5.1",
-    "zwave-js": "^5.3.5"
+    "zwave-js": "^5.3.6"
   },
   "devDependencies": {
     "@babel/core": "^7.11.5",

diff --git a/src/components/ControlPanel.vue b/src/components/ControlPanel.vue
@@ -398,7 +398,7 @@
             <v-tab-item key="groups">
               <v-container grid-list-md>
                 <v-layout wrap>
-                  <v-flex xs12 sm6>
+                  <v-flex xs12 sm6 md4>
                     <v-select
                       label="Node"
                       v-model="group.node"
@@ -409,7 +409,7 @@
                     ></v-select>
                   </v-flex>
 
-                  <v-flex v-if="group.node" xs12 sm6>
+                  <v-flex v-if="group.node" xs12 sm6 md4>
                     <v-select
                       label="Group"
                       v-model="group.group"
@@ -419,7 +419,7 @@
                     ></v-select>
                   </v-flex>
 
-                  <v-flex v-if="group.group" xs12 sm6>
+                  <v-flex v-if="group.node && group.group" xs12 sm6 md4>
                     <v-list subheader>
                       <v-subheader>Associations</v-subheader>
                       <v-list-item
@@ -470,6 +470,7 @@
                     v-if="group.group && group.group.multiChannel"
                     xs12
                     sm6
+                    md4
                   >
                     <v-text-field
                       v-model.number="group.targetInstance"
@@ -479,6 +480,44 @@
                     />
                   </v-flex>
 
+                  <v-flex v-if="group.group && group.associations" xs12 sm6 md4>
+                    <v-list subheader>
+                      <v-subheader>Associations</v-subheader>
+                      <v-template
+                        v-for="(ass, index) in group.associations"
+                        :key="index"
+                      >
+                        <v-list-item dense>
+                          <v-list-item-content>
+                            <v-list-item-title
+                              >Node:
+                              <b>{{
+                                nodes[ass.nodeId]._name || ass.nodeId
+                              }}</b></v-list-item-title
+                            >
+                            <v-list-item-subtitle
+                              v-if="ass.endpoint >= 0"
+                              class="text--primary"
+                              >Endpoint:
+                              <b>{{ ass.endpoint }}</b></v-list-item-subtitle
+                            >
+                          </v-list-item-content>
+                          <v-list-item-icon>
+                            <v-icon @click="removeAssociation(ass)" color="red">
+                              delete
+                            </v-icon>
+                          </v-list-item-icon>
+                        </v-list-item>
+                        <v-divider></v-divider>
+                      </v-template>
+                      <v-list-item v-if="group.associations.length === 0">
+                        <v-list-item-content>
+                          No assocaitions
+                        </v-list-item-content>
+                      </v-list-item>
+                    </v-list>
+                  </v-flex>
+
                   <v-flex xs12>
                     <v-btn
                       v-if="group.node && group.target && group.group"