Example Panel for Home Assistant

example-panel.js

/*
Example panel.

Put this file in <config>/www/example-panel.js

In configuration.yaml:

panel_custom:
  - name: example-panel
    # url_path needs to be unique for each panel_custom config
    url_path: redirect-server-controls
    sidebar_title: Example Panel
    sidebar_icon: mdi:server
    module_url: /local/example-panel.js
    config:
      # Data you want to make available to panel
      hello: world
*/
import "https://unpkg.com/[email protected]/lib/wired-card.js?module";
import {
  LitElement,
  html,
  css,
} from "https://unpkg.com/[email protected]/lit-element.js?module";

class ExamplePanel extends LitElement {
  static get properties() {
    return {
      hass: { type: Object },
      narrow: { type: Boolean },
      route: { type: Object },
      panel: { type: Object },
    };
  }

  render() {
    return html`
      <wired-card elevation="2">
        <p>There are ${Object.keys(this.hass.states).length} entities.</p>
        <p>The screen is${this.narrow ? "" : " not"} narrow.</p>
        Configured panel config
        <pre>${JSON.stringify(this.panel.config, undefined, 2)}</pre>
        Current route
        <pre>${JSON.stringify(this.route, undefined, 2)}</pre>
      </wired-card>
    `;
  }

  static get styles() {
    return css`
      :host {
        background-color: #fafafa;
        padding: 16px;
        display: block;
      }
      wired-card {
        background-color: white;
        padding: 16px;
        display: block;
        font-size: 18px;
        max-width: 600px;
        margin: 0 auto;
      }
    `;
  }
}
customElements.define("example-panel", ExamplePanel);