feat: filter UI part 2

This commit is contained in:
Asger Juul Brunshøj 2025-03-17 15:08:50 +01:00
parent ed9eba8dc1
commit 9898af1bf7
2 changed files with 26 additions and 3 deletions

View File

@ -20,6 +20,18 @@ pub mod components {
pub mod outlined_box; pub mod outlined_box;
pub mod problem; pub mod problem;
pub mod problem_info; pub mod problem_info;
use leptos::prelude::*;
#[component]
pub fn OnHoverRed(children: Children) -> impl IntoView {
view! {
<div class="group relative">
<div>{children()}</div>
<div class="absolute inset-0 bg-red-500 opacity-0 group-hover:opacity-50"></div>
</div>
}
}
} }
pub mod gradient; pub mod gradient;

View File

@ -31,6 +31,7 @@
// +--------------------------------------+ // +--------------------------------------+
use crate::codec::ron::RonEncoded; use crate::codec::ron::RonEncoded;
use crate::components::OnHoverRed;
use crate::components::ProblemInfo; use crate::components::ProblemInfo;
use crate::components::attempt::Attempt; use crate::components::attempt::Attempt;
use crate::components::button::Button; use crate::components::button::Button;
@ -125,7 +126,7 @@ fn WithWall(#[prop(into)] wall: Signal<models::Wall>) -> impl IntoView {
// Filter // Filter
let (filter_holds, set_filter_holds) = signal(BTreeSet::new()); let (filter_holds, set_filter_holds) = signal(BTreeSet::new());
let filter_add_hold = move |hold_pos: models::HoldPosition| { let _filter_add_hold = move |hold_pos: models::HoldPosition| {
set_filter_holds.update(move |set| { set_filter_holds.update(move |set| {
set.insert(hold_pos); set.insert(hold_pos);
}); });
@ -189,7 +190,17 @@ fn WithWall(#[prop(into)] wall: Signal<models::Wall>) -> impl IntoView {
for hold_pos in filter_holds.get() { for hold_pos in filter_holds.get() {
let w = &*wall.read(); let w = &*wall.read();
if let Some(hold) = w.holds.get(&hold_pos).cloned() { if let Some(hold) = w.holds.get(&hold_pos).cloned() {
let v = view! { <Hold hold /> }; let onclick = move |_| {
filter_remove_hold(hold_pos);
};
let v = view! {
<button on:click=onclick>
<OnHoverRed>
<Hold hold />
</OnHoverRed>
</button>
};
cells.push(v); cells.push(v);
} }
} }
@ -201,7 +212,7 @@ fn WithWall(#[prop(into)] wall: Signal<models::Wall>) -> impl IntoView {
<div class="inline-grid grid-cols-1 gap-8 md:grid-cols-[auto,1fr]"> <div class="inline-grid grid-cols-1 gap-8 md:grid-cols-[auto,1fr]">
<div>{grid}</div> <div>{grid}</div>
<div class="flex flex-col max-w-screen-sm"> <div class="flex flex-col w-screen-sm">
<Section title="Filter">{filter}</Section> <Section title="Filter">{filter}</Section>
<Separator /> <Separator />