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
111
112
113
114
115

use maud::{html, Markup};

use dbui_core::profile::Theme;
use dbui_core::Result;
use dbui_service::RequestContext;

use crate::components::script::script_inline;

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() {
                      (nav_swatch(ctx.user(), c))
                    }
                  }
                }

                input#link_color name="link_color" type="hidden" value=(ctx.user().link_color());
                div.uk-margin {
                  label {
                    a.(ctx.user().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(), c))
                    }
                  }
                }

                div {
                  button.uk-button.uk-button-default type="submit" { "Save Changes" }
                }
              }
            }
          }))
        }
      }
    }
    (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");
      }
    "#))
  };
  Ok(html! {
    (crate::simple(ctx, "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" {}
    }
  }
}