Add icon & colour customisation

Author: Joe Pavitt

nodes/widgets/ui_switch.html

@@ -22,16 +22,17 @@
             topic: {value: 'topic', validate: (RED.validators.hasOwnProperty('typedInput')?RED.validators.typedInput('topicType'):function(v) { return true})},
             topicType: {value: 'msg'},
             style: {value: ''},
+            className: {value: ''},
+            // on state
             onvalue: {value: true, validate: (RED.validators.hasOwnProperty('typedInput')?RED.validators.typedInput('onvalueType'):function(v) { return true})},
             onvalueType: {value: 'bool'},
             onicon: {value: '' },
             oncolor: {value: ''},
+            // off state
             offvalue: {value: false, validate: (RED.validators.hasOwnProperty('typedInput')?RED.validators.typedInput('offvalueType'):function(v) { return true})},
             offvalueType: {value: 'bool'},
             officon: {value: ''},
-            offcolor: {value: ''},
-            animate: {value: false},
-            className: {value: ''}
+            offcolor: {value: ''}
         },
         inputs:1,
         outputs:1,
@@ -124,14 +125,12 @@
         <label for="node-input-tooltip"><i class="fa fa-info-circle"></i> Tooltip</label>
         <input type="text" id="node-input-tooltip" placeholder="optional tooltip">
     </div>-->
-    <!--<div class="form-row">
+    <div class="form-row">
         <label for="node-input-custom-icons"><i class="fa fa-picture-o"></i> Icon</label>
         <select id="node-input-custom-icons" style="width:35%">
             <option value="default">Default</option>
             <option value="custom">Custom</option>
         </select>
-        <span style="width:auto; padding-left:20px" class="form-row-custom-icons" for="node-input-animate"> Animate
-        <input type="checkbox" checked id="node-input-animate" style="display:inline-block; width:auto; vertical-align:baseline;"></span>
     </div>
     <div class="form-row form-row-custom-icons">
         <label for="node-input-onicon" style="text-align:right;"><i class="fa fa-toggle-on"></i> On Icon</label>
@@ -144,7 +143,7 @@
         <input type="text" id="node-input-officon" style="width:120px">
         <label for="node-input-offcolor" style="width:50px; text-align:right;">Colour</label>
         <input type="text" id="node-input-offcolor" style="width:120px">
-    </div>-->
+    </div>
     <div class="form-row">
         <label style="width:auto" for="node-input-onvalue"><i class="fa fa-envelope-o"></i> When clicked, send:</label>
     </div>

ui/src/widgets/ui-switch/UISwitch.vue

@@ -1,8 +1,9 @@
 <template>
     <div class="nrdb-switch" :class="{'nrdb-nolabel': !props.label}">
         <label v-if="props.label" class="v-label">{{ props.label }}</label>
-        <v-switch @click="onChange" v-model="state" class="nrdb-ui-widget" :class="{'active': state}" hide-details="auto" color="primary"></v-switch>
-    </div>
+        <v-switch v-if="!icon" @click="onChange" v-model="state" class="nrdb-ui-widget" :class="{'active': state}" hide-details="auto" color="primary"></v-switch>
+        <v-btn v-else @click="toggle" class="ma-2" variant="text" :icon="icon" :color="color"></v-btn>
+   </div>
 </template>
 
 <script>
@@ -18,13 +19,26 @@
         },
         computed: {
             ...mapState('data', ['values']),
+            icon: function () {
+                if (this.props.onicon && this.props.officon) {
+                    const icon = this.state ? this.props.onicon : this.props.officon
+                    return 'mdi-' + icon
+                } else {
+                    return null
+                }
+            },
+            color: function () {
+                if (this.props.oncolor || this.props.offcolor) {
+                    return this.state ? this.props.oncolor : this.props.offcolor
+                }
+                return null
+            },
             value: function () {
                 return this.values[this.id]
             },
             state: {
                 get () {
                     const val = this.values[this.id]
-                    console.log(this.props.evaluated, val)
                     if (typeof(val) === 'boolean') {
                         return val
                     } else if (this.props.evaluated) {
@@ -45,6 +59,10 @@
                 // only runs when clicked/changed in UI.
                 // inverted as the store doesn't quite update quick enough, but this is reliable method
                 this.$socket.emit(`widget-change:${this.id}`, !this.values[this.id])
+            },
+            toggle () {
+                this.state = !this.state
+                this.$socket.emit(`widget-change:${this.id}`, this.state)
             }
         }
     }