1019 lines
58 KiB
Rust
1019 lines
58 KiB
Rust
use dioxus::prelude::*;
|
|
use gloo_storage::{LocalStorage, Storage};
|
|
use std::collections::HashMap;
|
|
use uuid::Uuid;
|
|
|
|
use crate::api;
|
|
use crate::app::{Lang, Route};
|
|
use crate::components::plant_card::PlantCard;
|
|
use crate::components::table_controls::*;
|
|
use crate::i18n::{pick_desc, pick_name};
|
|
|
|
const STORAGE_KEY_COLS: &str = "herbapi_species_cols";
|
|
const STORAGE_KEY_PP: &str = "herbapi_species_pp";
|
|
const STORAGE_KEY_VIEW: &str = "herbapi_species_view";
|
|
|
|
fn species_columns() -> Vec<ColumnDef> {
|
|
vec![
|
|
ColumnDef { key: "name_scientific", label: "Scientific Name", default_visible: true },
|
|
ColumnDef { key: "common_name", label: "Common Name", default_visible: true },
|
|
ColumnDef { key: "name_de", label: "German", default_visible: false },
|
|
ColumnDef { key: "name_en", label: "English", default_visible: false },
|
|
ColumnDef { key: "family", label: "Family", default_visible: true },
|
|
ColumnDef { key: "plant_layer", label: "Layer", default_visible: true },
|
|
ColumnDef { key: "nitrogen_fixer", label: "N-Fixer", default_visible: true },
|
|
ColumnDef { key: "dynamic_accumulator", label: "Dyn. Accum.", default_visible: true },
|
|
ColumnDef { key: "food_uses", label: "Food Uses", default_visible: false },
|
|
ColumnDef { key: "edibility_rating", label: "Edibility", default_visible: false },
|
|
ColumnDef { key: "drought_tolerance", label: "Drought Tol.", default_visible: false },
|
|
ColumnDef { key: "hardiness_zone_usda", label: "USDA Zone", default_visible: false },
|
|
ColumnDef { key: "nectar_value", label: "Nectar", default_visible: false },
|
|
ColumnDef { key: "wild_bee_count", label: "Wild Bees", default_visible: false },
|
|
ColumnDef { key: "native_status", label: "Native Status", default_visible: false },
|
|
]
|
|
}
|
|
|
|
#[component]
|
|
pub fn SpeciesList() -> Element {
|
|
let lang = use_context::<Lang>().0;
|
|
let columns = species_columns();
|
|
let mut page = use_signal(|| 1i64);
|
|
let per_page = use_signal(|| load_per_page(STORAGE_KEY_PP, 25));
|
|
let mut search = use_signal(|| String::new());
|
|
let visible_cols = use_signal(|| load_visible_columns(STORAGE_KEY_COLS, &species_columns()));
|
|
let mut table_view = use_signal(|| {
|
|
LocalStorage::get::<bool>(STORAGE_KEY_VIEW).unwrap_or(true)
|
|
});
|
|
|
|
// Filter signals
|
|
let mut filter_layer = use_signal(|| String::new());
|
|
let mut filter_nfixer = use_signal(|| false);
|
|
let mut filter_dynacc = use_signal(|| false);
|
|
let mut filter_drought = use_signal(|| String::new());
|
|
|
|
// Fetch family map for resolving family_id -> name
|
|
let family_map = use_resource(move || async move {
|
|
let mut map = HashMap::<Uuid, String>::new();
|
|
if let Ok(resp) = api::list_families(1, 100, None).await {
|
|
for f in resp.data {
|
|
map.insert(f.id, f.name_scientific);
|
|
}
|
|
let total_pages = (resp.total + resp.per_page - 1) / resp.per_page;
|
|
for p in 2..=total_pages {
|
|
if let Ok(r) = api::list_families(p, 100, None).await {
|
|
for f in r.data {
|
|
map.insert(f.id, f.name_scientific);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
map
|
|
});
|
|
|
|
let species = use_resource(move || {
|
|
let s = search.read().clone();
|
|
let p = *page.read();
|
|
let pp = *per_page.read();
|
|
let layer = filter_layer.read().clone();
|
|
let nfixer = *filter_nfixer.read();
|
|
let dynacc = *filter_dynacc.read();
|
|
let drought = filter_drought.read().clone();
|
|
async move {
|
|
let filters = api::SpeciesFilters {
|
|
search: if s.is_empty() { None } else { Some(s) },
|
|
plant_layer: if layer.is_empty() { None } else { Some(layer) },
|
|
nitrogen_fixer: if nfixer { Some(true) } else { None },
|
|
dynamic_accumulator: if dynacc { Some(true) } else { None },
|
|
drought_tolerance: if drought.is_empty() { None } else { Some(drought) },
|
|
..Default::default()
|
|
};
|
|
api::list_species_filtered(p, pp, &filters).await
|
|
}
|
|
});
|
|
|
|
let current_page = *page.read();
|
|
let is_table = *table_view.read();
|
|
|
|
rsx! {
|
|
div { class: "page",
|
|
h1 { "Species" }
|
|
|
|
div { class: "table-toolbar",
|
|
div { class: "search-bar",
|
|
input {
|
|
r#type: "text",
|
|
placeholder: "Search species...",
|
|
value: "{search}",
|
|
oninput: move |e| {
|
|
search.set(e.value());
|
|
page.set(1);
|
|
},
|
|
}
|
|
}
|
|
div { class: "toolbar-right",
|
|
button {
|
|
class: "view-toggle-btn",
|
|
onclick: move |_| {
|
|
let new_val = !*table_view.read();
|
|
table_view.set(new_val);
|
|
let _ = LocalStorage::set(STORAGE_KEY_VIEW, new_val);
|
|
},
|
|
if is_table { "Card View" } else { "Table View" }
|
|
}
|
|
PerPageSelector {
|
|
per_page: per_page,
|
|
page: page,
|
|
storage_key: STORAGE_KEY_PP.to_string(),
|
|
}
|
|
}
|
|
}
|
|
|
|
// Filter bar
|
|
div { class: "filter-bar",
|
|
div { class: "filter-group",
|
|
label { "Layer" }
|
|
select {
|
|
value: "{filter_layer}",
|
|
onchange: move |e| {
|
|
filter_layer.set(e.value());
|
|
page.set(1);
|
|
},
|
|
option { value: "", "All" }
|
|
option { value: "canopy", "Canopy" }
|
|
option { value: "understory", "Understory" }
|
|
option { value: "shrub", "Shrub" }
|
|
option { value: "herbaceous", "Herbaceous" }
|
|
option { value: "ground_cover", "Ground Cover" }
|
|
option { value: "vine", "Vine" }
|
|
option { value: "root", "Root" }
|
|
}
|
|
}
|
|
div { class: "filter-group",
|
|
label { "Drought Tol." }
|
|
select {
|
|
value: "{filter_drought}",
|
|
onchange: move |e| {
|
|
filter_drought.set(e.value());
|
|
page.set(1);
|
|
},
|
|
option { value: "", "All" }
|
|
option { value: "none", "None" }
|
|
option { value: "low", "Low" }
|
|
option { value: "moderate", "Moderate" }
|
|
option { value: "high", "High" }
|
|
option { value: "very_high", "Very High" }
|
|
}
|
|
}
|
|
div { class: "filter-group filter-checkbox",
|
|
label {
|
|
input {
|
|
r#type: "checkbox",
|
|
checked: *filter_nfixer.read(),
|
|
onchange: move |e| {
|
|
filter_nfixer.set(e.checked());
|
|
page.set(1);
|
|
},
|
|
}
|
|
"N-Fixer"
|
|
}
|
|
}
|
|
div { class: "filter-group filter-checkbox",
|
|
label {
|
|
input {
|
|
r#type: "checkbox",
|
|
checked: *filter_dynacc.read(),
|
|
onchange: move |e| {
|
|
filter_dynacc.set(e.checked());
|
|
page.set(1);
|
|
},
|
|
}
|
|
"Dyn. Accumulator"
|
|
}
|
|
}
|
|
}
|
|
|
|
if is_table {
|
|
ColumnToggle {
|
|
columns: columns.clone(),
|
|
visible: visible_cols,
|
|
storage_key: STORAGE_KEY_COLS.to_string(),
|
|
}
|
|
}
|
|
|
|
match &*species.read() {
|
|
None => rsx! { p { "Loading..." } },
|
|
Some(Err(e)) => rsx! { p { class: "error", "Error: {e}" } },
|
|
Some(Ok(data)) => {
|
|
let fmap_read = family_map.read();
|
|
let empty_map: HashMap<Uuid, String> = HashMap::new();
|
|
let fm = match &*fmap_read {
|
|
Some(m) => m,
|
|
_ => &empty_map,
|
|
};
|
|
|
|
rsx! {
|
|
p { class: "result-count", "{data.total} species" }
|
|
|
|
if is_table {
|
|
{
|
|
let vis = visible_cols.read();
|
|
rsx! {
|
|
div { class: "table-wrap",
|
|
table {
|
|
thead {
|
|
tr {
|
|
if is_col_visible(&vis, "name_scientific") {
|
|
th { "Scientific Name" }
|
|
}
|
|
if is_col_visible(&vis, "common_name") {
|
|
th { "Common Name" }
|
|
}
|
|
if is_col_visible(&vis, "name_de") {
|
|
th { "German" }
|
|
}
|
|
if is_col_visible(&vis, "name_en") {
|
|
th { "English" }
|
|
}
|
|
if is_col_visible(&vis, "family") {
|
|
th { "Family" }
|
|
}
|
|
if is_col_visible(&vis, "plant_layer") {
|
|
th { "Layer" }
|
|
}
|
|
if is_col_visible(&vis, "nitrogen_fixer") {
|
|
th { "N-Fixer" }
|
|
}
|
|
if is_col_visible(&vis, "dynamic_accumulator") {
|
|
th { "Dyn. Accum." }
|
|
}
|
|
if is_col_visible(&vis, "food_uses") {
|
|
th { "Food Uses" }
|
|
}
|
|
if is_col_visible(&vis, "edibility_rating") {
|
|
th { "Edibility" }
|
|
}
|
|
if is_col_visible(&vis, "drought_tolerance") {
|
|
th { "Drought Tol." }
|
|
}
|
|
if is_col_visible(&vis, "hardiness_zone_usda") {
|
|
th { "USDA Zone" }
|
|
}
|
|
if is_col_visible(&vis, "nectar_value") {
|
|
th { "Nectar" }
|
|
}
|
|
if is_col_visible(&vis, "wild_bee_count") {
|
|
th { "Wild Bees" }
|
|
}
|
|
if is_col_visible(&vis, "native_status") {
|
|
th { "Native Status" }
|
|
}
|
|
}
|
|
}
|
|
tbody {
|
|
for s in data.data.iter() {
|
|
{
|
|
let family_name: &str = fm.get(&s.family_id).map(String::as_str).unwrap_or("-");
|
|
let common = pick_name(&lang.read(), &s.name_de, &s.name_en, &s.name_scientific);
|
|
rsx! {
|
|
tr {
|
|
if is_col_visible(&vis, "name_scientific") {
|
|
td {
|
|
Link { to: Route::SpeciesDetail { slug: s.slug.clone() },
|
|
em { "{s.name_scientific}" }
|
|
}
|
|
}
|
|
}
|
|
if is_col_visible(&vis, "common_name") {
|
|
td { "{common}" }
|
|
}
|
|
if is_col_visible(&vis, "name_de") {
|
|
td { "{s.name_de.as_deref().unwrap_or(\"-\")}" }
|
|
}
|
|
if is_col_visible(&vis, "name_en") {
|
|
td { "{s.name_en.as_deref().unwrap_or(\"-\")}" }
|
|
}
|
|
if is_col_visible(&vis, "family") {
|
|
td { class: "species-name", em { "{family_name}" } }
|
|
}
|
|
if is_col_visible(&vis, "plant_layer") {
|
|
td { "{s.plant_layer.as_deref().unwrap_or(\"-\")}" }
|
|
}
|
|
if is_col_visible(&vis, "nitrogen_fixer") {
|
|
td {
|
|
match s.nitrogen_fixer {
|
|
Some(true) => rsx! { span { class: "badge organic", "Yes" } },
|
|
Some(false) => rsx! { "-" },
|
|
None => rsx! { "-" },
|
|
}
|
|
}
|
|
}
|
|
if is_col_visible(&vis, "dynamic_accumulator") {
|
|
td {
|
|
match s.dynamic_accumulator {
|
|
Some(true) => rsx! { span { class: "badge organic", "Yes" } },
|
|
Some(false) => rsx! { "-" },
|
|
None => rsx! { "-" },
|
|
}
|
|
}
|
|
}
|
|
if is_col_visible(&vis, "food_uses") {
|
|
td { class: "cell-truncated",
|
|
"{s.food_uses.as_deref().map(|u| truncate(u, 60)).unwrap_or_else(|| \"-\".to_string())}"
|
|
}
|
|
}
|
|
if is_col_visible(&vis, "edibility_rating") {
|
|
td {
|
|
match s.edibility_rating {
|
|
Some(r) => rsx! { "{r}/5" },
|
|
None => rsx! { "-" },
|
|
}
|
|
}
|
|
}
|
|
if is_col_visible(&vis, "drought_tolerance") {
|
|
td { "{s.drought_tolerance.as_deref().unwrap_or(\"-\")}" }
|
|
}
|
|
if is_col_visible(&vis, "hardiness_zone_usda") {
|
|
td { "{s.hardiness_zone_usda.as_deref().unwrap_or(\"-\")}" }
|
|
}
|
|
if is_col_visible(&vis, "nectar_value") {
|
|
td {
|
|
match s.nectar_value {
|
|
Some(v) => rsx! { "{v}/4" },
|
|
None => rsx! { "-" },
|
|
}
|
|
}
|
|
}
|
|
if is_col_visible(&vis, "wild_bee_count") {
|
|
td {
|
|
match s.wild_bee_count {
|
|
Some(v) => rsx! { "{v}" },
|
|
None => rsx! { "-" },
|
|
}
|
|
}
|
|
}
|
|
if is_col_visible(&vis, "native_status") {
|
|
td {
|
|
match &s.native_status {
|
|
Some(ns) if !ns.is_empty() => {
|
|
let badge_class = match ns.as_str() {
|
|
s if s.contains("Wildform") || s.contains("wildform") || s.contains("heimisch") => "native-badge native-badge-heimisch",
|
|
s if s.contains("rchäophyt") => "native-badge native-badge-archaeophyt",
|
|
s if s.contains("eophyt") => "native-badge native-badge-neophyt",
|
|
_ => "native-badge",
|
|
};
|
|
rsx! { span { class: "{badge_class}", "{ns}" } }
|
|
},
|
|
_ => rsx! { "-" },
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} else {
|
|
div { class: "card-grid",
|
|
for s in data.data.iter() {
|
|
{
|
|
let card_common = pick_name(&lang.read(), &s.name_de, &s.name_en, &s.name_scientific);
|
|
let show_common = if card_common == s.name_scientific { None } else { Some(card_common) };
|
|
rsx! {
|
|
PlantCard {
|
|
key: "{s.id}",
|
|
slug: s.slug.clone(),
|
|
name: s.name_scientific.clone(),
|
|
name_common: show_common,
|
|
entity_type: "species".to_string(),
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
if data.total > data.per_page {
|
|
div { class: "pagination",
|
|
button {
|
|
disabled: current_page <= 1,
|
|
onclick: move |_| page.set(current_page - 1),
|
|
"Previous"
|
|
}
|
|
span { "Page {current_page} of {(data.total + data.per_page - 1) / data.per_page}" }
|
|
button {
|
|
disabled: current_page * data.per_page >= data.total,
|
|
onclick: move |_| page.set(current_page + 1),
|
|
"Next"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#[component]
|
|
pub fn SpeciesDetail(slug: String) -> Element {
|
|
let lang = use_context::<Lang>().0;
|
|
let slug_clone = slug.clone();
|
|
let species = use_resource(move || {
|
|
let s = slug_clone.clone();
|
|
async move { api::get_species(&s).await }
|
|
});
|
|
|
|
// Fetch family for family link
|
|
let family_data = use_resource(move || {
|
|
let sp = species.read().clone();
|
|
async move {
|
|
if let Some(Ok(s)) = sp {
|
|
// look up by iterating families
|
|
let resp = api::list_families(1, 200, None).await.ok();
|
|
if let Some(r) = resp {
|
|
for f in &r.data {
|
|
if f.id == s.family_id {
|
|
return Some(f.clone());
|
|
}
|
|
}
|
|
}
|
|
}
|
|
None
|
|
}
|
|
});
|
|
|
|
// Fetch images for this species
|
|
let species_images = use_resource(move || {
|
|
let sp = species.read().clone();
|
|
async move {
|
|
if let Some(Ok(s)) = sp {
|
|
api::get_images("species", s.id).await.ok().unwrap_or_default()
|
|
} else {
|
|
vec![]
|
|
}
|
|
}
|
|
});
|
|
|
|
rsx! {
|
|
div { class: "page species-detail",
|
|
match &*species.read() {
|
|
None => rsx! { p { "Loading..." } },
|
|
Some(Err(e)) => rsx! { p { class: "error", "Error: {e}" } },
|
|
Some(Ok(s)) => {
|
|
let species_slug = s.slug.clone();
|
|
let current_lang = lang.read().clone();
|
|
|
|
// Helper closures to format fields
|
|
let os = |v: &Option<String>| -> String {
|
|
match v {
|
|
Some(x) if !x.is_empty() => x.clone(),
|
|
_ => "\u{2014}".to_string(),
|
|
}
|
|
};
|
|
let ob = |v: Option<bool>| -> String {
|
|
match v {
|
|
Some(true) => "Yes".to_string(),
|
|
Some(false) => "No".to_string(),
|
|
None => "\u{2014}".to_string(),
|
|
}
|
|
};
|
|
let ovs = |v: &Option<Vec<String>>| -> String {
|
|
match v {
|
|
Some(x) if !x.is_empty() => x.join(", "),
|
|
_ => "\u{2014}".to_string(),
|
|
}
|
|
};
|
|
|
|
let em = "\u{2014}";
|
|
|
|
let common_name = pick_name(¤t_lang, &s.name_de, &s.name_en, &s.name_scientific);
|
|
let name_en = os(&s.name_en);
|
|
let name_de = os(&s.name_de);
|
|
let desc = pick_desc(¤t_lang, &s.description_de, &s.description_en, &s.description);
|
|
|
|
// Uses
|
|
let food = os(&s.food_uses);
|
|
let med = os(&s.medicinal_uses);
|
|
let other = os(&s.other_uses);
|
|
let edibility = match s.edibility_rating {
|
|
Some(r) => format!("{r}/5"),
|
|
None => em.to_string(),
|
|
};
|
|
|
|
// Ecology
|
|
let layer = os(&s.plant_layer);
|
|
let succession = os(&s.succession_stage);
|
|
let wildlife = os(&s.wildlife_value);
|
|
let native = os(&s.native_range);
|
|
let pollination = os(&s.pollination_type);
|
|
|
|
// Growing requirements
|
|
let soil_moist = os(&s.soil_moisture);
|
|
let ph_range = match (s.ph_min, s.ph_max) {
|
|
(Some(mn), Some(mx)) => format!("{mn} \u{2013} {mx}"),
|
|
(Some(mn), None) => format!("{mn}+"),
|
|
(None, Some(mx)) => format!("< {mx}"),
|
|
_ => em.to_string(),
|
|
};
|
|
let drought = os(&s.drought_tolerance);
|
|
let salt = os(&s.salt_tolerance);
|
|
let usda = os(&s.hardiness_zone_usda);
|
|
let at_zone = os(&s.hardiness_zone_at);
|
|
|
|
// Permaculture
|
|
let n_fixer = ob(s.nitrogen_fixer);
|
|
let dyn_acc = ob(s.dynamic_accumulator);
|
|
let pollinators = ob(s.attracts_pollinators);
|
|
let beneficial = ob(s.attracts_beneficial_insects);
|
|
let mulch = ob(s.mulch_plant);
|
|
let gc_quality = os(&s.ground_cover_quality);
|
|
let allelo = ob(s.allelopathic);
|
|
let guild = ovs(&s.guild_role);
|
|
|
|
// External links
|
|
let qid = s.wikidata_qid.clone();
|
|
let gbif = s.gbif_id.clone();
|
|
let eppo = os(&s.eppo_code);
|
|
let pfaf = s.pfaf_url.clone();
|
|
|
|
// Primary image: prefer primary from images API, else primary_image_key
|
|
let primary_img: Option<crate::types::Image> = {
|
|
let imgs = species_images.read();
|
|
match &*imgs {
|
|
Some(v) if !v.is_empty() => {
|
|
v.iter().find(|i| i.is_primary).or(v.first()).cloned()
|
|
}
|
|
_ => None,
|
|
}
|
|
};
|
|
let img_key: Option<String> = primary_img.as_ref().map(|i| i.s3_key.clone())
|
|
.or_else(|| s.primary_image_key.clone());
|
|
|
|
rsx! {
|
|
div { class: "species-header",
|
|
div { class: "species-header-text",
|
|
h1 { em { "{s.name_scientific}" } }
|
|
if common_name != s.name_scientific {
|
|
p { class: "name-common", "{common_name}" }
|
|
}
|
|
}
|
|
if let Some(ref key) = img_key {
|
|
div { class: "species-image-wrap",
|
|
img { class: "species-image", src: "/img/{key}", alt: "{s.name_scientific}" }
|
|
if let Some(ref img) = primary_img {
|
|
div { class: "image-attribution",
|
|
if let Some(ref caption) = img.caption {
|
|
span { "{caption}" }
|
|
}
|
|
if let Some(ref lic) = img.license {
|
|
if img.caption.is_some() {
|
|
" | "
|
|
}
|
|
span { "{lic}" }
|
|
}
|
|
if let Some(ref url) = img.source_url {
|
|
if img.caption.is_some() || img.license.is_some() {
|
|
" | "
|
|
}
|
|
a { href: "{url}", target: "_blank", class: "attribution-link", "Source" }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div { class: "detail-row",
|
|
// === LEFT COLUMN ===
|
|
div { class: "detail-col",
|
|
|
|
// Card 1: Species Details
|
|
div { class: "detail-card",
|
|
div { class: "detail-card-header", "Species Details" }
|
|
table { class: "attr-table",
|
|
tbody {
|
|
tr {
|
|
th { "Scientific Name" }
|
|
td { em { "{s.name_scientific}" } }
|
|
}
|
|
tr {
|
|
th { "Common Name" }
|
|
td { "{common_name}" }
|
|
}
|
|
tr {
|
|
th { "Name EN" }
|
|
td { class: if name_en == em { "placeholder" } else { "" }, "{name_en}" }
|
|
}
|
|
tr {
|
|
th { "Name DE" }
|
|
td { class: if name_de == em { "placeholder" } else { "" }, "{name_de}" }
|
|
}
|
|
tr {
|
|
th { "Family" }
|
|
td {
|
|
if let Some(Some(ref fam)) = *family_data.read() {
|
|
Link { to: Route::FamilyDetail { slug: fam.slug.clone() },
|
|
em { "{fam.name_scientific}" }
|
|
}
|
|
} else {
|
|
span { class: "placeholder", "\u{2014}" }
|
|
}
|
|
}
|
|
}
|
|
tr {
|
|
th { "Description" }
|
|
td { class: if desc == em { "placeholder" } else { "" }, "{desc}" }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Card 2: Uses
|
|
div { class: "detail-card",
|
|
div { class: "detail-card-header", "Uses" }
|
|
table { class: "attr-table",
|
|
tbody {
|
|
tr {
|
|
th { "Food Uses" }
|
|
td { class: if food == em { "placeholder" } else { "" }, "{food}" }
|
|
}
|
|
tr {
|
|
th { "Medicinal Uses" }
|
|
td { class: if med == em { "placeholder" } else { "" }, "{med}" }
|
|
}
|
|
tr {
|
|
th { "Other Uses" }
|
|
td { class: if other == em { "placeholder" } else { "" }, "{other}" }
|
|
}
|
|
tr {
|
|
th { "Edibility Rating" }
|
|
td { class: if edibility == em { "placeholder" } else { "" }, "{edibility}" }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Card 3: Ecology
|
|
div { class: "detail-card",
|
|
div { class: "detail-card-header", "Ecology" }
|
|
table { class: "attr-table",
|
|
tbody {
|
|
tr {
|
|
th { "Plant Layer" }
|
|
td { class: if layer == em { "placeholder" } else { "" }, "{layer}" }
|
|
}
|
|
tr {
|
|
th { "Succession Stage" }
|
|
td { class: if succession == em { "placeholder" } else { "" }, "{succession}" }
|
|
}
|
|
tr {
|
|
th { "Wildlife Value" }
|
|
td { class: if wildlife == em { "placeholder" } else { "" }, "{wildlife}" }
|
|
}
|
|
tr {
|
|
th { "Native Range" }
|
|
td { class: if native == em { "placeholder" } else { "" }, "{native}" }
|
|
}
|
|
tr {
|
|
th { "Pollination Type" }
|
|
td { class: if pollination == em { "placeholder" } else { "" }, "{pollination}" }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// === RIGHT COLUMN ===
|
|
div { class: "detail-col",
|
|
|
|
// Card 4: Growing Requirements
|
|
div { class: "detail-card",
|
|
div { class: "detail-card-header", "Growing Requirements" }
|
|
table { class: "attr-table",
|
|
tbody {
|
|
tr {
|
|
th { "Soil Moisture" }
|
|
td { class: if soil_moist == em { "placeholder" } else { "" }, "{soil_moist}" }
|
|
}
|
|
tr {
|
|
th { "pH Range" }
|
|
td { class: if ph_range == em { "placeholder" } else { "" }, "{ph_range}" }
|
|
}
|
|
tr {
|
|
th { "Drought Tolerance" }
|
|
td { class: if drought == em { "placeholder" } else { "" }, "{drought}" }
|
|
}
|
|
tr {
|
|
th { "Salt Tolerance" }
|
|
td { class: if salt == em { "placeholder" } else { "" }, "{salt}" }
|
|
}
|
|
tr {
|
|
th { "USDA Zone" }
|
|
td { class: if usda == em { "placeholder" } else { "" }, "{usda}" }
|
|
}
|
|
tr {
|
|
th { "AT Zone" }
|
|
td { class: if at_zone == em { "placeholder" } else { "" }, "{at_zone}" }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Card 5: Permaculture
|
|
div { class: "detail-card",
|
|
div { class: "detail-card-header", "Permaculture" }
|
|
table { class: "attr-table",
|
|
tbody {
|
|
tr {
|
|
th { "Nitrogen Fixer" }
|
|
td { class: if n_fixer == em { "placeholder" } else { "" }, "{n_fixer}" }
|
|
}
|
|
tr {
|
|
th { "Dynamic Accumulator" }
|
|
td { class: if dyn_acc == em { "placeholder" } else { "" }, "{dyn_acc}" }
|
|
}
|
|
tr {
|
|
th { "Attracts Pollinators" }
|
|
td { class: if pollinators == em { "placeholder" } else { "" }, "{pollinators}" }
|
|
}
|
|
tr {
|
|
th { "Attracts Beneficial Insects" }
|
|
td { class: if beneficial == em { "placeholder" } else { "" }, "{beneficial}" }
|
|
}
|
|
tr {
|
|
th { "Mulch Plant" }
|
|
td { class: if mulch == em { "placeholder" } else { "" }, "{mulch}" }
|
|
}
|
|
tr {
|
|
th { "Ground Cover Quality" }
|
|
td { class: if gc_quality == em { "placeholder" } else { "" }, "{gc_quality}" }
|
|
}
|
|
tr {
|
|
th { "Allelopathic" }
|
|
td { class: if allelo == em { "placeholder" } else { "" }, "{allelo}" }
|
|
}
|
|
tr {
|
|
th { "Guild Role" }
|
|
td { class: if guild == em { "placeholder" } else { "" }, "{guild}" }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Card 6: Wildlife & Ecology
|
|
div { class: "detail-card",
|
|
div { class: "detail-card-header", "Wildlife & Ecology" }
|
|
table { class: "attr-table",
|
|
tbody {
|
|
tr {
|
|
th { "Nectar Value" }
|
|
td {
|
|
match s.nectar_value {
|
|
Some(v) => rsx! {
|
|
div { class: "wildlife-bar-wrap",
|
|
div {
|
|
class: "wildlife-bar wildlife-bar-{v}",
|
|
style: "width: {v as f64 * 25.0}%",
|
|
}
|
|
}
|
|
span { class: "wildlife-bar-label", "{v}/4" }
|
|
},
|
|
None => rsx! { span { class: "placeholder", "\u{2014}" } },
|
|
}
|
|
}
|
|
}
|
|
tr {
|
|
th { "Pollen Value" }
|
|
td {
|
|
match s.pollen_value {
|
|
Some(v) => rsx! {
|
|
div { class: "wildlife-bar-wrap",
|
|
div {
|
|
class: "wildlife-bar wildlife-bar-{v}",
|
|
style: "width: {v as f64 * 25.0}%",
|
|
}
|
|
}
|
|
span { class: "wildlife-bar-label", "{v}/4" }
|
|
},
|
|
None => rsx! { span { class: "placeholder", "\u{2014}" } },
|
|
}
|
|
}
|
|
}
|
|
tr {
|
|
th { "Wild Bees" }
|
|
td {
|
|
match (s.wild_bee_count, s.wild_bee_specialist_count) {
|
|
(Some(total), Some(spec)) => rsx! { "{total} species ({spec} specialists)" },
|
|
(Some(total), None) => rsx! { "{total} species" },
|
|
_ => rsx! { span { class: "placeholder", "\u{2014}" } },
|
|
}
|
|
}
|
|
}
|
|
tr {
|
|
th { "Butterflies & Moths" }
|
|
td {
|
|
match (s.butterfly_moth_count, s.caterpillar_host_count) {
|
|
(Some(bm), Some(ch)) => rsx! { "{bm} species ({ch} caterpillar hosts)" },
|
|
(Some(bm), None) => rsx! { "{bm} species" },
|
|
_ => rsx! { span { class: "placeholder", "\u{2014}" } },
|
|
}
|
|
}
|
|
}
|
|
if s.caterpillar_specialist_count.is_some() {
|
|
tr {
|
|
th { "Caterpillar Specialists" }
|
|
td { "{s.caterpillar_specialist_count.unwrap()}" }
|
|
}
|
|
}
|
|
tr {
|
|
th { "Hoverflies" }
|
|
td {
|
|
match s.hoverfly_count {
|
|
Some(v) => rsx! { "{v} species" },
|
|
None => rsx! { span { class: "placeholder", "\u{2014}" } },
|
|
}
|
|
}
|
|
}
|
|
tr {
|
|
th { "Beetles" }
|
|
td {
|
|
match s.beetle_count {
|
|
Some(v) => rsx! { "{v} species" },
|
|
None => rsx! { span { class: "placeholder", "\u{2014}" } },
|
|
}
|
|
}
|
|
}
|
|
tr {
|
|
th { "Birds" }
|
|
td {
|
|
match s.bird_count {
|
|
Some(v) => rsx! { "{v} species" },
|
|
None => rsx! { span { class: "placeholder", "\u{2014}" } },
|
|
}
|
|
}
|
|
}
|
|
tr {
|
|
th { "Mammals" }
|
|
td {
|
|
match s.mammal_count {
|
|
Some(v) => rsx! { "{v} species" },
|
|
None => rsx! { span { class: "placeholder", "\u{2014}" } },
|
|
}
|
|
}
|
|
}
|
|
tr {
|
|
th { "Native Status" }
|
|
td {
|
|
match &s.native_status {
|
|
Some(ns) if !ns.is_empty() => {
|
|
let badge_class = match ns.as_str() {
|
|
s if s.contains("Wildform") || s.contains("wildform") || s.contains("heimisch") => "native-badge native-badge-heimisch",
|
|
s if s.contains("rchäophyt") => "native-badge native-badge-archaeophyt",
|
|
s if s.contains("eophyt") => "native-badge native-badge-neophyt",
|
|
_ => "native-badge",
|
|
};
|
|
rsx! { span { class: "{badge_class}", "{ns}" } }
|
|
},
|
|
_ => rsx! { span { class: "placeholder", "\u{2014}" } },
|
|
}
|
|
}
|
|
}
|
|
tr {
|
|
th { "NaturaDB Tags" }
|
|
td {
|
|
match &s.naturadb_tags {
|
|
Some(tags) if !tags.is_empty() => {
|
|
let tag_list: Vec<&str> = tags.split(',').map(|t| t.trim()).filter(|t| !t.is_empty()).collect();
|
|
rsx! {
|
|
div { class: "badges",
|
|
for tag in tag_list {
|
|
span { class: "badge", "{tag}" }
|
|
}
|
|
}
|
|
}
|
|
},
|
|
_ => rsx! { span { class: "placeholder", "\u{2014}" } },
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Card 7: External Links
|
|
div { class: "detail-card",
|
|
div { class: "detail-card-header", "External Links" }
|
|
table { class: "attr-table",
|
|
tbody {
|
|
tr {
|
|
th { "Wikidata QID" }
|
|
td {
|
|
if let Some(ref q) = qid {
|
|
if !q.is_empty() {
|
|
a { href: "https://www.wikidata.org/wiki/{q}", target: "_blank", class: "external-link", "{q}" }
|
|
} else {
|
|
span { class: "placeholder", "\u{2014}" }
|
|
}
|
|
} else {
|
|
span { class: "placeholder", "\u{2014}" }
|
|
}
|
|
}
|
|
}
|
|
tr {
|
|
th { "GBIF ID" }
|
|
td {
|
|
if let Some(ref g) = gbif {
|
|
if !g.is_empty() {
|
|
a { href: "https://www.gbif.org/species/{g}", target: "_blank", class: "external-link", "{g}" }
|
|
} else {
|
|
span { class: "placeholder", "\u{2014}" }
|
|
}
|
|
} else {
|
|
span { class: "placeholder", "\u{2014}" }
|
|
}
|
|
}
|
|
}
|
|
tr {
|
|
th { "EPPO Code" }
|
|
td { class: if eppo == em { "placeholder" } else { "" }, "{eppo}" }
|
|
}
|
|
tr {
|
|
th { "PFAF URL" }
|
|
td {
|
|
if let Some(ref u) = pfaf {
|
|
if !u.is_empty() {
|
|
a { href: "{u}", target: "_blank", class: "external-link", "View on PFAF" }
|
|
} else {
|
|
span { class: "placeholder", "\u{2014}" }
|
|
}
|
|
} else {
|
|
span { class: "placeholder", "\u{2014}" }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Cultivars for this species (below the two-column layout)
|
|
h2 { "Cultivars" }
|
|
CultivarListForSpecies { species_slug: species_slug }
|
|
}
|
|
},
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#[component]
|
|
fn CultivarListForSpecies(species_slug: String) -> Element {
|
|
let lang = use_context::<Lang>().0;
|
|
let slug = species_slug.clone();
|
|
let cultivars = use_resource(move || {
|
|
let s = slug.clone();
|
|
async move { api::list_cultivars(1, 100, Some(&s), None).await }
|
|
});
|
|
|
|
rsx! {
|
|
match &*cultivars.read() {
|
|
None => rsx! { p { "Loading..." } },
|
|
Some(Err(e)) => rsx! { p { class: "error", "Error: {e}" } },
|
|
Some(Ok(data)) => {
|
|
if data.data.is_empty() {
|
|
rsx! { p { class: "empty", "No cultivars yet." } }
|
|
} else {
|
|
rsx! {
|
|
div { class: "card-grid",
|
|
for c in data.data.iter() {
|
|
{
|
|
let cv_common = pick_name(&lang.read(), &c.name_de, &c.name_en, &c.name);
|
|
let show_common = if cv_common == c.name { None } else { Some(cv_common) };
|
|
rsx! {
|
|
div { class: "plant-card",
|
|
Link { to: Route::CultivarDetail { slug: c.slug.clone() },
|
|
strong { "{c.name}" }
|
|
}
|
|
if let Some(ref common) = show_common {
|
|
p { class: "card-common", "{common}" }
|
|
}
|
|
if c.is_organic {
|
|
span { class: "badge organic", "Organic" }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
}
|
|
}
|
|
}
|