Add Door Lock widget, fixes #20

package.json

@@ -1,6 +1,6 @@
 {
   "name": "reacticz",
-  "version": "0.1.20",
+  "version": "0.1.21",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",

public/index.html

@@ -112,6 +112,13 @@
         <path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z"/>
         <path d="M0 0h24v24H0z" fill="none"/>
       </symbol>
+      <symbol id="exit-to-app" viewBox="0 0 24 24">
+        <path d="M0 0h24v24H0z" fill="none"/>
+        <path d="M10.09 15.59L11.5 17l5-5-5-5-1.41 1.41L12.67 11H3v2h9.67l-2.58 2.59zM19 3H5c-1.11 0-2 .9-2 2v4h2V5h14v14H5v-4H3v4c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
+      </symbol>
+      <symbol id="lock-outline" viewBox="0 0 24 24">
+        <path d="M12,17C10.89,17 10,16.1 10,15C10,13.89 10.89,13 12,13A2,2 0 0,1 14,15A2,2 0 0,1 12,17M18,20V10H6V20H18M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V10C4,8.89 4.89,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z" />
+      </symbol>
       <!--materialdesignicons.com below-->
       <symbol id="weather-rainy" viewBox="0 0 24 24">
         <path d="M6,14A1,1 0 0,1 7,15A1,1 0 0,1 6,16A5,5 0 0,1 1,11A5,5 0 0,1 6,6C7,3.65 9.3,2 12,2C15.43,2 18.24,4.66 18.5,8.03L19,8A4,4 0 0,1 23,12A4,4 0 0,1 19,16H18A1,1 0 0,1 17,15A1,1 0 0,1 18,14H19A2,2 0 0,0 21,12A2,2 0 0,0 19,10H17V9A5,5 0 0,0 12,4C9.5,4 7.45,5.82 7.06,8.19C6.73,8.07 6.37,8 6,8A3,3 0 0,0 3,11A3,3 0 0,0 6,14M14.83,15.67C16.39,17.23 16.39,19.5 14.83,21.08C14.05,21.86 13,22 12,22C11,22 9.95,21.86 9.17,21.08C7.61,19.5 7.61,17.23 9.17,15.67L12,11L14.83,15.67M13.41,16.69L12,14.25L10.59,16.69C9.8,17.5 9.8,18.7 10.59,19.5C11,19.93 11.5,20 12,20C12.5,20 13,19.93 13.41,19.5C14.2,18.7 14.2,17.5 13.41,16.69Z" />

src/widgets/DeviceWidget.js

@@ -13,6 +13,7 @@ import SmokeSensorWidget from './SmokeSensorWidget'
 import SwitchOnOff from './SwitchOnOff'
 import SwitchBlinds from './SwitchBlinds'
 import SwitchDimmer from './SwitchDimmer'
+import SwitchLock from './SwitchLock'
 import SwitchRGBW from './SwitchRGBW'
 import SwitchSelector from './SwitchSelector'
 import TemperatureWidget from './TemperatureWidget'
@@ -66,6 +67,9 @@ class DeviceWidget extends Component {
       case 'Door Contact' :
         return <ContactWidget label={device.name} value={device.nvalue}
             {...this.props} />
+      case 'Door Lock' :
+        return <SwitchLock idx={device.idx} label={device.name}
+            value={device.nvalue} {...this.props} />;
       case 'Dimmer' :
         if (device.stype === 'RGBW') {
           return <SwitchRGBW idx={device.idx} label={device.name}

src/widgets/SwitchLock.css

@@ -0,0 +1,19 @@
+button.SwitchLock {
+  display: flex;
+  align-items: center;
+}
+
+.SwitchLock > * {
+  flex: 2;
+  margin: 0 5px;
+  overflow: hidden;
+}
+
+.SwitchLock .lockicon {
+  height: 70%;
+  min-width: 35px;
+  flex: 1;
+  opacity: 1;
+  transform: scaleX(-1);
+}
+

src/widgets/SwitchLock.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import SwitchOnOff from './SwitchOnOff';
+import './SwitchLock.css';
+import './SwitchOnOff.css';
+
+class SwitchLock extends SwitchOnOff {
+
+  render() {
+    const valueText = this.props.value === 0 ? 'Unlocked' : 'Locked';
+    const iconId = this.props.value === 0 ? 'exit-to-app' : 'lock-outline';
+    return (
+      <button className="switch SwitchLock" style={this.getButtonStyle(true)} onClick={this.handleClick} title={valueText}>
+      	{this.props.layoutWidth > 1 &&
+      		<svg className="lockicon"><use xlinkHref={'#' + iconId}/></svg>}
+		<div>{this.props.label}</div>
+      </button>
+    );
+  }
+
+}
+
+export default SwitchLock

src/widgets/SwitchOnOff.js

@@ -49,14 +49,15 @@ class SwitchOnOff extends Component {
     }
   }
 
-  getButtonStyle() {
+  getButtonStyle(swapStyles = false) {
     const theme = this.props.theme;
     if (!theme) {
       return {};
     }
     const style = {
-      color: theme.textOn,
-      background: this.props.readOnly ? theme.unlockedBackground : theme.buttonOn
+      color: swapStyles ? theme.textOff : theme.textOn,
+      fill: swapStyles ? theme.textOff : theme.textOn,
+      background: this.props.readOnly ? theme.unlockedBackground : ( swapStyles ? theme.buttonOff : theme.buttonOn )
     }
     const gradient = 'repeating-linear-gradient(-45deg, _corner, _corner 20%, _bg 20%, _bg 80%, _corner 80%, _corner 100%)';
     if (this.props.pushOn && this.props.sceneType) {
@@ -69,8 +70,9 @@ class SwitchOnOff extends Component {
       style.background = this.props.readOnly ? theme.unlockedBackground : gradient.replace(/_corner/g, theme.buttonOn).replace(/_bg/g, theme.buttonOff);
     }
     if (this.props.valueText === "Off" || this.props.value === 0) {
-      style.color = theme.textOff;
-      style.background =  this.props.readOnly ? theme.unlockedBackground : theme.buttonOff;
+      style.color = swapStyles ? theme.textOn : theme.textOff;
+      style.fill = swapStyles ? theme.textOn : theme.textOff;
+      style.background =  this.props.readOnly ? theme.unlockedBackground : ( swapStyles ? theme.buttonOn : theme.buttonOff );
     }
     return style;
   }