diff --git a/app/components/bridge-controls.js b/app/components/bridge-controls.js index d2cbbe2..bc7c7e9 100644 --- a/app/components/bridge-controls.js +++ b/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 diff --git a/app/components/controls/group-control.js b/app/components/controls/group-control.js new file mode 100644 index 0000000..5fd541f --- /dev/null +++ b/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') +}); diff --git a/app/components/controls/light-control.js b/app/components/controls/light-control.js new file mode 100644 index 0000000..a746278 --- /dev/null +++ b/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') +}); diff --git a/app/components/controls/lights-control.js b/app/components/controls/lights-control.js deleted file mode 100644 index 784ec7d..0000000 --- a/app/components/controls/lights-control.js +++ /dev/null @@ -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') -}); diff --git a/app/components/controls/party-control.js b/app/components/controls/party-control.js index 7950c4e..2826461 100644 --- a/app/components/controls/party-control.js +++ b/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' diff --git a/app/components/controls/scene-control.js b/app/components/controls/scene-control.js new file mode 100644 index 0000000..f6965d1 --- /dev/null +++ b/app/components/controls/scene-control.js @@ -0,0 +1,5 @@ +import Em from 'ember'; + +export default Em.Component.extend({ + classNames: ['innerControlFrame'] +}); diff --git a/app/components/light-group.js b/app/components/light-group.js new file mode 100644 index 0000000..8e20bde --- /dev/null +++ b/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') +}); diff --git a/app/components/modals/add-group-modal.js b/app/components/modals/add-group-modal.js new file mode 100644 index 0000000..395340e --- /dev/null +++ b/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 +}); diff --git a/app/components/controls/lights-modal-control.js b/app/components/modals/light-control-modal.js similarity index 59% rename from app/components/controls/lights-modal-control.js rename to app/components/modals/light-control-modal.js index d1a1344..f50df47 100644 --- a/app/components/controls/lights-modal-control.js +++ b/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 + } }); diff --git a/app/styles/app.scss b/app/styles/app.scss index 96dac80..591bc56 100644 --- a/app/styles/app.scss +++ b/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; +} diff --git a/app/templates/components/bridge-controls.hbs b/app/templates/components/bridge-controls.hbs index 578f389..5428532 100644 --- a/app/templates/components/bridge-controls.hbs +++ b/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}} + - {{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}} \ No newline at end of file + {{#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}} \ No newline at end of file diff --git a/app/templates/components/controls/group-control.hbs b/app/templates/components/controls/group-control.hbs new file mode 100644 index 0000000..79d25b0 --- /dev/null +++ b/app/templates/components/controls/group-control.hbs @@ -0,0 +1,13 @@ +{{#paper-content}} +

Light Groups{{paper-icon icon="group-add"}}

+ + {{#paper-list}} + {{#each groupsArrData as |group|}} + {{#paper-item}} + {{group.name}} {{#if group.data.key}}{{paper-icon icon="remove"}}{{/if}} + {{/paper-item}} + {{/each}} + {{/paper-list}} +{{/paper-content}} + +{{modals/add-group-modal lightsData=lightsData groupsData=groupsData activeLights=activeLights apiURL=apiURL action="toggleAddGroupsModal" isShowingAddGroupsModal=isShowingAddGroupsModal}} \ No newline at end of file diff --git a/app/templates/components/controls/light-control.hbs b/app/templates/components/controls/light-control.hbs new file mode 100644 index 0000000..0656267 --- /dev/null +++ b/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"}} +

Lights

+ {{#paper-switch checked=lightsOn}} {{lightsOnTxt}} {{/paper-switch}} + {{/paper-item}} + + {{#paper-item class="item"}} + {{paper-icon icon="brightness-4"}} +

Brightness

+ {{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}} \ No newline at end of file diff --git a/app/templates/components/controls/lights-control.hbs b/app/templates/components/controls/lights-control.hbs deleted file mode 100644 index cf867f7..0000000 --- a/app/templates/components/controls/lights-control.hbs +++ /dev/null @@ -1,28 +0,0 @@ -{{#paper-subheader class="md-no-sticky"}}Lights{{/paper-subheader}} - -{{#paper-item class="item"}} - {{#each lightsList as |light|}} - - {{/each}} -{{/paper-item}} - -{{#paper-item class="item"}} - {{paper-icon icon="power-settings-new"}} -

Power

- {{#paper-switch checked=lightsOn}} {{lightsOnTxt}} {{/paper-switch}} -{{/paper-item}} - -{{#paper-item class="item"}} - {{paper-icon icon="brightness-4"}} -

Brightness

- {{paper-slider flex=true min='1' max='254' value=lightsBrightness disabled=brightnessControlDisabled}} -{{/paper-item}} - -{{#paper-item class="item"}} - {{paper-icon icon="group"}} -

Active Group

- {{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}} \ No newline at end of file diff --git a/app/templates/components/controls/party-control.hbs b/app/templates/components/controls/party-control.hbs index df28d92..532edf2 100644 --- a/app/templates/components/controls/party-control.hbs +++ b/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"}} -

Strobe

- {{#paper-switch checked=strobeOn}} {{strobeOnTxt}} {{/paper-switch}} -{{/paper-item}} + {{#paper-item class="item"}} + {{paper-icon icon="flare"}} +

Strobe

+ {{#paper-switch checked=strobeOn}} {{strobeOnTxt}} {{/paper-switch}} + {{/paper-item}} -{{#paper-item class="item"}} - {{paper-icon icon="music-note"}} -

Music

- {{#paper-button raised=true primary=true}}UPLOAD{{/paper-button}} -{{/paper-item}} \ No newline at end of file + {{#paper-item class="item"}} + {{paper-icon icon="music-note"}} +

Music

+ {{#paper-button raised=true primary=true}}UPLOAD{{/paper-button}} + {{/paper-item}} + +{{/paper-list}} \ No newline at end of file diff --git a/app/templates/components/controls/scene-control.hbs b/app/templates/components/controls/scene-control.hbs new file mode 100644 index 0000000..27e04ec --- /dev/null +++ b/app/templates/components/controls/scene-control.hbs @@ -0,0 +1,5 @@ +{{#paper-list}} + {{#paper-item}} + TODO + {{/paper-item}} +{{/paper-list}} diff --git a/app/templates/components/huegasm-app.hbs b/app/templates/components/huegasm-app.hbs index 708f5b9..d776766 100644 --- a/app/templates/components/huegasm-app.hbs +++ b/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}} diff --git a/app/templates/components/light-group.hbs b/app/templates/components/light-group.hbs new file mode 100644 index 0000000..2365980 --- /dev/null +++ b/app/templates/components/light-group.hbs @@ -0,0 +1,3 @@ +{{#each lightsList as |light|}} + +{{/each}} \ No newline at end of file diff --git a/app/templates/components/modals/add-group-modal.hbs b/app/templates/components/modals/add-group-modal.hbs new file mode 100644 index 0000000..cf5ae7f --- /dev/null +++ b/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"}} + + + + + {{/modal-dialog}} +{{/if}} \ No newline at end of file diff --git a/app/templates/components/controls/lights-modal-control.hbs b/app/templates/components/modals/light-control-modal.hbs similarity index 56% rename from app/templates/components/controls/lights-modal-control.hbs rename to app/templates/components/modals/light-control-modal.hbs index ed0dca3..ed24538 100644 --- a/app/templates/components/controls/lights-modal-control.hbs +++ b/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 - + {{/modal-dialog}} {{/if}} \ No newline at end of file diff --git a/app/transitions.js b/app/transitions.js new file mode 100644 index 0000000..c0b4726 --- /dev/null +++ b/app/transitions.js @@ -0,0 +1,6 @@ +export default function(){ + this.transition( + this.hasClass('tabSwitch'), + this.use('crossFade') + ); +} diff --git a/bower.json b/bower.json index bd86c1c..aab1080 100644 --- a/bower.json +++ b/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" } } diff --git a/ember-cli-build.js b/ember-cli-build.js index 44a5026..a1204ab 100644 --- a/ember-cli-build.js +++ b/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. diff --git a/package.json b/package.json index 345b9ff..98cb559 100644 --- a/package.json +++ b/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" } } diff --git a/tests/integration/components/controls/lights-modal-control-test.js b/tests/integration/components/controls/group-control-test.js similarity index 67% rename from tests/integration/components/controls/lights-modal-control-test.js rename to tests/integration/components/controls/group-control-test.js index 8e68381..4646dd8 100644 --- a/tests/integration/components/controls/lights-modal-control-test.js +++ b/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'); diff --git a/tests/integration/components/controls/scenes-control-test.js b/tests/integration/components/controls/scenes-control-test.js new file mode 100644 index 0000000..44d993e --- /dev/null +++ b/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'); +}); diff --git a/tests/integration/components/light-group-test.js b/tests/integration/components/light-group-test.js new file mode 100644 index 0000000..22a66cd --- /dev/null +++ b/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'); +}); diff --git a/tests/integration/components/modals/add-group-modal-test.js b/tests/integration/components/modals/add-group-modal-test.js new file mode 100644 index 0000000..2b64ef5 --- /dev/null +++ b/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'); +}); diff --git a/tests/integration/components/modals/light-control-modal-test.js b/tests/integration/components/modals/light-control-modal-test.js new file mode 100644 index 0000000..b33b3db --- /dev/null +++ b/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'); +});