fixing bugs, imroving code...hopefully

web/app/pods/components/bridge-finder/component.js

@@ -52,7 +52,7 @@ export default Component.extend({
 
   // find the bridge ip here
   init() {
-    this._super();
+    this._super(...arguments);
 
     if(this.get('bridgeIp') === null) {
       $.ajax('https://www.meethue.com/api/nupnp', {
@@ -96,13 +96,15 @@ export default Component.extend({
         contentType: 'application/json',
         type: 'POST'
       }).done((result, status)=>{
+        if(!this.isDestroyed){
+          this.set('bridgeAuthenticateReachedStatus', status);
+
           if (status === 'success' && !result[0].error) {
             this.clearBridgePingIntervalHandle();
-          this.set('bridgeUsername', result[0].success.username);
             this.get('storage').set('huegasm.bridgeUsername', result[0].success.username);
+            this.set('bridgeUsername', result[0].success.username);
+          }
         }
-
-        this.set('bridgeAuthenticateReachedStatus', status);
       }).fail(()=>{
         this.clearBridgePingIntervalHandle();
         this.set('error', true);
@@ -122,7 +124,6 @@ export default Component.extend({
     retry(){
       this.onBridgeIpChange();
     },
-
     findBridgeByIp() {
       let manualBridgeIp = this.get('manualBridgeIp');
 

web/app/pods/components/hue-controls/component.js

@@ -1,6 +1,7 @@
 import Ember from 'ember';
 
 const {
+  A,
   Component,
   computed,
   isEmpty,
@@ -12,11 +13,8 @@ const {
 export default Component.extend({
   classNames: ['container-fluid'],
   elementId: 'hue-controls',
-  bridgeIp: null,
-  manualBridgeIp: null,
-  bridgeUsername: null,
   lightsData: null,
-  activeLights: [],
+  activeLights: A(),
   tabList: ["Lights", "Music"],
   selectedTab: 1,
   pauseLightUpdates: false,
@@ -60,7 +58,7 @@ export default Component.extend({
       });
 
       if(haveTooltip) {
-        run.once(this, function(){
+        run.scheduleOnce('afterRender', function(){
           $('.bootstrap-tooltip').tooltip();
         });
       }
@@ -70,7 +68,7 @@ export default Component.extend({
   },
 
   init() {
-    this._super();
+    this._super(...arguments);
 
     if(!this.get('trial')) {
       this.updateLightData();
@@ -85,11 +83,7 @@ export default Component.extend({
   updateLightData(){
     let fail = ()=>{
       clearInterval(this.get('lightsDataIntervalHandle'));
-
+      this.send('clearBridge');
-      this.get('storage').remove('huegasm.bridgeIp');
-      this.get('storage').remove('huegasm.bridgeUsername');
-
-      location.reload();
     };
 
     if(!this.get('pauseLightUpdates')){

web/app/pods/components/hue-controls/template.hbs

@@ -2,13 +2,13 @@
   <div class="row navigation">
     <div class="col-sm-6 col-sm-offset-3 col-xs-10">
       {{#each tabData as |tab|}}
-        <span class="navigation-item pointer {{if tab.selected "active"}} text-uppercase" {{action "changeTab" tab.name}}>{{tab.name}}</span>
+        <span class="navigation-item pointer text-uppercase {{if tab.selected "active"}}" {{action "changeTab" tab.name}}>{{tab.name}}</span>
       {{/each}}
     </div>
     <div id="settings" class="col-xs-2">
       {{#paper-menu as |menu|}}
         {{#paper-button target=menu action="toggleMenu" icon-button=true}}
-          {{paper-icon "settings" class=dimmerOnClass id="settings-icon" size=3}}
+          {{paper-icon "settings" class=dimmerOnClass id="settings-icon"}}
         {{/paper-button}}
       {{else}}
         {{#paper-menu-item action="clearBridge"}}
@@ -27,7 +27,9 @@
     </div>
   </div>
 
-  {{lights-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights trial=trial active=lightsTabSelected colorLoopOn=colorLoopOn dimmerOn=dimmerOn}}
+  {{light-group lightsData=lightsData activeLights=activeLights syncLight=syncLight apiURL=apiURL classNames="horizontal-light-group" dimmerOn=dimmerOn id="active-lights"}}
+
+  {{lights-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights syncLight=syncLight trial=trial active=lightsTabSelected colorLoopOn=colorLoopOn dimmerOn=dimmerOn}}
 
   {{music-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights active=musicTabSelected pauseLightUpdates=pauseLightUpdates dimmerOn=dimmerOn storage=storage colorLoopOn=colorLoopOn action="startIntro"}}
 {{/if}}

web/app/pods/components/huegasm-app/component.js

@@ -40,7 +40,7 @@ export default Component.extend({
   }),
 
   init(){
-    this._super();
+    this._super(...arguments);
 
     let storage = new window.Locally.Store({compress: true});
     this.set('storage', storage);

web/app/pods/components/huegasm-app/template.hbs

@@ -32,7 +32,7 @@
   <div id="footer-text">
     © {{year}}
 
-    <a href="http://www.egorphilippov.me" div="" target="_blank" rel="noopener noreferrer">
+    <a href="http://www.egorphilippov.me" target="_blank" rel="noopener noreferrer">
       Egor Philippov
     </a>
   </div>

web/app/pods/components/light-group/component.js

@@ -1,26 +1,30 @@
 import Ember from 'ember';
 
 const {
+  A,
   Component,
-  observer,
+  computed,
   isEmpty,
-  $,
+  $
-  A
 } = Ember;
 
 export default Component.extend({
   classNames: ['light-group'],
   isHovering: false,
-  lightsList: A(),
+  activeLights: A(),
 
   // list of all the lights in the hue system
-  onLightsDataChange: observer('lightsData', 'activeLights.[]', 'dimmerOn', function(){
+  lightsList: computed('lightsData', 'activeLights.[]', 'dimmerOn', function(){
-    if(!this.get('isHovering')){
     let lightsData = this.get('lightsData'),
+      activeLights = this.get('activeLights'),
+      dimmerOn = this.get('dimmerOn'),
       lightsList = A(),
-        type;
+      type,
+      activeClass;
 
     for (let key in lightsData) {
+      activeClass = 'light-active';
+
       if (lightsData.hasOwnProperty(key) && lightsData[key].state.reachable) {
         switch(lightsData[key].modelid){
           case 'LCT001':
@@ -63,9 +67,11 @@ export default Component.extend({
             type = 'a19';
         }
 
-          let activeClass = 'light-active';
+        if(dimmerOn){
+          type += 'w';
+        }
 
-          if(!this.get('activeLights').includes(key)){
+        if(!activeLights.includes(key)){
           activeClass = 'light-inactive';
         }
 
@@ -73,31 +79,33 @@ export default Component.extend({
       }
     }
 
-      this.set('lightsList', lightsList);
+    return lightsList;
-    }
   }),
 
-  didInsertElement() {
+  init(){
-    if(this.get('lightsData')){
+    this._super(...arguments);
-      this.onLightsDataChange();
+
+    let lightsData = this.get('lightsData'),
+      activeLights = this.get('activeLights');
+
+    for (let key in lightsData) {
+      if (lightsData.hasOwnProperty(key) && lightsData[key].state.reachable) {
+        activeLights.pushObject(key);
+      }
     }
   },
 
   actions: {
-    clickLight(id, data){
+    clickLight(id){
-      let light = $('.light'+id);
+      let activeLights = this.get('activeLights'),
+        lightId = activeLights.indexOf(id);
 
-      if(!light.hasClass('bootstrap-tooltip')){
+      if(lightId !== -1){
-        light = light.parent();
+        activeLights.removeObject(id);
+      } else {
+        activeLights.pushObject(id);
+        this.set('syncLight', id);
       }
-
-      if(light.hasClass('light-inactive')){
-        light.addClass('light-active').removeClass('light-inactive');
-      } else if(light.hasClass('light-active')){
-        light.addClass('light-inactive').removeClass('light-active');
-      }
-
-      this.sendAction('action', id, data);
     },
     lightStartHover(id){
       let hoveredLight = this.get('lightsList').filter(function(light){
@@ -128,7 +136,6 @@ export default Component.extend({
       }
 
       this.set('isHovering', false);
-      this.onLightsDataChange();
     }
   }
 });

web/app/pods/components/light-group/template.hbs

@@ -1,5 +1,5 @@
 {{#each lightsList as |light|}}
-  <div class="{{light.activeClass}} bootstrap-tooltip light{{light.id}}" data-toggle="tooltip" data-placement="top auto" data-title={{light.name}} {{action "clickLight" light.id light.data}} {{action "lightStartHover" light.id on="mouseEnter"}} {{action "lightStopHover" light.id on="mouseLeave"}}>
+  <div class="{{light.activeClass}} bootstrap-tooltip light{{light.id}}" data-toggle="tooltip" data-placement="top auto" data-title={{light.name}} {{action "clickLight" light.id}} {{action "lightStartHover" light.id on="mouseEnter"}} {{action "lightStopHover" light.id on="mouseLeave"}}>
-    <img class="hueLight" width="40" src="assets/images/lights/{{light.type}}{{if dimmerOn "w"}}.svg">
+    <img class="hueLight" width="40" src="assets/images/lights/{{light.type}}.svg">
   </div>
 {{/each}}

web/app/pods/components/lights-tab/component.js

@@ -12,11 +12,6 @@ export default Component.extend({
   classNameBindings: ['active::hidden'],
   elementId: 'lights-tab',
 
-  activeLights: [],
-  lightsData: null,
-
-  lightsDataIntervalHandle: null,
-
   colorPickerDisplayed: false,
 
   rgb: [255, 255, 255],
@@ -44,7 +39,9 @@ export default Component.extend({
 
   // determines the average brightness of the hue system for the brightness slider
   lightsBrightness: computed('lightsData', function(){
-    let lightsData = this.get('lightsData'), activeLights = this.get('activeLights'), lightsBrightness = 0;
+    let lightsData = this.get('lightsData'),
+      activeLights = this.get('activeLights'),
+      lightsBrightness = 0;
 
     activeLights.forEach(function(light){
       lightsBrightness += lightsData[light].state.bri;
@@ -153,9 +150,31 @@ export default Component.extend({
     }
   }),
 
+  // sync the current light settings to the newly added light
+  onaActiveLightsChange: observer('syncLight', function(){
+    let options = {
+      on: this.get('lightsOn'),
+      bri: this.get('lightsBrightness'),
+      effect: this.get('colorLoopOn') ? 'colorloop' : 'none'
+    }, rgb = this.get('rgb'),
+      syncLight = this.get('syncLight');
+
+    if(rgb[0] !== 255 && rgb[1] !== 255 && rgb[2] !== 255) {
+      options['xy'] = this.rgbToXy(rgb[0], rgb[1], rgb[2]);
+    }
+
+    options['transitiontime'] = 0;
+
+    $.ajax(this.get('apiURL') + '/lights/' + syncLight + '/state', {
+      data: JSON.stringify(options),
+      contentType: 'application/json',
+      type: 'PUT'
+    });
+  }),
+
   didInsertElement() {
     $(document).click((event)=>{
-      if(this.get('colorPickerDisplayed') && !event.target.classList.includes('color') && !$(event.target).closest('.color-picker, #color-row').length) {
+      if(this.get('colorPickerDisplayed') && !event.target.classList.contains('color') && !$(event.target).closest('.color-picker, #color-row').length) {
         this.toggleProperty('colorPickerDisplayed');
       }
     });
@@ -166,39 +185,12 @@ export default Component.extend({
   },
 
   actions: {
-    clickLight(light){
-      let activeLights = this.get('activeLights'),
-        lightId = activeLights.indexOf(light);
-
-      if(lightId !== -1){
-        activeLights.removeObject(light);
-      } else {
-        activeLights.pushObject(light);
-
-        // sync the current light settings to the newly added light
-        let options = {on: this.get('lightsOn'), bri: this.get('lightsBrightness'), effect: this.get('colorLoopOn') ? 'colorloop' : 'none'},
-          rgb = this.get('rgb');
-
-        if(rgb[0] !== 255 && rgb[1] !== 255 && rgb[2] !== 255) {
-          options['xy'] = this.rgbToXy(rgb[0], rgb[1], rgb[2]);
-        }
-
-        options['transitiontime'] = 0;
-
-        $.ajax(this.get('apiURL') + '/lights/' + light + '/state', {
-          data: JSON.stringify(options),
-          contentType: 'application/json',
-          type: 'PUT'
-        });
-      }
-    },
     toggleColorPicker() {
       this.toggleProperty('colorPickerDisplayed');
     }
   },
 
   // **************** STROBE LIGHT START ****************
-
   strobeOn: false,
 
   strobeOnInervalHandle: null,

web/app/pods/components/lights-tab/template.hbs

@@ -1,8 +1,4 @@
 {{#paper-list}}
-  {{#paper-item class="item"}}
-    {{light-group lightsData=lightsData activeLights=activeLights action='clickLight' apiURL=apiURL classNames="horizontal-light-group" dimmerOn=dimmerOn id="active-lights"}}
-  {{/paper-item}}
-
   {{#paper-item}}
     {{paper-icon "power-settings-new" class=dimmerOnClass}}
     <p data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip lights-control-tooltip" data-title="Turn the selected lights on/off">Power</p>

web/app/pods/components/music-tab/component.js

@@ -315,7 +315,7 @@ export default Component.extend(helperMixin, visualizerMixin, {
   },
 
   init() {
-    this._super();
+    this._super(...arguments);
 
     window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame;
     window.cancelAnimationFrame = window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || window.msCancelAnimationFrame;
@@ -361,8 +361,6 @@ export default Component.extend(helperMixin, visualizerMixin, {
   },
 
   didInsertElement() {
-    this._super();
-
     let self = this;
 
     // file input code

web/app/styles/app.scss

@@ -63,7 +63,7 @@ body, button {
   text-align: right;
 }
 
-.settings::before {
+.settings:before {
   transition: 0.1s all ease-in-out;
 }
 

web/app/styles/hue-controls.scss

@@ -1,5 +1,8 @@
 #lights-tab {
   min-height: 400px;
+  md-list {
+    padding-top: 0;
+  }
 }
 
 .lights-control-tooltip + .tooltip {
@@ -27,12 +30,13 @@
 
 .navigation {
   text-align: center;
-  padding: 30px 0 10px 0;
+  padding: 10px 0 0 0;
 }
 
 .navigation-item {
   font-size: 18px;
   padding: 0 10px 0 10px;
+  line-height: 3;
 }
 
 .navigation-item.active {

web/app/styles/light-group.scss

@@ -1,5 +1,6 @@
 .light-group {
-  margin: 0 auto 0 auto;
+  margin: 0 auto 10px auto;
+  text-align: center;
   .tooltip.top {
     margin-top: 4px;
     margin-left: 0;