Added help modal for when elevation is set too high or low

js/component/card/floor_plan_editor.js

@@ -361,6 +361,8 @@ beestat.component.card.floor_plan_editor.prototype.decorate_info_pane_floor_ = f
     .set_maxlength('5')
     .set_requirements({
       'type': 'integer',
+      'min_value': -50,
+      'max_value': 50,
       'required': true
     })
     .render(div);
@@ -371,7 +373,8 @@ beestat.component.card.floor_plan_editor.prototype.decorate_info_pane_floor_ = f
       self.update_floor_plan_();
       self.rerender();
     } else {
-      elevation_input.set_value(self.state_.active_group.elevation);
+      elevation_input.set_value(self.state_.active_group.elevation / 12, false);
+      new beestat.component.modal.floor_plan_elevation_help().render();
     }
   });
 
@@ -396,7 +399,7 @@ beestat.component.card.floor_plan_editor.prototype.decorate_info_pane_floor_ = f
       self.state_.active_group.height = height_input.get_value() * 12;
       self.update_floor_plan_();
     } else {
-      height_input.set_value(self.state_.active_group.height);
+      height_input.set_value(self.state_.active_group.height, false);
     }
   });
 
@@ -459,6 +462,8 @@ beestat.component.card.floor_plan_editor.prototype.decorate_info_pane_room_ = fu
     .set_width('100%')
     .set_maxlength('5')
     .set_requirements({
+      'min_value': -50,
+      'max_value': 50,
       'type': 'integer'
     })
     .render(div);
@@ -469,7 +474,8 @@ beestat.component.card.floor_plan_editor.prototype.decorate_info_pane_room_ = fu
       self.update_floor_plan_();
       self.rerender();
     } else {
-      elevation_input.set_value('');
+      elevation_input.set_value('', false);
+      new beestat.component.modal.floor_plan_elevation_help().render();
     }
   });
 
@@ -493,7 +499,7 @@ beestat.component.card.floor_plan_editor.prototype.decorate_info_pane_room_ = fu
       self.state_.active_room_entity.get_room().height = height_input.get_value() * 12;
       self.update_floor_plan_();
     } else {
-      height_input.set_value('');
+      height_input.set_value('', false);
     }
   });
 

js/component/modal/floor_plan_elevation_help.js

@@ -0,0 +1,57 @@
+/**
+ * Help for floor plan elevation.
+ *
+ * @param {number} floor_plan_id
+ */
+beestat.component.modal.floor_plan_elevation_help = function() {
+  beestat.component.modal.apply(this, arguments);
+};
+beestat.extend(beestat.component.modal.floor_plan_elevation_help, beestat.component.modal);
+
+/**
+ * Decorate
+ *
+ * @param {rocket.Elements} parent
+ */
+beestat.component.modal.floor_plan_elevation_help.prototype.decorate_contents_ = function(parent) {
+  const p1 = document.createElement('p');
+  p1.innerText = 'Whoops!';
+  parent.appendChild(p1);
+
+  const p2 = document.createElement('p');
+  p2.innerText = 'Elevation should be the height of this floor or room relative to the ground outside your home. For example, your first floor elevation should typically be 0, and your second floor elevation would be the height of your first floor ceilings.';
+  parent.appendChild(p2);
+
+  const p3 = document.createElement('p');
+  p3.innerText = 'All rooms inherit the elevation of their floor, but can be overridden for complex floor plans.';
+  parent.appendChild(p3);
+};
+
+/**
+ * Get title.
+ *
+ * @return {string} The title.
+ */
+beestat.component.modal.floor_plan_elevation_help.prototype.get_title_ = function() {
+  return 'Elevation';
+};
+
+/**
+ * Get the buttons that go on the bottom of this modal.
+ *
+ * @return {[beestat.component.button]} The buttons.
+ */
+beestat.component.modal.floor_plan_elevation_help.prototype.get_buttons_ = function() {
+  var self = this;
+
+  var ok = 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_text('Got it!')
+    .addEventListener('click', function() {
+      self.dispose();
+    });
+
+  return [ok];
+};

js/js.php

@@ -122,6 +122,7 @@ if($setting->get('environment') === 'dev' || $setting->get('environment') === 'd
   echo '<script src="/js/component/modal/update_floor_plan.js"></script>' . PHP_EOL;
   echo '<script src="/js/component/modal/delete_floor_plan.js"></script>' . PHP_EOL;
   echo '<script src="/js/component/modal/change_floor_plan.js"></script>' . PHP_EOL;
+  echo '<script src="/js/component/modal/floor_plan_elevation_help.js"></script>' . PHP_EOL;
   echo '<script src="/js/component/input.js"></script>' . PHP_EOL;
   echo '<script src="/js/component/input/text.js"></script>' . PHP_EOL;
   echo '<script src="/js/component/input/checkbox.js"></script>' . PHP_EOL;