diff --git a/js/component/card/temperature_profiles.js b/js/component/card/temperature_profiles.js index 535ced3..57c4920 100644 --- a/js/component/card/temperature_profiles.js +++ b/js/component/card/temperature_profiles.js @@ -33,12 +33,17 @@ beestat.extend(beestat.component.card.temperature_profiles, beestat.component.ca * @param {rocket.Elements} parent */ beestat.component.card.temperature_profiles.prototype.decorate_contents_ = function(parent) { + var container = $.createElement('div').style({ + 'position': 'relative' + }); + parent.appendChild(container); + var data = this.get_data_(); var chart_container = $.createElement('div'); - parent.appendChild(chart_container); + container.appendChild(chart_container); - if (Object.keys(data.series).length === 0) { + if (this.has_data_() === false) { chart_container.style('filter', 'blur(3px)'); var no_data = $.createElement('div'); no_data.style({ @@ -53,7 +58,7 @@ beestat.component.card.temperature_profiles.prototype.decorate_contents_ = funct 'text-align': 'center' }); no_data.innerHTML('No data to display.
Why?'); - parent.appendChild(no_data); + container.appendChild(no_data); } this.chart_ = new beestat.component.chart.temperature_profiles(data); @@ -315,6 +320,15 @@ beestat.component.card.temperature_profiles.prototype.decorate_top_right_ = func self.chart_.export(); })); + if (this.has_data_() === true) { + menu.add_menu_item(new beestat.component.menu_item() + .set_text('More Info') + .set_icon('information') + .set_callback(function() { + new beestat.component.modal.temperature_profiles_info().render(); + })); + } + menu.add_menu_item(new beestat.component.menu_item() .set_text('Help') .set_icon('help_circle') @@ -409,3 +423,13 @@ beestat.component.card.temperature_profiles.prototype.get_profile_extremes_ = fu return extremes; }; + +/** + * Get whether or not there is any data to be displayed. + * + * @return {boolean} + */ +beestat.component.card.temperature_profiles.prototype.has_data_ = function() { + const data = this.get_data_(); + return Object.keys(data.series).length > 0; +}; diff --git a/js/component/modal/contribute_video.js b/js/component/modal/contribute_video.js deleted file mode 100644 index b2e3db5..0000000 --- a/js/component/modal/contribute_video.js +++ /dev/null @@ -1,106 +0,0 @@ -/** - * Contribute video - */ -beestat.component.modal.contribute_video = function() { - beestat.component.modal.apply(this, arguments); -}; -beestat.extend(beestat.component.modal.contribute_video, beestat.component.modal); - -/** - * Decorate - * - * @param {rocket.Elements} parent - */ -beestat.component.modal.contribute_video.prototype.decorate_contents_ = function(parent) { - const container = document.createElement('div'); - /** - * The 16:9 aspect ratio corresponds to a height that is 56.25% of the width. - * https://www.ankursheel.com/blog/full-width-you-tube-video-embed - */ - Object.assign(container.style, { - 'position': 'relative', - 'padding-bottom': '56.25%', - 'height': '0' - }); - parent.appendChild(container); - - const iframe = document.createElement('iframe'); - Object.assign(iframe.style, { - 'position': 'absolute', - 'top': '0', - 'left': '0', - 'width': '100%', - 'height': '100%' - }); - iframe.setAttribute('src', 'https://player.vimeo.com/video/769222247?h=3e6436bc10'); - iframe.setAttribute('frameborder', '0'); - iframe.setAttribute('allow', 'autoplay; fullscreen; picture-in-picture'); - iframe.setAttribute('allowfullscreen', 'allowfullscreen'); - container.appendChild(iframe); -}; - -/** - * Get title. - * - * @return {string} The title. - */ -beestat.component.modal.contribute_video.prototype.get_title_ = function() { - return 'I need your help!'; -}; - -/** - * Get the buttons that go on the bottom of this modal. - * - * @return {[beestat.component.button]} The buttons. - */ -beestat.component.modal.contribute_video.prototype.get_buttons_ = function() { - const give_other = new beestat.component.tile() - .set_background_color('#fff') - .set_text_color(beestat.style.color.gray.base) - .set_text_hover_color(beestat.style.color.green.base) - .set_shadow(false) - .set_size('large') - .set_text('Other ways to give') - .addEventListener('click', function() { - (new beestat.layer.contribute()).render(); - }); - - const pay_links = { - 'usd': { - 'dev': 'https://donate.stripe.com/test_bIY2by6pS1ii99u8wG', - 'live': 'https://donate.stripe.com/7sIcPp4Gt6APais144' - }, - 'cad': { - 'dev': 'https://donate.stripe.com/test_bIY2by6pS1ii99u8wG', - 'live': 'https://donate.stripe.com/28obLl4Gte3hfCMdR4' - }, - 'aud': { - 'dev': 'https://donate.stripe.com/test_bIY2by6pS1ii99u8wG', - 'live': 'https://donate.stripe.com/dR66r12ylcZd3U4aER' - }, - 'gbp': { - 'dev': 'https://donate.stripe.com/test_bIY2by6pS1ii99u8wG', - 'live': 'https://donate.stripe.com/4gwbLl3Cpe3hais3cs' - } - }; - - const give_one_time = new beestat.component.tile() - .set_background_color(beestat.style.color.green.base) - .set_background_hover_color(beestat.style.color.green.light) - .set_text_color('#fff') - .set_icon('gift') - .set_size('large') - .set_text('Make a One-Time Contribution') - .addEventListener('click', function() { - window.open( - pay_links[beestat.setting('units.currency')][window.environment] + - '?prefilled_email=' + beestat.user.get().email_address + - '&client_reference_id=' + beestat.user.get().user_id - ); - }); - - return [ - give_other, - give_one_time - ]; -}; diff --git a/js/component/modal/temperature_profiles_info.js b/js/component/modal/temperature_profiles_info.js new file mode 100644 index 0000000..bc1863d --- /dev/null +++ b/js/component/modal/temperature_profiles_info.js @@ -0,0 +1,62 @@ +/** + * Temperature Profiles Details + */ +beestat.component.modal.temperature_profiles_info = function() { + beestat.component.modal.apply(this, arguments); +}; +beestat.extend(beestat.component.modal.temperature_profiles_info, beestat.component.modal); + +beestat.component.modal.temperature_profiles_info.prototype.decorate_contents_ = function(parent) { + const thermostat = beestat.cache.thermostat[beestat.setting('thermostat_id')]; + + const container = $.createElement('div') + .style({ + 'display': 'grid', + 'grid-template-columns': 'repeat(auto-fill, minmax(150px, 1fr))', + 'margin': '0 0 16px -16px' + }); + parent.appendChild(container); + + const fields = []; + + [ + 'heat_1', + 'heat_2', + 'auxiliary_heat_1', + 'auxiliary_heat_2', + 'cool_1', + 'cool_2', + 'resist' + ].forEach(function(type) { + if (thermostat.profile.temperature[type] !== null) { + fields.push({ + 'name': beestat.series['indoor_' + type + '_delta'].name, + 'value': + 'Slope = ' + + thermostat.profile.temperature[type].linear_trendline.slope + + '
Intercept = ' + + thermostat.profile.temperature[type].linear_trendline.intercept + }); + } + }); + + fields.forEach(function(field) { + var div = $.createElement('div') + .style({ + 'padding': '16px 0 0 16px' + }); + container.appendChild(div); + + div.appendChild($.createElement('div') + .style({ + 'font-weight': beestat.style.font_weight.bold, + 'margin-bottom': (beestat.style.size.gutter / 4) + }) + .innerHTML(field.name)); + div.appendChild($.createElement('div').innerHTML(field.value)); + }); +}; + +beestat.component.modal.temperature_profiles_info.prototype.get_title_ = function() { + return 'Temperature Profiles Info'; +}; diff --git a/js/js.php b/js/js.php index 6328b1b..3b29d3e 100755 --- a/js/js.php +++ b/js/js.php @@ -135,7 +135,7 @@ if($setting->get('environment') === 'dev' || $setting->get('environment') === 'd echo '' . PHP_EOL; echo '' . PHP_EOL; echo '' . PHP_EOL; - echo '' . PHP_EOL; + echo '' . PHP_EOL; echo '' . PHP_EOL; echo '' . PHP_EOL; echo '' . PHP_EOL;