Dan estimator fix (#1075)

chillenberger · web-flow · commit d62cd7e8fd52 · 2023-10-13T16:41:37.000-06:00
diff --git a/pgml-dashboard/src/components/inputs/range_group/mod.rs b/pgml-dashboard/src/components/inputs/range_group/mod.rs
@@ -1,5 +1,6 @@
 use pgml_components::component;
 use sailfish::TemplateOnce;
+use crate::components::stimulus::stimulus_target::StimulusTarget;
 
 #[derive(TemplateOnce, Default)]
 #[template(path = "inputs/range_group/template.html")]
@@ -10,10 +11,11 @@ pub struct RangeGroup {
     pub max: i64,
     pub step: f32,
     pub initial_value: f64,
-    pub text_target: Option<String>,
-    pub range_target: Option<String>,
+    pub text_target: StimulusTarget,
+    pub range_target: StimulusTarget,
     pub cost_rate: Option<f32>,
     pub units: String,
+    pub group_target: StimulusTarget,
 }
 
 impl RangeGroup {
@@ -25,10 +27,11 @@ impl RangeGroup {
             max: 100,
             step: 1.0,
             initial_value: 1.0,
-            text_target: None,
-            range_target: None,
+            text_target: StimulusTarget::new(),
+            range_target: StimulusTarget::new(),
             cost_rate: None,
             units: String::default(),
+            group_target: StimulusTarget::new(),
         }
     }
 
@@ -49,13 +52,13 @@ impl RangeGroup {
         self
     }
 
-    pub fn text_target(mut self, target: &str) -> Self {
-        self.text_target = Some(target.to_owned());
+    pub fn text_target(mut self, target: StimulusTarget) -> Self {
+        self.text_target = target;
         self
     }
 
-    pub fn range_target(mut self, target: &str) -> Self {
-        self.range_target = Some(target.to_owned());
+    pub fn range_target(mut self, target: StimulusTarget) -> Self {
+        self.range_target = target.to_owned();
         self
     }
 
@@ -68,6 +71,11 @@ impl RangeGroup {
         self.units = units.to_owned();
         self
     }
+
+    pub fn group_target(mut self, target: StimulusTarget) -> Self {
+        self.group_target = target;
+        self
+    }
 }
 
 component!(RangeGroup);
diff --git a/pgml-dashboard/src/components/inputs/range_group/range_group_controller.js b/pgml-dashboard/src/components/inputs/range_group/range_group_controller.js
@@ -5,10 +5,12 @@ export default class extends Controller {
   static targets = [
     "range",
     "text",
+    "group"
   ]
 
   static values = {
-    bounds: Object
+    bounds: Object,
+    initial: Number
   }
 
   initialize() {
@@ -17,26 +19,30 @@ export default class extends Controller {
 
   updateText(e) {
     this.textTarget.value = e.target.value
+    this.groupTarget.dispatchEvent(new Event("rangeInput"))
   }
 
   updateRange(e) {
     if( e.target.value < this.boundsValue.min 
         || !e.target.value || !this.isNumeric(e.target.value)) {
       this.rangeTarget.value = this.boundsValue.min
       this.textTarget.value = this.boundsValue.min
-      return 
-    }
-
-    if( e.target.value > this.boundsValue.max) {
+    } else if( e.target.value > this.boundsValue.max) {
       this.rangeTarget.value = this.boundsValue.max
       this.textTarget.value = this.boundsValue.max
-      return
+    } else {
+      this.rangeTarget.value = e.target.value
     }
 
-    this.rangeTarget.value = e.target.value
+    this.groupTarget.dispatchEvent(new Event("rangeInput"))
   }
 
   isNumeric(n) {
     return !isNaN(parseFloat(n)) && isFinite(n);
   }
+
+  reset() {
+    this.rangeTarget.value = this.initialValue
+    this.textTarget.value = this.initialValue
+  }
 }
diff --git a/pgml-dashboard/src/components/inputs/range_group/template.html b/pgml-dashboard/src/components/inputs/range_group/template.html
@@ -1,14 +1,19 @@
-<div data-controller="inputs-range-group" data-inputs-range-group-bounds-value='{"min": <%- min%>, "max": <%- max%>}'>
+<div data-controller="inputs-range-group" 
+      data-inputs-range-group-bounds-value='{"min": <%- min%>, "max": <%- max%>}'
+      data-inputs-range-group-initial-value="<%- initial_value.to_string() %>"
+      data-inputs-range-group-target="group"
+      <%- group_target %>
+      data-action="reset->inputs-range-group#reset">
   <div class="d-flex flex-column flex-md-row">
     <div class="flex-grow-1">
         <h6 class="h6"><%- title %></h6>
     </div>
     <div>
       <div class="input-group">
-        <input class="text-input form-control text-end text-white fw-bold" maxlength="4" type="text" 
+        <input class="text-input form-control text-end text-white fw-bold" maxlength="5" type="text" 
           data-inputs-range-group-target="text"
           data-action="focusout->inputs-range-group#updateRange"
-          <% if text_target.is_some() {%><%- text_target.unwrap()%><% } %>>
+          <%- text_target %>>
         <div class="input-group-text fw-bold text-start" style="width: 2em;">
           <%- units %>
         </div>
@@ -25,7 +30,7 @@ <h6 class="h6"><%- title %></h6>
     value="<%- initial_value.to_string() %>"
     data-action="inputs-range-group#updateText" 
     data-inputs-range-group-target="range"
-    <% if range_target.is_some() { %><%- range_target.unwrap() %><% } %>>
+    <%- range_target %>>
     
     <% if cost_rate.is_some() { %>
     <div class="w-100 d-flex justify-content-end">
