Reshuffle the UI, groups still WIP

app/components/bridge-controls.js

@@ -7,19 +7,7 @@ export default Em.Component.extend({
 
   groupsData: null,
   lightsData: null,
-  activeLights: null,
-
-  numLights: function(){
-    var lightsData = this.get('lightsData'), numLights = 0;
-
-    for (let key in this.get('lightsData')) {
-      if(lightsData.hasOwnProperty(key)){
-        numLights++;
-      }
-    }
-
-    return numLights;
-  }.property('lightsData'),
+  activeLights: [],
 
   apiURL: function(){
       return 'http://' + this.get('bridgeIp') + '/api/' + this.get('bridgeUsername');
@@ -38,11 +26,49 @@ export default Em.Component.extend({
     this.set('lightsDataIntervalHandle', setInterval(this.updateLightData.bind(this), 1000));
   },
 
+  tabList: ["Lights", "Scenes", "Party"],
+  selectedTab: 0,
+  tabData: function(){
+    var tabData = [], selectedTab = this.get('selectedTab');
+
+    this.get('tabList').forEach(function(tab, i){
+      var selected = false;
+
+      if(i === selectedTab){
+        selected = true;
+      }
+
+      tabData.push({"name": tab, "selected": selected });
+    });
+
+    return tabData;
+  }.property('tabList', 'selectedTab'),
+
+  lightsTabSelected: Em.computed.equal('selectedTab', 0),
+  scenesTabSelected: Em.computed.equal('selectedTab', 1),
+  partyTabSelected: Em.computed.equal('selectedTab', 2),
+
+  actions: {
+    changeTab: function(tabName){
+      this.set('selectedTab', this.get('tabList').indexOf(tabName));
+    }
+  },
+
   updateLightData: function(){
     var self = this;
 
     Em.$.get(this.get('apiURL') + '/lights', function (result, status) {
       if (status === 'success' && JSON.stringify(self.get('lightsData')) !== JSON.stringify(result) ) {
+        if(self.get('activeLights').length === 0){
+          var ids = [];
+          for (let key in result) {
+            if(result.hasOwnProperty(key) && result[key].state.reachable){
+              ids.push(key);
+            }
+          }
+          self.set('activeLights', ids);
+        }
+
         self.set('lightsData', result);
       } else if(status !== 'success' ) {
         // something went terribly wrong ( user got unauthenticated? ) and we'll need to start all over

app/components/controls/group-control.js

@@ -0,0 +1,46 @@
+import Em from 'ember';
+
+export default Em.Component.extend({
+  classNames: ['innerControlFrame'],
+
+  tagName: null,
+
+  groupSelection: null,
+
+  actions: {
+    selectGroup: function(selection){
+      this.set('groupSelection', selection);
+    },
+
+    toggleAddGroupsModal: function(){
+      this.toggleProperty('isShowingAddGroupsModal');
+    }
+  },
+
+  groupsArrData: function(){
+    var groupsData = this.get('groupsData'), lightsData = this.get('lightsData'), groupsArrData = [], ids = [];
+
+    for (let key in lightsData) {
+      if(lightsData.hasOwnProperty(key) && lightsData[key].state.reachable){
+        ids.push(key);
+      }
+    }
+    groupsArrData.push({name: 'All', data: {lights: ids}});
+
+    for (let key in groupsData) {
+      if (groupsData.hasOwnProperty(key)) {
+        groupsArrData.push({name: groupsData[key].name, data: {lights: groupsData[key].lights, key: key}});
+      }
+    }
+
+    return groupsArrData;
+  }.property('groupsData', 'lightsData'),
+
+  onGroupSelectionChanged: function(){
+    var groupSelection = this.get('groupSelection');
+    debugger;
+    if(!Em.isNone(groupSelection)){
+      this.set('activeLights', groupSelection.lights);
+    }
+  }.observes('groupSelection')
+});

app/components/controls/light-control.js

@@ -0,0 +1,87 @@
+import Em from 'ember';
+
+export default Em.Component.extend({
+
+  classNames: ['innerControlFrame'],
+
+  lightsDataIntervalHandle: null,
+
+  modalData: null,
+  isShowingLightsModal: false,
+  isShowingAddGroupsModal: false,
+  actions: {
+    selectLight: function(id, data){
+      if(this.get('isShowingLightsModal')){
+        this.set('modalData', {data:data, id:id});
+      }
+
+      this.toggleProperty('isShowingLightsModal');
+    }
+  },
+
+  // determines whether the lights are on/off for the lights switch
+  lightsOn: function(){
+    var lightsData = this.get('lightsData');
+
+    return this.get('activeLights').some(function(light) {
+      return lightsData[light].state.on === true;
+    });
+  }.property('lightsData', 'activeLights'),
+
+  // determines the average brightness of the hue system for the brightness slider
+  lightsBrightness: function(){
+    var lightsData = this.get('lightsData'), activeLights = this.get('activeLights'), lightsBrightness = 0;
+
+    activeLights.forEach(function(light){
+      lightsBrightness += lightsData[light].state.bri;
+    });
+
+    return lightsBrightness/activeLights.length;
+  }.property('lightsData'),
+
+  brightnessControlDisabled: Em.computed.not('lightsOn'),
+
+  onLightsOnChange: function(){
+    var lightsData = this.get('lightsData'), activeLights = this.get('activeLights'), lightsOn = this.get('lightsOn'), self = this;
+
+    var lightsOnSystem = activeLights.some(function(light) {
+      return lightsData[light].state.on === true;
+    });
+
+    // if the internal lights state is different than the one from lightsData ( user manually toggled the switch ), send the request to change the bulbs state
+    if(lightsOn !== lightsOnSystem){
+      activeLights.forEach(function (light) {
+        Em.$.ajax(self.get('apiURL') + '/lights/' + light + '/state', {
+          data: JSON.stringify({"on": lightsOn}),
+          contentType: 'application/json',
+          type: 'PUT'
+        });
+      });
+    }
+  }.observes('lightsOn'),
+
+  onBrightnessChanged: function(){
+    var lightsData = this.get('lightsData'), lightsBrightnessSystem = false, lightsBrightness = this.get('lightsBrightness'), activeLights = this.get('activeLights'), self = this;
+
+    activeLights.forEach(function(light){
+      lightsBrightnessSystem += lightsData[light].state.bri;
+    });
+
+    lightsBrightnessSystem /= activeLights.length;
+
+    // if the internal lights state is different than the one from lightsData ( user manually toggled the switch ), send the request to change the bulbs state
+    if(lightsBrightness !== lightsBrightnessSystem){
+      activeLights.forEach(function(light){
+        Em.$.ajax(self.get('apiURL')  + '/lights/' + light + '/state', {
+          data: JSON.stringify({"bri": lightsBrightness}),
+          contentType: 'application/json',
+          type: 'PUT'
+        });
+      });
+    }
+  }.observes('lightsBrightness'),
+
+  lightsOnTxt: function(){
+    return this.get('lightsOn') ? 'On' : 'Off';
+  }.property('lightsOn')
+});

app/components/controls/lights-control.js

@@ -1,169 +0,0 @@
-import Em from 'ember';
-
-export default Em.Component.extend({
-
-  lightsDataIntervalHandle: null,
-
-  apiURL: null,
-
-  lightsData: null,
-  activeLights: null,
-
-  groupSelection: null,
-  groupsData: null,
-  groupsArrData: function(){
-    var groupsData = this.get('groupsData'), groupsArrData = [];
-
-    for (var key in groupsData) {
-      if (groupsData.hasOwnProperty(key)) {
-        groupsArrData.push({name: groupsData[key].name, id: key});
-      }
-    }
-
-    return groupsArrData;
-  }.property('groupsData'),
-
-  onGroupSelectionChange: function(){
-    debugger;
-  }.observes('groupSelection'),
-
-  modalData: null,
-  isShowingLightsModal: false,
-  actions: {
-    clickLight: function(id, data){
-      this.set('modalData', {data:data, id:id});
-      this.toggleProperty('isShowingLightsModal');
-    }
-  },
-
-  // determines whether the lights are on/off for the lights switch
-  lightsOn: function(){
-    var lightsData = this.get('lightsData');
-
-    for (var key in lightsData) {
-      if (lightsData.hasOwnProperty(key)) {
-        if(lightsData[key].state.on){
-          return true;
-        }
-      }
-    }
-
-    return false;
-  }.property('lightsData'),
-
-  // determines the average brightness of the hue system for the brightness slider
-  lightsBrightness: function(){
-    var lightsData = this.get('lightsData'), lightsBrightness = 0;
-
-    for (var key in lightsData) {
-      if (lightsData.hasOwnProperty(key)) {
-        lightsBrightness += lightsData[key].state.bri;
-      }
-    }
-
-    return lightsBrightness/this.get('lightsList').length;
-  }.property('lightsData', 'lightsList'),
-
-  // list of all the lights in the hue system
-  lightsList: function(){
-    var lightsData = this.get('lightsData'), lightsList = [];
-    for (var key in lightsData) {
-      if (lightsData.hasOwnProperty(key)) {
-        switch(lightsData[key].modelid){
-          case 'LCT001':
-            lightsList.push({type: 'a19', name: lightsData[key].name, id: key, data: lightsData[key] });
-            break;
-          case 'LCT002':
-            lightsList.push({type: 'br30', name: lightsData[key].name, id: key, data: lightsData[key]});
-            break;
-          case 'LCT003':
-            lightsList.push({type: 'gu10', name: lightsData[key].name, id: key, data: lightsData[key]});
-            break;
-          case 'LST001':
-            lightsList.push({type: 'lightstrip', name: lightsData[key].name, id: key, data: lightsData[key]});
-            break;
-          case 'LLC010':
-            lightsList.push({type: 'lc_iris', name: lightsData[key].name, id: key, data: lightsData[key]});
-            break;
-          case 'LLC011':
-            lightsList.push({type: 'lc_bloom', name: lightsData[key].name, id: key, data: lightsData[key]});
-            break;
-          case 'LLC012':
-            lightsList.push({type: 'lc_bloom', name: lightsData[key].name, id: key, data: lightsData[key]});
-            break;
-          case 'LLC006':
-            lightsList.push({type: 'lc_iris', name: lightsData[key].name, id: key, data: lightsData[key]});
-            break;
-          case 'LLC007':
-            lightsList.push({type: 'lc_aura', name: lightsData[key].name, id: key, data: lightsData[key]});
-            break;
-          case 'LLC013':
-            lightsList.push({type: 'storylight', name: lightsData[key].name, id: key, data: lightsData[key]});
-            break;
-          case 'LWB004':
-            lightsList.push({type: 'a19', name: lightsData[key].name, id: key, data: lightsData[key]});
-            break;
-          case 'LLC020':
-            lightsList.push({type: 'huego', name: lightsData[key].name, id: key, data: lightsData[key]});
-            break;
-          default:
-            lightsList.push({type: 'a19', name: lightsData[key].name, id: key, data: lightsData[key]});
-        }
-      }
-    }
-
-    return lightsList;
-  }.property('lightsData'),
-
-  brightnessControlDisabled: Em.computed.not('lightsOn'),
-
-  onLightsOnChange: function(){
-    var lightsData = this.get('lightsData'), lightsOnSystem = false, lightsOn = this.get('lightsOn');
-
-    for (let key in lightsData) {
-      if (lightsData.hasOwnProperty(key)) {
-        if(lightsData[key].state.on){
-          lightsOnSystem = true;
-          break;
-        }
-      }
-    }
-
-    // if the internal lights state is different than the one from lightsData ( user manually toggled the switch ), send the request to change the bulbs state
-    if(lightsOn !== lightsOnSystem){
-      for (let key in lightsData) {
-        Em.$.ajax(this.get('apiURL')  + '/lights/' + key + '/state', {
-          data: JSON.stringify({"on": lightsOn}),
-          contentType: 'application/json',
-          type: 'PUT'
-        });
-      }
-    }
-  }.observes('lightsOn'),
-
-  onBrightnessChange: function(){
-    var lightsData = this.get('lightsData'), lightsBrightnessSystem = false, lightsBrightness = this.get('lightsBrightness');
-
-    for (let key in lightsData) {
-      if (lightsData.hasOwnProperty(key)) {
-        lightsBrightnessSystem += lightsData[key].state.bri;
-      }
-    }
-    lightsBrightnessSystem /= this.get('lightsList').length;
-
-    // if the internal lights state is different than the one from lightsData ( user manually toggled the switch ), send the request to change the bulbs state
-    if(lightsBrightness !== lightsBrightnessSystem){
-      for (let key in lightsData) {
-        Em.$.ajax(this.get('apiURL')  + '/lights/' + key + '/state', {
-          data: JSON.stringify({"bri": lightsBrightness}),
-          contentType: 'application/json',
-          type: 'PUT'
-        });
-      }
-    }
-  }.observes('lightsBrightness'),
-
-  lightsOnTxt: function(){
-    return this.get('lightsOn') ? 'On' : 'Off';
-  }.property('lightsOn')
-});

app/components/controls/party-control.js

@@ -2,11 +2,10 @@ import Em from 'ember';
 
 export default Em.Component.extend({
 
-  lightsApiURL: null,
+  apiURL: null,
 
   strobeOn: false,
 
-  numLights: 0,
   lightsData: null,
   activeLights: null,
 
@@ -20,7 +19,7 @@ export default Em.Component.extend({
 
     if (this.get('strobeOn')) {
       this.set('preStrobeOnLightsDataCache', lightsData);
-      var stobeInitRequestData = {'sat': this.get('strobeSat'), 'bri': 254, 'transitiontime': 0};
+      var stobeInitRequestData = {'sat': this.get('strobeSat'), 'transitiontime': 0};
 
       for (let key in lightsData) {
         if (lightsData.hasOwnProperty(key)) {
@@ -28,7 +27,7 @@ export default Em.Component.extend({
             stobeInitRequestData.on = false;
           }
 
-          Em.$.ajax(this.get('lightsApiURL') + '/' + key + '/state', {
+          Em.$.ajax(this.get('apiURL') + '/lights/' + key + '/state', {
             data: JSON.stringify(stobeInitRequestData),
             contentType: 'application/json',
             type: 'PUT'
@@ -39,11 +38,10 @@ export default Em.Component.extend({
       this.set('strobeOnInervalHandle', setInterval(this.strobeStep.bind(this), 200));
     } else { // revert the light system to pre-strobe
       var preStrobeOnLightsDataCache = this.get('preStrobeOnLightsDataCache'), updateLight = function (lightIndx) {
-        Em.$.ajax(self.get('lightsApiURL') + '/' + lightIndx + '/state', {
+        Em.$.ajax(self.get('apiURL') + '/lights/' + lightIndx + '/state', {
           data: JSON.stringify({
             'on': preStrobeOnLightsDataCache[lightIndx].state.on,
-            'sat': preStrobeOnLightsDataCache[lightIndx].state.sat,
-            'bri': preStrobeOnLightsDataCache[lightIndx].state.bri
+            'sat': preStrobeOnLightsDataCache[lightIndx].state.sat
           }),
           contentType: 'application/json',
           type: 'PUT'
@@ -52,7 +50,7 @@ export default Em.Component.extend({
 
       for (let key in lightsData) {
         if (lightsData.hasOwnProperty(key)) {
-          setTimeout(updateLight(key), 2000);
+          setTimeout(updateLight, 2000, key);
         }
       }
 
@@ -61,14 +59,14 @@ export default Em.Component.extend({
   }.observes('strobeOn'),
 
   strobeStep: function () {
-    var lastStrobeLight = (this.get('lastStrobeLight') + 1) % (this.get('numLights') + 1), self = this;
+    var lastStrobeLight = (this.get('lastStrobeLight') + 1) % (this.get('activeLights').length + 1), self = this;
 
-    Em.$.ajax(this.get('lightsApiURL') + '/' + lastStrobeLight + '/state', {
+    Em.$.ajax(this.get('apiURL') + '/lights/' + lastStrobeLight + '/state', {
       data: JSON.stringify({'on': true, 'transitiontime': 0, 'alert': 'select'}),
       contentType: 'application/json',
       type: 'PUT'
     });
-    Em.$.ajax(self.get('lightsApiURL') + '/' + lastStrobeLight + '/state', {
+    Em.$.ajax(self.get('apiURL') + '/lights/' + lastStrobeLight + '/state', {
       data: JSON.stringify({'on': false, 'transitiontime': 0}),
       contentType: 'application/json',
       type: 'PUT'

app/components/controls/scene-control.js

@@ -0,0 +1,5 @@
+import Em from 'ember';
+
+export default Em.Component.extend({
+  classNames: ['innerControlFrame']
+});

app/components/light-group.js

@@ -0,0 +1,83 @@
+import Em from 'ember';
+
+export default Em.Component.extend(Em.TargetActionSupport, {
+
+  actions: {
+    clickLight: function(id, data){
+      this.attrs.selectLight(id, data);
+    },
+    lightStartHover: function(id){
+      if(this.get('activeLights').contains(id)){
+        Em.$.ajax(this.get('apiURL')  + '/lights/' + id + '/state', {
+          data: JSON.stringify({"alert": "lselect"}),
+          contentType: 'application/json',
+          type: 'PUT'
+        });
+      }
+    },
+    lightStopHover: function(id){
+      if(this.get('activeLights').contains(id)){
+        Em.$.ajax(this.get('apiURL')  + '/lights/' + id + '/state', {
+          data: JSON.stringify({"alert": "none"}),
+          contentType: 'application/json',
+          type: 'PUT'
+        });
+      }
+    }
+  },
+
+  classNames: ['lightGroup'],
+
+  // list of all the lights in the hue system
+  lightsList: function(){
+    var lightsData = this.get('lightsData'), lightsList = [], type;
+    for (var key in lightsData) {
+      if (lightsData.hasOwnProperty(key)) {
+        switch(lightsData[key].modelid){
+          case 'LCT001':
+            type = 'a19';
+            break;
+          case 'LCT002':
+            type = 'br30';
+            break;
+          case 'LCT003':
+            type = 'gu10';
+            break;
+          case 'LST001':
+            type = 'lightstrip';
+            break;
+          case 'LLC010':
+            type = 'lc_iris';
+            break;
+          case 'LLC011':
+            type = 'lc_bloom';
+            break;
+          case 'LLC012':
+            type = 'lc_bloom';
+            break;
+          case 'LLC006':
+            type = 'lc_iris';
+            break;
+          case 'LLC007':
+            type = 'lc_aura';
+            break;
+          case 'LLC013':
+            type = 'storylight';
+            break;
+          case 'LWB004':
+            type ='a19';
+            break;
+          case 'LLC020':
+            type = 'huego';
+            break;
+          default:
+            type = 'a19';
+        }
+
+        lightsList.push({type: type, name: lightsData[key].name, id: key, data: lightsData[key], activeClass: this.get('activeLights').contains(key) ? 'active' : 'inactive' });
+      }
+    }
+
+    return lightsList;
+  }.property('lightsData', 'activeLights')
+});

app/components/modals/add-group-modal.js

@@ -0,0 +1,19 @@
+import Em from 'ember';
+
+export default Em.Component.extend({
+  actions: {
+    close: function(){
+      this.sendAction();
+    },
+    save: function(){
+      this.sendAction();
+    },
+    selectLight: function(id) {
+      console.log('selected ' + id);
+    }
+  },
+
+  groupName: null,
+
+  saveDisabled: false
+});

app/components/modals/light-control-modal.js

@@ -2,12 +2,8 @@ import Em from 'ember';
 
 export default Em.Component.extend({
   actions: {
-    clickLight: function(){
+    close: function(){
       this.sendAction();
     }
-  },
-
-  modalData: null,
-
-  lightsApiURL: null
+  }
 });

app/styles/app.scss

@@ -1,6 +1,11 @@
 @import 'ember-paper';
-@import "ember-modal-dialog/ember-modal-structure";
-@import "ember-modal-dialog/ember-modal-appearance";
+@import 'bower_components/bootstrap-sass/assets/stylesheets/_bootstrap';
+@import 'ember-modal-dialog/ember-modal-structure';
+@import 'ember-modal-dialog/ember-modal-appearance';
+
+body, html {
+  height: 100%;
+}
 
 #pressButtonBridgeImg {
   width: 200px;
@@ -13,29 +18,19 @@
 }
 
 md-list {
-  max-width: 600px;
-  margin-right: auto;
-  margin-left: auto;
+  max-width: 800px;
 }
 
-.item {
-  max-width: 400px;
-  margin-right: auto;
-  margin-left: auto;
+.hueLight {
+  margin-right: 10px;
+  border-radius: 20px;
 }
 
-img.hueLight.active {
-  border-radius: 50%;
-  border: #94ffa0 2px solid;
+.hueLight.inactive {
+  background-color: rgba(255, 0, 0, 0.7);
 }
 
-img.hueLight.inactive {
-  border-radius: 50%;
-  border: #d2d3d6 2px solid;
-}
-
-
-.hueLight:hover {
+.hueLight.active:hover {
   cursor: pointer;
   -webkit-transition-duration: 0.5s;
   transition-duration: 0.5s;
@@ -48,3 +43,34 @@ img.hueLight.inactive {
 .ember-modal-overlay.translucent {
   background-color: #000000;
 }
+
+md-icon {
+  color: rgba(0, 0, 0, 0.54) !important;
+}
+
+md-icon.menu {
+  margin-top: 10px;
+}
+
+.addButton {
+  cursor: pointer;
+  margin-left: 30px;
+}
+
+.removeButton {
+  cursor: pointer;
+  margin: 0 0 0 auto !important;
+}
+
+.sideNavTitle {
+  margin-left: 10px;
+}
+
+md-toolbar {
+  background-color: inherit !important;
+}
+
+.innerControlFrame {
+  background-color: mintcream;
+  height: 100vh;
+}

app/templates/components/bridge-controls.hbs

@@ -1,9 +1,30 @@
-{{#paper-list}}
+{{#paper-nav-container open=drawerOpen class="ember-app"}}
+  {{#paper-content flex-layout="column" flex=true}}
+      <ul class="nav nav-tabs">
+        {{#each tabData as |tab|}}
+            <li role="presentation" class="{{if tab.selected "active" ""}}"><a
+                    href="#" {{action "changeTab" tab.name}}>{{tab.name}}</a></li>
+        {{/each}}
+      </ul>
 
-  {{controls/lights-control apiURL=apiURL lightsData=lightsData groupsData=groupsData activeLights=activeLights}}
+      {{#liquid-if lightsTabSelected class="tabSwitch"}}
+        {{controls/light-control apiURL=apiURL lightsData=lightsData activeLights=activeLights}}
+      {{/liquid-if}}
 
-  {{paper-divider}}
+      {{#liquid-if scenesTabSelected class="tabSwitch"}}
+        {{controls/scene-control apiURL=apiURL lightsData=lightsData activeLights=activeLights}}
+      {{/liquid-if}}
 
-  {{controls/party-control apiURL=apiURL lightsData=lightsData numLights=numLights  activeLights=activeLights}}
+      {{#liquid-if partyTabSelected class="tabSwitch"}}
+        {{controls/party-control apiURL=apiURL lightsData=lightsData  activeLights=activeLights}}
+      {{/liquid-if}}
+  {{/paper-content}}
 
-{{/paper-list}}
+  {{#paper-sidenav-toggle class="menu-sidenav-toggle"}}
+    {{paper-icon icon="menu" size="lg"}}
+  {{/paper-sidenav-toggle}}
+
+  {{#paper-sidenav class="md-sidenav-right md-whiteframe-z2" flex-layout="column" flex=true}}
+    {{controls/group-control lightsData=lightsData groupsData=groupsData activeLights=activeLights}}
+  {{/paper-sidenav}}
+{{/paper-nav-container}}

app/templates/components/controls/group-control.hbs

@@ -0,0 +1,13 @@
+{{#paper-content}}
+    <h3 class="sideNavTitle">Light Groups<span title="Add Group" class="addButton" {{action "toggleAddGroupsModal"}}>{{paper-icon icon="group-add"}}</span></h3>
+
+    {{#paper-list}}
+      {{#each groupsArrData as |group|}}
+        {{#paper-item}}
+          {{group.name}} {{#if group.data.key}}<span title="Remove Group" class="removeButton" {{action "removeGroup"}}>{{paper-icon icon="remove"}}</span>{{/if}}
+        {{/paper-item}}
+      {{/each}}
+    {{/paper-list}}
+{{/paper-content}}
+
+{{modals/add-group-modal lightsData=lightsData groupsData=groupsData activeLights=activeLights apiURL=apiURL action="toggleAddGroupsModal" isShowingAddGroupsModal=isShowingAddGroupsModal}}

app/templates/components/controls/light-control.hbs

@@ -0,0 +1,21 @@
+{{#paper-list}}
+
+  {{#paper-item class="item"}}
+    {{light-group lightsData=lightsData activeLights=activeLights selectLight=(action 'selectLight') apiURL=apiURL}}
+  {{/paper-item}}
+
+  {{#paper-item class="item"}}
+    {{paper-icon icon="power-settings-new"}}
+    <p>Lights</p>
+    {{#paper-switch checked=lightsOn}} {{lightsOnTxt}} {{/paper-switch}}
+  {{/paper-item}}
+
+  {{#paper-item class="item"}}
+    {{paper-icon icon="brightness-4"}}
+    <p>Brightness</p>
+    {{paper-slider flex=true min='1' max='254' value=lightsBrightness disabled=brightnessControlDisabled}}
+  {{/paper-item}}
+
+  {{modals/light-control-modal modalData=modalData apiURL=apiURL action="toggleLightModal" isShowingLightsModal=isShowingLightsModal}}
+
+{{/paper-list}}

app/templates/components/controls/lights-control.hbs

@@ -1,28 +0,0 @@
-{{#paper-subheader class="md-no-sticky"}}Lights{{/paper-subheader}}
-
-{{#paper-item class="item"}}
-  {{#each lightsList as |light|}}
-      <img class="hueLight" {{action "clickLight" light.id light.data}} width="40" title="{{light.name}}" src="assets/images/lights/{{light.type}}.svg">
-  {{/each}}
-{{/paper-item}}
-
-{{#paper-item class="item"}}
-  {{paper-icon icon="power-settings-new"}}
-  <p>Power</p>
-  {{#paper-switch checked=lightsOn}} {{lightsOnTxt}} {{/paper-switch}}
-{{/paper-item}}
-
-{{#paper-item class="item"}}
-  {{paper-icon icon="brightness-4"}}
-  <p>Brightness</p>
-  {{paper-slider flex=true min='1' max='254' value=lightsBrightness disabled=brightnessControlDisabled}}
-{{/paper-item}}
-
-{{#paper-item class="item"}}
-  {{paper-icon icon="group"}}
-  <p>Active Group</p>
-  {{x-select content=groupsArrData selection=groupSelection optionValuePath="content.lights"
-  optionLabelPath="content.name"}}
-{{/paper-item}}
-
-{{controls/lights-modal-control modalData=modalData apiURL=apiURL action="clickLight" isShowingLightsModal=isShowingLightsModal}}

app/templates/components/controls/party-control.hbs

@@ -1,13 +1,15 @@
-{{#paper-subheader class="md-no-sticky"}}Party{{/paper-subheader}}
+{{#paper-list}}
 
-{{#paper-item class="item"}}
-  {{paper-icon icon="flare"}}
-  <p>Strobe</p>
-  {{#paper-switch checked=strobeOn}} {{strobeOnTxt}} {{/paper-switch}}
-{{/paper-item}}
+  {{#paper-item class="item"}}
+    {{paper-icon icon="flare"}}
+    <p>Strobe</p>
+    {{#paper-switch checked=strobeOn}} {{strobeOnTxt}} {{/paper-switch}}
+  {{/paper-item}}
 
-{{#paper-item class="item"}}
-  {{paper-icon icon="music-note"}}
-    <p>Music</p>
-    {{#paper-button raised=true primary=true}}UPLOAD{{/paper-button}}
-{{/paper-item}}
+  {{#paper-item class="item"}}
+    {{paper-icon icon="music-note"}}
+      <p>Music</p>
+      {{#paper-button raised=true primary=true}}UPLOAD{{/paper-button}}
+  {{/paper-item}}
+
+{{/paper-list}}

app/templates/components/controls/scene-control.hbs

@@ -0,0 +1,5 @@
+{{#paper-list}}
+  {{#paper-item}}
+    TODO
+  {{/paper-item}}
+{{/paper-list}}

app/templates/components/huegasm-app.hbs

@@ -1,5 +1,5 @@
-{{#if bridgeUsername}}
+{{#liquid-if bridgeUsername}}
   {{bridge-controls bridgeIp=bridgeIp bridgeUsername=bridgeUsername}}
 {{else}}
   {{bridge-finder bridgeIp=bridgeIp bridgeUsername=bridgeUsername}}
-{{/if}}
+{{/liquid-if}}

app/templates/components/light-group.hbs

@@ -0,0 +1,3 @@
+{{#each lightsList as |light|}}
+    <img class="hueLight {{light.id }} {{light.activeClass}}" {{action "clickLight" light.id light.data}} {{action "lightStartHover" light.id on="mouseEnter"}} {{action "lightStopHover" light.id on="mouseLeave"}} width="40" title="{{light.name}}" src="assets/images/lights/{{light.type}}.svg">
+{{/each}}

app/templates/components/modals/add-group-modal.hbs

@@ -0,0 +1,14 @@
+{{#if isShowingAddGroupsModal}}
+  {{#modal-dialog close="close"
+  alignment="center"
+  translucentOverlay=true}}
+
+    {{light-group lightsData=lightsData activeLights=activeLights selectLight=(action 'selectLight') apiURL=apiURL}}
+
+    {{paper-input label="Group name" value=groupName max="32" max-errortext="The group name cannot exceed 32 characters"}}
+
+    <button {{action 'close'}}>Close</button>
+    <button {{action 'save'}} disabled={{saveDisabled}}>Save</button>
+
+  {{/modal-dialog}}
+{{/if}}

app/templates/components/modals/light-control-modal.hbs

@@ -1,8 +1,8 @@
 {{#if isShowingLightsModal}}
-  {{#modal-dialog close="clickLight"
+  {{#modal-dialog close="close"
   alignment="center"
   translucentOverlay=true}}
       TODO
-      <button {{action 'clickLight'}}>Close</button>
+      <button {{action 'close'}}>Close</button>
   {{/modal-dialog}}
 {{/if}}

app/transitions.js

@@ -0,0 +1,6 @@
+export default function(){
+  this.transition(
+    this.hasClass('tabSwitch'),
+    this.use('crossFade')
+  );
+}

bower.json

@@ -4,7 +4,6 @@
     "ember": "1.13.6",
     "ember-cli-shims": "ember-cli/ember-cli-shims#0.0.3",
     "ember-cli-test-loader": "ember-cli-test-loader#0.1.3",
-    "ember-data": "1.13.7",
     "ember-load-initializers": "ember-cli/ember-load-initializers#0.1.5",
     "ember-qunit": "0.4.9",
     "ember-qunit-notifications": "0.0.7",
@@ -13,6 +12,7 @@
     "loader.js": "ember-cli/loader.js#3.2.0",
     "qunit": "~1.18.0",
     "hammerjs": "~2.0.4",
-    "bootstrap-sass": "~3.3.5"
+    "bootstrap-sass": "~3.3.5",
+    "ember-data": "~1.13.9"
   }
 }

ember-cli-build.js

@@ -7,7 +7,6 @@ module.exports = function(defaults) {
   });
 
   app.import('bower_components/bootstrap-sass/assets/javascripts/bootstrap/collapse.js');
-  app.import('bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss');
 
   // Use `app.import` to add additional libraries to the generated
   // output files.

package.json

@@ -40,7 +40,6 @@
     "ember-export-application-global": "^1.0.3",
     "ember-modal-dialog": "0.7.7",
     "ember-paper": "0.2.6",
-    "emberx-select": "1.1.4",
     "liquid-fire": "0.21.2"
   }
 }

tests/integration/components/controls/group-control-test.js

@@ -1,7 +1,7 @@
 import { moduleForComponent, test } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
 
-moduleForComponent('controls/lights-modal-control', 'Integration | Component | controls/lights modal control', {
+moduleForComponent('controls/group-control', 'Integration | Component | controls/group control', {
   integration: true
 });
 
@@ -11,15 +11,15 @@ test('it renders', function(assert) {
   // Set any properties with this.set('myProperty', 'value');
   // Handle any actions with this.on('myAction', function(val) { ... });
 
-  this.render(hbs`{{controls/lights-modal-control}}`);
+  this.render(hbs`{{controls/group-control}}`);
 
   assert.equal(this.$().text().trim(), '');
 
   // Template block usage:
   this.render(hbs`
-    {{#controls/lights-modal-control}}
+    {{#controls/group-control}}
       template block text
-    {{/controls/lights-modal-control}}
+    {{/controls/group-control}}
   `);
 
   assert.equal(this.$().text().trim(), 'template block text');

tests/integration/components/controls/scenes-control-test.js

@@ -0,0 +1,26 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('controls/scenes-control', 'Integration | Component | controls/scenes control', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+  assert.expect(2);
+
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });
+
+  this.render(hbs`{{controls/scenes-control}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:
+  this.render(hbs`
+    {{#controls/scenes-control}}
+      template block text
+    {{/controls/scenes-control}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});

tests/integration/components/light-group-test.js

@@ -0,0 +1,26 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('light-group', 'Integration | Component | light group', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+  assert.expect(2);
+
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });
+
+  this.render(hbs`{{light-group}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:
+  this.render(hbs`
+    {{#light-group}}
+      template block text
+    {{/light-group}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});

tests/integration/components/modals/add-group-modal-test.js

@@ -0,0 +1,26 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('modals/add-group-modal', 'Integration | Component | modals/add group modal', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+  assert.expect(2);
+
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });
+
+  this.render(hbs`{{modals/add-group-modal}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:
+  this.render(hbs`
+    {{#modals/add-group-modal}}
+      template block text
+    {{/modals/add-group-modal}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});

tests/integration/components/modals/light-control-modal-test.js

@@ -0,0 +1,26 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('modals/light-control-modal', 'Integration | Component | modals/light control modal', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+  assert.expect(2);
+
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });
+
+  this.render(hbs`{{modals/light-control-modal}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:
+  this.render(hbs`
+    {{#modals/light-control-modal}}
+      template block text
+    {{/modals/light-control-modal}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});