Add global config dialog

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haiku-ui/haiku",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "A collection of cards and other web components for the Home Assistant Lovelace UI.",
   "private": false,
   "repository": {

src/cards/haiku-global-config.js

@@ -1,17 +1,26 @@
 import { StorageService } from '../services/storage-service.js';
+import { CustomizationService } from '../services/customization-service.js';
+import '../elements/haiku-global-config-dialog.js';
+import 'https://unpkg.com/[email protected]/lodash.js?module';
 
 /**
  * Haiku global config UI
  */
 export class HaikuGlobalConfig extends HTMLElement {
 
+  constructor() {
+    super();
+    this.customizationService = new CustomizationService(this);
+  }
+
   set hass(hass) {
     this.ha = hass;
 
     if (!this.initialized) {
       this.setAttribute('style', 'margin:0;');
       this.initStylesheet();
       this.initTheme();
+      this.initConfigButton();
       this.initialized = true;
     }
   }
@@ -37,11 +46,37 @@ export class HaikuGlobalConfig extends HTMLElement {
     if (!existingCssClasses) {
       document.body.setAttribute('class', theme);
     }
-    else if (existingCssClasses.indexOf(theme) === -1) {
-      document.body.setAttribute('class', `${existingCssClasses} ${theme}`);
+    else {
+      let cssClasses = existingCssClasses.split(' ');
+      cssClasses = _.filter(cssClasses, (cssClass) => {
+        return cssClass.indexOf('haiku-') === -1;
+      });
+      document.body.setAttribute('class', `${cssClasses.join(' ')} ${theme}`);
     }
   }
 
+  initConfigButton() {
+    if (!document.getElementById('haiku_config_button')) {
+      const configButton = document.createElement('button');
+      configButton.setAttribute('class', 'haiku-config-button');
+      const icon = document.createElement('ha-icon');
+      icon.setAttribute('icon', 'mdi:settings');
+      configButton.appendChild(icon);
+      configButton.onclick = () => {
+        this._openGlobalConfigDialog();
+      };
+      document.body.appendChild(configButton);
+    }
+  }
+
+  _openGlobalConfigDialog() {
+    const $this = this;
+    this.customizationService.openGlobalConfigDialog(() => {
+      console.log('saved...');
+      $this.initTheme();
+    });
+  }
+
   setConfig(config) {
     this.config = config;
   }

src/elements/haiku-global-config-dialog.js

@@ -0,0 +1,62 @@
+import { html, LitElement } from 'https://unpkg.com/@polymer/lit-element@^0.5.2/lit-element.js?module';
+import { StorageService } from '../services/storage-service.js';
+import { EventService } from '../services/event-service.js';
+import 'https://unpkg.com/[email protected]/lodash.js?module';
+
+export class HaikuGlobalConfigDialog extends LitElement {
+
+  constructor() {
+    super();
+  }
+
+  static get properties() {
+    return {
+      hass: Object
+    };
+  }
+
+  _render() {
+    return html`
+      {{ css }}
+      <app-toolbar>
+        <paper-icon-button icon="hass:close" dialog-dismiss=""></paper-icon-button>
+        <div main-title="">Haiku Global Settings</div>
+      </app-toolbar>
+
+      <div class="form">
+        <paper-dropdown-menu id="theme" label="Theme">
+          <paper-listbox slot="dropdown-content" attr-for-selected="value" selected$="${ this._getCurrentTheme() }">
+            <paper-item value="haiku-none">None</paper-item>
+            <paper-item value="haiku-light">Haiku Light</paper-item>
+            <paper-item value="haiku-dark">Haiku Dark</paper-item>
+          </paper-listbox>
+        </paper-dropdown-menu>
+        <paper-button on-click="${ (e) => this.handleClick(e) }">Save</paper-button>
+      </div>
+    `;
+  }
+
+  _getCurrentTheme() {
+    const storageService = new StorageService();
+    let theme = storageService.getItem('theme');
+    if (!theme) {
+      theme = 'haiku-none';
+      storageService.setItem('theme', 'haiku-none');
+    }
+    return theme;
+  }
+
+  handleClick() {
+    const storageService = new StorageService();
+    const eventService = new EventService();
+    const selectedItem = this.shadowRoot.querySelector('#theme').selectedItem;
+    let theme = null;
+    if (selectedItem) {
+      theme = selectedItem.getAttribute('value');
+    }
+    storageService.setItem('theme', theme);
+    eventService.fire(this, 'haiku-customization-complete');
+  }
+}
+
+customElements.define('haiku-global-config-dialog', HaikuGlobalConfigDialog);

src/elements/haiku-global-config-dialog.scss

@@ -0,0 +1,12 @@
+.form {
+  padding: 0 2rem;
+
+  & > paper-button {
+    float: right;
+    margin: 1rem 0;
+  }
+
+  & > paper-dropdown-menu {
+    width: 100%;
+  }
+}

src/elements/haiku-thermostat-tile.js

@@ -15,8 +15,6 @@ export class HaikuThermostatTile extends HaikuTileBase {
   }
 
   _render({ entity }) {
-    console.log(entity);
-    // console.log(entity.state);
     return html`
       {{ css }}
       <div class="stat-container"

src/services/customization-service.js

@@ -22,6 +22,22 @@ export class CustomizationService {
     this.settingsDialog.open();
   }
 
+  openGlobalConfigDialog(callback) {
+    this.settingsDialog = this._findMoreInfoDialog({
+      'entity_id': null
+    });
+    this.settingsDialog.fire('more-info-page', { page: 'haiku_settings' });
+    this.settingsDialogContent = document.createElement('haiku-global-config-dialog');
+    this.settingsDialogContent.addEventListener('haiku-customization-complete', () => {
+      callback();
+      this._handleCustomizationComplete();
+    });
+    this.settingsDialog.shadowRoot.appendChild(this.settingsDialogContent);
+    this.settingsDialog.addEventListener('iron-overlay-canceled', this.handleDialogCancel);
+    this.settingsDialog.addEventListener('iron-overlay-closed', this.handleDialogCancel);
+    this.settingsDialog.open();
+  }
+
   _findMoreInfoDialog(entity) {
     const hassEl = document.getElementsByTagName('home-assistant')[0];
     let dialog = hassEl.shadowRoot.querySelector('ha-more-info-dialog');
@@ -43,7 +59,10 @@ export class CustomizationService {
     if (event && event.path[0].nodeName !== 'HA-MORE-INFO-DIALOG') {
       return;
     }
-    const el = this.settingsDialog.shadowRoot.querySelector('haiku-settings-dialog');
+    let el = this.settingsDialog.shadowRoot.querySelector('haiku-settings-dialog');
+    if (!el) {
+      el = this.settingsDialog.shadowRoot.querySelector('haiku-global-config-dialog');
+    }
     this.settingsDialog.shadowRoot.removeChild(el);
     this.settingsDialog.fire('more-info-page', { page: null });
     this.settingsDialog.removeEventListener('iron-overlay-canceled', this.handleDialogCancel);

src/styles/_tiles.scss

@@ -43,6 +43,7 @@
   margin: 0 auto;
   text-align: center;
   color: #fff;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.85);
 
   &.status-normal {
     border-color: #bada55;
@@ -65,6 +66,7 @@
   }
 
   & > span {
+    @include overlay-text();
     font-size: 11px;
     display: block;
     margin: 0 auto;
@@ -80,6 +82,7 @@
   }
 
   & > label {
+    @include overlay-text();
     font-size: 32px;
     text-transform: uppercase;
     letter-spacing: -1px;

src/styles/global/haiku.scss

@@ -1 +1,27 @@
 @import './themes/theme-dark.scss';
+
+.haiku-config-button {
+  position: fixed;
+  width: 50px;
+  height: 50px;
+  background-image: linear-gradient(to bottom, #555 0%, #444 100%);
+  border-radius: 50%;
+  border: none;
+  bottom: 20px;
+  right: 20px;
+  z-index: 99999;
+  outline: none;
+  color: white;
+  text-shadow: 0px 0px 9px rgba(0, 0, 0, 0.9);
+  cursor: pointer;
+  box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15);
+
+  ha-icon {
+    transition: all 0.2s;
+    transform: none;
+  }
+
+  &:hover ha-icon {
+    transform: rotate(-100deg);
+  }
+}