From 9eab5335f9d3a0aa1ef82f8e8cc283e269e02b7f Mon Sep 17 00:00:00 2001
From: Jon Ziebell <ziebelje@gmail.com>
Date: Mon, 29 Aug 2022 06:53:38 -0400
Subject: [PATCH] Added help modal for when elevation is set too high or low

---
 js/component/card/floor_plan_editor.js        | 14 +++--
 .../modal/floor_plan_elevation_help.js        | 57 +++++++++++++++++++
 js/js.php                                     |  1 +
 3 files changed, 68 insertions(+), 4 deletions(-)
 create mode 100644 js/component/modal/floor_plan_elevation_help.js

diff --git a/js/component/card/floor_plan_editor.js b/js/component/card/floor_plan_editor.js
index 5838c6b..642b588 100644
--- a/js/component/card/floor_plan_editor.js
+++ b/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);
     }
   });
 
diff --git a/js/component/modal/floor_plan_elevation_help.js b/js/component/modal/floor_plan_elevation_help.js
new file mode 100644
index 0000000..cee2603
--- /dev/null
+++ b/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];
+};
diff --git a/js/js.php b/js/js.php
index 247ad02..06b406e 100755
--- a/js/js.php
+++ b/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;