Skip to content

Commit 481d623

Browse files
SilasMarvinSilasMarvin
authored
Added an accordian and another star (#1077)
1 parent d62cd7e commit 481d623

File tree

9 files changed

+127
-1
lines changed

9 files changed

+127
-1
lines changed

‎pgml-dashboard/src/components/accordian/accordian.scss

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
div[data-controller="accordian"] {
2+
.accordian-header {
3+
cursor: pointer;
4+
}
5+
6+
.accordian-body {
7+
display: none;
8+
height: 0px;
9+
transition: all 0.5s ease-in-out;
10+
}
11+
12+
.accordian-body.selected {
13+
display: block;
14+
height: auto;
15+
}
16+
}

‎pgml-dashboard/src/components/accordian/accordian_controller.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { Controller } from "@hotwired/stimulus";
2+
3+
export default class extends Controller {
4+
titleClick(e) {
5+
let target = e.currentTarget.getAttribute("data-value");
6+
let elements = document.getElementsByClassName("accordian-body");
7+
for (let i = 0; i < elements.length; i++) {
8+
elements[i].classList.remove("selected");
9+
}
10+
elements = document.getElementsByClassName("accordian-header");
11+
for (let i = 0; i < elements.length; i++) {
12+
elements[i].classList.remove("selected");
13+
}
14+
let element = document.querySelector(`[data-accordian-target="${target}"]`);
15+
element.classList.add("selected");
16+
e.currentTarget.classList.add("selected");
17+
}
18+
}

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
use sailfish::TemplateOnce;
2+
use pgml_components::component;
3+
4+
// This component will probably not work very well if two are on the same page at once. We can get
5+
// around it if we include some randomness with the data values in the template.html but that
6+
// doesn't feel very clean so I will leave this problem until we have need to fix it or a better
7+
// idea of how to
8+
#[derive(TemplateOnce, Default)]
9+
#[template(path = "accordian/template.html")]
10+
pub struct Accordian {
11+
html_contents: Vec<String>,
12+
html_titles: Vec<String>,
13+
selected: usize
14+
}
15+
16+
impl Accordian {
17+
pub fn new() -> Accordian {
18+
Accordian {
19+
html_contents: Vec::new(),
20+
html_titles: Vec::new(),
21+
selected: 0,
22+
}
23+
}
24+
25+
pub fn html_contents<S: ToString>(mut self, html_contents: Vec<S>) -> Self {
26+
self.html_contents = html_contents.into_iter().map(|s| s.to_string()).collect();
27+
self
28+
}
29+
30+
pub fn html_titles<S: ToString>(mut self, html_titles: Vec<S>) -> Self {
31+
self.html_titles = html_titles.into_iter().map(|s| s.to_string()).collect();
32+
self
33+
}
34+
}
35+
36+
component!(Accordian);

‎pgml-dashboard/src/components/accordian/template.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<% use std::iter::zip; %>
2+
3+
<div data-controller="accordian">
4+
<div class="accordian">
5+
<% for i in (0..html_contents.len()) { %>
6+
<div class="accordian-item">
7+
<div class="accordian-header <% if i == selected { %> selected <% } %>" data-action="click->accordian#titleClick" data-value="accordian-body<%= i %>">
8+
<%- html_titles[i] %>
9+
</div>
10+
<div class="accordian-body <% if i == selected { %> selected <% } %>" data-accordian-target="accordian-body<%= i %>">
11+
<%- html_contents[i] %>
12+
</div>
13+
</div>
14+
<% } %>
15+
</div>
16+
</div>

‎pgml-dashboard/src/components/inputs/select/option.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11

2-
<li class="menu-item d-flex align-items-center">
2+
<li class="menu-item d-flex align-items-center" data-for="<%= value %>">
33
<button type="button" class="dropdown-item" data-action="<%- action %>"><%= value %></button>
44
</li>

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
// This file is automatically generated.
22
// You shouldn't modify it manually.
33

4+
// src/components/accordian
5+
pub mod accordian;
6+
pub use accordian::Accordian;
7+
48
// src/components/breadcrumbs
59
pub mod breadcrumbs;
610
pub use breadcrumbs::Breadcrumbs;

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,10 @@ const SVGS: Lazy<HashMap<&'static str, &'static str>> = Lazy::new(|| {
2222
"party",
2323
include_str!("../../../static/images/icons/stars/party.svg"),
2424
);
25+
map.insert(
26+
"give_it_a_spin",
27+
include_str!("../../../static/images/icons/stars/give_it_a_spin.svg"),
28+
);
2529
map
2630
});
2731

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

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

4+
@import "../../src/components/accordian/accordian.scss";
45
@import "../../src/components/chatbot/chatbot.scss";
56
@import "../../src/components/dropdown/dropdown.scss";
67
@import "../../src/components/inputs/range_group/range_group.scss";

‎pgml-dashboard/static/images/icons/stars/give_it_a_spin.svg

Lines changed: 31 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)