postgresml · chillenberger · Oct 17, 2023 · Oct 17, 2023
diff --git a/pgml-dashboard/src/components/inputs/mod.rs b/pgml-dashboard/src/components/inputs/mod.rs
@@ -9,5 +9,9 @@ pub use range_group::RangeGroup;
 pub mod select;
 pub use select::Select;
 
+// src/components/inputs/switch
+pub mod switch;
+pub use switch::Switch;
+
 // src/components/inputs/text
 pub mod text;
diff --git a/pgml-dashboard/src/components/inputs/switch/mod.rs b/pgml-dashboard/src/components/inputs/switch/mod.rs
@@ -0,0 +1,74 @@
+use crate::components::stimulus::stimulus_action::StimulusAction;
+use crate::components::stimulus::stimulus_target::StimulusTarget;
+use pgml_components::component;
+use sailfish::TemplateOnce;
+use std::fmt::{self, Display, Formatter};
+
+pub enum State {
+    Left,
+    Right,
+}
+
+impl Display for State {
+    fn fmt(&self, f: &mut Formatter<'_>) -> fmt::Result {
+        match self {
+            State::Left => write!(f, "left"),
+            State::Right => write!(f, "right"),
+        }
+    }
+}
+
+#[derive(TemplateOnce)]
+#[template(path = "inputs/switch/template.html")]
+pub struct Switch {
+    left_value: String,
+    left_icon: String,
+    right_value: String,
+    right_icon: String,
+    initial_state: State,
+    on_toggle: Vec<StimulusAction>,
+    target: StimulusTarget,
+}
+
+impl Switch {
+    pub fn new() -> Switch {
+        Switch {
+            left_value: String::from("left"),
+            left_icon: String::from(""),
+            right_value: String::from("right"),
+            right_icon: String::from(""),
+            on_toggle: Vec::new(),
+            initial_state: State::Left,
+            target: StimulusTarget::new(),
+        }
+    }
+
+    pub fn left(mut self, value: &str, icon: &str) -> Switch {
+        self.left_value = value.into();
+        self.left_icon = icon.into();
+        self
+    }
+
+    pub fn right(mut self, value: &str, icon: &str) -> Switch {
+        self.right_value = value.into();
+        self.right_icon = icon.into();
+        self
+    }
+
+    pub fn on_toggle(mut self, action: StimulusAction) -> Switch {
+        self.on_toggle.push(action);
+        self
+    }
+
+    pub fn start_toggled(mut self) -> Switch {
+        self.initial_state = State::Right;
+        self
+    }
+
+    pub fn target(mut self, target: StimulusTarget) -> Switch {
+        self.target = target;
+        self
+    }
+}
+
+component!(Switch);
diff --git a/pgml-dashboard/src/components/inputs/switch/switch.scss b/pgml-dashboard/src/components/inputs/switch/switch.scss
@@ -0,0 +1,43 @@
+div[data-controller="inputs-switch"] {
+    &.switch-container {
+        background: #{$gray-100};
+        border-radius: 5rem;
+        border: 3px solid #{$gray-100};
+        position: relative;
+    }
+
+    .label {
+        padding: 8px 20px;
+        border-radius: 5rem;
+        text-align: center;
+        display: flex;
+        @extend .gap-2;
+    }
+
+    .toggle {
+        background: #{$neon-shade-100};
+        position: absolute;
+        top: 0px;
+        left: 0px;
+    }
+
+    .choice {
+        background: #{$gray-100};
+        color: #{$neon-shade-100};
+        flex: 1;
+
+        * {
+            color: inherit;
+        }
+    }
+
+    .left {
+        left: 0;
+        transition: all $animation-timer;
+    }
+
+    .right {
+        left: 50%;
+        transition: all $animation-timer;
+    }
+}
diff --git a/pgml-dashboard/src/components/inputs/switch/switch_controller.js b/pgml-dashboard/src/components/inputs/switch/switch_controller.js
@@ -0,0 +1,52 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = [
+    "toggle", 
+    "toggleText",
+    "toggleIcon",
+  ]
+
+  static values = {
+    "left": String,
+    "right": String,
+    "initial": String,
+    "leftIcon": String,
+    "rightIcon": String,
+  }
+
+  toggle() {
+    if (this.toggleTarget.classList.contains('right')) {
+      this.onToggleLeft()
+    } else {
+      this.onToggleRight()
+    }
+  }
+
+  onToggleLeft() {
+    this.toggleTarget.classList.remove('right')
+    this.toggleTarget.classList.add('left')
+    this.toggleTextTarget.innerHTML = this.leftValue
+    this.toggleIconTarget.innerHTML = this.leftIconValue
+    this.element.dispatchEvent(new CustomEvent('toggle', {detail: this.leftValue}))
+  }
+
+  onToggleRight() {
+    this.toggleTarget.classList.remove('left')
+    this.toggleTarget.classList.add('right')
+    this.toggleTextTarget.innerHTML = this.rightValue
+    this.toggleIconTarget.innerHTML = this.rightIconValue
+    this.element.dispatchEvent(new CustomEvent('toggle', {detail: this.rightValue}))
+  }
+
+  reset() {
+    if( this.initialValue == "left" ) {
+      console.log("toggling left")
+      this.onToggleLeft()
+    } else {
+      console.log("toggling right")
+      this.onToggleRight()
+    }
+  }
+
+}
diff --git a/pgml-dashboard/src/components/inputs/switch/template.html b/pgml-dashboard/src/components/inputs/switch/template.html
@@ -0,0 +1,37 @@
+<% use crate::components::inputs::switch::State; %>
+<div data-controller="inputs-switch"
+  class="switch-container d-flex flex-row"
+  data-action='click->inputs-switch#toggle <% for action in on_toggle { %> toggle-><%- action %> <% } %> reset->inputs-switch#reset'
+  data-inputs-switch-left-value="<%- left_value %>"
+  data-inputs-switch-left-icon-value="<%- left_icon %>"
+  data-inputs-switch-right-value="<%- right_value %>"
+  data-inputs-switch-right-icon-value="<%- right_icon %>"
+  data-inputs-switch-initial-value="<%- initial_state.to_string() %>"
+  <%- target %>>
+  <div class='label toggle w-50 <%- match initial_state {State::Left => "left".to_string(), State::Right => "right".to_string()} %>' data-inputs-switch-target="toggle">
+    <span class="material-symbols-outlined" data-inputs-switch-target="toggleIcon" >
+      <%- match initial_state {
+        State::Left => left_icon.to_string(),
+        State::Right => right_icon.to_string(),
+      } %>
+    </span>
+    <h5 class="h5 my-0" data-inputs-switch-target="toggleText">
+      <%- match initial_state {
+        State::Left => left_value.to_string(),
+        State::Right => right_value.to_string(),
+      } %>
+    </h5>
+  </div>
+  <div class="label choice">
+    <span class="material-symbols-outlined" ><%- left_icon  %></span>
+    <h5 class="h5 my-0">
+      <%- left_value %>
+    </h5>
+  </div>
+  <div class="label choice">
+    <span class="material-symbols-outlined"><%- right_icon  %></span>
+    <h5 class="h5 my-0">
+      <%- right_value %>
+    </h5>
+  </div>
+</div>
diff --git a/pgml-dashboard/static/css/modules.scss b/pgml-dashboard/static/css/modules.scss
@@ -6,6 +6,7 @@
 @import "../../src/components/dropdown/dropdown.scss";
 @import "../../src/components/inputs/range_group/range_group.scss";
 @import "../../src/components/inputs/select/select.scss";
+@import "../../src/components/inputs/switch/switch.scss";
 @import "../../src/components/inputs/text/editable_header/editable_header.scss";
 @import "../../src/components/left_nav_menu/left_nav_menu.scss";
 @import "../../src/components/modal/modal.scss";

diff --git a/pgml-dashboard/static/js/playground.js b/pgml-dashboard/static/js/playground.js
@@ -1,7 +1,7 @@
 import { Controller } from '@hotwired/stimulus'
 
 export default class extends Controller {
-  static targets = ["test"]
+  static targets = ["test", "switch"]
 
   initialize() {
     this.errorH3 = new CustomEvent("error", { detail: "message passed through event h3" })
@@ -31,4 +31,12 @@ export default class extends Controller {
     document.getElementById("header-2").dispatchEvent(this.clearH2)
   }
 
+  testOnToggleSwitch(e) {
+    console.log("run from switch on toggle: ", e.detail)
+  }
+
+  resetSwitch() {
+    this.switchTarget.dispatchEvent(new Event("reset"))
+  }
+
 }
diff --git a/pgml-dashboard/templates/content/playground.html b/pgml-dashboard/templates/content/playground.html
@@ -4,7 +4,10 @@
 use crate::components::inputs::range_group::RangeGroup;
 use crate::components::inputs::text::editable_header::{EditableHeader, Headers};
 use crate::components::stimulus::stimulus_target::StimulusTarget;
+use crate::components::stimulus::stimulus_action::StimulusAction;
+use crate::components::stimulus::stimulus_action::StimulusEvents;
 use crate::components::inputs::select::Select;
+use crate::components::inputs::switch::Switch;
 %>
 
 <div class="min-height: 100vh;" data-controller="playground">
@@ -155,6 +158,24 @@ <h3 class="h3">Inputs</h3>
         <button data-action="playground#clearError">Clear Error</button>
       </div>
     </div>
+    <div class="d-flex flex-row justify-content-between">
+      <div style="width: 30%">
+        <%+ Switch::new()
+            .on_toggle(
+              StimulusAction::new()
+              .controller("playground")
+              .method("testOnToggleSwitch"))
+            .target(StimulusTarget::new()
+              .controller("playground")
+              .name("switch"))
+            .left("CPU", "memory")
+            .right("GPU", "mode_fan")
+            .start_toggled() %>
+          </div>
+          <div>
+            <button data-action="click->playground#resetSwitch">Reset Switch</button>
+          </div>
+    </div>
   </div>
 
 </div>