fixing bugs, imroving code...hopefully

This commit is contained in:
lone-cloud 2016-10-14 02:07:14 -07:00
parent 97cfa365a2
commit e7b003fa13
13 changed files with 141 additions and 146 deletions

View file

@ -52,7 +52,7 @@ export default Component.extend({
// find the bridge ip here
init() {
this._super();
this._super(...arguments);
if(this.get('bridgeIp') === null) {
$.ajax('https://www.meethue.com/api/nupnp', {
@ -96,13 +96,15 @@ export default Component.extend({
contentType: 'application/json',
type: 'POST'
}).done((result, status)=>{
if(!this.isDestroyed){
this.set('bridgeAuthenticateReachedStatus', status);
if (status === 'success' && !result[0].error) {
this.clearBridgePingIntervalHandle();
this.set('bridgeUsername', result[0].success.username);
this.get('storage').set('huegasm.bridgeUsername', result[0].success.username);
this.set('bridgeUsername', result[0].success.username);
}
}
this.set('bridgeAuthenticateReachedStatus', status);
}).fail(()=>{
this.clearBridgePingIntervalHandle();
this.set('error', true);
@ -122,7 +124,6 @@ export default Component.extend({
retry(){
this.onBridgeIpChange();
},
findBridgeByIp() {
let manualBridgeIp = this.get('manualBridgeIp');

View file

@ -1,6 +1,7 @@
import Ember from 'ember';
const {
A,
Component,
computed,
isEmpty,
@ -12,11 +13,8 @@ const {
export default Component.extend({
classNames: ['container-fluid'],
elementId: 'hue-controls',
bridgeIp: null,
manualBridgeIp: null,
bridgeUsername: null,
lightsData: null,
activeLights: [],
activeLights: A(),
tabList: ["Lights", "Music"],
selectedTab: 1,
pauseLightUpdates: false,
@ -60,7 +58,7 @@ export default Component.extend({
});
if(haveTooltip) {
run.once(this, function(){
run.scheduleOnce('afterRender', function(){
$('.bootstrap-tooltip').tooltip();
});
}
@ -70,7 +68,7 @@ export default Component.extend({
},
init() {
this._super();
this._super(...arguments);
if(!this.get('trial')) {
this.updateLightData();
@ -85,11 +83,7 @@ export default Component.extend({
updateLightData(){
let fail = ()=>{
clearInterval(this.get('lightsDataIntervalHandle'));
this.get('storage').remove('huegasm.bridgeIp');
this.get('storage').remove('huegasm.bridgeUsername');
location.reload();
this.send('clearBridge');
};
if(!this.get('pauseLightUpdates')){

View file

@ -2,13 +2,13 @@
<div class="row navigation">
<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>
<span class="navigation-item pointer text-uppercase {{if tab.selected "active"}}" {{action "changeTab" tab.name}}>{{tab.name}}</span>
{{/each}}
</div>
<div id="settings" class="col-xs-2">
{{#paper-menu as |menu|}}
{{#paper-button target=menu action="toggleMenu" icon-button=true}}
{{paper-icon "settings" class=dimmerOnClass id="settings-icon" size=3}}
{{paper-icon "settings" class=dimmerOnClass id="settings-icon"}}
{{/paper-button}}
{{else}}
{{#paper-menu-item action="clearBridge"}}
@ -27,7 +27,9 @@
</div>
</div>
{{lights-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights trial=trial active=lightsTabSelected colorLoopOn=colorLoopOn dimmerOn=dimmerOn}}
{{light-group lightsData=lightsData activeLights=activeLights syncLight=syncLight apiURL=apiURL classNames="horizontal-light-group" dimmerOn=dimmerOn id="active-lights"}}
{{lights-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights syncLight=syncLight trial=trial active=lightsTabSelected colorLoopOn=colorLoopOn dimmerOn=dimmerOn}}
{{music-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights active=musicTabSelected pauseLightUpdates=pauseLightUpdates dimmerOn=dimmerOn storage=storage colorLoopOn=colorLoopOn action="startIntro"}}
{{/if}}

View file

@ -40,7 +40,7 @@ export default Component.extend({
}),
init(){
this._super();
this._super(...arguments);
let storage = new window.Locally.Store({compress: true});
this.set('storage', storage);

View file

@ -32,7 +32,7 @@
<div id="footer-text">
© {{year}}
<a href="http://www.egorphilippov.me" div="" target="_blank" rel="noopener noreferrer">
<a href="http://www.egorphilippov.me" target="_blank" rel="noopener noreferrer">
Egor Philippov
</a>
</div>

View file

@ -1,26 +1,30 @@
import Ember from 'ember';
const {
A,
Component,
observer,
computed,
isEmpty,
$,
A
$
} = Ember;
export default Component.extend({
classNames: ['light-group'],
isHovering: false,
lightsList: A(),
activeLights: A(),
// list of all the lights in the hue system
onLightsDataChange: observer('lightsData', 'activeLights.[]', 'dimmerOn', function(){
if(!this.get('isHovering')){
lightsList: computed('lightsData', 'activeLights.[]', 'dimmerOn', function(){
let lightsData = this.get('lightsData'),
activeLights = this.get('activeLights'),
dimmerOn = this.get('dimmerOn'),
lightsList = A(),
type;
type,
activeClass;
for (let key in lightsData) {
activeClass = 'light-active';
if (lightsData.hasOwnProperty(key) && lightsData[key].state.reachable) {
switch(lightsData[key].modelid){
case 'LCT001':
@ -63,9 +67,11 @@ export default Component.extend({
type = 'a19';
}
let activeClass = 'light-active';
if(dimmerOn){
type += 'w';
}
if(!this.get('activeLights').includes(key)){
if(!activeLights.includes(key)){
activeClass = 'light-inactive';
}
@ -73,31 +79,33 @@ export default Component.extend({
}
}
this.set('lightsList', lightsList);
}
return lightsList;
}),
didInsertElement() {
if(this.get('lightsData')){
this.onLightsDataChange();
init(){
this._super(...arguments);
let lightsData = this.get('lightsData'),
activeLights = this.get('activeLights');
for (let key in lightsData) {
if (lightsData.hasOwnProperty(key) && lightsData[key].state.reachable) {
activeLights.pushObject(key);
}
}
},
actions: {
clickLight(id, data){
let light = $('.light'+id);
clickLight(id){
let activeLights = this.get('activeLights'),
lightId = activeLights.indexOf(id);
if(!light.hasClass('bootstrap-tooltip')){
light = light.parent();
if(lightId !== -1){
activeLights.removeObject(id);
} else {
activeLights.pushObject(id);
this.set('syncLight', id);
}
if(light.hasClass('light-inactive')){
light.addClass('light-active').removeClass('light-inactive');
} else if(light.hasClass('light-active')){
light.addClass('light-inactive').removeClass('light-active');
}
this.sendAction('action', id, data);
},
lightStartHover(id){
let hoveredLight = this.get('lightsList').filter(function(light){
@ -128,7 +136,6 @@ export default Component.extend({
}
this.set('isHovering', false);
this.onLightsDataChange();
}
}
});

View file

@ -1,5 +1,5 @@
{{#each lightsList as |light|}}
<div class="{{light.activeClass}} bootstrap-tooltip light{{light.id}}" data-toggle="tooltip" data-placement="top auto" data-title={{light.name}} {{action "clickLight" light.id light.data}} {{action "lightStartHover" light.id on="mouseEnter"}} {{action "lightStopHover" light.id on="mouseLeave"}}>
<img class="hueLight" width="40" src="assets/images/lights/{{light.type}}{{if dimmerOn "w"}}.svg">
<div class="{{light.activeClass}} bootstrap-tooltip light{{light.id}}" data-toggle="tooltip" data-placement="top auto" data-title={{light.name}} {{action "clickLight" light.id}} {{action "lightStartHover" light.id on="mouseEnter"}} {{action "lightStopHover" light.id on="mouseLeave"}}>
<img class="hueLight" width="40" src="assets/images/lights/{{light.type}}.svg">
</div>
{{/each}}

View file

@ -12,11 +12,6 @@ export default Component.extend({
classNameBindings: ['active::hidden'],
elementId: 'lights-tab',
activeLights: [],
lightsData: null,
lightsDataIntervalHandle: null,
colorPickerDisplayed: false,
rgb: [255, 255, 255],
@ -44,7 +39,9 @@ export default Component.extend({
// determines the average brightness of the hue system for the brightness slider
lightsBrightness: computed('lightsData', function(){
let lightsData = this.get('lightsData'), activeLights = this.get('activeLights'), lightsBrightness = 0;
let lightsData = this.get('lightsData'),
activeLights = this.get('activeLights'),
lightsBrightness = 0;
activeLights.forEach(function(light){
lightsBrightness += lightsData[light].state.bri;
@ -153,9 +150,31 @@ export default Component.extend({
}
}),
// sync the current light settings to the newly added light
onaActiveLightsChange: observer('syncLight', function(){
let options = {
on: this.get('lightsOn'),
bri: this.get('lightsBrightness'),
effect: this.get('colorLoopOn') ? 'colorloop' : 'none'
}, rgb = this.get('rgb'),
syncLight = this.get('syncLight');
if(rgb[0] !== 255 && rgb[1] !== 255 && rgb[2] !== 255) {
options['xy'] = this.rgbToXy(rgb[0], rgb[1], rgb[2]);
}
options['transitiontime'] = 0;
$.ajax(this.get('apiURL') + '/lights/' + syncLight + '/state', {
data: JSON.stringify(options),
contentType: 'application/json',
type: 'PUT'
});
}),
didInsertElement() {
$(document).click((event)=>{
if(this.get('colorPickerDisplayed') && !event.target.classList.includes('color') && !$(event.target).closest('.color-picker, #color-row').length) {
if(this.get('colorPickerDisplayed') && !event.target.classList.contains('color') && !$(event.target).closest('.color-picker, #color-row').length) {
this.toggleProperty('colorPickerDisplayed');
}
});
@ -166,39 +185,12 @@ export default Component.extend({
},
actions: {
clickLight(light){
let activeLights = this.get('activeLights'),
lightId = activeLights.indexOf(light);
if(lightId !== -1){
activeLights.removeObject(light);
} else {
activeLights.pushObject(light);
// sync the current light settings to the newly added light
let options = {on: this.get('lightsOn'), bri: this.get('lightsBrightness'), effect: this.get('colorLoopOn') ? 'colorloop' : 'none'},
rgb = this.get('rgb');
if(rgb[0] !== 255 && rgb[1] !== 255 && rgb[2] !== 255) {
options['xy'] = this.rgbToXy(rgb[0], rgb[1], rgb[2]);
}
options['transitiontime'] = 0;
$.ajax(this.get('apiURL') + '/lights/' + light + '/state', {
data: JSON.stringify(options),
contentType: 'application/json',
type: 'PUT'
});
}
},
toggleColorPicker() {
this.toggleProperty('colorPickerDisplayed');
}
},
// **************** STROBE LIGHT START ****************
strobeOn: false,
strobeOnInervalHandle: null,

View file

@ -1,8 +1,4 @@
{{#paper-list}}
{{#paper-item class="item"}}
{{light-group lightsData=lightsData activeLights=activeLights action='clickLight' apiURL=apiURL classNames="horizontal-light-group" dimmerOn=dimmerOn id="active-lights"}}
{{/paper-item}}
{{#paper-item}}
{{paper-icon "power-settings-new" class=dimmerOnClass}}
<p data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip lights-control-tooltip" data-title="Turn the selected lights on/off">Power</p>

View file

@ -315,7 +315,7 @@ export default Component.extend(helperMixin, visualizerMixin, {
},
init() {
this._super();
this._super(...arguments);
window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame;
window.cancelAnimationFrame = window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || window.msCancelAnimationFrame;
@ -361,8 +361,6 @@ export default Component.extend(helperMixin, visualizerMixin, {
},
didInsertElement() {
this._super();
let self = this;
// file input code

View file

@ -63,7 +63,7 @@ body, button {
text-align: right;
}
.settings::before {
.settings:before {
transition: 0.1s all ease-in-out;
}

View file

@ -1,5 +1,8 @@
#lights-tab {
min-height: 400px;
md-list {
padding-top: 0;
}
}
.lights-control-tooltip + .tooltip {
@ -27,12 +30,13 @@
.navigation {
text-align: center;
padding: 30px 0 10px 0;
padding: 10px 0 0 0;
}
.navigation-item {
font-size: 18px;
padding: 0 10px 0 10px;
line-height: 3;
}
.navigation-item.active {

View file

@ -1,5 +1,6 @@
.light-group {
margin: 0 auto 0 auto;
margin: 0 auto 10px auto;
text-align: center;
.tooltip.top {
margin-top: 4px;
margin-left: 0;