Squashed bugs in frontend

homeassistant/components/http/frontend.py

@@ -1,2 +1,2 @@
 """ DO NOT MODIFY. Auto-generated by build_polymer script """
-VERSION = "57f41262ccbd90c2e988e5be0a5dab59"
+VERSION = "b476e6588846c1ce0e194dfec06da78e"

homeassistant/components/http/www_static/polymer/home-assistant-api.html

@@ -20,7 +20,6 @@
     <state-set-dialog id="stateDialog" api={{api}}></state-set-dialog>
 
     <core-ajax id="statesAjax"
-      auto
       method="GET"
       url="/api/states"
       headers="{{ha_headers}}"
@@ -29,7 +28,6 @@
     </core-ajax>
 
     <core-ajax id="eventsAjax"
-      auto
       method="GET"
       url="/api/events"
       headers="{{ha_headers}}"
@@ -38,7 +36,6 @@
     </core-ajax>
 
     <core-ajax id="servicesAjax"
-      auto
       method="GET"
       url="/api/services"
       headers="{{ha_headers}}"
@@ -67,6 +64,22 @@
       this.turn_off = this.turn_off.bind(this);
     },
 
+    // local methods
+    getState: function(entityId) {
+      for(var i = 0; i < this.states.length; i++) {
+        if(this.states[i].entity_id == entityId) {
+          return this.states[i];
+        }
+      }
+    },
+
+    getCustomGroups: function() {
+      return this.states.filter(function(state) {
+        return (state.entity_id.lastIndexOf("group.") == 0 &&
+                !state.attributes.auto);
+      })     
+    },
+
     _laterFetchStates: function() {
       if(this.stateUpdateTimeout) {
         clearTimeout(this.stateUpdateTimeout);
@@ -88,29 +101,6 @@
       })
     },
 
-    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;
@@ -131,32 +121,54 @@
         this.states.push(new_state);
         this._sortStates(this.states);
       }
+
+      this.fire('states-updated')
     },
 
-    fetchState: function(entity_id) {
+    // call api methods
+    fetchState: function(entityId) {
       var successStateUpdate = function(new_state) {
         this._pushNewState(new_state);
       }
 
-      this.call_api("GET", "states/" + entity_id, null, successStateUpdate.bind(this));
+      this.call_api("GET", "states/" + entityId, null, successStateUpdate.bind(this));
     },
 
-    fetchStates: function() {
-      this.$.statesAjax.go();
-    },
+    fetchStates: function(onSuccess, onError) {
+      var successStatesUpdate = function(newStates) {
+        this.states = this._sortStates(newStates);
 
-    getState: function(entityId) {
-      for(var i = 0; i < this.states.length; i++) {
-        if(this.states[i].entity_id == entityId) {
-          return this.states[i];
+        this.fire('states-updated')
+
+        this._laterFetchStates();
+
+        if(onSuccess) {
+          onSuccess(newStates);
         }
       }
+
+      this.call_api("GET", "states", null, successStatesUpdate.bind(this), onError);
     },
 
-    getCustomGroups: function() {
-      return this.states.filter(function(state) {
-        return state.entity_id.lastIndexOf("group.") == 0;
-      })     
+    fetchEvents: function() {
+      var successEventsUpdated = function(events) {
+        this.events = events;
+
+        this.fire('events-updated')
+      }
+
+      this.call_api("GET", "events", null, successEventsUpdated.bind(this));
+    },
+
+    fetchServices: function() {
+      var successServicesUpdated = function(services) {
+        this.services = services;
+
+        this.fire('services-updated')
+      }
+
+      this.call_api("GET", "services", null,
+        successServicesUpdated.bind(this));
     },
 
     turn_on: function(entity_id) {
@@ -186,6 +198,22 @@
     call_service: function(domain, service, parameters) {
       var successToast = function() {
         this.showToast("Service "+domain+"/"+service+" successful called.");
+
+        // if we call a service on an entity_id, update the state
+        if(parameters && parameters.entity_id) {
+          var update_func;
+
+          // if entity_id is a string, update 1 state, else all.
+          if(typeof(parameters.entity_id === "string")) {
+            update_func = function() {
+              this.fetchState(parameters.entity_id);
+            }
+          } else {
+            update_func = this.fetchStates
+          }
+
+          setTimeout(update_func.bind(this), 1000);
+        }
       }
 
       this.call_api("POST", "services/" + domain + "/" + service,
@@ -203,34 +231,26 @@
                     eventData, successToast.bind(this));
     },
 
-    call_api: function(method, path, parameters, callback) {
+    call_api: function(method, path, parameters, onSuccess, onError) {
       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();
+        if(req.readyState == 4) {
+          if(req.status > 199 && req.status < 300) {
+            if(onSuccess) {
+              onSuccess(JSON.parse(req.responseText));
+            }
+          } else {
+            if(onError) {
+              var data = req.responseText ? JSON.parse(req.responseText) : {};
+              onError(data);
             }
-
-            setTimeout(updateCallback.bind(this), 2000);
           }
+
+
         }
       }.bind(this)
 
@@ -241,6 +261,7 @@
       }
     },
 
+    // show dialogs
     showEditStateDialog: function(entityId) {
       var state = this.getState(entityId);
 

homeassistant/components/http/www_static/polymer/home-assistant-main.html

@@ -5,10 +5,9 @@
 <link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
 <link rel="import" href="bower_components/paper-tabs/paper-tab.html">
 
-<link rel="import" href="home-assistant-api.html">
 <link rel="import" href="states-cards.html">
 
-<polymer-element name="home-assistant-main" attributes="auth">
+<polymer-element name="home-assistant-main" attributes="api">
   <template>
     <style type="text/css">
 
@@ -42,7 +41,6 @@
 
     </style>
 
-    <home-assistant-api auth="{{auth}}" id="api"></home-assistant-api>
 
     <core-header-panel unresolved fullbleed>
 
@@ -82,10 +80,6 @@
   Polymer({
     selectedTab: null,
 
-    ready: function() {
-      this.api = this.$.api;
-    },
-
     isCustomGroup: function(state) {
       return (state.entity_id.lastIndexOf('group.') == 0 &&
               !state.attributes.auto);

homeassistant/components/http/www_static/polymer/splash-login.html

@@ -1,8 +1,10 @@
 <link rel="import" href="bower_components/font-roboto/roboto.html">
-<link rel="import" href="home-assistant-main.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="home-assistant-main.html">
+<link rel="import" href="home-assistant-api.html">
+
 <polymer-element name="splash-login" attributes="auth">
   <template>
     <style type="text/css">
@@ -23,6 +25,8 @@
 
     </style>
 
+    <home-assistant-api auth="{{auth}}" id="api"></home-assistant-api>
+
     <template if="{{state == 'no_auth'}}">
       <div layout horizontal center fit class='login'>
         <div layout vertical center flex>
@@ -31,7 +35,10 @@
 
           <div class='interact' layout vertical>
             <div id='loginform'>
-              <paper-input id="passwordInput" label="Password" type="password" value="{{auth}}"></paper-input>
+              <paper-input
+                id="passwordInput" label="Password" type="password"
+                value="{{auth}}" on-keyup="{{passwordKeyup}}" autofocus>
+              </paper-input>
               <paper-button on-click={{validatePassword}}>Log In</paper-button>
             </div>
 
@@ -41,18 +48,19 @@
       </div>
     </template>
     <template if="{{state == 'valid_auth'}}">
-      <home-assistant-main auth="{{auth}}"></home-assistant-main>
+      <home-assistant-main api="{{api}}"></home-assistant-main>
     </template>
 
   </template>
   <script>
   Polymer({
 
-    // can be no_auth, test_auth, valid_auth
+    // can be no_auth, valid_auth
     state: "no_auth",
     auth: "",
 
     ready: function() {
+      this.api = this.$.api;
     },
 
     domReady: function() {
@@ -61,35 +69,39 @@
       }
     },
 
+    passwordKeyup: function(ev) {
+      if(ev.keyCode == 13) {
+        this.validatePassword();
+      }
+    },
+
     validatePassword: function() {
       this.$.passwordInput.commit();
-      this.$.loginform.setAttribute('hidden', null)
-      this.$.validateMessage.removeAttribute('hidden')
+      this.$.loginform.setAttribute('hidden', null);
+      this.$.validateMessage.removeAttribute('hidden');
 
-      var req = new XMLHttpRequest();
-      req.open("GET", "/api/", true);
-      req.setRequestHeader("HA-access", this.auth);
+      var passwordValid = function(result) {
+        this.api.fetchServices();
+        this.api.fetchEvents();
 
-      req.onreadystatechange = function() {
-        if(req.readyState == 4) {
-          if(req.status == 200) {
-            this.state = 'valid_auth'
-          } else {
-            this.auth = "";
+        this.state = "valid_auth";
+      }
 
-            this.$.passwordInput.error = "Invalid Password";
-            this.$.passwordInput.required = 1;
-
-            this.$.loginform.removeAttribute('hidden');
-            this.$.validateMessage.setAttribute('hidden', null);
-
-            this.state = 'no_auth'
-          }
+      var passwordInvalid = function(result) {
+        if(result && result.message) {
+          this.$.passwordInput.error = result.message;
+        } else {
+          this.$.passwordInput.error = "Unexpected result from API";
         }
-      }.bind(this)
+        this.auth = null;
+        this.$.passwordInput.setAttribute('required', true);
+        this.$.loginform.removeAttribute('hidden');
+        this.$.validateMessage.setAttribute('hidden', null);
+        this.$.passwordInput.focus();
+      }
 
-      req.send();
-    },
+      this.api.fetchStates(passwordValid.bind(this), passwordInvalid.bind(this));
+    }
 
   });
   </script>  

homeassistant/components/http/www_static/polymer/state-card.html

@@ -26,6 +26,12 @@
 
     state-badge {
       float: left;
+      cursor: pointer;
+      transition: background-color .2s;
+    }
+
+    state-badge:hover {
+      background-color: #039be5;
     }
 
     .name, .state.text {
@@ -54,12 +60,14 @@
 
     /* filling of circle when checked */
     paper-toggle-button::shadow paper-radio-button::shadow #onRadio {
-      background-color: #0091ea;
+      background-color: #039be5;
+      transition: background-color .2s;
     }
 
     /* line when checked */
     paper-toggle-button::shadow #toggleBar[checked] {
-      background-color: #0091ea;
+      background-color: #039be5;
+      transition: background-color .2s;
     }    
     </style>
 
@@ -87,20 +95,26 @@
         </div>
       </div>
 
-      <template if="{{state == 'on' || state == 'off'}}">
-        <div class='state toggle' self-center flex>
-          <paper-toggle-button
-            id="toggleButton"
-            on-change="{{toggle}}">
-          </paper-toggle-button>
-        </div>
+      <template if="{{!state_unknown}}">
+        <template if="{{state == 'on' || state == 'off'}}">
+          <div class='state toggle' self-center flex>
+            <paper-toggle-button
+              id="toggleButton"
+              on-change="{{toggle}}">
+            </paper-toggle-button>
+          </div>
+        </template>
+        <template if="{{state != 'on' && state != 'off'}}">
+          <div class='state text'>
+            {{state | makeReadable}}
+          </div>
+        </template>
       </template>
-      <template if="{{state != 'on' && state != 'off'}}">
-        <div class='state text'>
-          {{state | makeReadable}}
-        </div>
+
+      <template if="{{state_unknown}}">
+        <div class="state" self-center flex>Updating..</div>
       </template>
-      
+
     </div>    
 
   </template>
@@ -114,12 +128,15 @@
     cb_turn_on: null,
     cb_turn_off: null,
     cb_edit: null,
+    state_unknown: false,
 
     // computed
     domain: "",
     entity_id: "",
 
-    stateChanged: function() {
+    stateChanged: function(oldVal, newVal) {
+      this.state_unknown = newVal == "";
+
       if(this.$.toggleButton) {
         this.$.toggleButton.checked = this.state == 'on';
       }
@@ -147,6 +164,11 @@
       } else {
         this.turn_off();
       }
+
+      var delayUnsetSate = function() {
+        this.state = "";
+      }
+      setTimeout(delayUnsetSate.bind(this), 500);
     },
 
     turn_on: function() {

homeassistant/components/http/www_static/polymer/states-cards.html

@@ -65,9 +65,11 @@
     },
 
     domReady: function() {
-      this.states = this.api.states
+      this.raw_states = this.api.states
 
       this.api.addEventListener('states-updated', this.statesUpdated.bind(this))
+
+      this.refilterStates();
     },
 
     statesUpdated: function() {