From statecard, 3 Months ago, written in HTML5.
Embed
  1. <dom-module id="state-card-custom_scene">
  2.   <template>
  3.     <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
  4.     <style>
  5.       paper-button {
  6.         font-weight: 500;
  7.         top: 3px;
  8.         height: 37px;
  9.         margin-right: -.57em;
  10.       }
  11.       paper-button.on {
  12.         color: var(--primary-color);
  13.       }
  14.       paper-button.off {
  15.         color: var(--primary-text-color);
  16.       }
  17.     </style>
  18. <div class='horizontal justified layout'>
  19.   <state-info state-obj="[[stateObj]]"></state-info>
  20.   <paper-button-group on-tap="stopPropagation">
  21.     <template is="dom-repeat" items="[[config.entities]]" as="entity">
  22.       <paper-button raised class$="[[computeStateClass(hass, entity)]]" onTap="callService">
  23.         <template is="dom-if" if="[[entity.icon]]">
  24.           <iron-icon icon="[[entity.icon]]"></iron-icon>
  25.         </template>
  26.         <template is="dom-if" if="[[entity.friendly_name]]">
  27.             &nbsp;[[entity.friendly_name]]
  28.         </template>
  29.       </paper-button>
  30.     </template>
  31.   </paper-button-group>
  32. </div>
  33. </template>
  34. </dom-module>
  35.     Polymer({
  36.       is: 'state-card-custom_scene',
  37.       properties: {
  38.         hass: {
  39.           type: Object,
  40.         },
  41.         stateObj: {
  42.           type: Object,
  43.         },
  44.         config: {
  45.           type: Object,
  46.           computed: 'computeConfig(stateObj)',
  47.         },
  48.       },
  49.  
  50.       computeConfig: function (stateObj) {    
  51.         return stateObj.attributes.config;
  52.       },
  53.  
  54.       computeStateClass: function (hass, entity) {    
  55.         return (hass.states[entity.state].state === 'on') ? 'on' : 'off';
  56.       },
  57.  
  58.       callService() {
  59.         this.hass.callService('script', 'script.scene_bathroom_standard',{})
  60.       },
  61.       stopPropagation: function (e) {
  62.         e.stopPropagation();
  63.       },  
  64.   });