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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy