diff --git a/app/components/bridge-controls.js b/app/components/bridge-controls.js index 9cb501b..d2cbbe2 100644 --- a/app/components/bridge-controls.js +++ b/app/components/bridge-controls.js @@ -5,7 +5,9 @@ export default Em.Component.extend({ bridgeUsername: null, + groupsData: null, lightsData: null, + activeLights: null, numLights: function(){ var lightsData = this.get('lightsData'), numLights = 0; @@ -19,18 +21,27 @@ export default Em.Component.extend({ return numLights; }.property('lightsData'), - lightsApiURL: function(){ - return 'http://' + this.get('bridgeIp') + '/api/' + this.get('bridgeUsername') + '/lights'; + apiURL: function(){ + return 'http://' + this.get('bridgeIp') + '/api/' + this.get('bridgeUsername'); }.property('bridgeIp', 'bridgeUsername'), - didInsertElement: function() { + init: function() { + this._super(); + var self = this; + + Em.$.get(this.get('apiURL') + '/groups', function (result, status) { + if (status === 'success' ) { + self.set('groupsData', result); + } + }); + this.set('lightsDataIntervalHandle', setInterval(this.updateLightData.bind(this), 1000)); }, updateLightData: function(){ var self = this; - Em.$.get(this.get('lightsApiURL'), function (result, status) { + Em.$.get(this.get('apiURL') + '/lights', function (result, status) { if (status === 'success' && JSON.stringify(self.get('lightsData')) !== JSON.stringify(result) ) { self.set('lightsData', result); } else if(status !== 'success' ) { diff --git a/app/components/bridge-finder.js b/app/components/bridge-finder.js index 8836163..462e379 100644 --- a/app/components/bridge-finder.js +++ b/app/components/bridge-finder.js @@ -22,7 +22,9 @@ export default Em.Component.extend({ }, // find the bridge ip here - didInsertElement: function () { + init: function () { + this._super(); + if(this.get('bridgeIp') === null){ var self = this; diff --git a/app/components/controls/lights-control.js b/app/components/controls/lights-control.js index e7babc1..784ec7d 100644 --- a/app/components/controls/lights-control.js +++ b/app/components/controls/lights-control.js @@ -4,9 +4,37 @@ export default Em.Component.extend({ lightsDataIntervalHandle: null, - lightsApiURL: 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(){ @@ -43,43 +71,43 @@ export default Em.Component.extend({ if (lightsData.hasOwnProperty(key)) { switch(lightsData[key].modelid){ case 'LCT001': - lightsList.push('a19'); + lightsList.push({type: 'a19', name: lightsData[key].name, id: key, data: lightsData[key] }); break; case 'LCT002': - lightsList.push('br30'); + lightsList.push({type: 'br30', name: lightsData[key].name, id: key, data: lightsData[key]}); break; case 'LCT003': - lightsList.push('gu10'); + lightsList.push({type: 'gu10', name: lightsData[key].name, id: key, data: lightsData[key]}); break; case 'LST001': - lightsList.push('lightstrip'); + lightsList.push({type: 'lightstrip', name: lightsData[key].name, id: key, data: lightsData[key]}); break; case 'LLC010': - lightsList.push('lc_iris'); + lightsList.push({type: 'lc_iris', name: lightsData[key].name, id: key, data: lightsData[key]}); break; case 'LLC011': - lightsList.push('lc_bloom'); + lightsList.push({type: 'lc_bloom', name: lightsData[key].name, id: key, data: lightsData[key]}); break; case 'LLC012': - lightsList.push('lc_bloom'); + lightsList.push({type: 'lc_bloom', name: lightsData[key].name, id: key, data: lightsData[key]}); break; case 'LLC006': - lightsList.push('lc_iris'); + lightsList.push({type: 'lc_iris', name: lightsData[key].name, id: key, data: lightsData[key]}); break; case 'LLC007': - lightsList.push('lc_aura'); + lightsList.push({type: 'lc_aura', name: lightsData[key].name, id: key, data: lightsData[key]}); break; case 'LLC013': - lightsList.push('storylight'); + lightsList.push({type: 'storylight', name: lightsData[key].name, id: key, data: lightsData[key]}); break; case 'LWB004': - lightsList.push('a19'); + lightsList.push({type: 'a19', name: lightsData[key].name, id: key, data: lightsData[key]}); break; case 'LLC020': - lightsList.push('huego'); + lightsList.push({type: 'huego', name: lightsData[key].name, id: key, data: lightsData[key]}); break; default: - lightsList.push('a19'); + lightsList.push({type: 'a19', name: lightsData[key].name, id: key, data: lightsData[key]}); } } } @@ -104,7 +132,7 @@ export default Em.Component.extend({ // 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('lightsApiURL') + '/' + key + '/state', { + Em.$.ajax(this.get('apiURL') + '/lights/' + key + '/state', { data: JSON.stringify({"on": lightsOn}), contentType: 'application/json', type: 'PUT' @@ -126,7 +154,7 @@ export default Em.Component.extend({ // 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('lightsApiURL') + '/' + key + '/state', { + Em.$.ajax(this.get('apiURL') + '/lights/' + key + '/state', { data: JSON.stringify({"bri": lightsBrightness}), contentType: 'application/json', type: 'PUT' diff --git a/app/components/controls/lights-modal-control.js b/app/components/controls/lights-modal-control.js new file mode 100644 index 0000000..d1a1344 --- /dev/null +++ b/app/components/controls/lights-modal-control.js @@ -0,0 +1,13 @@ +import Em from 'ember'; + +export default Em.Component.extend({ + actions: { + clickLight: function(){ + this.sendAction(); + } + }, + + modalData: null, + + lightsApiURL: null +}); diff --git a/app/components/controls/party-control.js b/app/components/controls/party-control.js index a322721..7950c4e 100644 --- a/app/components/controls/party-control.js +++ b/app/components/controls/party-control.js @@ -8,6 +8,7 @@ export default Em.Component.extend({ numLights: 0, lightsData: null, + activeLights: null, strobeOnInervalHandle: null, strobeSat: 0, @@ -37,21 +38,21 @@ 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'); + var preStrobeOnLightsDataCache = this.get('preStrobeOnLightsDataCache'), updateLight = function (lightIndx) { + Em.$.ajax(self.get('lightsApiURL') + '/' + lightIndx + '/state', { + data: JSON.stringify({ + 'on': preStrobeOnLightsDataCache[lightIndx].state.on, + 'sat': preStrobeOnLightsDataCache[lightIndx].state.sat, + 'bri': preStrobeOnLightsDataCache[lightIndx].state.bri + }), + contentType: 'application/json', + type: 'PUT' + }); + }; for (let key in lightsData) { if (lightsData.hasOwnProperty(key)) { - setTimeout(function () { - Em.$.ajax(self.get('lightsApiURL') + '/' + key + '/state', { - data: JSON.stringify({ - 'on': preStrobeOnLightsDataCache[key].state.on, - 'sat': preStrobeOnLightsDataCache[key].state.sat, - 'bri': preStrobeOnLightsDataCache[key].state.bri - }), - contentType: 'application/json', - type: 'PUT' - }); - }, 2000); + setTimeout(updateLight(key), 2000); } } @@ -60,7 +61,7 @@ export default Em.Component.extend({ }.observes('strobeOn'), strobeStep: function () { - var lightsData = this.get('lightsData'), lastStrobeLight = (this.get('lastStrobeLight') + 1) % (this.get('numLights') + 1), self = this; + var lastStrobeLight = (this.get('lastStrobeLight') + 1) % (this.get('numLights') + 1), self = this; Em.$.ajax(this.get('lightsApiURL') + '/' + lastStrobeLight + '/state', { data: JSON.stringify({'on': true, 'transitiontime': 0, 'alert': 'select'}), diff --git a/app/styles/app.scss b/app/styles/app.scss index eeb714c..96dac80 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -1,4 +1,6 @@ @import 'ember-paper'; +@import "ember-modal-dialog/ember-modal-structure"; +@import "ember-modal-dialog/ember-modal-appearance"; #pressButtonBridgeImg { width: 200px; @@ -10,12 +12,6 @@ text-decoration: none; } -.md-subheader-content { - max-width: 500px; - margin-right: auto; - margin-left: auto; -} - md-list { max-width: 600px; margin-right: auto; @@ -27,3 +23,28 @@ md-list { margin-right: auto; margin-left: auto; } + +img.hueLight.active { + border-radius: 50%; + border: #94ffa0 2px solid; +} + +img.hueLight.inactive { + border-radius: 50%; + border: #d2d3d6 2px solid; +} + + +.hueLight:hover { + cursor: pointer; + -webkit-transition-duration: 0.5s; + transition-duration: 0.5s; + -webkit-transform: scale(1.2); + transform: scale(1.2); + -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); + transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); +} + +.ember-modal-overlay.translucent { + background-color: #000000; +} diff --git a/app/templates/components/bridge-controls.hbs b/app/templates/components/bridge-controls.hbs index 8af38d3..578f389 100644 --- a/app/templates/components/bridge-controls.hbs +++ b/app/templates/components/bridge-controls.hbs @@ -1,9 +1,9 @@ {{#paper-list}} - {{controls/lights-control lightsApiURL=lightsApiURL lightsData=lightsData}} + {{controls/lights-control apiURL=apiURL lightsData=lightsData groupsData=groupsData activeLights=activeLights}} {{paper-divider}} - {{controls/party-control lightsApiURL=lightsApiURL lightsData=lightsData numLights=numLights}} + {{controls/party-control apiURL=apiURL lightsData=lightsData numLights=numLights activeLights=activeLights}} {{/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 index ffff981..cf867f7 100644 --- a/app/templates/components/controls/lights-control.hbs +++ b/app/templates/components/controls/lights-control.hbs @@ -2,13 +2,13 @@ {{#paper-item class="item"}} {{#each lightsList as |light|}} - + {{/each}} {{/paper-item}} {{#paper-item class="item"}} {{paper-icon icon="power-settings-new"}} -

Light:

+

Power

{{#paper-switch checked=lightsOn}} {{lightsOnTxt}} {{/paper-switch}} {{/paper-item}} @@ -16,4 +16,13 @@ {{paper-icon icon="brightness-4"}}

Brightness

{{paper-slider flex=true min='1' max='254' value=lightsBrightness disabled=brightnessControlDisabled}} -{{/paper-item}} \ No newline at end of file +{{/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/lights-modal-control.hbs b/app/templates/components/controls/lights-modal-control.hbs new file mode 100644 index 0000000..ed0dca3 --- /dev/null +++ b/app/templates/components/controls/lights-modal-control.hbs @@ -0,0 +1,8 @@ +{{#if isShowingLightsModal}} + {{#modal-dialog close="clickLight" + alignment="center" + translucentOverlay=true}} + TODO + + {{/modal-dialog}} +{{/if}} \ No newline at end of file diff --git a/package.json b/package.json index 897398b..345b9ff 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,9 @@ "ember-data": "1.13.7", "ember-disable-proxy-controllers": "^1.0.0", "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/lights-modal-control-test.js new file mode 100644 index 0000000..8e68381 --- /dev/null +++ b/tests/integration/components/controls/lights-modal-control-test.js @@ -0,0 +1,26 @@ +import { moduleForComponent, test } from 'ember-qunit'; +import hbs from 'htmlbars-inline-precompile'; + +moduleForComponent('controls/lights-modal-control', 'Integration | Component | controls/lights modal 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/lights-modal-control}}`); + + assert.equal(this.$().text().trim(), ''); + + // Template block usage: + this.render(hbs` + {{#controls/lights-modal-control}} + template block text + {{/controls/lights-modal-control}} + `); + + assert.equal(this.$().text().trim(), 'template block text'); +});