frontend/panels/dev-event/events-list.html

<link rel="import" href="../../bower_components/polymer/polymer.html">


<dom-module id="events-list">
  <template>
    <style>
      ul {
        margin: 0;
        padding: 0;
      }

      li {
        list-style: none;
        line-height: 2em;
      }

      a {
        color: var(--dark-primary-color);
      }
    </style>

    <ul>
      <template is='dom-repeat' items='[[events]]' as='event'>
        <li>
          <a href='#' on-click='eventSelected'>{{event.event}}</a>
          <span> (</span><span>{{event.listener_count}}</span><span> listeners)</span>
        </li>
      </template>
    </ul>
  </template>
</dom-module>

<script>
  Polymer({
    is: 'events-list',

    properties: {
      hass: {
        type: Object,
      },

      events: {
        type: Array,
      },
    },

    attached: function () {
      this.hass.callApi('GET', 'events').then(function (events) {
        this.events = events;
      }.bind(this));
    },

    eventSelected: function (ev) {
      ev.preventDefault();
      this.fire('event-selected', { eventType: ev.model.event.event });
    },
  });
</script>