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

use maud::{html, Markup};

use dbui_core::ctx::RequestContext;
use dbui_core::profile::Theme;
use dbui_core::result::Result;

pub fn profile(ctx: &RequestContext) -> 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().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().theme() == &t] name="theme" type="radio" value=(format!("{:?}", t));
                      " " (format!("{:?}", t)) " "
                    }
                  }
                }
                input#navbar_color name="navbar_color" type="hidden" value=(ctx.user().nav_color());

                div.uk-margin {
                  label { "Navbar Color" }
                  div#colors {
                      @for c in crate::components::colors::COLORS.iter() {
                        (swatch(ctx.user(), c))
                      }
                  }
                }
                div {
                  button.uk-button.uk-button-default type="submit" { "Save Changes" }
                }
              }
            }
          }))
        }
      }
    }
    (crate::script_inline(r#"
      function color(el, c) {
        var input = document.getElementById("navbar_color");
        input.value = c;
        var nb = document.getElementById("navbar");
        nb.className = (c + "-background uk-navbar-container uk-navbar");
        var colors = document.querySelectorAll(".swatch");
        colors.forEach(function(i) {
          i.classList.remove("active");
        })
        el.classList.add("active");
      }
    "#))
  };
  Ok(html! {
    (crate::page(ctx, "Profile", content)?)
  })
}

fn swatch(p: &dbui_core::profile::UserProfile, c: &str) -> Markup {
  let cls = if p.nav_color() == c { "active" } else { "" };
  html! {
    div.swatch.(cls).(format!("{}-background", c)).uk-text-center title=(c) onclick=(format!("color(this, '{}')", c)) {
      div.icon data-uk-icon="icon: check" {}
    }
  }
}