From 8a8097af99dd971d4e698fcf2d7986e972c8a7ea Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <Paulus@PaulusSchoutsen.nl>
Date: Wed, 22 Oct 2014 00:02:18 -0700
Subject: [PATCH] Initial commit Polymer interface
---
.../http/www_static/polymer/bower.json | 30 ++
.../http/www_static/polymer/entity-list.html | 55 ++++
.../www_static/polymer/event-fire-dialog.html | 71 +++++
.../http/www_static/polymer/events-list.html | 58 ++++
.../polymer/home-assistant-api.html | 270 ++++++++++++++++++
.../polymer/home-assistant-main.html | 79 +++++
.../polymer/service-call-dialog.html | 69 +++++
.../www_static/polymer/services-list.html | 74 +++++
.../http/www_static/polymer/state-card.html | 139 +++++++++
.../www_static/polymer/state-set-dialog.html | 84 ++++++
.../http/www_static/polymer/states-cards.html | 64 +++++
11 files changed, 993 insertions(+)
create mode 100644 homeassistant/components/http/www_static/polymer/bower.json
create mode 100644 homeassistant/components/http/www_static/polymer/entity-list.html
create mode 100644 homeassistant/components/http/www_static/polymer/event-fire-dialog.html
create mode 100644 homeassistant/components/http/www_static/polymer/events-list.html
create mode 100644 homeassistant/components/http/www_static/polymer/home-assistant-api.html
create mode 100644 homeassistant/components/http/www_static/polymer/home-assistant-main.html
create mode 100644 homeassistant/components/http/www_static/polymer/service-call-dialog.html
create mode 100644 homeassistant/components/http/www_static/polymer/services-list.html
create mode 100755 homeassistant/components/http/www_static/polymer/state-card.html
create mode 100644 homeassistant/components/http/www_static/polymer/state-set-dialog.html
create mode 100755 homeassistant/components/http/www_static/polymer/states-cards.html
diff --git a/homeassistant/components/http/www_static/polymer/bower.json b/homeassistant/components/http/www_static/polymer/bower.json
new file mode 100644
index 00000000000..f83f815face
--- /dev/null
+++ b/homeassistant/components/http/www_static/polymer/bower.json
@@ -0,0 +1,30 @@
+{
+ "name": "Home Assistant",
+ "version": "0.1.0",
+ "authors": [
+ "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl>"
+ ],
+ "main": "index.htm",
+ "license": "MIT",
+ "private": true,
+ "ignore": [
+ "**/.*",
+ "node_modules",
+ "bower_components",
+ "test",
+ "tests"
+ ],
+ "dependencies": {
+ "polymer": "Polymer/polymer#~0.4.2",
+ "font-roboto": "Polymer/font-roboto#~0.4.2",
+ "core-header-panel": "Polymer/core-header-panel#~0.4.2",
+ "core-toolbar": "Polymer/core-toolbar#~0.4.2",
+ "core-icon-button": "Polymer/core-icon-button#~0.4.2",
+ "paper-fab": "Polymer/paper-fab#~0.4.2",
+ "core-ajax": "Polymer/core-ajax#~0.4.2",
+ "paper-toast": "Polymer/paper-toast#~0.4.2",
+ "paper-dialog": "Polymer/paper-dialog#~0.4.2",
+ "paper-button": "Polymer/paper-button#~0.4.2",
+ "core-tooltip": "Polymer/core-tooltip#~0.4.2"
+ }
+}
diff --git a/homeassistant/components/http/www_static/polymer/entity-list.html b/homeassistant/components/http/www_static/polymer/entity-list.html
new file mode 100644
index 00000000000..a76d6a82432
--- /dev/null
+++ b/homeassistant/components/http/www_static/polymer/entity-list.html
@@ -0,0 +1,55 @@
+<link rel="import" href="bower_components/polymer/polymer.html">
+
+<polymer-element name="entity-list" attributes="api cbEntityClicked">
+ <template>
+ <style>
+ :host {
+ display: block;
+ }
+
+ .entityContainer {
+ font-size: 1rem;
+ }
+ </style>
+
+ <template if={{cbEntityClicked}}>
+ <style>
+ a {
+ text-decoration: underline;
+ cursor: pointer;
+ }
+ </style>
+ </template>
+
+ <div>
+ <template repeat="{{state in states}}">
+ <div class='eventContainer'>
+ <a on-click={{handleClick}}>{{state.entity_id}}</a>
+ </div>
+ </template>
+
+ </div>
+ </template>
+ <script>
+ Polymer({
+ cbEventClicked: null,
+ states: [],
+
+ domReady: function() {
+ this.api.addEventListener('states-updated', this.statesUpdated.bind(this))
+ this.statesUpdated()
+ },
+
+ statesUpdated: function() {
+ this.states = this.api.states;
+ },
+
+ handleClick: function(ev) {
+ if(this.cbEntityClicked) {
+ this.cbEntityClicked(ev.path[0].innerHTML);
+ }
+ },
+
+ });
+ </script>
+</polymer-element>
diff --git a/homeassistant/components/http/www_static/polymer/event-fire-dialog.html b/homeassistant/components/http/www_static/polymer/event-fire-dialog.html
new file mode 100644
index 00000000000..9a132769329
--- /dev/null
+++ b/homeassistant/components/http/www_static/polymer/event-fire-dialog.html
@@ -0,0 +1,71 @@
+<link rel="import" href="bower_components/polymer/polymer.html">
+<link rel="import" href="bower_components/paper-dialog/paper-dialog.html">
+<link rel="import" href="bower_components/paper-dialog/paper-dialog-transition.html">
+<link rel="import" href="bower_components/paper-button/paper-button.html">
+<link rel="import" href="bower_components/paper-input/paper-input.html">
+
+<link rel="import" href="events-list.html">
+
+<polymer-element name="event-fire-dialog" attributes="api">
+ <template>
+ <style>
+ paper-input:first-child {
+ padding-top: 0;
+ }
+
+ .eventContainer {
+ margin-left: 30px;
+ }
+ </style>
+
+ <paper-dialog id="dialog" heading="Fire Event" transition="paper-dialog-transition-bottom" backdrop="true">
+ <div layout horizontal>
+ <div>
+ <paper-input id="inputType" label="Event Type" floatingLabel="true" autofocus required></paper-input>
+ <paper-input id="inputData" label="Event Data (JSON, optional)" floatingLabel="true" multiline></paper-input>
+ </div>
+ <div class='eventContainer'>
+ <b>Available events:</b>
+ <events-list api={{api}} cbEventClicked={{eventSelected}}></event-list>
+ </div>
+ </div>
+ <paper-button dismissive>Cancel</paper-button>
+ <paper-button affirmative on-click={{clickFireEvent}}>Fire Event</paper-button>
+ </paper-dialog>
+
+ </template>
+ <script>
+ Polymer({
+ ready: function() {
+ // to ensure callback methods work..
+ this.eventSelected = this.eventSelected.bind(this)
+ },
+
+ show: function(eventType, eventData) {
+ this.setEventType(eventType);
+ this.setEventData(eventData);
+
+ this.$.dialog.toggle();
+ },
+
+ setEventType: function(eventType) {
+ this.$.inputType.value = eventType;
+ },
+
+ setEventData: function(eventData) {
+ this.$.inputData.value = eventData;
+ },
+
+ eventSelected: function(eventType) {
+ this.setEventType(eventType);
+ },
+
+ clickFireEvent: function() {
+ this.api.fire_event(
+ this.$.inputType.value,
+ this.$.inputData.value
+ )
+ }
+ });
+ </script>
+</polymer-element>
diff --git a/homeassistant/components/http/www_static/polymer/events-list.html b/homeassistant/components/http/www_static/polymer/events-list.html
new file mode 100644
index 00000000000..bd08b5e3003
--- /dev/null
+++ b/homeassistant/components/http/www_static/polymer/events-list.html
@@ -0,0 +1,58 @@
+<link rel="import" href="bower_components/polymer/polymer.html">
+
+<polymer-element name="events-list" attributes="api cbEventClicked">
+ <template>
+ <style>
+ :host {
+ display: block;
+ }
+
+ .eventContainer {
+ font-size: 1rem;
+ }
+
+ </style>
+
+ <template if={{cbEventClicked}}>
+ <style>
+ a {
+ text-decoration: underline;
+ cursor: pointer;
+ }
+ </style>
+ </template>
+
+ <div>
+ <template repeat="{{event in events}}">
+ <div class='eventContainer'>
+ <a on-click={{handleClick}}>{{event.event}}</a>
+ ({{event.listener_count}} listeners)
+ </div>
+ </template>
+
+ </div>
+ </template>
+ <script>
+ Polymer({
+ cbEventClicked: null,
+ events: [],
+
+ domReady: function() {
+ this.events = this.api.events
+
+ this.api.addEventListener('events-updated', this.eventsUpdated.bind(this))
+ },
+
+ eventsUpdated: function() {
+ this.events = this.api.events;
+ },
+
+ handleClick: function(ev) {
+ if(this.cbEventClicked) {
+ this.cbEventClicked(ev.path[0].innerHTML);
+ }
+ },
+
+ });
+ </script>
+</polymer-element>
diff --git a/homeassistant/components/http/www_static/polymer/home-assistant-api.html b/homeassistant/components/http/www_static/polymer/home-assistant-api.html
new file mode 100644
index 00000000000..8bad3463f9e
--- /dev/null
+++ b/homeassistant/components/http/www_static/polymer/home-assistant-api.html
@@ -0,0 +1,270 @@
+<link rel="import" href="bower_components/polymer/polymer.html">
+<link rel="import" href="bower_components/core-ajax/core-ajax.html">
+<link rel="import" href="bower_components/paper-toast/paper-toast.html">
+
+<link rel="import" href="event-fire-dialog.html">
+<link rel="import" href="service-call-dialog.html">
+<link rel="import" href="state-set-dialog.html">
+
+<polymer-element name="home-assistant-api" attributes="auth">
+ <template>
+ <style>
+ core-ajax {
+ display: none;
+ }
+ </style>
+
+ <paper-toast id="toast" role="alert" text=""></paper-toast>
+ <event-fire-dialog id="eventDialog" api={{api}}></event-fire-dialog>
+ <service-call-dialog id="serviceDialog" api={{api}}></service-call-dialog>
+ <state-set-dialog id="stateDialog" api={{api}}></state-set-dialog>
+
+ <core-ajax id="statesAjax"
+ auto
+ method="GET"
+ url="/api/states"
+ headers='{"HA-access": "{{auth}}"}'
+ on-core-response="{{statesLoaded}}"
+ handleAs="json">
+ </core-ajax>
+
+ <core-ajax id="eventsAjax"
+ auto
+ method="GET"
+ url="/api/events"
+ headers='{"HA-access": "{{auth}}"}'
+ on-core-response="{{eventsLoaded}}"
+ handleAs="json">
+ </core-ajax>
+
+ <core-ajax id="servicesAjax"
+ auto
+ method="GET"
+ url="/api/services"
+ headers='{"HA-access": "{{auth}}"}'
+ on-core-response="{{servicesLoaded}}"
+ handleAs="json">
+ </core-ajax>
+
+ </template>
+ <script>
+ Polymer({
+ auth: "",
+ states: [],
+ services: {},
+ events: {},
+ stateUpdateTimeout: null,
+
+ created: function() {
+ this.api = this;
+
+ // so we can pass these methods safely as callbacks
+ this.turn_on = this.turn_on.bind(this);
+ this.turn_off = this.turn_off.bind(this);
+ },
+
+ _laterFetchStates: function() {
+ if(this.stateUpdateTimeout) {
+ clearTimeout(this.stateUpdateTimeout);
+ }
+
+ // update states in 60 seconds
+ this.stateUpdateTimeout = setTimeout(this.fetchStates.bind(this), 60000);
+ },
+
+ _sortStates: function(states) {
+ return states.sort(function(one, two) {
+ if (one.entity_id > two.entity_id) {
+ return 1;
+ } else if (one.entity_id < two.entity_id) {
+ return -1;
+ } else {
+ return 0;
+ }
+ })
+ },
+
+ statesLoaded: function() {
+ // Make a copy of the loaded data
+ this.states = this._sortStates(this.$.statesAjax.response.slice(0));
+
+ this.fire('states-updated')
+
+ this._laterFetchStates();
+ },
+
+ eventsLoaded: function() {
+ // Make a copy of the loaded data
+ this.events = this.$.eventsAjax.response;
+
+ this.fire('events-updated')
+ },
+
+ servicesLoaded: function() {
+ // Make a copy of the loaded data
+ this.services = this.$.servicesAjax.response;
+
+ this.fire('services-updated')
+ },
+
+ _pushNewState: function(new_state) {
+ var state;
+ var stateFound = false;
+
+ for(var i = 0; i < this.states.length; i++) {
+ if(this.states[i].entity_id == new_state.entity_id) {
+ state = this.states[i];
+ state.attributes = new_state.attributes;
+ state.last_changed = new_state.last_changed;
+ state.state = new_state.state;
+
+ stateFound = true;
+ break;
+ }
+ }
+
+ if(!stateFound) {
+ this.states.push(new_state);
+ this._sortStates(this.states);
+ }
+ },
+
+ fetchState: function(entity_id) {
+ var successStateUpdate = function(new_state) {
+ this._pushNewState(new_state);
+ }
+
+ this.call_api("GET", "states/" + entity_id, null, successStateUpdate.bind(this));
+ },
+
+ fetchStates: function() {
+ this.$.statesAjax.go();
+ },
+
+ getState: function(entityId) {
+ for(var i = 0; i < this.states.length; i++) {
+ if(this.states[i].entity_id == entityId) {
+ return this.states[i];
+ }
+ }
+ },
+
+ turn_on: function(entity_id) {
+ this.call_service("homeassistant", "turn_on", {entity_id: entity_id});
+ },
+
+ turn_off: function(entity_id) {
+ this.call_service("homeassistant", "turn_off", {entity_id: entity_id})
+ },
+
+ set_state: function(entity_id, state, attributes) {
+ var payload = {state: state}
+
+ if(attributes) {
+ payload.attributes = attributes;
+ }
+
+ var successToast = function(new_state) {
+ this.showToast("State of "+entity_id+" successful set to "+state+".");
+ this._pushNewState(new_state);
+ }
+
+ this.call_api("POST", "states/" + entity_id,
+ payload, successToast.bind(this));
+ },
+
+ call_service: function(domain, service, parameters) {
+ var successToast = function() {
+ this.showToast("Service "+domain+"/"+service+" successful called.");
+ }
+
+ this.call_api("POST", "services/" + domain + "/" + service,
+ parameters, successToast.bind(this));
+ },
+
+ fire_event: function(eventType, eventData) {
+ eventData = eventData ? JSON.parse(eventData) : "";
+
+ var successToast = function() {
+ this.showToast("Event "+eventType+" successful fired.");
+ }
+
+ this.call_api("POST", "events/" + eventType,
+ eventData, successToast.bind(this));
+ },
+
+ call_api: function(method, path, parameters, callback) {
+ var req = new XMLHttpRequest();
+ req.open(method, "/api/" + path, true)
+ req.setRequestHeader("HA-access", this.auth);
+
+ req.onreadystatechange = function() {
+
+ if(req.readyState == 4 && req.status > 199 && req.status < 300) {
+
+ if(callback) {
+ callback(JSON.parse(req.responseText))
+ }
+ // if we targetted an entity id, update state after 2 seconds
+ if(parameters && parameters.entity_id) {
+ var updateCallback;
+
+ // if a string, update just that entity, otherwise update all
+ if(typeof(parameters.entity_id) == "string") {
+ updateCallback = function() {
+ this.fetchState(parameters.entity_id);
+ }
+
+ } else {
+ updateCallback = this.fetchStates();
+ }
+
+ setTimeout(updateCallback.bind(this), 2000);
+ }
+ }
+ }.bind(this)
+
+ if(parameters) {
+ req.send(JSON.stringify(parameters))
+ } else {
+ req.send()
+ }
+ },
+
+ showEditStateDialog: function(entityId) {
+ var state = this.getState(entityId);
+
+ this.showSetStateDialog(entityId, state.state, state.attributes)
+ },
+
+ showSetStateDialog: function(entityId, state, stateAttributes) {
+ entityId = entityId || "";
+ state = state || "";
+ stateAttributes = stateAttributes || null;
+
+ this.$.stateDialog.show(entityId, state, stateAttributes);
+ },
+
+ showFireEventDialog: function(eventType, eventData) {
+ eventType = eventType || "";
+ eventData = eventData || "";
+
+ this.$.eventDialog.show(eventType, eventData)
+ },
+
+ showCallServiceDialog: function(domain, service, serviceData) {
+ domain = domain || "";
+ service = service || "";
+ serviceData = serviceData || "";
+
+ this.$.serviceDialog.show(domain, service, serviceData);
+ },
+
+ showToast: function(message) {
+ this.$.toast.text = message;
+ this.$.toast.show();
+ }
+
+ });
+ </script>
+</polymer-element>
diff --git a/homeassistant/components/http/www_static/polymer/home-assistant-main.html b/homeassistant/components/http/www_static/polymer/home-assistant-main.html
new file mode 100644
index 00000000000..1f068b9eb93
--- /dev/null
+++ b/homeassistant/components/http/www_static/polymer/home-assistant-main.html
@@ -0,0 +1,79 @@
+<link rel="import" href="bower_components/font-roboto/roboto.html">
+<link rel="import" href="bower_components/core-header-panel/core-header-panel.html">
+<link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
+<link rel="import" href="bower_components/core-icon-button/core-icon-button.html">
+<link rel="import" href="bower_components/paper-fab/paper-fab.html">
+
+<link rel="import" href="home-assistant-api.html">
+<link rel="import" href="states-cards.html">
+
+<polymer-element name="home-assistant-main" attributes="auth">
+ <template>
+ <style type="text/css">
+
+ :host {
+ font-family: 'RobotoDraft', sans-serif;
+ }
+
+ core-header-panel {
+ height: 100%;
+ overflow: auto;
+ -webkit-overflow-scrolling: touch;
+ }
+
+ core-toolbar {
+ background: #03a9f4;
+ font-size: 1.5rem;
+ color: white;
+ }
+
+ paper-fab {
+ position: absolute;
+ bottom: 10px;
+ right: 10px;
+ }
+
+ </style>
+
+ <home-assistant-api auth="{{auth}}" id="api"></home-assistant-api>
+
+ <core-header-panel layout>
+
+ <core-toolbar>
+ <div flex>
+ Home Assistant
+ </div>
+ <core-icon-button icon="developer-mode-tv" on-click="{{handleEventClick}}"></core-icon-button>
+ <core-icon-button icon="settings-remote" on-click="{{handleServiceClick}}"></core-icon-button>
+ </core-toolbar>
+
+ <div class="content" flex>
+ <states-cards api="{{api}}"></states-cards>
+ <paper-fab icon="add" on-click={{handleAddStateClick}}></paper-fab>
+ </div>
+
+ </core-header-panel>
+
+ </template>
+ <script>
+ Polymer({
+
+ ready: function() {
+ this.api = this.$.api;
+ },
+
+ handleEventClick: function() {
+ this.api.showFireEventDialog();
+ },
+
+ handleServiceClick: function() {
+ this.api.showCallServiceDialog();
+ },
+
+ handleAddStateClick: function() {
+ this.api.showSetStateDialog();
+ }
+
+ });
+ </script>
+</polymer-element>
diff --git a/homeassistant/components/http/www_static/polymer/service-call-dialog.html b/homeassistant/components/http/www_static/polymer/service-call-dialog.html
new file mode 100644
index 00000000000..4429623081e
--- /dev/null
+++ b/homeassistant/components/http/www_static/polymer/service-call-dialog.html
@@ -0,0 +1,69 @@
+<link rel="import" href="bower_components/polymer/polymer.html">
+<link rel="import" href="bower_components/paper-dialog/paper-dialog.html">
+<link rel="import" href="bower_components/paper-dialog/paper-dialog-transition.html">
+<link rel="import" href="bower_components/paper-button/paper-button.html">
+<link rel="import" href="bower_components/paper-input/paper-input.html">
+
+<link rel="import" href="services-list.html">
+
+<polymer-element name="service-call-dialog" attributes="api">
+ <template>
+ <style>
+ paper-input:first-child {
+ padding-top: 0;
+ }
+
+ .serviceContainer {
+ margin-left: 30px;
+ }
+ </style>
+
+ <paper-dialog id="dialog" heading="Call Service" transition="paper-dialog-transition-bottom" backdrop="true">
+ <div layout horizontal>
+ <div>
+ <paper-input id="inputDomain" label="Domain" floatingLabel="true" autofocus required></paper-input>
+ <paper-input id="inputService" label="Service" floatingLabel="true" required></paper-input>
+ <paper-input id="inputData" label="Service Data (JSON, optional)" floatingLabel="true" multiline></paper-input>
+ </div>
+ <div class='serviceContainer'>
+ <b>Available services:</b>
+ <services-list api={{api}} cbServiceClicked={{serviceSelected}}></event-list>
+ </div>
+ </div>
+ <paper-button dismissive>Cancel</paper-button>
+ <paper-button affirmative on-click={{clickCallService}}>Call Service</paper-button>
+ </paper-dialog>
+
+ </template>
+ <script>
+ Polymer({
+ ready: function() {
+ // to ensure callback methods work..
+ this.serviceSelected = this.serviceSelected.bind(this)
+ },
+
+ show: function(domain, service, serviceData) {
+ this.setService(domain, service);
+ this.$.inputData.value = serviceData;
+ this.$.dialog.toggle();
+ },
+
+ setService: function(domain, service) {
+ this.$.inputDomain.value = domain;
+ this.$.inputService.value = service;
+ },
+
+ serviceSelected: function(domain, service) {
+ this.setService(domain, service);
+ },
+
+ clickCallService: function() {
+ this.api.call_service(
+ this.$.inputDomain.value,
+ this.$.inputService.value,
+ this.$.inputData.value
+ )
+ }
+ });
+ </script>
+</polymer-element>
diff --git a/homeassistant/components/http/www_static/polymer/services-list.html b/homeassistant/components/http/www_static/polymer/services-list.html
new file mode 100644
index 00000000000..715e5b6a9bf
--- /dev/null
+++ b/homeassistant/components/http/www_static/polymer/services-list.html
@@ -0,0 +1,74 @@
+<link rel="import" href="bower_components/polymer/polymer.html">
+<link rel="import" href="bower_components/core-menu/core-menu.html">
+<link rel="import" href="bower_components/core-menu/core-submenu.html">
+<link rel="import" href="bower_components/core-item/core-item.html">
+
+<polymer-element name="services-list" attributes="api cbServiceClicked">
+ <template>
+ <style>
+ :host {
+ display: block;
+ }
+
+ core-menu {
+ margin-top: 0;
+ font-size: 1rem;
+ }
+
+ a {
+ display: block;
+ }
+ </style>
+
+ <template if={{cbServiceClicked}}>
+ <style>
+ a {
+ text-decoration: underline;
+ cursor: pointer;
+ }
+ </style>
+ </template>
+
+ <div>
+ <core-menu selected="0">
+
+ <template repeat="{{serv in services}}">
+ <core-submenu icon="settings" label="{{serv.domain}}">
+ <template repeat="{{service in serv.services}}">
+ <a on-click={{serviceClicked}} data-domain={{serv.domain}}>{{service}}</a>
+ </template>
+ </core-submenu>
+ </template>
+
+ </core-menu>
+
+ </div>
+ </template>
+ <script>
+ Polymer({
+ services: [],
+ cbServiceClicked: null,
+
+ domReady: function() {
+ this.services = this.api.services
+
+ this.api.addEventListener('services-updated', this.servicesUpdated.bind(this))
+ },
+
+ servicesUpdated: function() {
+ this.services = this.api.services;
+ },
+
+ serviceClicked: function(ev) {
+ if(this.cbServiceClicked) {
+ var target = ev.path[0];
+ var domain = target.getAttributeNode("data-domain").value;
+ var service = target.innerHTML;
+
+ this.cbServiceClicked(domain, service);
+ }
+ }
+
+ });
+ </script>
+</polymer-element>
diff --git a/homeassistant/components/http/www_static/polymer/state-card.html b/homeassistant/components/http/www_static/polymer/state-card.html
new file mode 100755
index 00000000000..ad618a7372d
--- /dev/null
+++ b/homeassistant/components/http/www_static/polymer/state-card.html
@@ -0,0 +1,139 @@
+<script src="bower_components/moment/moment.js"></script>
+<link rel="import" href="bower_components/polymer/polymer.html">
+<link rel="import" href="bower_components/core-tooltip/core-tooltip.html">
+<link rel="import" href="bower_components/paper-button/paper-button.html">
+
+<polymer-element name="state-card"
+ attributes="entity state last_changed state_attr cb_turn_on, cb_turn_off cb_edit">
+ <template>
+ <style>
+ :host {
+ position: relative;
+ background-color: white;
+ padding: 20px 20px 50px 20px;
+ width: 100%;
+ font-weight: 300;
+ border-radius: 2px;
+ }
+
+ .header {
+ text-transform: capitalize;
+
+ font-size: 1.5rem;
+ }
+
+ .subheader {
+ margin-top: -5px;
+ color: darkgrey;
+ }
+
+ .content {
+ margin-top: 10px;
+ }
+
+ .actions {
+ position: absolute;
+ bottom: 10px;
+ left: 20px;
+ right: 20px;
+
+ text-align: right;
+ }
+
+ paper-button.toggle {
+ color: #03a9f4;
+ }
+
+ </style>
+
+ <div class="header" horizontal justified layout>
+ <span class="entity_id">{{entity_id | makeReadable}}</span>
+ <span class='state'>{{state | makeReadable}}</span>
+ </div>
+
+ <div class="subheader" horizontal justified layout>
+ <span class="domain">{{domain}}</span>
+ <core-tooltip label="{{last_changed}}" position="bottom">
+ <span class="last_changed_from_now">{{last_changed_from_now}}</span>
+ </core-tooltip>
+ </div>
+
+
+ <div class="content">
+ <template repeat="{{key in objectKeys(state_attr)}}">
+ <div>{{key | makeReadable}}: {{state_attr[key]}}</div>
+ </template>
+ </div>
+
+ <div class="actions">
+ <paper-button class='edit' on-click="{{editClicked}}">EDIT</paper-button>
+
+ <template if="{{state == 'on'}}">
+ <paper-button class="toggle" on-click="{{turn_off}}">TURN OFF</paper-button>
+ </template>
+ <template if="{{state == 'off'}}">
+ <paper-button class="toggle" on-click="{{turn_on}}">TURN ON</paper-button>
+ </template>
+ </div>
+
+ </template>
+ <script>
+ Polymer({
+ // attributes
+ entity: "",
+ state: "",
+ last_changed: "never",
+ state_attr: {},
+ cb_turn_on: null,
+ cb_turn_off: null,
+ cb_edit: null,
+
+ // computed
+ domain: "",
+ entity_id: "",
+
+ entityChanged: function(oldVal, newVal) {
+ var parts = newVal.split(".")
+
+ if(parts.length == 1) {
+ this.domain = ""
+ this.entity_id = parts[0]
+ } else {
+ this.domain = parts[0]
+ this.entity_id = parts.slice(1).join('.')
+ }
+ },
+
+ last_changedChanged: function(oldVal, newVal) {
+ this.last_changed_from_now = moment(this.last_changed, "HH:mm:ss DD-MM-YYYY").fromNow()
+ },
+
+ turn_on: function() {
+ if(this.cb_turn_on) {
+ this.cb_turn_on(this.entity);
+ }
+ },
+
+ turn_off: function() {
+ if(this.cb_turn_off) {
+ this.cb_turn_off(this.entity);
+ }
+ },
+
+ editClicked: function() {
+ if(this.cb_edit) {
+ this.cb_edit(this.entity);
+ }
+ },
+
+ // used as filter
+ makeReadable: function(value) {
+ return value.replace("_", " ")
+ },
+
+ objectKeys: function(obj) {
+ return obj ? Object.keys(obj) : [];
+ }
+ });
+ </script>
+</polymer-element>
diff --git a/homeassistant/components/http/www_static/polymer/state-set-dialog.html b/homeassistant/components/http/www_static/polymer/state-set-dialog.html
new file mode 100644
index 00000000000..acdac30b3b8
--- /dev/null
+++ b/homeassistant/components/http/www_static/polymer/state-set-dialog.html
@@ -0,0 +1,84 @@
+<link rel="import" href="bower_components/polymer/polymer.html">
+<link rel="import" href="bower_components/paper-dialog/paper-dialog.html">
+<link rel="import" href="bower_components/paper-dialog/paper-dialog-transition.html">
+<link rel="import" href="bower_components/paper-button/paper-button.html">
+<link rel="import" href="bower_components/paper-input/paper-input.html">
+
+<link rel="import" href="entity-list.html">
+
+<polymer-element name="state-set-dialog" attributes="api">
+ <template>
+ <style>
+ paper-input:first-child {
+ padding-top: 0;
+ }
+
+ .stateContainer {
+ margin-left: 30px;
+ }
+ </style>
+
+ <paper-dialog id="dialog" heading="Set State" transition="paper-dialog-transition-center" backdrop="true">
+ <div layout horizontal>
+ <div>
+ <paper-input id="inputEntityID" label="Entity ID" floatingLabel="true" autofocus required></paper-input>
+ <paper-input id="inputState" label="State" floatingLabel="true" required></paper-input>
+ <paper-input id="inputData" label="State attributes (JSON, optional)" floatingLabel="true" multiline></paper-input>
+ </div>
+ <div class='stateContainer'>
+ <b>Current entities:</b>
+ <entity-list api={{api}} cbEntityClicked={{entitySelected}}></entity-list>
+ </div>
+ </div>
+ <paper-button dismissive>Cancel</paper-button>
+ <paper-button affirmative on-click={{clickSetState}}>Set State</paper-button>
+ </paper-dialog>
+
+ </template>
+ <script>
+ Polymer({
+ ready: function() {
+ // to ensure callback methods work..
+ this.entitySelected = this.entitySelected.bind(this)
+ },
+
+ show: function(entityId, state, stateData) {
+ this.setEntityId(entityId);
+ this.setState(state);
+ this.setStateData(stateData);
+
+ this.$.dialog.toggle();
+ },
+
+ setEntityId: function(entityId) {
+ this.$.inputEntityID.value = entityId;
+ },
+
+ setState: function(state) {
+ this.$.inputState.value = state;
+ },
+
+ setStateData: function(stateData) {
+ var value = stateData ? JSON.stringify(stateData, null, ' ') : "";
+
+ this.$.inputData.value = value;
+ },
+
+ entitySelected: function(entityId) {
+ this.setEntityId(entityId);
+
+ var state = this.api.getState(entityId);
+ this.setState(state.state);
+ this.setStateData(state.attributes);
+ },
+
+ clickSetState: function() {
+ this.api.set_state(
+ this.$.inputEntityID.value,
+ this.$.inputState.value,
+ JSON.parse(this.$.inputData.value)
+ )
+ }
+ });
+ </script>
+</polymer-element>
diff --git a/homeassistant/components/http/www_static/polymer/states-cards.html b/homeassistant/components/http/www_static/polymer/states-cards.html
new file mode 100755
index 00000000000..d650aae0671
--- /dev/null
+++ b/homeassistant/components/http/www_static/polymer/states-cards.html
@@ -0,0 +1,64 @@
+<link rel="import" href="bower_components/polymer/polymer.html">
+<link rel="import" href="state-card.html">
+
+<polymer-element name="states-cards" attributes="api">
+ <template>
+ <style>
+ :host {
+ display: block;
+ width: 100%;
+ }
+
+ state-card, state-add-card {
+ display: inline-block;
+ width: 350px;
+ margin: 10px 0 0 10px;
+ }
+
+ state-add-card {
+ cursor: pointer;
+ }
+
+ </style>
+
+ <div horizontal layout wrap>
+
+ <template repeat="{{state in states}}">
+ <state-card
+ entity="{{state.entity_id}}"
+ state="{{state.state}}"
+ last_changed="{{state.last_changed}}"
+ state_attr="{{state.attributes}}"
+ cb_turn_on="{{api.turn_on}}"
+ cb_turn_off="{{api.turn_off}}"
+ cb_edit={{editCallback}}>
+ </state-card>
+ </template>
+
+ </div>
+ </template>
+ <script>
+ Polymer({
+ states: [],
+
+ ready: function() {
+ this.editCallback = this.editCallback.bind(this);
+ },
+
+ domReady: function() {
+ this.states = this.api.states
+
+ this.api.addEventListener('states-updated', this.statesUpdated.bind(this))
+ },
+
+ statesUpdated: function() {
+ this.states = this.api.states;
+ },
+
+ editCallback: function(entityId) {
+ this.api.showEditStateDialog(entityId);
+ },
+
+ });
+ </script>
+</polymer-element>
--
GitLab