Skip to content

Commit 5af5390

Browse files
chillenbergerchillenberger
authored
make a range input group componnet (postgresml#998)
1 parent 40a13e9 commit 5af5390

File tree

9 files changed

+232
-5
lines changed

9 files changed

+232
-5
lines changed

‎pgml-dashboard/src/components/inputs/mod.rs

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
// This file is automatically generated.
2+
// You shouldn't modify it manually.
3+
4+
// src/components/inputs/range_group
5+
pub mod range_group;
6+
pub use range_group::RangeGroup;

‎pgml-dashboard/src/components/inputs/range_group/mod.rs

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
use pgml_components::component;
2+
use sailfish::TemplateOnce;
3+
4+
#[derive(TemplateOnce, Default)]
5+
#[template(path = "inputs/range_group/template.html")]
6+
pub struct RangeGroup {
7+
pub title: String,
8+
pub identifier: String,
9+
pub min: i64,
10+
pub max: i64,
11+
pub step: f32,
12+
pub initial_value: f64,
13+
pub text_target: Option<String>,
14+
pub range_target: Option<String>,
15+
pub cost_rate: Option<f32>,
16+
pub units: String,
17+
}
18+
19+
impl RangeGroup {
20+
pub fn new(title: &str) -> RangeGroup {
21+
RangeGroup {
22+
title: title.to_owned(),
23+
identifier: title.replace(" ", "_"),
24+
min: 0,
25+
max: 100,
26+
step: 1.0,
27+
initial_value: 1.0,
28+
text_target: None,
29+
range_target: None,
30+
cost_rate: None,
31+
units: String::default(),
32+
}
33+
}
34+
35+
pub fn identifier(mut self, identifier: &str) -> Self {
36+
self.identifier = identifier.replace(" ", "_").to_owned();
37+
self
38+
}
39+
40+
pub fn bounds(mut self, min: i64, max: i64, step: f32) -> Self {
41+
self.min = min;
42+
self.max = max;
43+
self.step = step;
44+
self
45+
}
46+
47+
pub fn initial_value(mut self, value: f64) -> Self {
48+
self.initial_value = value;
49+
self
50+
}
51+
52+
pub fn text_target(mut self, target: &str) -> Self {
53+
self.text_target = Some(target.to_owned());
54+
self
55+
}
56+
57+
pub fn range_target(mut self, target: &str) -> Self {
58+
self.range_target = Some(target.to_owned());
59+
self
60+
}
61+
62+
pub fn cost_rate(mut self, cost_rate: f32) -> Self {
63+
self.cost_rate = Some(cost_rate);
64+
self
65+
}
66+
67+
pub fn units(mut self, units: &str) -> Self {
68+
self.units = units.to_owned();
69+
self
70+
}
71+
}
72+
73+
component!(RangeGroup);

‎pgml-dashboard/src/components/inputs/range_group/range_group.scss

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
div[data-controller="inputs-range-group"] {
2+
.text-input {
3+
width: 4em;
4+
}
5+
6+
.hourly-rate {
7+
display: flex;
8+
flex-direction: row;
9+
background-color: #{$gray-900};
10+
border-radius: $border-radius;
11+
padding: 8px 4px;
12+
13+
color: #{$gray-400};
14+
text-align: center;
15+
font-size: 18px;
16+
font-style: normal;
17+
font-weight: 700;
18+
line-height: 24px;
19+
letter-spacing: 0.18px;
20+
}
21+
22+
.cost {
23+
width: 5em;
24+
}
25+
26+
.unit {
27+
width: 28px;
28+
}
29+
}

‎pgml-dashboard/src/components/inputs/range_group/range_group_controller.js

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { Controller } from '@hotwired/stimulus'
2+
3+
export default class extends Controller {
4+
5+
static targets = [
6+
"range",
7+
"text",
8+
]
9+
10+
static values = {
11+
bounds: Object
12+
}
13+
14+
initialize() {
15+
this.textTarget.value = this.rangeTarget.value
16+
}
17+
18+
updateText(e) {
19+
this.textTarget.value = e.target.value
20+
}
21+
22+
updateRange(e) {
23+
if( e.target.value < this.boundsValue.min
24+
|| !e.target.value || !this.isNumeric(e.target.value)) {
25+
this.rangeTarget.value = this.boundsValue.min
26+
this.textTarget.value = this.boundsValue.min
27+
return
28+
}
29+
30+
if( e.target.value > this.boundsValue.max) {
31+
this.rangeTarget.value = this.boundsValue.max
32+
this.textTarget.value = this.boundsValue.max
33+
return
34+
}
35+
36+
this.rangeTarget.value = e.target.value
37+
}
38+
39+
isNumeric(n) {
40+
return !isNaN(parseFloat(n)) && isFinite(n);
41+
}
42+
}

‎pgml-dashboard/src/components/inputs/range_group/template.html

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<div data-controller="inputs-range-group" data-inputs-range-group-bounds-value='{"min": <%- min%>, "max": <%- max%>}'>
2+
<div class="d-flex flex-column flex-md-row">
3+
<div class="flex-grow-1">
4+
<h6 class="h6"><%- title %></h6>
5+
</div>
6+
<div>
7+
<div class="input-group">
8+
<input class="text-input form-control text-end text-white fw-bold" maxlength="4" type="text"
9+
data-inputs-range-group-target="text"
10+
data-action="focusout->inputs-range-group#updateRange"
11+
<% if text_target.is_some() {%><%- text_target.unwrap()%><% } %>>
12+
<div class="input-group-text fw-bold text-start" style="width: 2em;">
13+
<%- units %>
14+
</div>
15+
</div>
16+
</div>
17+
</div>
18+
19+
<input class="form-range"
20+
type="range"
21+
name="<%- identifier %>"
22+
min="<%- min %>"
23+
max="<%- max %>"
24+
step="<%- step %>"
25+
value="<%- initial_value %>"
26+
data-action="inputs-range-group#updateText"
27+
data-inputs-range-group-target="range"
28+
<% if range_target.is_some() { %><%- range_target.unwrap() %><% } %>>
29+
30+
<% if cost_rate.is_some() { %>
31+
<div class="w-100 d-flex justify-content-end">
32+
<div class="hourly-rate">
33+
<div class="unit">$</div>
34+
<div class="cost"><%= format!("{:.2}",cost_rate.unwrap()) %>/hr</div>
35+
</div>
36+
</div>
37+
<% } %>
38+
</div>

‎pgml-dashboard/src/components/mod.rs

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,9 @@ pub use dropdown::Dropdown;
1717
pub mod github_icon;
1818
pub use github_icon::GithubIcon;
1919

20+
// src/components/inputs
21+
pub mod inputs;
22+
2023
// src/components/left_nav_menu
2124
pub mod left_nav_menu;
2225
pub use left_nav_menu::LeftNavMenu;

‎pgml-dashboard/static/css/bootstrap-theme.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
// @import "./bootstrap-5.3.0-alpha1/scss/bootstrap.scss";
1616
@import "./bootstrap-5.3.0-alpha1/scss/root";
1717
@import "./bootstrap-5.3.0-alpha1/scss/reboot";
18+
1819
@import "./bootstrap-5.3.0-alpha1/scss/type";
1920
@import "./bootstrap-5.3.0-alpha1/scss/images";
2021
@import "./bootstrap-5.3.0-alpha1/scss/containers";
@@ -26,9 +27,14 @@
2627
@import "./bootstrap-5.3.0-alpha1/scss/forms/form-control";
2728
@import "./bootstrap-5.3.0-alpha1/scss/forms/form-select";
2829
@import "./bootstrap-5.3.0-alpha1/scss/forms/form-check";
30+
2931
// Do not import form-range, we style it ourselves entirely
3032
// @import "../bootstrap-5.3.0-alpha1/scss/forms/form-range";
3133

34+
@import "./bootstrap-5.3.0-alpha1/scss/forms/floating-labels";
35+
@import "./bootstrap-5.3.0-alpha1/scss/forms/input-group";
36+
@import "./bootstrap-5.3.0-alpha1/scss/forms/validation";
37+
3238
@import "./bootstrap-5.3.0-alpha1/scss/buttons";
3339
@import "./bootstrap-5.3.0-alpha1/scss/transitions";
3440
@import "./bootstrap-5.3.0-alpha1/scss/dropdown";

‎pgml-dashboard/static/css/modules.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
// There is no need to edit it manually.
33

44
@import "../../src/components/dropdown/dropdown.scss";
5+
@import "../../src/components/inputs/range_group/range_group.scss";
56
@import "../../src/components/left_nav_menu/left_nav_menu.scss";
67
@import "../../src/components/left_nav_web_app/left_nav_web_app.scss";
78
@import "../../src/components/modal/modal.scss";

‎pgml-dashboard/templates/content/playground.html

Lines changed: 34 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,23 @@
11
<% use crate::components::*;
22
use crate::components::tables::large::*;
33
use crate::components::navigation::tabs::*;
4+
use crate::components::inputs::range_group::RangeGroup;
45
%>
56

67
<div class="min-height: 100vh;" data-controller="playground">
7-
<h3 class="h3">Playground</h3>
8+
<h1 class="h1">Playground</h1>
9+
<p>This is a space to display components.</p>
810

9-
<div class="mb-3">
11+
<h3 class="h3">icons</h3>
12+
<div class="mb-5">
1013
<%+ GithubIcon::new() %>
1114
</div>
12-
1315
<div class="mb-3">
16+
<%+ ProfileIcon %>
17+
</div>
18+
19+
<h3 class="h3">Dropdowns</h3>
20+
<div class="mb-5">
1421
<div class="row">
1522
<div class="col-6" style="min-height: 400px;">
1623
<%+ Dropdown::new(
@@ -39,7 +46,10 @@ <h3 class="h3">Playground</h3>
3946
</div>
4047
</div>
4148
</div>
42-
<div class="mb-3">
49+
50+
51+
<h3 class="h3">Navigation</h3>
52+
<div class="mb-5">
4353
<%+ Tabs::new(
4454
&[
4555
Tab::new(
@@ -85,7 +95,26 @@ <h3 class="h3">Playground</h3>
8595
)
8696
.active_tab("Test tab") %>
8797
</div>
88-
<div class="mb-3">
8998

99+
<h3 class="h3">Inputs</h3>
100+
<div style="background: #17181A; padding: 2rem; border-radius: 16px;">
101+
<div class="mb-5">
102+
<div class="my-5">
103+
<%+ RangeGroup::new("Input 1")
104+
.initial_value(4.0)
105+
.identifier("my_test_input")
106+
.bounds(2, 38, 2.0)
107+
.units("T") %>
108+
</div>
109+
110+
<div class="my-5">
111+
<%+ RangeGroup::new("Input 2: with hourly rate")
112+
.initial_value(3.0)
113+
.identifier("my_test input 2")
114+
.bounds(1, 20, 1.0)
115+
.units("GB")
116+
.cost_rate(0.144) %>
117+
</div>
118+
</div>
90119
</div>
91120
</div>

0 commit comments

Comments
 (0)