postgresml · chillenberger · Sep 7, 2023 · Sep 7, 2023 · Sep 7, 2023
diff --git a/pgml-dashboard/src/components/inputs/mod.rs b/pgml-dashboard/src/components/inputs/mod.rs
@@ -0,0 +1,6 @@
+// This file is automatically generated.
+// You shouldn't modify it manually.
+
+// src/components/inputs/range_group
+pub mod range_group;
+pub use range_group::RangeGroup;
diff --git a/pgml-dashboard/src/components/inputs/range_group/mod.rs b/pgml-dashboard/src/components/inputs/range_group/mod.rs
@@ -0,0 +1,73 @@
+use pgml_components::component;
+use sailfish::TemplateOnce;
+
+#[derive(TemplateOnce, Default)]
+#[template(path = "inputs/range_group/template.html")]
+pub struct RangeGroup {
+    pub title: String,
+    pub identifier: String,
+    pub min: i64,
+    pub max: i64,
+    pub step: f32,
+    pub initial_value: f64,
+    pub text_target: Option<String>,
+    pub range_target: Option<String>,
+    pub cost_rate: Option<f32>,
+    pub units: String,
+}
+
+impl RangeGroup {
+    pub fn new(title: &str) -> RangeGroup {
+        RangeGroup {
+            title: title.to_owned(),
+            identifier: title.replace(" ", "_"),
+            min: 0,
+            max: 100,
+            step: 1.0,
+            initial_value: 1.0,
+            text_target: None,
+            range_target: None,
+            cost_rate: None,
+            units: String::default(),
+        }
+    }
+
+    pub fn identifier(mut self, identifier: &str) -> Self {
+        self.identifier = identifier.replace(" ", "_").to_owned();
+        self
+    }
+
+    pub fn bounds(mut self, min: i64, max: i64, step: f32) -> Self {
+        self.min = min;
+        self.max = max;
+        self.step = step;
+        self
+    }
+
+    pub fn initial_value(mut self, value: f64) -> Self {
+        self.initial_value = value;
+        self
+    }
+
+    pub fn text_target(mut self, target: &str) -> Self {
+        self.text_target = Some(target.to_owned());
+        self
+    }
+
+    pub fn range_target(mut self, target: &str) -> Self {
+        self.range_target = Some(target.to_owned());
+        self
+    }
+
+    pub fn cost_rate(mut self, cost_rate: f32) -> Self {
+        self.cost_rate = Some(cost_rate);
+        self
+    }
+
+    pub fn units(mut self, units: &str) -> Self {
+        self.units = units.to_owned();
+        self
+    }
+}
+
+component!(RangeGroup);
diff --git a/pgml-dashboard/src/components/inputs/range_group/range_group.scss b/pgml-dashboard/src/components/inputs/range_group/range_group.scss
@@ -0,0 +1,29 @@
+div[data-controller="inputs-range-group"] {
+    .text-input {
+        width: 4em;
+    }
+
+    .hourly-rate {
+        display: flex;
+        flex-direction: row;
+        background-color: #{$gray-900};
+        border-radius: $border-radius;
+        padding: 8px 4px;
+
+        color: #{$gray-400};
+        text-align: center;
+        font-size: 18px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: 24px;
+        letter-spacing: 0.18px;
+    }
+
+    .cost {
+        width: 5em;
+    }
+
+    .unit {
+        width: 28px;
+    }
+}
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
@@ -0,0 +1,42 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+
+  static targets = [
+    "range",
+    "text",
+  ]
+
+  static values = {
+    bounds: Object
+  }
+
+  initialize() {
+    this.textTarget.value = this.rangeTarget.value
+  }
+
+  updateText(e) {
+    this.textTarget.value = e.target.value
+  }
+
+  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) {
+      this.rangeTarget.value = this.boundsValue.max
+      this.textTarget.value = this.boundsValue.max
+      return
+    }
+
+    this.rangeTarget.value = e.target.value
+  }
+
+  isNumeric(n) {
+    return !isNaN(parseFloat(n)) && isFinite(n);
+  }
+}
diff --git a/pgml-dashboard/src/components/inputs/range_group/template.html b/pgml-dashboard/src/components/inputs/range_group/template.html
@@ -0,0 +1,38 @@
+<div data-controller="inputs-range-group" data-inputs-range-group-bounds-value='{"min": <%- min%>, "max": <%- max%>}'>
+  <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" 
+          data-inputs-range-group-target="text"
+          data-action="focusout->inputs-range-group#updateRange"
+          <% if text_target.is_some() {%><%- text_target.unwrap()%><% } %>>
+        <div class="input-group-text fw-bold text-start" style="width: 2em;">
+          <%- units %>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <input class="form-range"
+    type="range"
+    name="<%- identifier %>"
+    min="<%- min %>"
+    max="<%- max %>"
+    step="<%- step %>"
+    value="<%- initial_value %>"
+    data-action="inputs-range-group#updateText" 
+    data-inputs-range-group-target="range"
+    <% if range_target.is_some() { %><%- range_target.unwrap() %><% } %>>
+
+    <% if cost_rate.is_some() { %>
+    <div class="w-100 d-flex justify-content-end">
+      <div class="hourly-rate">
+        <div class="unit">$</div>
+        <div class="cost"><%= format!("{:.2}",cost_rate.unwrap()) %>/hr</div>
+      </div>
+    </div>
+    <% } %>
+</div>
diff --git a/pgml-dashboard/src/components/mod.rs b/pgml-dashboard/src/components/mod.rs
@@ -17,6 +17,9 @@ pub use dropdown::Dropdown;
 pub mod github_icon;
 pub use github_icon::GithubIcon;
 
+// src/components/inputs
+pub mod inputs;
+
 // src/components/left_nav_menu
 pub mod left_nav_menu;
 pub use left_nav_menu::LeftNavMenu;

diff --git a/pgml-dashboard/static/css/bootstrap-theme.scss b/pgml-dashboard/static/css/bootstrap-theme.scss
@@ -15,6 +15,7 @@
 // @import "./bootstrap-5.3.0-alpha1/scss/bootstrap.scss";
 @import "./bootstrap-5.3.0-alpha1/scss/root";
 @import "./bootstrap-5.3.0-alpha1/scss/reboot";
+
 @import "./bootstrap-5.3.0-alpha1/scss/type";
 @import "./bootstrap-5.3.0-alpha1/scss/images";
 @import "./bootstrap-5.3.0-alpha1/scss/containers";
@@ -26,9 +27,14 @@
 @import "./bootstrap-5.3.0-alpha1/scss/forms/form-control";
 @import "./bootstrap-5.3.0-alpha1/scss/forms/form-select";
 @import "./bootstrap-5.3.0-alpha1/scss/forms/form-check";
+
 // Do not import form-range, we style it ourselves entirely
 // @import "../bootstrap-5.3.0-alpha1/scss/forms/form-range";
 
+@import "./bootstrap-5.3.0-alpha1/scss/forms/floating-labels";
+@import "./bootstrap-5.3.0-alpha1/scss/forms/input-group";
+@import "./bootstrap-5.3.0-alpha1/scss/forms/validation";
+
 @import "./bootstrap-5.3.0-alpha1/scss/buttons";
 @import "./bootstrap-5.3.0-alpha1/scss/transitions";
 @import "./bootstrap-5.3.0-alpha1/scss/dropdown";

diff --git a/pgml-dashboard/static/css/modules.scss b/pgml-dashboard/static/css/modules.scss
@@ -2,6 +2,7 @@
 // There is no need to edit it manually.
 
 @import "../../src/components/dropdown/dropdown.scss";
+@import "../../src/components/inputs/range_group/range_group.scss";
 @import "../../src/components/left_nav_menu/left_nav_menu.scss";
 @import "../../src/components/left_nav_web_app/left_nav_web_app.scss";
 @import "../../src/components/modal/modal.scss";

diff --git a/pgml-dashboard/templates/content/playground.html b/pgml-dashboard/templates/content/playground.html
@@ -1,16 +1,23 @@
 <% use crate::components::*; 
 use crate::components::tables::large::*;
 use crate::components::navigation::tabs::*;
+use crate::components::inputs::range_group::RangeGroup;
 %>
 
 <div class="min-height: 100vh;" data-controller="playground">
-  <h3 class="h3">Playground</h3>
+  <h1 class="h1">Playground</h1>
+  <p>This is a space to display components.</p>
 
-  <div class="mb-3">
+  <h3 class="h3">icons</h3>
+  <div class="mb-5">
     <%+ GithubIcon::new() %>
   </div>
-
   <div class="mb-3">
+    <%+ ProfileIcon %>
+  </div>
+
+  <h3 class="h3">Dropdowns</h3>
+  <div class="mb-5">
     <div class="row">
       <div class="col-6" style="min-height: 400px;">
         <%+ Dropdown::new(
@@ -39,7 +46,10 @@ <h3 class="h3">Playground</h3>
       </div>
     </div>
   </div>
-  <div class="mb-3">
+
+
+  <h3 class="h3">Navigation</h3>
+  <div class="mb-5">
     <%+ Tabs::new(
         &[
             Tab::new(
@@ -85,7 +95,26 @@ <h3 class="h3">Playground</h3>
     )
     .active_tab("Test tab") %>
   </div>
-  <div class="mb-3">
 
+  <h3 class="h3">Inputs</h3>
+  <div style="background: #17181A; padding: 2rem; border-radius: 16px;">
+    <div class="mb-5">
+      <div class="my-5">
+        <%+ RangeGroup::new("Input 1")
+          .initial_value(4.0)
+          .identifier("my_test_input")
+          .bounds(2, 38, 2.0)
+          .units("T") %>
+      </div>
+
+      <div class="my-5">
+        <%+ RangeGroup::new("Input 2: with hourly rate")
+        .initial_value(3.0)
+        .identifier("my_test input 2")
+        .bounds(1, 20, 1.0)
+        .units("GB")
+        .cost_rate(0.144) %>
+      </div>
+    </div>
   </div>
 </div>