lone-cloud/huegasm
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Finishing up the groups ( mostly )

Browse source
This commit is contained in:
Egor 2015-08-20 02:17:35 -07:00
parent c6aaf58f65
commit 6f2bac70b8
17 changed files with 312 additions and 136 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
app/components/bridge-controls.js
View file

@ -5,9 +5,10 @@ export default Em.Component.extend({
bridgeUsername: null,
updateGroupsData: true,
groupsData: null,
lightsData: null,
activeLights: [],
activeLights: Em.A(),
apiURL: function(){
return 'http://' + this.get('bridgeIp') + '/api/' + this.get('bridgeUsername');
@ -15,6 +16,19 @@ export default Em.Component.extend({
init: function() {
this._super();
this.doUpdateGroupsData();
this.set('lightsDataIntervalHandle', setInterval(this.updateLightData.bind(this), 1000));
},
onUpdateGroupsDataChange: function(){
if(this.get('updateGroupsData')){
var self = this;
setTimeout(function(){ self.doUpdateGroupsData(); }, 1000);
}
}.observes('updateGroupsData'),
doUpdateGroupsData: function(){
var self = this;
Em.$.get(this.get('apiURL') + '/groups', function (result, status) {
@ -23,10 +37,10 @@ export default Em.Component.extend({
}
});
this.set('lightsDataIntervalHandle', setInterval(this.updateLightData.bind(this), 1000));
this.toggleProperty('updateGroupsData');
},
tabList: ["Lights", "Scenes", "Party"],
tabList: ["Lights", "Scenes", "Music"],
selectedTab: 0,
tabData: function(){
var tabData = [], selectedTab = this.get('selectedTab');
@ -46,7 +60,7 @@ export default Em.Component.extend({
lightsTabSelected: Em.computed.equal('selectedTab', 0),
scenesTabSelected: Em.computed.equal('selectedTab', 1),
partyTabSelected: Em.computed.equal('selectedTab', 2),
musicTabSelected: Em.computed.equal('selectedTab', 2),
actions: {
changeTab: function(tabName){
@ -70,15 +84,13 @@ export default Em.Component.extend({
}
self.set('lightsData', result);
} else if(status !== 'success' ) {
} else if(status !== 'success') {
// something went terribly wrong ( user got unauthenticated? ) and we'll need to start all over
clearInterval(self.get('lightsDataIntervalHandle'));
this.setProperties({
bridgeIp: null,
bridgeUsername: null
});
console.error(status + ': ' + result);
}
});
}

43
app/components/controls/group-control.js
View file

@ -5,42 +5,61 @@ export default Em.Component.extend({
tagName: null,
groupSelection: null,
groupIdSelection: '0',
actions: {
selectGroup: function(selection){
this.set('groupSelection', selection);
this.set('groupIdSelection', selection);
},
toggleConfirmDeleteGroupsModal: function(groupName, groupId){
this.setProperties({
deleteGroupName: groupName,
deleteGroupId: groupId
});
this.toggleProperty('isShowingConfirmDeleteModal');
},
toggleAddGroupsModal: function(){
this.toggleProperty('isShowingAddGroupsModal');
}
},
groupsArrData: function(){
var groupsData = this.get('groupsData'), lightsData = this.get('lightsData'), groupsArrData = [], ids = [];
var groupsData = this.get('groupsData'), lightsData = this.get('lightsData'), groupsArrData = [], ids = [], groupIdSelection = this.get('groupIdSelection');
for (let key in lightsData) {
if(lightsData.hasOwnProperty(key) && lightsData[key].state.reachable){
ids.push(key);
}
}
groupsArrData.push({name: 'All', data: {lights: ids}});
groupsArrData.push({name: 'All', data: {lights: ids, key: '0' }, rowClass: groupIdSelection === '0' ? 'groupRow selectedRow' : 'groupRow', deletable: false});
for (let key in groupsData) {
if (groupsData.hasOwnProperty(key)) {
groupsArrData.push({name: groupsData[key].name, data: {lights: groupsData[key].lights, key: key}});
var rowClass = 'groupRow';
if(key === groupIdSelection){
rowClass += ' selectedRow';
}
groupsArrData.push({name: groupsData[key].name, data: {lights: groupsData[key].lights, key: key}, rowClass: rowClass, deletable: true});
}
}
return groupsArrData;
}.property('groupsData', 'lightsData'),
}.property('groupsData', 'lightsData', 'groupSelection'),
onGroupSelectionChanged: function(){
var groupSelection = this.get('groupSelection');
onGroupIdSelectionChanged: function(){
var groupIdSelection = this.get('groupIdSelection'), lights = [];
if(!Em.isNone(groupSelection)){
this.set('activeLights', groupSelection.lights);
this.get('groupsArrData').some(function(group){
if(group.data.key === groupIdSelection){
lights = group.data.lights;
return true;
}
});
if(!Em.isNone(groupIdSelection)){
this.set('activeLights', lights);
}
}.observes('groupSelection')
}.observes('groupIdSelection')
});

85
app/components/controls/light-control.js
View file

@ -23,10 +23,14 @@ export default Em.Component.extend({
lightsOn: function(){
var lightsData = this.get('lightsData');
if(this.get('strobeOn')){
return false;
}
return this.get('activeLights').some(function(light) {
return lightsData[light].state.on === true;
});
}.property('lightsData', 'activeLights'),
}.property('lightsData', 'activeLights', 'strobeOn'),
// determines the average brightness of the hue system for the brightness slider
lightsBrightness: function(){
@ -83,5 +87,82 @@ export default Em.Component.extend({
lightsOnTxt: function(){
return this.get('lightsOn') ? 'On' : 'Off';
}.property('lightsOn')
}.property('lightsOn'),
// **************** STROBE LIGHT START ****************
strobeOn: false,
strobeOnInervalHandle: null,
strobeSat: 0,
preStrobeOnLightsDataCache: null,
lastStrobeLight: 0,
onStrobeOnChange: function () {
var lightsData = this.get('lightsData'), self = this;
if (this.get('strobeOn')) {
this.set('preStrobeOnLightsDataCache', lightsData);
var stobeInitRequestData = {'sat': this.get('strobeSat'), 'transitiontime': 0};
for (let key in lightsData) {
if (lightsData.hasOwnProperty(key)) {
if (lightsData[key].state.on) {
stobeInitRequestData.on = false;
}
Em.$.ajax(this.get('apiURL') + '/lights/' + key + '/state', {
data: JSON.stringify(stobeInitRequestData),
contentType: 'application/json',
type: 'PUT'
});
}
}
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('apiURL') + '/lights/' + lightIndx + '/state', {
data: JSON.stringify({
'on': preStrobeOnLightsDataCache[lightIndx].state.on,
'sat': preStrobeOnLightsDataCache[lightIndx].state.sat
}),
contentType: 'application/json',
type: 'PUT'
});
};
for (let key in lightsData) {
if (lightsData.hasOwnProperty(key)) {
setTimeout(updateLight, 2000, key);
}
}
clearInterval(this.get('strobeOnInervalHandle'));
}
}.observes('strobeOn'),
strobeStep: function () {
var lastStrobeLight = (this.get('lastStrobeLight') + 1) % (this.get('activeLights').length + 1), self = this;
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('apiURL') + '/lights/' + lastStrobeLight + '/state', {
data: JSON.stringify({'on': false, 'transitiontime': 0}),
contentType: 'application/json',
type: 'PUT'
});
this.set('lastStrobeLight', lastStrobeLight);
},
strobeOnTxt: function () {
return this.get('strobeOn') ? 'On' : 'Off';
}.property('strobeOn')
// **************** STROBE LIGHT FINISH ****************
});

13
app/components/controls/music-control.js Normal file
View file

@ -0,0 +1,13 @@
import Em from 'ember';
export default Em.Component.extend({
apiURL: null,
lightsData: null,
activeLights: null,
});

81
app/components/controls/party-control.js
View file

@ -1,81 +0,0 @@
import Em from 'ember';
export default Em.Component.extend({
apiURL: null,
strobeOn: false,
lightsData: null,
activeLights: null,
strobeOnInervalHandle: null,
strobeSat: 0,
preStrobeOnLightsDataCache: null,
lastStrobeLight: 0,
onStrobeOnChange: function () {
var lightsData = this.get('lightsData'), self = this;
if (this.get('strobeOn')) {
this.set('preStrobeOnLightsDataCache', lightsData);
var stobeInitRequestData = {'sat': this.get('strobeSat'), 'transitiontime': 0};
for (let key in lightsData) {
if (lightsData.hasOwnProperty(key)) {
if (lightsData[key].state.on) {
stobeInitRequestData.on = false;
}
Em.$.ajax(this.get('apiURL') + '/lights/' + key + '/state', {
data: JSON.stringify(stobeInitRequestData),
contentType: 'application/json',
type: 'PUT'
});
}
}
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('apiURL') + '/lights/' + lightIndx + '/state', {
data: JSON.stringify({
'on': preStrobeOnLightsDataCache[lightIndx].state.on,
'sat': preStrobeOnLightsDataCache[lightIndx].state.sat
}),
contentType: 'application/json',
type: 'PUT'
});
};
for (let key in lightsData) {
if (lightsData.hasOwnProperty(key)) {
setTimeout(updateLight, 2000, key);
}
}
clearInterval(this.get('strobeOnInervalHandle'));
}
}.observes('strobeOn'),
strobeStep: function () {
var lastStrobeLight = (this.get('lastStrobeLight') + 1) % (this.get('activeLights').length + 1), self = this;
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('apiURL') + '/lights/' + lastStrobeLight + '/state', {
data: JSON.stringify({'on': false, 'transitiontime': 0}),
contentType: 'application/json',
type: 'PUT'
});
this.set('lastStrobeLight', lastStrobeLight);
},
strobeOnTxt: function () {
return this.get('strobeOn') ? 'On' : 'Off';
}.property('strobeOn')
});

28
app/components/light-group.js
View file

@ -1,13 +1,17 @@
import Em from 'ember';
export default Em.Component.extend(Em.TargetActionSupport, {
export default Em.Component.extend({
actions: {
clickLight: function(id, data){
this.attrs.selectLight(id, data);
this.sendAction('action', id, data);
},
lightStartHover: function(id){
if(this.get('activeLights').contains(id)){
var hoveredLight = this.get('lightsList').filter(function(light){
return light.activeClass !== 'unreachable' && light.id === id[0];
});
if(!Em.isEmpty(hoveredLight) && this.get('noHover') !== true){
Em.$.ajax(this.get('apiURL') + '/lights/' + id + '/state', {
data: JSON.stringify({"alert": "lselect"}),
contentType: 'application/json',
@ -16,7 +20,11 @@ export default Em.Component.extend(Em.TargetActionSupport, {
}
},
lightStopHover: function(id){
if(this.get('activeLights').contains(id)){
var hoveredLight = this.get('lightsList').filter(function(light){
return light.activeClass !== 'unreachable' && light.id === id[0];
});
if(!Em.isEmpty(hoveredLight) && this.get('noHover') !== true){
Em.$.ajax(this.get('apiURL') + '/lights/' + id + '/state', {
data: JSON.stringify({"alert": "none"}),
contentType: 'application/json',
@ -74,10 +82,18 @@ export default Em.Component.extend(Em.TargetActionSupport, {
type = 'a19';
}
lightsList.push({type: type, name: lightsData[key].name, id: key, data: lightsData[key], activeClass: this.get('activeLights').contains(key) ? 'active' : 'inactive' });
var activeClass = 'active';
if(!this.get('activeLights').contains(key)){
activeClass = 'inactive';
} else if(!lightsData[key].state.reachable){
activeClass = 'unreachable';
}
lightsList.push({type: type, name: lightsData[key].name, id: key, data: lightsData[key], activeClass: activeClass});
}
}
return lightsList;
}.property('lightsData', 'activeLights')
}.property('lightsData', 'activeLights.[]')
});

36
app/components/modals/add-group-modal.js
View file

@ -6,14 +6,44 @@ export default Em.Component.extend({
this.sendAction();
},
save: function(){
var newGroupData = {"name": this.get('groupName'), "lights": this.get('selectedLights')}, newGroupsData = this.get('groupsData');
Em.$.ajax(this.get('apiURL') + '/groups', {
data: JSON.stringify(newGroupData),
contentType: 'application/json',
type: 'POST'
});
newGroupsData['9999'] = newGroupData;
this.setProperties({
updateGroupsData: true,
groupsData: newGroupsData
});
this.sendAction();
},
selectLight: function(id) {
console.log('selected ' + id);
clickLight: function(id) {
var selectedLights = this.get('selectedLights');
if(selectedLights.contains(id)){
selectedLights.removeObject(id);
} else {
selectedLights.push(id);
}
this.notifyPropertyChange('selectedLights');
}
},
groupName: null,
saveDisabled: false
selectedLights: [],
onIsShowingAddGroupsModalChange: function(){
this.set('selectedLights', []);
}.observes('isShowingAddGroupsModal'),
saveDisabled: function(){
return Em.isNone(this.get('groupName')) || Em.isEmpty(this.get('selectedLights')) || Em.isEmpty(this.get('groupName').trim());
}.property('groupName', 'selectedLights.[]')
});

29
app/components/modals/confirm-delete-modal.js Normal file
View file

@ -0,0 +1,29 @@
import Em from 'ember';
export default Em.Component.extend({
actions: {
close: function(){
this.sendAction();
},
delete: function(){
Em.$.ajax(this.get('apiURL') + '/groups/' + this.get('groupId'), {
contentType: 'application/json',
type: 'DELETE'
});
var groupsData = this.get('groupsData'), newGroupsData = [];
for (let key in groupsData) {
if(groupsData.hasOwnProperty(key) && groupsData[key].name !== this.get('groupName') ){
newGroupsData[key] = groupsData[key];
}
}
this.setProperties({
updateGroupsData: true,
groupsData: newGroupsData
});
this.sendAction();
}
}
});

28
app/styles/app.scss
View file

@ -27,6 +27,11 @@ md-list {
}
.hueLight.inactive {
cursor: pointer;
background-color: rgba(192, 192, 192, 0.7);
}
.hueLight.unreachable {
background-color: rgba(255, 0, 0, 0.7);
}
@ -49,21 +54,22 @@ md-icon {
}
md-icon.menu {
margin-top: 10px;
margin: 10px 16px 0 0;
}
.addButton {
cursor: pointer;
margin-left: 30px;
float: right;
margin-right: 16px;
}
.removeButton {
cursor: pointer;
margin: 0 0 0 auto !important;
margin: 10px 0 10px auto;
}
.sideNavTitle {
margin-left: 10px;
margin-left: 16px;
}
md-toolbar {
@ -74,3 +80,17 @@ md-toolbar {
background-color: mintcream;
height: 100vh;
}
.groupRow.selectedRow{
background-color: lightgrey !important;
}
.groupRow:hover {
background-color: #E6E6E6;
}
.groupSelect {
padding: 10px 0 10px 0;
cursor: pointer;
width: 70%;
}

6
app/templates/components/bridge-controls.hbs
View file

@ -15,8 +15,8 @@
{{controls/scene-control apiURL=apiURL lightsData=lightsData activeLights=activeLights}}
{{/liquid-if}}
{{#liquid-if partyTabSelected class="tabSwitch"}}
{{controls/party-control apiURL=apiURL lightsData=lightsData activeLights=activeLights}}
{{#liquid-if musicTabSelected class="tabSwitch"}}
{{controls/music-control apiURL=apiURL lightsData=lightsData activeLights=activeLights}}
{{/liquid-if}}
{{/paper-content}}
@ -25,6 +25,6 @@
{{/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}}
{{controls/group-control lightsData=lightsData groupsData=groupsData activeLights=activeLights apiURL=apiURL updateGroupsData=updateGroupsData}}
{{/paper-sidenav}}
{{/paper-nav-container}}

9
app/templates/components/controls/group-control.hbs
View file

@ -3,11 +3,14 @@
{{#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 class=group.rowClass}}
<div class="groupSelect" {{action "selectGroup" group.data.key}}>{{group.name}}</div> {{#if group.deletable}}<span title="Remove Group" class="removeButton" {{action "toggleConfirmDeleteGroupsModal" group.name group.data.key}}>{{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}}
{{modals/add-group-modal lightsData=lightsData groupsData=groupsData isShowingAddGroupsModal=isShowingAddGroupsModal apiURL=apiURL updateGroupsData=updateGroupsData
action="toggleAddGroupsModal"}}
{{modals/confirm-delete-modal groupName=deleteGroupName groupId=deleteGroupId groupsData=groupsData isShowingConfirmDeleteModal=isShowingConfirmDeleteModal apiURL=apiURL updateGroupsData=updateGroupsData action="toggleConfirmDeleteGroupsModal"}}

10
app/templates/components/controls/light-control.hbs
View file

@ -1,7 +1,7 @@
{{#paper-list}}
{{#paper-item class="item"}}
{{light-group lightsData=lightsData activeLights=activeLights selectLight=(action 'selectLight') apiURL=apiURL}}
{{light-group lightsData=lightsData activeLights=activeLights action='clickLight' apiURL=apiURL}}
{{/paper-item}}
{{#paper-item class="item"}}
@ -16,6 +16,12 @@
{{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-item class="item"}}
{{paper-icon icon="flare"}}
<p>Strobe</p>
{{#paper-switch checked=strobeOn}} {{strobeOnTxt}} {{/paper-switch}}
{{/paper-item}}
{{modals/light-control-modal modalData=modalData apiURL=apiURL action="selectLight" isShowingLightsModal=isShowingLightsModal}}
{{/paper-list}}

6
app/templates/components/controls/party-control.hbs → app/templates/components/controls/music-control.hbs
View file

@ -1,11 +1,5 @@
{{#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="music-note"}}
<p>Music</p>

2
app/templates/components/light-group.hbs
View file

@ -1,3 +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">
<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}}

10
app/templates/components/modals/add-group-modal.hbs
View file

@ -1,14 +1,12 @@
{{#if isShowingAddGroupsModal}}
{{#modal-dialog close="close"
alignment="center"
translucentOverlay=true}}
{{#modal-dialog close="close" alignment="center" translucentOverlay=true}}
{{light-group lightsData=lightsData activeLights=activeLights selectLight=(action 'selectLight') apiURL=apiURL}}
{{light-group lightsData=lightsData activeLights=selectedLights action= 'clickLight' apiURL=apiURL noHover=true}}
{{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>
{{#paper-button action="close"}}Close{{/paper-button}}
{{#paper-button class="pull-right" action="save" disabled=saveDisabled primary=true}}Save{{/paper-button}}
{{/modal-dialog}}
{{/if}}

10
app/templates/components/modals/confirm-delete-modal.hbs Normal file
View file

@ -0,0 +1,10 @@
{{#if isShowingConfirmDeleteModal}}
{{#modal-dialog close="close" alignment="center" translucentOverlay=true}}
<p>Are you sure you want to delete group "{{groupName}}"?</p>
{{#paper-button action="close"}}Close{{/paper-button}}
{{#paper-button class="pull-right" action="delete" primary=true}}Delete{{/paper-button}}
{{/modal-dialog}}
{{/if}}

26
tests/integration/components/modals/confirm-delete-modal-test.js Normal file
View file

@ -0,0 +1,26 @@
import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';
moduleForComponent('modals/confirm-delete-modal', 'Integration | Component | modals/confirm delete 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/confirm-delete-modal}}`);
assert.equal(this.$().text().trim(), '');
// Template block usage:
this.render(hbs`
{{#modals/confirm-delete-modal}}
template block text
{{/modals/confirm-delete-modal}}
`);
assert.equal(this.$().text().trim(), 'template block text');
});