Starting to add group support ( WIP )

This commit is contained in:
Egor 2015-08-12 16:45:39 -07:00
parent 43ab5e6b81
commit 5edef94755
11 changed files with 166 additions and 45 deletions

View file

@ -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' ) {

View file

@ -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;

View file

@ -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'

View file

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

View file

@ -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'}),

View file

@ -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;
}

View file

@ -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}}

View file

@ -2,13 +2,13 @@
{{#paper-item class="item"}}
{{#each lightsList as |light|}}
<img width="40" src="assets/images/lights/{{light}}.svg">
<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>Light:</p>
<p>Power</p>
{{#paper-switch checked=lightsOn}} {{lightsOnTxt}} {{/paper-switch}}
{{/paper-item}}
@ -16,4 +16,13 @@
{{paper-icon icon="brightness-4"}}
<p>Brightness</p>
{{paper-slider flex=true min='1' max='254' value=lightsBrightness disabled=brightnessControlDisabled}}
{{/paper-item}}
{{/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}}

View file

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

View file

@ -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"
}
}

View file

@ -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');
});