postgresml · SilasMarvin · Oct 16, 2023 · Oct 16, 2023 · levkk · Oct 16, 2023
diff --git a/pgml-dashboard/src/components/accordian/accordian.scss 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
@@ -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
@@ -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<String>,
+    html_titles: Vec<String>,
+    selected: usize
+}
+
+impl Accordian {
+    pub fn new() -> Accordian {
+        Accordian {
+            html_contents: Vec::new(),
+            html_titles: Vec::new(),
+            selected: 0,
+        }
+    }
+
+    pub fn html_contents<S: ToString>(mut self, html_contents: Vec<S>) -> Self {
+        self.html_contents = html_contents.into_iter().map(|s| s.to_string()).collect();
+        self
+    }
+
+    pub fn html_titles<S: ToString>(mut self, html_titles: Vec<S>) -> 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
@@ -0,0 +1,16 @@
+<% use std::iter::zip; %>
+
+<div data-controller="accordian">
+  <div class="accordian">
+    <% for i in (0..html_contents.len()) { %>
+      <div class="accordian-item">
+        <div class="accordian-header <% if i == selected { %> selected <% } %>" data-action="click->accordian#titleClick" data-value="accordian-body<%= i %>">
+          <%- html_titles[i] %>
+        </div>
+        <div class="accordian-body <% if i == selected { %> selected <% } %>" data-accordian-target="accordian-body<%= i %>">
+          <%- html_contents[i] %>
+        </div>
+      </div>
+    <% } %>
+  </div>
+</div>
diff --git a/pgml-dashboard/src/components/inputs/select/option.html b/pgml-dashboard/src/components/inputs/select/option.html
@@ -1,4 +1,4 @@
 
-<li class="menu-item d-flex align-items-center">
+<li class="menu-item d-flex align-items-center" data-for="<%= value %>">
   <button type="button" class="dropdown-item" data-action="<%- action %>"><%= value %></button>
 </li>
diff --git 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
@@ -22,6 +22,10 @@ const SVGS: Lazy<HashMap<&'static str, &'static str>> = 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
@@ -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