✨ make coefficients settable

ad2ien · Oct 13, 2023 · 13d91bb · 13d91bb
1 parent e21e649
commit 13d91bb
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 11 deletions.
diff --git a/index.scss b/index.scss
@@ -26,7 +26,7 @@ body {
   box-shadow: 0 0 1rem rgba(0, 0, 0, 0.25);
   padding: 2rem;
   width: 100%;
-  max-width: 30rem;
+  max-width: 50rem;
 }
 
 .parameter {

diff --git a/src/main.rs b/src/main.rs
@@ -10,6 +10,8 @@ mod salary_param;
 mod slider;
 mod header;
 
+const PARAMETERS_MEANING: i8 = 10;
+
 const DATA: [SalaryParam; 7] = [
     SalaryParam {
         id: "like",
@@ -30,7 +32,7 @@ const DATA: [SalaryParam; 7] = [
         value: 50,
     },
     SalaryParam {
-        id: "pain",
+        id: "mental",
         label: "How much I'm emotionally impacted by my work?",
         coefficient: 1.0,
         value: 50,
@@ -119,15 +121,16 @@ fn compute_state(state: Vec<SalaryParam>, slider_message: SliderMessage) -> Vec<
         .find(|param| param.id == slider_message.id)
         .unwrap();
     param.value = slider_message.value;
+    param.coefficient = slider_message.coef;
     new_state
 }
 
 fn compute_result(state: Vec<SalaryParam>, base: i32) -> f64 {
-    let mut result = 0.0;
+    let mut variable_wage_part = 0.0;
     for param in state {
-        result += param.coefficient * param.value as f64;
+        variable_wage_part += param.coefficient * param.value as f64;
     }
-    result + base as f64
+    (variable_wage_part as f64 * PARAMETERS_MEANING as f64 + base as f64).round()
 }
 
 fn main() {

diff --git a/src/slider.rs b/src/slider.rs
@@ -12,24 +12,47 @@ pub struct Props {
 pub struct SliderMessage {
     pub id: String,
     pub value: i8,
+    pub coef: f64,
 }
 
 #[function_component]
 pub fn Slider(props: &Props) -> Html {
     let input_value_handle = use_state(|| props.salary_param.value.to_string());
+    let coef_value_handle = use_state(|| props.salary_param.coefficient.to_string());
     let input_value = (*input_value_handle).clone();
-    let cb_handle = props.on_slide.clone();
-    let salary_param = props.salary_param.clone();
+    let coef_value = (*coef_value_handle).clone();
 
-    let on_change = {
+    let salary_param = props.salary_param.clone();
+
+    let coef_for_value = coef_value.clone();
+    let cb_value_handle = props.on_slide.clone();
+    let on_value_change = {
         Callback::from(move |e: InputEvent| {
             let input = e.target_dyn_into::<HtmlInputElement>();
 
             if let Some(input) = input {
                 input_value_handle.set(input.value());
-                cb_handle.emit( SliderMessage { 
+                cb_value_handle.emit( SliderMessage { 
+                    id: salary_param.id.to_string(),
+                    value: input.value().parse::<i8>().expect("expected number"),
+                    coef: coef_for_value.parse::<f64>().expect("expected number")
+                 });
+            }
+        })
+    };
+
+    let input_value_for_coef = input_value.clone();
+    let cb_coef_handle = props.on_slide.clone();
+    let on_coef_change = {
+        Callback::from(move |e: InputEvent| {
+            let input = e.target_dyn_into::<HtmlInputElement>();
+
+            if let Some(input) = input {
+                coef_value_handle.set(input.value());
+                cb_coef_handle.emit( SliderMessage { 
                     id: salary_param.id.to_string(),
-                    value: input.value().parse::<i8>().expect("expected number")
+                    value: input_value_for_coef.parse::<i8>().expect("expected number"),
+                    coef: input.value().parse::<f64>().expect("expected number")
                  });
             }
         })
@@ -39,9 +62,13 @@ pub fn Slider(props: &Props) -> Html {
         <div class="parameter">
             <div class="sliderLabel">{  salary_param.label }</div>
             <div class="sliderDiv">
-                <input type="range" min="1" max="100" value={input_value.clone()} oninput={on_change} />
+                <input type="range" min="0" max="100" value={input_value.clone()} oninput={on_value_change} />
                 <div class="sliderValue">{ input_value }</div>
             </div>
+            <div class="sliderDiv">
+                <input type="range" min="-2" max="2" step="0.1" value={coef_value.clone()} oninput={on_coef_change} />
+                <div class="sliderValue">{ coef_value }</div>
+            </div>
         </div>
     }
 }