removing groups, fixing deprecations, switching to paper's menu way

BUGS: error on bridge authentication, lightData not updating correctly to reflect the state, unstyled settings menu
This commit is contained in:
lone-cloud 2016-10-12 23:18:34 -07:00
parent 790e900868
commit 40eb0cae00
21 changed files with 35 additions and 478 deletions

View file

@ -116,7 +116,6 @@ export default Component.extend({
clearBridgePingIntervalHandle(){
clearInterval(this.get('bridgePingIntervalHandle'));
this.set('bridgePingIntervalHandle', null);
},
actions: {

View file

@ -1,70 +0,0 @@
import Ember from 'ember';
const {
Component,
observer,
computed,
isEmpty,
isNone,
$
} = Ember;
export default Component.extend({
groupName: null,
selectedLights: [],
onIsShowingModalChange: observer('isShowingModal', function(){
if(this.get('isShowingModal')){
this.setProperties({
selectedLights: [],
groupName: null
});
}
}),
saveDisabled: computed('groupName', 'selectedLights.[]', function(){
return isNone(this.get('groupName')) || isEmpty(this.get('selectedLights')) || isEmpty(this.get('groupName').trim());
}),
didInsertElement: function() {
$(document).keypress((event) => {
if(!this.get('saveDisabled') && event.which === 13) {
this.send('save');
}
});
},
actions: {
close: function(){
this.sendAction();
},
save: function(){
let newGroupData = {"name": this.get('groupName'), "lights": this.get('selectedLights')},
newGroupsData = this.get('groupsData');
$.ajax(this.get('apiURL') + '/groups', {
data: JSON.stringify(newGroupData),
contentType: 'application/json',
type: 'POST'
});
// crappy code to redraw the lights
newGroupsData['9999'] = newGroupData;
this.setProperties({
updateGroupsData: true,
groupsData: newGroupsData
});
this.sendAction();
},
clickLight: function(id) {
let selectedLights = this.get('selectedLights');
if(selectedLights.contains(id)){
selectedLights.removeObject(id);
} else {
selectedLights.pushObject(id);
}
}
}
});

View file

@ -1,12 +0,0 @@
{{#if isShowingModal}}
{{#modal-dialog close="close" alignment="center" translucentOverlay=true}}
{{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"}}
{{#paper-button action="close"}}Close{{/paper-button}}
{{#paper-button class="pull-right" action="save" disabled=saveDisabled primary=true}}Save{{/paper-button}}
{{/modal-dialog}}
{{/if}}

View file

@ -1,86 +0,0 @@
import Ember from 'ember';
const {
Component,
observer,
computed,
isEmpty,
isNone,
} = Ember;
export default Component.extend({
classNames: ['dropdown-menu'],
elementId: 'group-list',
tagName: null,
groupIdSelection: null,
groupsArrData: computed('groupsData', 'groupIdSelection', function(){
let 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, key: '0' }, rowClass: groupIdSelection === '0' ? 'group-row selected-row' : 'group-row', deletable: false});
for (let key in groupsData) {
if (groupsData.hasOwnProperty(key)) {
let rowClass = 'group-row';
if(key === groupIdSelection){
rowClass += ' selected-row';
}
groupsArrData.push({name: groupsData[key].name, data: {lights: groupsData[key].lights, key: key}, rowClass: rowClass, deletable: true});
}
}
return groupsArrData;
}),
onGroupIdSelectionChanged: observer('groupIdSelection', 'groupsArrData', function(){
let groupIdSelection = this.get('groupIdSelection'),
lights = [];
this.get('groupsArrData').some(function(group){
if(group.data.key === groupIdSelection){
lights = group.data.lights;
return true;
}
});
this.get('storage').set('huegasm.selectedGroup', groupIdSelection);
if(!isNone(groupIdSelection) && !isEmpty(lights)){
this.set('activeLights', lights);
}
}),
didInsertElement(){
let selectGroup = '0',
storageItem = this.get('storage').get('huegasm.selectedGroup');
if(storageItem){
selectGroup = storageItem;
}
this.set('groupIdSelection', selectGroup);
},
actions: {
selectGroup(selection){
this.set('groupIdSelection', selection);
},
toggleConfirmDeleteGroupsModal(groupName, groupId){
this.setProperties({
deleteGroupName: groupName,
deleteGroupId: groupId
});
this.toggleProperty('isShowingConfirmDeleteModal');
},
toggleAddGroupsModal(){
this.toggleProperty('isShowingAddGroupsModal');
}
}
});

View file

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

View file

@ -1,10 +0,0 @@
{{#if isShowingModal}}
{{#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}}

View file

@ -1,15 +0,0 @@
{{#paper-list}}
{{#paper-item class="new-group-row"}}
<div class="new-group" {{action "toggleAddGroupsModal"}}>{{paper-icon icon="group-add"}} Add a new group</div>
{{/paper-item}}
{{#each groupsArrData as |group|}}
{{#paper-item class=group.rowClass}}
<div class="group-select" {{action "selectGroup" group.data.key}}>{{group.name}}</div> {{#if group.deletable}}<span data-toggle="tooltip" data-placement="top auto" title="Remove Group" class="bootstrap-tooltip remove-button pointer" {{action "toggleConfirmDeleteGroupsModal" group.name group.data.key}}>{{paper-icon icon="close"}}</span>{{/if}}
{{/paper-item}}
{{/each}}
{{/paper-list}}
{{groups-list/add-group-modal lightsData=lightsData groupsData=groupsData isShowingModal=isShowingAddGroupsModal apiURL=apiURL updateGroupsData=updateGroupsData action="toggleAddGroupsModal"}}
{{groups-list/delete-group-modal groupName=deleteGroupName groupId=deleteGroupId groupsData=groupsData isShowingModal=isShowingConfirmDeleteModal apiURL=apiURL updateGroupsData=updateGroupsData groupIdSelection=groupIdSelection action="toggleConfirmDeleteGroupsModal"}}

View file

@ -2,7 +2,6 @@ import Ember from 'ember';
const {
Component,
observer,
computed,
isEmpty,
isNone,
@ -16,8 +15,6 @@ export default Component.extend({
bridgeIp: null,
manualBridgeIp: null,
bridgeUsername: null,
updateGroupsData: true,
groupsData: null,
lightsData: null,
activeLights: [],
tabList: ["Lights", "Music"],
@ -28,7 +25,7 @@ export default Component.extend({
musicTabSelected: computed.equal('selectedTab', 1),
dimmerOnClass: computed('dimmerOn', function(){
return this.get('dimmerOn') ? 'dimmerOn' : null;
return this.get('dimmerOn') ? 'dimmerOn md-menu-origin' : 'md-menu-origin';
}),
ready: computed('lightsData', 'trial', function() {
@ -76,7 +73,6 @@ export default Component.extend({
this._super();
if(!this.get('trial')) {
this.doUpdateGroupsData();
this.updateLightData();
this.set('lightsDataIntervalHandle', setInterval(this.updateLightData.bind(this), 2000));
}
@ -86,22 +82,6 @@ export default Component.extend({
}
},
onUpdateGroupsDataChange: observer('updateGroupsData', function(){
if(this.get('updateGroupsData')){
setTimeout(()=>{ this.doUpdateGroupsData(); }, 1000);
}
}),
doUpdateGroupsData(){
$.get(this.get('apiURL') + '/groups', (result, status)=>{
if (status === 'success' ) {
this.set('groupsData', result);
}
});
this.toggleProperty('updateGroupsData');
},
updateLightData(){
let fail = ()=>{
clearInterval(this.get('lightsDataIntervalHandle'));
@ -155,7 +135,7 @@ export default Component.extend({
{
element: '#music-tab',
intro: 'This is the music player. You\'ll use this to play music and synchronize it with your active lights.<br><br>' +
'<i><b>TIP</b>: Control which lights are active through the <b>Lights</b> tab or through the <b>Groups</b> menu dropdown.</i>'
'<i><b>TIP</b>: Control which lights are active through the <b>Lights</b> tab.</i>'
},
{
element: '#playlist',
@ -196,11 +176,6 @@ export default Component.extend({
intro: 'These icons represent the hue lights in your system. Active lights will be controlled by the application while the inactive lights will have a red X over them and will not be controlled.<br>' +
'You may toggle a light\'s state by clicking on it.'
},
{
element: $('.settings-item')[0],
intro: 'The Groups menu allows for saving and quickly selecting groups of lights.',
position: 'left'
},
{
element: $('.settings-item')[1],
intro: 'A few miscellaneous settings can be found here.<br><br>' +

View file

@ -1,29 +1,27 @@
{{#if ready}}
<div class="row navigation">
<div class="col-sm-4 col-sm-offset-3 col-xs-8">
<div class="col-sm-6 col-sm-offset-3 col-xs-10">
{{#each tabData as |tab|}}
<span class="navigation-item pointer {{if tab.selected "active"}} text-uppercase" {{action "changeTab" tab.name}}>{{tab.name}}</span>
{{/each}}
</div>
<div id="settings" class="col-xs-4">
<div id="settings" class="col-xs-2">
<div class="settings-item">
<span data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{paper-icon icon="group" class=dimmerOnClass}}Groups <span class="caret"></span>
</span>
{{groups-list lightsData=lightsData groupsData=groupsData activeLights=activeLights apiURL=apiURL updateGroupsData=updateGroupsData groupControlDisplayed=groupControlDisplayed storage=storage}}
</div>
<div class="settings-item">
<span data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="settings-itemSettings">
{{paper-icon icon="settings" class=dimmerOnClass}}Settings <span class="caret"></span>
</span>
<ul id="app-settings" class="dropdown-menu">
<li {{action "clearBridge"}}><a href="#">Switch bridge</a></li>
<li {{action "startIntro"}}><a href="#">Restart tutorial</a></li>
<li {{action "clearAllSettings"}}><a href="#">Reset settings</a></li>
</ul>
{{#paper-menu as |menu|}}
{{#paper-button target=menu action="toggleMenu" icon-button=true}}
{{paper-icon "settings" class=dimmerOnClass}}
{{/paper-button}}
{{else}}
{{#paper-menu-item action="clearBridge"}}
<span class="md-menu-align-target">Switch bridge</span>
{{/paper-menu-item}}
{{#paper-menu-item action="startIntro"}}
<span>Restart tutorial</span>
{{/paper-menu-item}}
{{#paper-menu-item action="clearAllSettings"}}
<span>Reset settings</span>
{{/paper-menu-item}}
{{/paper-menu}}
</div>
</div>
</div>

View file

@ -65,7 +65,7 @@ export default Component.extend({
let activeClass = 'light-active';
if(!this.get('activeLights').contains(key)){
if(!this.get('activeLights').includes(key)){
activeClass = 'light-inactive';
}

View file

@ -155,7 +155,7 @@ export default Component.extend({
didInsertElement() {
$(document).click((event)=>{
if(this.get('colorPickerDisplayed') && !event.target.classList.contains('color') && !$(event.target).closest('.color-picker, #color-row').length) {
if(this.get('colorPickerDisplayed') && !event.target.classList.includes('color') && !$(event.target).closest('.color-picker, #color-row').length) {
this.toggleProperty('colorPickerDisplayed');
}
});

View file

@ -125,11 +125,11 @@ export default Component.extend(helperMixin, visualizerMixin, {
for(let i=0; i < iterations; i++){
let l = activeLights[Math.floor(Math.random()*activeLights.length)];
if(!lights.contains(l) && !workedLights.contains(l)){
if(!lights.includes(l) && !workedLights.includes(l)){
lights.push(l);
workedLights.push(l);
} else if(justOneLight && workedLights.length !== activeLights.length){ // work a light if we only need one
while(workedLights.contains(l)){
while(workedLights.includes(l)){
l = activeLights[Math.floor(Math.random()*activeLights.length)];
}
@ -716,7 +716,7 @@ export default Component.extend(helperMixin, visualizerMixin, {
// we're going to assume that the song URL is the id
do {
nextSong = Math.floor(Math.random() * playQueue.length);
} while(shufflePlayed.contains(playQueue[nextSong].url));
} while(shufflePlayed.includes(playQueue[nextSong].url));
shufflePlayed.pushObject(playQueue[nextSong].url);
} else if(nextSong > playQueue.length-1){

View file

@ -10,7 +10,6 @@
@import 'ember-notify';
@import 'fancy-speaker';
@import 'introjs';
@import 'group-controls';
@import 'hue-controls';
@import 'huegasm-variables';
@import 'light-group';
@ -69,7 +68,7 @@ body, button {
margin-left: 10px;
}
.settings-item .settings::before, .settings-item .group::before {
.settings-item .settings::before {
font-size: 28px;
transition: 0.1s all ease-in-out;
}
@ -118,4 +117,4 @@ div.ember-modal-dialog {
::-webkit-scrollbar-track {
background-color: #ffffff;
}
}

View file

@ -1,74 +0,0 @@
.group-row {
transition: 0.1s all ease-in-out;
}
.group-row.selected-row {
background-color: #7F7F7F !important;
color: white;
}
.group-row:hover {
background-color: #DEDEDE;
}
.group-row.selected-row .group-select {
cursor: default;
}
.group-select {
cursor: pointer;
padding: 10px 0 10px 10px;
width: 70%;
font-family: 'Open Sans', sans-serif;
}
.new-group {
font-size: 18px;
min-height: 100%;
width: 100%;
padding: 10px 0 10px 10px;
margin: 0;
.group-add {
margin-right: 5px;
}
}
.new-group-row{
background: white;
}
.new-group-row:hover {
background-color: darken(white, 5%);
}
.group-row:hover * .close {
display: block;
}
.group-row:hover * .close {
display: block;
}
.selected-row * .close {
color: white !important;
}
.selected-row.group-row * .close:hover {
color: darken(white, 20%) !important;
}
.close:hover {
color: darken(#333333, 5%) !important;
}
.close:hover {
opacity: 1;
}
.close {
font-size: 18px !important;
color: rgb(51, 51, 51);
display: none;
opacity: 1;
text-shadow: none;
}

View file

@ -1,14 +1,3 @@
#app-settings {
position: absolute;
background: white;
box-shadow: 5px 10px 15px 5px rgba(0, 0, 0, 0.3);
width: 175px;
left: -85px;
top: 20px;
border: none;
color: black;
}
#lights-tab {
min-height: 400px;
}
@ -38,7 +27,7 @@
.navigation {
text-align: center;
padding: 30px 0;
padding: 30px 0 10px 0;
}
.navigation-item {
@ -85,4 +74,4 @@
left: 18px;
top: 13px;
font-size: 16px;
}
}

View file

@ -1,18 +1,3 @@
#group-list {
box-shadow: 5px 10px 15px 5px rgba(0, 0, 0, 0.3);
border-radius: 0 0 5px 5px;
width: 300px;
top: 20px;
left: -210px;
position: absolute;
background-color: white;
max-height: 400px;
overflow: auto;
text-align: left;
padding: 0;
color: black;
}
.light-group {
margin: 0 auto 0 auto;
.tooltip.top {
@ -70,4 +55,4 @@
.remove-button {
margin: 10px 0 10px 60px;
}
}

View file

@ -37,9 +37,6 @@ md-progress-linear {
.settings-item span:hover {
text-decoration: underline;
md-icon.group {
color: black !important;
}
md-icon.settings {
color: black !important;
}
@ -98,4 +95,4 @@ md-switch.md-default-theme.md-checked .md-bar {
md-switch.md-default-theme.md-checked .md-thumb {
background-color: $secondaryThemeColor;
}
}

View file

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

View file

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

View file

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

View file

@ -54,14 +54,14 @@ ansi-escapes@^1.1.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-1.4.0.tgz#d3a8a83b319aa67793662b13e761c7911422306e"
ansi-regex@*, ansi-regex@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.0.0.tgz#c5061b6e0ef8a81775e50f5d66151bf6bf371107"
ansi-regex@^0.2.0, ansi-regex@^0.2.1:
version "0.2.1"
resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-0.2.1.tgz#0d8e946967a3d8143f93e24e298525fc1b2235f9"
ansi-regex@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.0.0.tgz#c5061b6e0ef8a81775e50f5d66151bf6bf371107"
ansi-styles@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-1.1.0.tgz#eaecbf66cd706882760b2f4691582b8f55d7a7de"
@ -2518,7 +2518,7 @@ iferr@^0.1.5:
version "0.1.5"
resolved "https://registry.yarnpkg.com/iferr/-/iferr-0.1.5.tgz#c60eed69e6d8fdb6b3104a1fcbca1c192dc5b501"
imurmurhash@*, imurmurhash@^0.1.4:
imurmurhash@^0.1.4:
version "0.1.4"
resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"