Starting to add group support ( WIP )
This commit is contained in:
parent
43ab5e6b81
commit
5edef94755
11 changed files with 166 additions and 45 deletions
|
|
@ -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' ) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
13
app/components/controls/lights-modal-control.js
Normal file
13
app/components/controls/lights-modal-control.js
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
import Em from 'ember';
|
||||
|
||||
export default Em.Component.extend({
|
||||
actions: {
|
||||
clickLight: function(){
|
||||
this.sendAction();
|
||||
}
|
||||
},
|
||||
|
||||
modalData: null,
|
||||
|
||||
lightsApiURL: null
|
||||
});
|
||||
|
|
@ -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'}),
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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}}
|
||||
|
|
@ -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}}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{{#if isShowingLightsModal}}
|
||||
{{#modal-dialog close="clickLight"
|
||||
alignment="center"
|
||||
translucentOverlay=true}}
|
||||
TODO
|
||||
<button {{action 'clickLight'}}>Close</button>
|
||||
{{/modal-dialog}}
|
||||
{{/if}}
|
||||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
});
|
||||
Reference in a new issue