ES6 Polymer version

.eslintrc

@@ -0,0 +1,11 @@
+{
+  "extends": "eslint-config-airbnb",
+  "globals": {
+    "__DEV__": false,
+    "__DEMO__": false
+  },
+  "rules": {
+    "comma-dangle": [2, "always-multiline"],
+    "no-underscore-dangle": false
+  }
+}

.gitignore

@@ -0,0 +1,3 @@
+build/*
+node_modules/*
+bower_components/*

bower.json

@@ -0,0 +1,44 @@
+{
+  "name": "Home Assistant",
+  "version": "0.1.0",
+  "authors": [
+    "Paulus Schoutsen <[email protected]>"
+  ],
+  "main": "splash-login.html",
+  "license": "MIT",
+  "private": true,
+  "ignore": [
+    "bower_components"
+  ],
+  "devDependencies": {
+    "polymer": "Polymer/polymer#^1.0.0",
+    "webcomponentsjs": "Polymer/webcomponentsjs#^0.7",
+    "paper-header-panel": "PolymerElements/paper-header-panel#^1.0.0",
+    "paper-toolbar": "PolymerElements/paper-toolbar#^1.0.0",
+    "paper-menu": "PolymerElements/paper-menu#^1.0.0",
+    "iron-input": "PolymerElements/iron-input#^1.0.0",
+    "iron-icons": "PolymerElements/iron-icons#^1.0.0",
+    "iron-image": "PolymerElements/iron-image#^1.0.0",
+    "paper-toast": "PolymerElements/paper-toast#^1.0.0",
+    "paper-dialog": "PolymerElements/paper-dialog#^1.0.0",
+    "paper-dialog-scrollable": "polymerelements/paper-dialog-scrollable#^1.0.0",
+    "paper-spinner": "PolymerElements/paper-spinner#^1.0.0",
+    "paper-button": "PolymerElements/paper-button#^1.0.0",
+    "paper-input": "PolymerElements/paper-input#^1.0.0",
+    "paper-toggle-button": "PolymerElements/paper-toggle-button#^1.0.0",
+    "paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
+    "paper-item": "PolymerElements/paper-item#^1.0.0",
+    "paper-slider": "PolymerElements/paper-slider#^1.0.0",
+    "paper-checkbox": "PolymerElements/paper-checkbox#^1.0.0",
+    "paper-drawer-panel": "PolymerElements/paper-drawer-panel#^1.0.0",
+    "paper-scroll-header-panel": "polymerelements/paper-scroll-header-panel#^1.0.0",
+    "google-apis": "GoogleWebComponents/google-apis#0.8-preview",
+    "layout": "Polymer/layout",
+    "paper-styles": "polymerelements/paper-styles#^1.0.0",
+    "pikaday": "~1.3.2"
+  },
+  "resolutions": {
+    "polymer": "^1.0.0",
+    "webcomponentsjs": "^0.7.0"
+  }
+}

package.json

@@ -0,0 +1,29 @@
+{
+  "name": "home-assistant-polymer",
+  "version": "1.0.0",
+  "description": "A frontend for Home Assistant using the Polymer framework",
+  "scripts": {
+    "js_dev": "webpack --colors --progress -d --watch",
+    "js_dev_demo": "BUILD_DEMO=1 webpack --colors --progress -d --watch",
+    "js_prod": "BUILD_DEV=0 webpack --colors --progress -p -d",
+    "js_demo": "BUILD_DEV=0 BUILD_DEMO=1 webpack --colors --progress -p -d",
+    "frontend_html": "vulcanize --inline-css --inline-scripts --strip-comments src/home-assistant.html > build/frontend.vulcan.html",
+    "frontend_minify": "node scripts/minify.js",
+    "frontend_prod": "npm run js_prod && bower install && npm run frontend_html && npm run frontend_minify",
+    "frontend_demo": "npm run js_demo && bower install && npm run frontend_html && npm run frontend_minify"
+  },
+  "author": "Paulus Schoutsen <[email protected]> (http://paulusschoutsen.nl)",
+  "license": "MIT",
+  "devDependencies": {
+    "babel-core": "^5.6.18",
+    "babel-loader": "^5.3.1",
+    "bower": "^1.4.1",
+    "eslint-config-airbnb": "0.0.6",
+    "home-assistant-js": "git+https://github.com/balloob/home-assistant-js.git#d6159b2654e070e13017bc8f99418246c5112d9a",
+    "html-minifier": "^0.7.2",
+    "lodash": "^3.10.0",
+    "node-libs-browser": "^0.5.2",
+    "vulcanize": "^1.10.1",
+    "webpack": "^1.10.1"
+  }
+}

scripts/minify.js

@@ -0,0 +1,20 @@
+var minify = require('html-minifier');
+var fs = require('fs');
+
+var html = fs.readFileSync('build/frontend.vulcan.html').toString();
+
+    // removeComments: true,
+    // collapseWhitespace: true,
+var minifiedHtml = minify.minify(html, {
+    customAttrAssign: [/\$=/],
+    "removeComments": true,
+    "removeCommentsFromCDATA": true,
+    "removeCDATASectionsFromCDATA": true,
+    "collapseWhitespace": true,
+    "collapseBooleanAttributes": true,
+    "removeScriptTypeAttributes": true,
+    "removeStyleLinkTypeAttributes": true,
+    "minifyJS": true,
+});
+
+fs.writeFileSync('build/frontend.html', minifiedHtml);

src/cards/state-card-configurator.html

@@ -0,0 +1,15 @@
+<link rel='import' href='../../bower_components/polymer/polymer.html'>
+
+<link rel='import' href='./state-card-display.html'>
+<link rel='import' href='../components/state-info.html'>
+
+<dom-module id='state-card-configurator'>
+  <template>
+    <state-card-display state-obj='[[stateObj]]'></state-card-display>
+
+    <!-- pre load the image so the dialog is rendered the proper size -->
+    <template is='dom-if' if='[[stateObj.attributes.description_image]]'>
+      <img hidden src='[[stateObj.attributes.description_image]]' />
+    </template>
+  </template>
+</dom-module>

src/cards/state-card-configurator.js

@@ -0,0 +1,14 @@
+import Polymer from '../polymer';
+
+require('../components/state-info');
+require('./state-card-display');
+
+export default Polymer({
+  is: 'state-card-configurator',
+
+  properties: {
+    stateObj: {
+      type: Object,
+    },
+  },
+});

src/cards/state-card-content.html

@@ -0,0 +1,8 @@
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+
+<link rel="import" href="state-card-display.html">
+<link rel="import" href="state-card-toggle.html">
+<link rel="import" href="state-card-thermostat.html">
+<link rel="import" href="state-card-configurator.html">
+<link rel="import" href="state-card-scene.html">
+<link rel="import" href="state-card-media_player.html">

src/cards/state-card-content.js

@@ -0,0 +1,46 @@
+import Polymer from '../polymer';
+
+import stateCardType from '../util/state-card-type';
+
+require('./state-card-display');
+require('./state-card-toggle');
+require('./state-card-thermostat');
+require('./state-card-configurator');
+require('./state-card-scene');
+require('./state-card-media_player');
+
+export default Polymer({
+  is: 'state-card-content',
+
+  properties: {
+    stateObj: {
+      type: Object,
+      observer: 'stateObjChanged',
+    }
+  },
+
+  stateObjChanged: function(newVal, oldVal) {
+    var root = Polymer.dom(this);
+
+    if (!newVal) {
+      if (root.lastChild) {
+        root.removeChild(root.lastChild);
+      }
+      return;
+    }
+
+    var newCardType = stateCardType(newVal);
+
+    if (!oldVal || stateCardType(oldVal) != newCardType) {
+      if (root.lastChild) {
+        root.removeChild(root.lastChild);
+      }
+
+      var stateCard = document.createElement("state-card-" + newCardType);
+      stateCard.stateObj = newVal;
+      root.appendChild(stateCard);
+    } else {
+      root.lastChild.stateObj = newVal;
+    }
+  },
+});

src/cards/state-card-display.html

@@ -0,0 +1,22 @@
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+
+<link rel="import" href="../components/state-info.html">
+
+<dom-module id="state-card-display">
+  <style>
+  .state {
+    margin-left: 16px;
+    text-transform: capitalize;
+    font-weight: 300;
+    font-size: 1.3rem;
+    text-align: right;
+  }
+  </style>
+
+  <template>
+    <div class='horizontal justified layout'>
+      <state-info state-obj="[[stateObj]]"></state-info>
+      <div class='state'>[[stateObj.stateDisplay]]</div>
+    </div>
+  </template>
+</dom-module>

src/cards/state-card-display.js

@@ -0,0 +1,13 @@
+import Polymer from '../polymer';
+
+require('../components/state-info');
+
+export default Polymer({
+  is: 'state-card-display',
+
+  properties: {
+    stateObj: {
+      type: Object,
+    },
+  },
+});

src/cards/state-card-media_player.html

@@ -0,0 +1,41 @@
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+
+<link rel="import" href="../components/state-info.html">
+
+<dom-module id="state-card-media_player">
+  <style>
+  :host {
+    line-height: normal;
+  }
+
+  .state {
+    margin-left: 16px;
+    text-align: right;
+    overflow-x: hidden;
+  }
+
+  .main-text {
+      white-space: nowrap;
+      overflow-x: hidden;
+      text-overflow: ellipsis;
+      text-transform: capitalize;
+      font-weight: 300;
+      font-size: 1.3rem;
+  }
+
+  .secondary-text {
+      color: darkgrey;
+      margin-top: -2px;
+      font-size: 1rem;
+  }
+  </style>
+  <template>
+    <div class='horizontal justified layout'>
+      <state-info state-obj="[[stateObj]]"></state-info>
+      <div class='state'>
+        <div class='main-text'>[[computePrimaryText(stateObj, isPlaying)]]</div>
+        <div class='secondary-text'>[[computeSecondaryText(stateObj, isPlaying)]]</div>
+      </div>
+    </div>
+  </template>
+</dom-module>

src/cards/state-card-media_player.js

@@ -0,0 +1,50 @@
+import Polymer from '../polymer';
+
+require('../components/state-info');
+
+const PLAYING_STATES = ['playing', 'paused'];
+
+export default Polymer({
+  is: 'state-card-media_player',
+
+  properties: {
+    stateObj: {
+      type: Object,
+    },
+
+    isPlaying: {
+      type: Boolean,
+      computed: 'computeIsPlaying(stateObj)',
+    },
+  },
+
+  computeIsPlaying: function(stateObj) {
+    return PLAYING_STATES.indexOf(stateObj.state) !== -1;
+  },
+
+  computePrimaryText: function(stateObj, isPlaying) {
+    return isPlaying ? stateObj.attributes.media_title : stateObj.stateDisplay;
+  },
+
+  computeSecondaryText: function(stateObj, isPlaying) {
+    var text;
+
+    if (stateObj.attributes.media_content_type == 'music') {
+      return stateObj.attributes.media_artist;
+
+    } else if (stateObj.attributes.media_content_type == 'tvshow') {
+      text = stateObj.attributes.media_series_title;
+
+      if (stateObj.attributes.media_season && stateObj.attributes.media_episode) {
+        text += ` S${stateObj.attributes.media_season}E${stateObj.attributes.media_episode}`;
+      }
+      return text;
+
+    } else if (stateObj.attributes.app_name) {
+      return stateObj.attributes.app_name;
+
+    } else {
+      return '';
+    }
+  },
+});

src/cards/state-card-scene.html

@@ -0,0 +1,15 @@
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+
+<link rel="import" href="./state-card-display.html">
+<link rel="import" href="./state-card-toggle.html">
+
+<dom-module id="state-card-scene">
+  <template>
+    <template is='dom-if' if='[[allowToggle]]'>
+      <state-card-toggle state-obj="[[stateObj]]"></state-card-toggle>
+    </template>
+    <template is='dom-if' if='[[!allowToggle]]'>
+      <state-card-display state-obj="[[stateObj]]"></state-card-display>
+    </template>
+  </template>
+</dom-module>

src/cards/state-card-scene.js

@@ -0,0 +1,24 @@
+import Polymer from '../polymer';
+
+require('./state-card-display');
+require('./state-card-toggle');
+
+export default Polymer({
+  is: 'state-card-scene',
+
+  properties: {
+    stateObj: {
+      type: Object,
+    },
+
+    allowToggle: {
+      type: Boolean,
+      value: false,
+      computed: 'computeAllowToggle(stateObj)',
+    },
+  },
+
+  computeAllowToggle: function(stateObj) {
+    return stateObj.state === 'off' || stateObj.attributes.active_requested;
+  },
+});