Added weather platform card, with forecast graph (#160)

* Added weather platform card, with forecast graph

* Changed login page to a form, allowing autofill

* Reverted incorrect login form commit

* Moved to a seperate weather card, instead of using a state-card, added basic current information

* Some cleanup, set graph line to be smooth

* Removed some unnecessary stuff

* Removed leftover space

src/cards/ha-card-chooser.html

@@ -4,6 +4,7 @@
 <link rel='import' href='./ha-entities-card.html'>
 <link rel='import' href='./ha-introduction-card.html'>
 <link rel='import' href='./ha-media_player-card.html'>
+<link rel='import' href='./ha-weather-card.html'>
 <link rel='import' href='./ha-persistent_notification-card.html'>
 
 <script>

src/cards/ha-weather-card.html

@@ -0,0 +1,137 @@
+<link rel='import' href='../../bower_components/polymer/polymer.html'>
+
+<link rel='import' href='../../bower_components/iron-flex-layout/iron-flex-layout-classes.html'>
+
+<link rel='import' href='../../bower_components/google-apis/google-legacy-loader.html'>
+
+<link rel='import' href='../components/ha-card.html'>
+
+<dom-module id='ha-weather-card'>
+  <template>
+    <style>
+        .content {
+          padding: 0 16px 16px;
+        }
+
+        .attribution {
+          color:grey;
+        }
+    </style>
+    <google-legacy-loader on-api-load='googleApiLoaded'></google-legacy-loader>
+    <ha-card header='[[computeTitle(stateObj)]]'>
+      <div class='content'>
+        <template is='dom-repeat' items='[[computeCurrentWeather(stateObj)]]'>
+          <div>[[item.key]]: [[item.value]]</div>
+        </template>
+        <div id='chart_area'></div>
+        <div class='attribution'>[[computeAttribution(stateObj)]]</div>
+      </div>
+    </ha-card>
+  </template>
+</dom-module>
+
+<script>
+  Polymer({
+    is: 'ha-weather-card',
+
+    properties: {
+      hass: {
+        type: Object,
+      },
+
+      stateObj: {
+        type: Object,
+        observer: 'checkRequirements'
+      },
+    },
+
+    computeTitle: function (stateObj) {
+      return stateObj.attributes.friendly_name;
+    },
+
+    computeAttribution: function (stateObj) {
+      return stateObj.attributes.attribution;
+    },
+
+    computeCurrentWeather: function (stateObj) {
+      return Object.keys(stateObj.attributes).filter(function (key) {
+        return ['attribution', 'forecast', 'friendly_name'].indexOf(key) === -1;
+      }).map(function (key) {
+        return {
+          key: key,
+          value: stateObj.attributes[key]
+        };
+      });
+    },
+
+    getDataArray: function () {
+      var dataArray = [];
+      var data = this.stateObj.attributes.forecast;
+      var i;
+
+      if (!this.stateObj.attributes.forecast) {
+        return [];
+      }
+
+      // Current values
+      dataArray.push([new Date(), this.stateObj.attributes.temperature]);
+
+      for (i = 0; i < data.length; i++) {
+        dataArray.push([new Date(data[i].datetime), data[i].temperature]);
+      }
+
+      return dataArray;
+    },
+
+    checkRequirements: function () {
+      if (!this.stateObj) {
+        return;
+      }
+
+      if (!window.google) {
+        return;
+      }
+
+      if (!this.chartEngine) {
+        this.chartEngine = new window.google.visualization.LineChart(document.getElementById('chart_area'));
+      }
+
+      this.drawChart();
+    },
+
+    drawChart: function () {
+      var dataGrid = new window.google.visualization.DataTable();
+      var options = {
+        legend: {
+          position: 'top'
+        },
+        interpolateNulls: true,
+        titlePosition: 'none',
+        chartArea: {
+          left: 25,
+          top: 5,
+          height: '100%',
+          width: '90%',
+          bottom: 25,
+        },
+        curveType: 'function',
+      };
+
+      dataGrid.addColumn('datetime', 'Time');
+      dataGrid.addColumn('number', 'Temperature');
+
+      dataGrid.addRows(this.getDataArray());
+
+      this.chartEngine.draw(dataGrid, options);
+    },
+
+    googleApiLoaded: function () {
+      window.google.load('visualization', '1', {
+        packages: ['corechart'],
+        callback: function () {
+          this.checkRequirements();
+        }.bind(this),
+      });
+    },
+  });
+</script>

src/components/ha-cards.html

@@ -85,6 +85,7 @@
     camera: 4,
     media_player: 3,
     persistent_notification: 0,
+    weather: 4,
   };
 
   var PRIORITY = {