working prototype

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>

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

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>

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

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

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