From bdf92230b74faab7e476ab6f75f92203fedaaf54 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Per=20Sandstr=C3=B6m?= <per.j.sandstrom@gmail.com>
Date: Tue, 8 Sep 2015 20:10:16 +0200
Subject: [PATCH 1/2] working prototype

---
 src/more-infos/more-info-alarm.html   | 45 ++++++++++++++++++++
 src/more-infos/more-info-alarm.js     | 61 +++++++++++++++++++++++++++
 src/more-infos/more-info-content.html |  1 +
 src/more-infos/more-info-content.js   |  1 +
 src/util/domain-icon.js               |  8 +++-
 src/util/state-more-info-type.js      |  2 +-
 6 files changed, 116 insertions(+), 2 deletions(-)
 create mode 100644 src/more-infos/more-info-alarm.html
 create mode 100644 src/more-infos/more-info-alarm.js

diff --git a/src/more-infos/more-info-alarm.html b/src/more-infos/more-info-alarm.html
new file mode 100644
index 0000000000..8b62217b3c
--- /dev/null
+++ b/src/more-infos/more-info-alarm.html
@@ -0,0 +1,45 @@
+<link rel='import' href='../../bower_components/polymer/polymer.html'>
+
+<link rel='import' href='../../bower_components/paper-button/paper-button.html'>
+<link rel='import' href='../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html'>
+
+<dom-module id='more-info-alarm'>
+  <template>
+      <div class='layout horizontal'>
+          <paper-input value='[[entered_value]]' hidden='true'></paper-input>
+      </div>
+      <div>
+         <paper-dropdown-menu label="Your favourite pastry">
+	     <paper-menu class="dropdown-content">
+			    <paper-item>Croissant</paper-item>
+			        <paper-item>Donut</paper-item>
+				    <paper-item>Financier</paper-item>
+				        <paper-item>Madeleine</paper-item>
+					  </paper-menu>
+      </paper-dropdown-menu>
+      </div>
+      <div class='layout horizontal'>
+        <paper-button on-tap='handle1Tap'>1</paper-button>
+        <paper-button on-tap='handle2Tap'>2</paper-button>
+        <paper-button on-tap='handle3Tap'>3</paper-button>
+      </div>
+      <div class='layout horizontal'>
+        <paper-button on-tap='handle4Tap'>4</paper-button>
+        <paper-button on-tap='handle5Tap'>5</paper-button>
+        <paper-button on-tap='handle6Tap'>6</paper-button>
+      </div>
+      <div class='layout horizontal'>
+        <paper-button on-tap='handle7Tap'>7</paper-button>
+        <paper-button on-tap='handle8Tap'>8</paper-button>
+        <paper-button on-tap='handle9Tap'>9</paper-button>
+      </div>
+       <div class='layout horizontal' style='center'>
+        <paper-button on-tap='handle0Tap'>0</paper-button>
+      </div>
+      <div class='layout horizontal'>
+        <paper-button on-tap='handleDisarmTap'>D</paper-button>
+        <paper-button on-tap='handleHomeTap'>H</paper-button>
+        <paper-button on-tap='handleAwayTap'>A</paper-button>
+      </div>
+  </template>
+</dom-module>
diff --git a/src/more-infos/more-info-alarm.js b/src/more-infos/more-info-alarm.js
new file mode 100644
index 0000000000..09dccca174
--- /dev/null
+++ b/src/more-infos/more-info-alarm.js
@@ -0,0 +1,61 @@
+import { serviceActions } from '../util/home-assistant-js-instance';
+
+import Polymer from '../polymer';
+import attributeClassNames from '../util/attribute-class-names';
+
+const ATTRIBUTE_CLASSES = [];
+
+export default new Polymer({
+  is: 'more-info-alarm',
+  handle0Tap(number) {
+    this.entered_code += '0';
+  },
+  handle1Tap(number) {
+    this.entered_code += '1';
+  },
+  handle2Tap(number) {
+    this.entered_code += '2';
+  },
+  handle3Tap(number) {
+    this.entered_code += '3';
+  },
+  handle4Tap(number) {
+    this.entered_code += '4';
+  },
+  handle5Tap(number) {
+    this.entered_code += '5';
+  },
+  handle6Tap(number) {
+    this.entered_code += '6';
+  },
+  handle7Tap(number) {
+    this.entered_code += '7';
+  },
+  handle8Tap(number) {
+    this.entered_code += '8';
+  },
+  handle9Tap(number) {
+    this.entered_code += '9';
+  },
+  handleDisarmTap(number) {
+    this.callService('alarm_disarm', {code: this.entered_code});
+  },
+  handleHomeTap(number) {
+    this.callService('alarm_arm_home', {code: this.entered_code});
+  },
+  handleAwayTap(number) {
+    this.callService('alarm_arm_away', {code: this.entered_code});
+  },
+  properties: {
+    entered_code: {
+      type: String,
+      value: '',
+    },
+  },
+
+  callService(service, data) {
+    const serviceData = data || {};
+    serviceData.entity_id = this.stateObj.entityId;
+    serviceActions.callService('alarm', service, serviceData);
+  },
+});
diff --git a/src/more-infos/more-info-content.html b/src/more-infos/more-info-content.html
index 1e7a028c72..8a3fc82640 100644
--- a/src/more-infos/more-info-content.html
+++ b/src/more-infos/more-info-content.html
@@ -10,6 +10,7 @@
 <link rel='import' href='more-info-media_player.html'>
 <link rel='import' href='more-info-camera.html'>
 <link rel='import' href='more-info-updater.html'>
+<link rel='import' href='more-info-alarm.html'>
 
 <dom-module id='more-info-content'>
   <style>
diff --git a/src/more-infos/more-info-content.js b/src/more-infos/more-info-content.js
index d28bde1592..f33cca3f19 100644
--- a/src/more-infos/more-info-content.js
+++ b/src/more-infos/more-info-content.js
@@ -11,6 +11,7 @@ require('./more-info-light');
 require('./more-info-media_player');
 require('./more-info-camera');
 require('./more-info-updater');
+require('./more-info-alarm');
 
 export default new Polymer({
   is: 'more-info-content',
diff --git a/src/util/domain-icon.js b/src/util/domain-icon.js
index 0857f54df4..b3dda4a103 100644
--- a/src/util/domain-icon.js
+++ b/src/util/domain-icon.js
@@ -11,10 +11,16 @@ export default function domainIcon(domain, state) {
 
   case 'switch':
     return 'image:flash-on';
+    
+  case "alarm":
+    if (state == 'Disarmed'){
+      return "icons:lock-open";
+    }else{
+      return "icons:lock";
+    }
 
   case 'media_player':
     let icon = 'hardware:cast';
-
     if (state && state !== 'off' && state !== 'idle') {
       icon += '-connected';
     }
diff --git a/src/util/state-more-info-type.js b/src/util/state-more-info-type.js
index 1d3892e942..2c60f48603 100644
--- a/src/util/state-more-info-type.js
+++ b/src/util/state-more-info-type.js
@@ -1,6 +1,6 @@
 const DOMAINS_WITH_MORE_INFO = [
   'light', 'group', 'sun', 'configurator', 'thermostat', 'script',
-  'media_player', 'camera', 'updater',
+  'media_player', 'camera', 'updater', 'alarm'
 ];
 
 export default function stateMoreInfoType(state) {

From 58535ab323fb537fdfac757739afce60f2a3f651 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Per=20Sandstr=C3=B6m?= <per.j.sandstrom@gmail.com>
Date: Tue, 15 Sep 2015 20:17:43 +0200
Subject: [PATCH 2/2] change to badge and remove keypad

---
 src/components/entity/ha-state-label-badge.js |  6 +++
 src/components/ha-zone-cards.js               |  7 +--
 src/more-infos/more-info-alarm.html           | 45 -------------------
 .../more-info-alarm_control_panel.html        | 17 +++++++
 ...rm.js => more-info-alarm_control_panel.js} | 38 +++-------------
 src/more-infos/more-info-content.html         |  2 +-
 src/more-infos/more-info-content.js           |  2 +-
 src/util/domain-icon.js                       |  8 ++--
 src/util/state-more-info-type.js              |  2 +-
 9 files changed, 39 insertions(+), 88 deletions(-)
 delete mode 100644 src/more-infos/more-info-alarm.html
 create mode 100644 src/more-infos/more-info-alarm_control_panel.html
 rename src/more-infos/{more-info-alarm.js => more-info-alarm_control_panel.js} (52%)

diff --git a/src/components/entity/ha-state-label-badge.js b/src/components/entity/ha-state-label-badge.js
index 805fd01ffd..981ddd2aff 100644
--- a/src/components/entity/ha-state-label-badge.js
+++ b/src/components/entity/ha-state-label-badge.js
@@ -66,6 +66,7 @@ export default new Polymer({
     case 'sun':
     case 'scene':
     case 'script':
+    case 'alarm_control_panel':
       return undefined;
     case 'sensor':
       return state.attributes.unit_of_measurement && state.state;
@@ -76,6 +77,9 @@ export default new Polymer({
 
   computeIcon(state) {
     switch (state.domain) {
+    case 'alarm_control_panel':
+      return state.state === 'disarmed' ?
+        'icons:lock-open' : 'icons:lock';
     case 'device_tracker':
       return !state.attributes.entity_picture && domainIcon(state.domain);
     case 'scene':
@@ -109,6 +113,8 @@ export default new Polymer({
       return state.attributes.unit_of_measurement || state.state;
     case 'device_tracker':
       return state.state === 'home' ? 'Home' : 'Away';
+    case 'alarm_control_panel':
+      return state.state;
     default:
       return state.attributes.unit_of_measurement;
     }
diff --git a/src/components/ha-zone-cards.js b/src/components/ha-zone-cards.js
index 8c6430f15c..720c1e237e 100644
--- a/src/components/ha-zone-cards.js
+++ b/src/components/ha-zone-cards.js
@@ -12,9 +12,10 @@ const PRIORITY = {
   a: -1,
   sun: 0,
   device_tracker: 1,
-  sensor: 2,
-  scene: 3,
-  script: 4,
+  alarm_control_panel: 2,
+  sensor: 3,
+  scene: 4,
+  script: 5,
   thermostat: 40,
   media_player: 50,
   camera: 60,
diff --git a/src/more-infos/more-info-alarm.html b/src/more-infos/more-info-alarm.html
deleted file mode 100644
index 8b62217b3c..0000000000
--- a/src/more-infos/more-info-alarm.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<link rel='import' href='../../bower_components/polymer/polymer.html'>
-
-<link rel='import' href='../../bower_components/paper-button/paper-button.html'>
-<link rel='import' href='../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html'>
-
-<dom-module id='more-info-alarm'>
-  <template>
-      <div class='layout horizontal'>
-          <paper-input value='[[entered_value]]' hidden='true'></paper-input>
-      </div>
-      <div>
-         <paper-dropdown-menu label="Your favourite pastry">
-	     <paper-menu class="dropdown-content">
-			    <paper-item>Croissant</paper-item>
-			        <paper-item>Donut</paper-item>
-				    <paper-item>Financier</paper-item>
-				        <paper-item>Madeleine</paper-item>
-					  </paper-menu>
-      </paper-dropdown-menu>
-      </div>
-      <div class='layout horizontal'>
-        <paper-button on-tap='handle1Tap'>1</paper-button>
-        <paper-button on-tap='handle2Tap'>2</paper-button>
-        <paper-button on-tap='handle3Tap'>3</paper-button>
-      </div>
-      <div class='layout horizontal'>
-        <paper-button on-tap='handle4Tap'>4</paper-button>
-        <paper-button on-tap='handle5Tap'>5</paper-button>
-        <paper-button on-tap='handle6Tap'>6</paper-button>
-      </div>
-      <div class='layout horizontal'>
-        <paper-button on-tap='handle7Tap'>7</paper-button>
-        <paper-button on-tap='handle8Tap'>8</paper-button>
-        <paper-button on-tap='handle9Tap'>9</paper-button>
-      </div>
-       <div class='layout horizontal' style='center'>
-        <paper-button on-tap='handle0Tap'>0</paper-button>
-      </div>
-      <div class='layout horizontal'>
-        <paper-button on-tap='handleDisarmTap'>D</paper-button>
-        <paper-button on-tap='handleHomeTap'>H</paper-button>
-        <paper-button on-tap='handleAwayTap'>A</paper-button>
-      </div>
-  </template>
-</dom-module>
diff --git a/src/more-infos/more-info-alarm_control_panel.html b/src/more-infos/more-info-alarm_control_panel.html
new file mode 100644
index 0000000000..512b529b6f
--- /dev/null
+++ b/src/more-infos/more-info-alarm_control_panel.html
@@ -0,0 +1,17 @@
+<link rel='import' href='../../bower_components/polymer/polymer.html'>
+
+<link rel='import' href='../../bower_components/paper-button/paper-button.html'>
+<link rel='import' href='../../bower_components/paper-input/paper-input.html'>
+
+<dom-module id='more-info-alarm_control_panel'>
+  <template>
+      <div class='layout horizontal'>
+          <paper-input label='code' value='[[entered_code]]' pattern='[0-9]*' type='password' on-change='enteredCodeChanged'></paper-input>
+      </div>
+      <div class='layout horizontal'>
+        <paper-button on-tap='handleDisarmTap'>Disarm</paper-button>
+        <paper-button on-tap='handleHomeTap'>Arm Home</paper-button>
+        <paper-button on-tap='handleAwayTap'>Arm Away</paper-button>
+      </div>
+  </template>
+</dom-module>
diff --git a/src/more-infos/more-info-alarm.js b/src/more-infos/more-info-alarm_control_panel.js
similarity index 52%
rename from src/more-infos/more-info-alarm.js
rename to src/more-infos/more-info-alarm_control_panel.js
index 09dccca174..f183e4b2a0 100644
--- a/src/more-infos/more-info-alarm.js
+++ b/src/more-infos/more-info-alarm_control_panel.js
@@ -6,37 +6,7 @@ import attributeClassNames from '../util/attribute-class-names';
 const ATTRIBUTE_CLASSES = [];
 
 export default new Polymer({
-  is: 'more-info-alarm',
-  handle0Tap(number) {
-    this.entered_code += '0';
-  },
-  handle1Tap(number) {
-    this.entered_code += '1';
-  },
-  handle2Tap(number) {
-    this.entered_code += '2';
-  },
-  handle3Tap(number) {
-    this.entered_code += '3';
-  },
-  handle4Tap(number) {
-    this.entered_code += '4';
-  },
-  handle5Tap(number) {
-    this.entered_code += '5';
-  },
-  handle6Tap(number) {
-    this.entered_code += '6';
-  },
-  handle7Tap(number) {
-    this.entered_code += '7';
-  },
-  handle8Tap(number) {
-    this.entered_code += '8';
-  },
-  handle9Tap(number) {
-    this.entered_code += '9';
-  },
+  is: 'more-info-alarm_control_panel',
   handleDisarmTap(number) {
     this.callService('alarm_disarm', {code: this.entered_code});
   },
@@ -52,10 +22,12 @@ export default new Polymer({
       value: '',
     },
   },
-
+  enteredCodeChanged(ev) {
+    this.entered_code = ev.target.value;
+  },
   callService(service, data) {
     const serviceData = data || {};
     serviceData.entity_id = this.stateObj.entityId;
-    serviceActions.callService('alarm', service, serviceData);
+    serviceActions.callService('alarm_control_panel', service, serviceData);
   },
 });
diff --git a/src/more-infos/more-info-content.html b/src/more-infos/more-info-content.html
index 8a3fc82640..f7b59075b1 100644
--- a/src/more-infos/more-info-content.html
+++ b/src/more-infos/more-info-content.html
@@ -10,7 +10,7 @@
 <link rel='import' href='more-info-media_player.html'>
 <link rel='import' href='more-info-camera.html'>
 <link rel='import' href='more-info-updater.html'>
-<link rel='import' href='more-info-alarm.html'>
+<link rel='import' href='more-info-alarm_control_panel.html'>
 
 <dom-module id='more-info-content'>
   <style>
diff --git a/src/more-infos/more-info-content.js b/src/more-infos/more-info-content.js
index f33cca3f19..131fc1557f 100644
--- a/src/more-infos/more-info-content.js
+++ b/src/more-infos/more-info-content.js
@@ -11,7 +11,7 @@ require('./more-info-light');
 require('./more-info-media_player');
 require('./more-info-camera');
 require('./more-info-updater');
-require('./more-info-alarm');
+require('./more-info-alarm_control_panel');
 
 export default new Polymer({
   is: 'more-info-content',
diff --git a/src/util/domain-icon.js b/src/util/domain-icon.js
index b3dda4a103..920a3d0fe4 100644
--- a/src/util/domain-icon.js
+++ b/src/util/domain-icon.js
@@ -12,11 +12,11 @@ export default function domainIcon(domain, state) {
   case 'switch':
     return 'image:flash-on';
     
-  case "alarm":
-    if (state == 'Disarmed'){
-      return "icons:lock-open";
+  case 'alarm_control_panel':
+    if (state && state === 'disarmed'){
+      return 'icons:lock-open';
     }else{
-      return "icons:lock";
+      return 'icons:lock';
     }
 
   case 'media_player':
diff --git a/src/util/state-more-info-type.js b/src/util/state-more-info-type.js
index 2c60f48603..2cd99a323d 100644
--- a/src/util/state-more-info-type.js
+++ b/src/util/state-more-info-type.js
@@ -1,6 +1,6 @@
 const DOMAINS_WITH_MORE_INFO = [
   'light', 'group', 'sun', 'configurator', 'thermostat', 'script',
-  'media_player', 'camera', 'updater', 'alarm'
+  'media_player', 'camera', 'updater', 'alarm_control_panel'
 ];
 
 export default function stateMoreInfoType(state) {