change to badge and remove keypad

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;
     }

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,

src/more-infos/more-info-alarm.html

@@ -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>

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>

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);
   },
 });

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>

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',

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':

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) {