diff --git a/css/dashboard.css b/css/dashboard.css index 844a6da..0e1b2f5 100644 --- a/css/dashboard.css +++ b/css/dashboard.css @@ -420,6 +420,7 @@ input[type=range]::-moz-range-thumb { .icon.alarm_snooze:before { content: "\F068E"; } .icon.alpha_b:before { content: "\F0AEF"; } .icon.alpha_b_box:before { content: "\F0B09"; } +.icon.arrow_down:before { content: "\F0045"; } .icon.arrow_expand_horizontal:before { content: "\F084E"; } .icon.arrow_expand_vertical:before { content: "\F084F"; } .icon.arrow_horizontal_lock:before { content: "\F115B"; } diff --git a/js/component/card/floor_plan_editor.js b/js/component/card/floor_plan_editor.js index 26da4ba..5838c6b 100644 --- a/js/component/card/floor_plan_editor.js +++ b/js/component/card/floor_plan_editor.js @@ -119,6 +119,27 @@ beestat.component.card.floor_plan_editor.prototype.decorate_contents_ = function .style('margin-top', beestat.style.size.gutter / 2); parent.appendChild(this.info_pane_container_); this.decorate_info_pane_(this.info_pane_container_); + + // Help container + if (beestat.floor_plan.get_area(beestat.setting('visualize.floor_plan_id')) === 0) { + const help_container = document.createElement('div'); + Object.assign(help_container.style, { + 'position': 'absolute', + 'left': '65px', + 'top': '59px' + }); + drawing_pane_container.appendChild(help_container); + + this.helper_tile_ = new beestat.component.tile() + .set_text('Start by adding a room') + .set_shadow(false) + .set_background_color(beestat.style.color.green.base) + .set_text_color('#fff') + .set_type('pill') + .set_size('small') + .set_icon('arrow_left') + .render($(help_container)); + } } const expand_container = document.createElement('div'); @@ -478,6 +499,7 @@ beestat.component.card.floor_plan_editor.prototype.decorate_info_pane_room_ = fu // Sensor div = $.createElement('div'); + div.style('position', 'relative'); grid.appendChild(div); const sensor_input = new beestat.component.input.select() .add_option({ @@ -539,8 +561,37 @@ beestat.component.card.floor_plan_editor.prototype.decorate_info_pane_room_ = fu beestat.cache.delete('data.three_d__runtime_sensor'); } + // For the help box + self.update_info_pane_(); + self.update_floor_plan_(); }); + + // Help container + if ( + Object.keys(beestat.floor_plan.get_sensor_ids_map(beestat.setting('visualize.floor_plan_id'))).length === 0 && + this.state_.active_room_entity !== undefined + ) { + const help_container = document.createElement('div'); + Object.assign(help_container.style, { + 'position': 'absolute', + 'left': 0, + 'top': '-9px' + }); + div.appendChild(help_container); + + this.helper_tile_ = new beestat.component.tile() + .set_text('Assign a sensor') + .set_shadow(false) + .set_background_color(beestat.style.color.green.base) + .set_text_color('#fff') + .set_type('pill') + .set_size('small') + .set_icon('arrow_down') + .render($(help_container)); + + sensor_input.set_label('⠀'); + } }; /** diff --git a/js/component/floor_plan.js b/js/component/floor_plan.js index ea780d1..ddad377 100644 --- a/js/component/floor_plan.js +++ b/js/component/floor_plan.js @@ -74,14 +74,6 @@ beestat.component.floor_plan.prototype.render = function(parent) { }); parent.appendChild(this.toolbar_container_); - this.toolbar_helper_container_ = $.createElement('div'); - this.toolbar_helper_container_.style({ - 'position': 'absolute', - 'top': 55, - 'left': beestat.style.size.gutter * 4 - }); - parent.appendChild(this.toolbar_helper_container_); - this.floors_container_ = $.createElement('div'); this.floors_container_.style({ 'position': 'absolute', @@ -443,17 +435,6 @@ beestat.component.floor_plan.prototype.update_toolbar = function() { }) ); - // Helper - if (beestat.floor_plan.get_area(this.floor_plan_id_) === 0) { - new beestat.component.tile() - .set_text('Start by adding a room') - .set_shadow(false) - .set_background_color(beestat.style.color.green.base) - .set_text_color('#fff') - .set_type('pill') - .render(this.toolbar_helper_container_); - } - // Remove room const remove_room_button = new beestat.component.tile() .set_icon('card_remove_outline') diff --git a/js/component/input/select.js b/js/component/input/select.js index cc54833..657e4b5 100644 --- a/js/component/input/select.js +++ b/js/component/input/select.js @@ -44,6 +44,9 @@ beestat.component.input.select.prototype.decorate_ = function(parent) { this.input_.style.marginBottom = beestat.style.size.gutter + 'px'; this.input_.style.borderBottom = '2px solid ' + beestat.style.color.lightblue.base; + // Clear any existing option values from the input. + this.input_.innerHTML = ''; + // Set input width; interpret string widths literally (ex: 100%) if (this.width_ !== undefined) { if (isNaN(this.width_) === true) {