diff --git a/pgml-dashboard/src/components/accordian/accordian.scss b/pgml-dashboard/src/components/accordian/accordian.scss new file mode 100644 index 000000000..e90cb1ac5 --- /dev/null +++ b/pgml-dashboard/src/components/accordian/accordian.scss @@ -0,0 +1,16 @@ +div[data-controller="accordian"] { + .accordian-header { + cursor: pointer; + } + + .accordian-body { + display: none; + height: 0px; + transition: all 0.5s ease-in-out; + } + + .accordian-body.selected { + display: block; + height: auto; + } +} diff --git a/pgml-dashboard/src/components/accordian/accordian_controller.js b/pgml-dashboard/src/components/accordian/accordian_controller.js new file mode 100644 index 000000000..b9eace831 --- /dev/null +++ b/pgml-dashboard/src/components/accordian/accordian_controller.js @@ -0,0 +1,18 @@ +import { Controller } from "@hotwired/stimulus"; + +export default class extends Controller { + titleClick(e) { + let target = e.currentTarget.getAttribute("data-value"); + let elements = document.getElementsByClassName("accordian-body"); + for (let i = 0; i < elements.length; i++) { + elements[i].classList.remove("selected"); + } + elements = document.getElementsByClassName("accordian-header"); + for (let i = 0; i < elements.length; i++) { + elements[i].classList.remove("selected"); + } + let element = document.querySelector(`[data-accordian-target="${target}"]`); + element.classList.add("selected"); + e.currentTarget.classList.add("selected"); + } +} diff --git a/pgml-dashboard/src/components/accordian/mod.rs b/pgml-dashboard/src/components/accordian/mod.rs new file mode 100644 index 000000000..eb52a791a --- /dev/null +++ b/pgml-dashboard/src/components/accordian/mod.rs @@ -0,0 +1,36 @@ +use sailfish::TemplateOnce; +use pgml_components::component; + +// This component will probably not work very well if two are on the same page at once. We can get +// around it if we include some randomness with the data values in the template.html but that +// doesn't feel very clean so I will leave this problem until we have need to fix it or a better +// idea of how to +#[derive(TemplateOnce, Default)] +#[template(path = "accordian/template.html")] +pub struct Accordian { + html_contents: Vec, + html_titles: Vec, + selected: usize +} + +impl Accordian { + pub fn new() -> Accordian { + Accordian { + html_contents: Vec::new(), + html_titles: Vec::new(), + selected: 0, + } + } + + pub fn html_contents(mut self, html_contents: Vec) -> Self { + self.html_contents = html_contents.into_iter().map(|s| s.to_string()).collect(); + self + } + + pub fn html_titles(mut self, html_titles: Vec) -> Self { + self.html_titles = html_titles.into_iter().map(|s| s.to_string()).collect(); + self + } +} + +component!(Accordian); diff --git a/pgml-dashboard/src/components/accordian/template.html b/pgml-dashboard/src/components/accordian/template.html new file mode 100644 index 000000000..366a8b564 --- /dev/null +++ b/pgml-dashboard/src/components/accordian/template.html @@ -0,0 +1,16 @@ +<% use std::iter::zip; %> + +
+
+ <% for i in (0..html_contents.len()) { %> +
+
+ <%- html_titles[i] %> +
+
+ <%- html_contents[i] %> +
+
+ <% } %> +
+
diff --git a/pgml-dashboard/src/components/inputs/select/option.html b/pgml-dashboard/src/components/inputs/select/option.html index a2186a3a2..353d1911e 100644 --- a/pgml-dashboard/src/components/inputs/select/option.html +++ b/pgml-dashboard/src/components/inputs/select/option.html @@ -1,4 +1,4 @@ -
  • +
    • diff --git a/pgml-dashboard/src/components/mod.rs b/pgml-dashboard/src/components/mod.rs index aa8429737..8cc1b7375 100644 --- a/pgml-dashboard/src/components/mod.rs +++ b/pgml-dashboard/src/components/mod.rs @@ -1,6 +1,10 @@ // This file is automatically generated. // You shouldn't modify it manually. +// src/components/accordian +pub mod accordian; +pub use accordian::Accordian; + // src/components/breadcrumbs pub mod breadcrumbs; pub use breadcrumbs::Breadcrumbs; diff --git a/pgml-dashboard/src/components/star/mod.rs b/pgml-dashboard/src/components/star/mod.rs index 31dda9a71..670577ab9 100644 --- a/pgml-dashboard/src/components/star/mod.rs +++ b/pgml-dashboard/src/components/star/mod.rs @@ -22,6 +22,10 @@ const SVGS: Lazy> = Lazy::new(|| { "party", include_str!("../../../static/images/icons/stars/party.svg"), ); + map.insert( + "give_it_a_spin", + include_str!("../../../static/images/icons/stars/give_it_a_spin.svg"), + ); map }); diff --git a/pgml-dashboard/static/css/modules.scss b/pgml-dashboard/static/css/modules.scss index 9d7eaa64c..16a3993ad 100644 --- a/pgml-dashboard/static/css/modules.scss +++ b/pgml-dashboard/static/css/modules.scss @@ -1,6 +1,7 @@ // This file is automatically generated. // There is no need to edit it manually. +@import "../../src/components/accordian/accordian.scss"; @import "../../src/components/chatbot/chatbot.scss"; @import "../../src/components/dropdown/dropdown.scss"; @import "../../src/components/inputs/range_group/range_group.scss"; diff --git a/pgml-dashboard/static/images/icons/stars/give_it_a_spin.svg b/pgml-dashboard/static/images/icons/stars/give_it_a_spin.svg new file mode 100644 index 000000000..dec13d511 --- /dev/null +++ b/pgml-dashboard/static/images/icons/stars/give_it_a_spin.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +