1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110
use anyhow::Result; use dbui_core::profile::Theme; use dbui_service::{RequestContext, Router}; use maud::{html, Markup}; pub fn profile(ctx: &RequestContext, router: &dyn Router) -> Result<Markup> { let content = html! { div.uk-section.uk-section-small { div.uk-container { div.uk-text-center { h1.uk-heading-hero { "Profile" } } div.uk-margin-top.uk-container.uk-container-small { (crate::card(&ctx, html! { form action="" method="post" { fieldset.uk-fieldset { div.uk-margin { label for="username" { "Username" } input.uk-input#username name="username" type="text" value=(ctx.user_profile().name()); } div.uk-margin { div { label { "Theme" } } @for t in Theme::all() { label for=(format!("theme-{}", t)) { input.uk-radio#(format!("theme-{}", t)) checked?[ctx.user_profile().theme() == &t] name="theme" type="radio" value=(format!("{}", t)); " " (format!("{}", t)) " " } } } input#navbar_color name="navbar_color" type="hidden" value=(ctx.user_profile().nav_color()); div.uk-margin { label { "Navbar Color" } div#colors { @for c in crate::components::colors::COLORS.iter() { (nav_swatch(ctx.user_profile(), c)) } } } input#link_color name="link_color" type="hidden" value=(ctx.user_profile().link_color()); div.uk-margin { label { a.(ctx.user_profile().link_class()) id="link_example" href="" onclick="return false;" { "Link" } " Color" } div#colors { @for c in crate::components::colors::COLORS.iter() { (link_swatch(ctx.user_profile(), c)) } } } div { button.uk-button.uk-button-default type="submit" { "Save Changes" } } } } })) } } } (crate::components::script::script_inline(r#" function nav_color(el, c) { var input = document.getElementById("navbar_color"); input.value = c; var nb = document.getElementById("navbar"); nb.className = (c + "-bg data-uk-navbar-container data-uk-navbar"); var colors = document.querySelectorAll(".nav_swatch"); colors.forEach(function(i) { i.classList.remove("active"); }) el.classList.add("active"); } function link_color(el, c) { var input = document.getElementById("link_color"); input.value = c; var l = document.getElementById("link_example"); l.className = (c + "-fg"); var colors = document.querySelectorAll(".link_swatch"); colors.forEach(function(i) { i.classList.remove("active"); }) el.classList.add("active"); } "#)) }; crate::simple(ctx, router, "Profile", content) } fn nav_swatch(p: &dbui_core::profile::UserProfile, c: &str) -> Markup { let cls = if p.nav_color() == c { "active" } else { "" }; html! { div.swatch.nav_swatch.(cls).(format!("{}-bg", c)).uk-text-center title=(c) onclick=(format!("nav_color(this, '{}')", c)) { div.icon data-uk-icon="icon: check" {} } } } fn link_swatch(p: &dbui_core::profile::UserProfile, c: &str) -> Markup { let cls = if p.link_color() == c { "active" } else { "" }; html! { div.swatch.link_swatch.(cls).(format!("{}-bg", c)).uk-text-center title=(c) onclick=(format!("link_color(this, '{}')", c)) { div.icon data-uk-icon="icon: check" {} } } }