PrayerTracker/src/PrayerTracker.UI/Layout.fs

/// Layout items for PrayerTracker
module PrayerTracker.Views.Layout

open Giraffe.ViewEngine
open PrayerTracker
open PrayerTracker.ViewModels
open System
open System.Globalization


/// Get the two-character language code for the current request
let langCode () = if CultureInfo.CurrentCulture.Name.StartsWith "es" then "es" else "en"


/// Navigation items
module Navigation =
  
    /// Top navigation bar
    let top m =
        let s = I18N.localizer.Force ()
        let menuSpacer = rawText "  "
        let leftLinks = [
            match m.user with
            | Some u ->
                li [ _class "dropdown" ] [
                    a [ _class "dropbtn"; _role "button"; _aria "label" s["Requests"].Value; _title s["Requests"].Value ]
                      [ icon "question_answer"; space; locStr s["Requests"]; space; icon "keyboard_arrow_down" ]
                    div [ _class "dropdown-content"; _role "menu" ] [
                        a [ _href "/web/prayer-requests" ] [ icon "compare_arrows"; menuSpacer; locStr s["Maintain"] ]
                        a [ _href "/web/prayer-requests/view" ] [ icon "list"; menuSpacer; locStr s["View List"] ]
                    ]
                ]
                li [ _class "dropdown" ] [
                    a [ _class "dropbtn"; _role "button"; _aria "label" s["Group"].Value; _title s["Group"].Value ]
                      [ icon "group"; space; locStr s["Group"]; space; icon "keyboard_arrow_down" ]
                    div [ _class "dropdown-content"; _role "menu" ] [
                        a [ _href "/web/small-group/members" ]
                          [ icon "email"; menuSpacer; locStr s["Maintain Group Members"] ]
                        a [ _href "/web/small-group/announcement" ]
                          [ icon "send";  menuSpacer; locStr s["Send Announcement"] ]
                        a [ _href "/web/small-group/preferences" ]
                          [ icon "build"; menuSpacer; locStr s["Change Preferences"] ]
                    ]
                ]
                if u.isAdmin then
                    li [ _class "dropdown" ] [
                        a [ _class "dropbtn"
                            _role "button"
                            _aria "label" s["Administration"].Value
                            _title s["Administration"].Value
                          ] [ icon "settings"; space; locStr s["Administration"]; space; icon "keyboard_arrow_down" ]
                        div [ _class "dropdown-content"; _role "menu" ] [
                            a [ _href "/web/churches" ]     [ icon "home";  menuSpacer; locStr s["Churches"] ]
                            a [ _href "/web/small-groups" ] [ icon "send";  menuSpacer; locStr s["Groups"] ]
                            a [ _href "/web/users" ]        [ icon "build"; menuSpacer; locStr s["Users"] ]
                        ]
                    ]
            | None ->
                match m.group with
                | Some _ ->
                    li [] [
                        a [ _href "/web/prayer-requests/view"
                            _aria "label" s["View Request List"].Value
                            _title s["View Request List"].Value
                          ] [ icon "list"; space; locStr s["View Request List"] ]
                    ]
                | None ->
                    li [ _class "dropdown" ] [
                        a [ _class "dropbtn"
                            _role "button"
                            _aria "label" s["Log On"].Value
                            _title s["Log On"].Value
                          ] [ icon "security"; space; locStr s["Log On"]; space; icon "keyboard_arrow_down" ]
                        div [ _class "dropdown-content"; _role "menu" ] [
                            a [ _href "/web/user/log-on" ]        [ icon "person"; menuSpacer; locStr s["User"] ]
                            a [ _href "/web/small-group/log-on" ] [ icon "group";  menuSpacer; locStr s["Group"] ]
                        ]
                    ]
                    li [] [
                        a [ _href "/web/prayer-requests/lists"
                            _aria "label" s["View Request List"].Value
                            _title s["View Request List"].Value
                          ] [ icon "list"; space; locStr s["View Request List"] ]
                    ]
            li [] [
                a [ _href   $"https://docs.prayer.bitbadger.solutions/{langCode ()}"
                    _aria   "label" s["Help"].Value;
                    _title  s["View Help"].Value
                    _target "_blank"
                  ] [ icon "help"; space; locStr s["Help"] ]
            ]
        ]
        let rightLinks =
            match m.group with
            | Some _ -> [
                match m.user with
                | Some _ ->
                    li [] [
                        a [ _href "/web/user/password"
                            _aria "label" s["Change Your Password"].Value
                            _title s["Change Your Password"].Value
                          ] [ icon "lock"; space; locStr s["Change Your Password"] ]
                    ]
                | None -> ()
                li [] [
                    a [ _href "/web/log-off"; _aria "label" s["Log Off"].Value; _title s["Log Off"].Value ]
                      [ icon "power_settings_new"; space; locStr s["Log Off"] ]
                ]
              ]
            | None -> []
        header [ _class "pt-title-bar" ] [
            section [ _class "pt-title-bar-left" ] [
                span [ _class "pt-title-bar-home" ] [
                    a [ _href "/web/"; _title s["Home"].Value ] [ locStr s["PrayerTracker"] ]
                ]
                ul [] leftLinks
            ]
            section [ _class "pt-title-bar-center" ] []
            section [ _class "pt-title-bar-right"; _role "toolbar" ] [
                ul [] rightLinks
            ]
        ]
    
    /// Identity bar (below top nav)
    let identity m =
        let s = I18N.localizer.Force ()
        header [ _id "pt-language" ] [
            div [] [
                span [ _class "u" ] [ locStr s["Language"]; rawText ": " ]
                match langCode () with
                | "es" -> 
                    locStr s["Spanish"]
                    rawText "   •   "
                    a [ _href "/web/language/en" ] [ locStr s["Change to English"] ]
                | _ ->
                    locStr s["English"]
                    rawText "   •   "
                    a [ _href "/web/language/es" ] [ locStr s["Cambie a Español"] ]
            ]
            match m.group with
            | Some g ->[
                match m.user with
                | Some u ->
                    span [ _class "u" ] [ locStr s["Currently Logged On"] ]
                    rawText "   "
                    icon "person"
                    strong [] [ str u.fullName ]
                    rawText "    "
                | None ->
                    locStr s["Logged On as a Member of"]
                    rawText "  "
                icon "group"
                space
                match m.user with
                | Some _ -> a [ _href "/web/small-group" ] [ strong [] [ str g.name ] ]
                | None -> strong [] [ str g.name ]
                rawText "  "
              ]
            | None -> []
            |> div []
        ]


/// Content layouts
module Content =
  
    /// Content layout that tops at 60rem
    let standard = div [ _class "pt-content" ]

    /// Content layout that uses the full width of the browser window
    let wide = div [ _class "pt-content pt-full-width" ]

  
/// Separator for parts of the title
let private titleSep = rawText " « "

/// Common HTML head tag items
let private commonHead =
    [ meta [ _name "viewport"; _content "width=device-width, initial-scale=1" ]
      meta [ _name "generator"; _content "Giraffe" ]
      link [ _rel "stylesheet"; _href "https://fonts.googleapis.com/icon?family=Material+Icons" ]
      link [ _rel "stylesheet"; _href "/css/app.css" ]
      script [ _src "/js/app.js" ] []
    ]

/// Render the <head> portion of the page
let private htmlHead m pageTitle =
    let s = I18N.localizer.Force ()
    head [] [
        meta [ _charset "UTF-8" ]
        title [] [ locStr pageTitle; titleSep; locStr s["PrayerTracker"] ]
        yield! commonHead
        for cssFile in m.style do
            link [ _rel "stylesheet"; _href $"/css/{cssFile}.css"; _type "text/css" ]
        for jsFile in m.script do
            script [ _src $"/js/{jsFile}.js" ] []
    ]
  
/// Render a link to the help page for the current page
let private helpLink link =
    let s = I18N.localizer.Force ()
    sup [] [
        a [ _href link; _title s["Click for Help on This Page"].Value; _onclick $"return PT.showHelp('{link}')" ]
          [ icon "help_outline" ]
    ]

/// Render the page title, and optionally a help link
let private renderPageTitle m pageTitle =
    h2 [ _id "pt-page-title" ] [
        match m.helpLink with Some link -> Help.fullLink (langCode ()) link |> helpLink | None -> ()
        locStr pageTitle
    ]

/// Render the messages that may need to be displayed to the user
let private messages m =
    let s = I18N.localizer.Force ()
    m.messages
    |> List.map (fun msg ->
        table [ _class $"pt-msg {msg.level.ToLower ()}" ] [
            tr [] [
                td [] [
                    match msg.level with
                    | "Info" -> ()
                    | lvl ->
                        strong [] [ locStr s[lvl] ]
                        rawText " &#xbb; "
                    rawText msg.text.Value
                    match msg.description with
                    | Some desc ->
                        br []
                        div [ _class "description" ] [ rawText desc.Value ]
                    | None -> ()
                ]
            ]
        ])

/// Render the <footer> at the bottom of the page
let private htmlFooter m =
    let s = I18N.localizer.Force ()
    let imgText = sprintf "%O %O" s["PrayerTracker"] s["from Bit Badger Solutions"]
    let resultTime = TimeSpan(DateTime.Now.Ticks - m.requestStart).TotalSeconds
    footer [] [
        div [ _id "pt-legal" ] [
            a [ _href "/web/legal/privacy-policy" ] [ locStr s["Privacy Policy"] ]
            rawText " &bull; "
            a [ _href "/web/legal/terms-of-service" ] [ locStr s["Terms of Service"] ]
            rawText " &bull; "
            a [ _href "https://github.com/bit-badger/PrayerTracker"
                _title s["View source code and get technical support"].Value
                _target "_blank"
                _rel "noopener"
              ] [ locStr s["Source & Support"]
            ]
        ]
        div [ _id "pt-footer" ] [
            a [ _href "/web/"; _style "line-height:28px;" ]
              [ img [ _src $"""/img/%O{s["footer_en"]}.png"""; _alt imgText; _title imgText ] ]
            str m.version
            space
            i [ _title s["This page loaded in {0:N3} seconds", resultTime].Value; _class "material-icons md-18" ]
              [ str "schedule" ]
        ]
    ]

/// The standard layout for PrayerTracker
let standard m pageTitle (content : XmlNode) =
    let s   = I18N.localizer.Force ()
    let ttl = s[pageTitle]
    html [ _lang "" ] [
        htmlHead m ttl
        body [] [
            Navigation.top m
            div [ _id "pt-body" ] [
                Navigation.identity m
                renderPageTitle m ttl
                yield! messages m
                content
                htmlFooter m
            ]
        ]
    ]
  
/// A layout with nothing but a title and content
let bare pageTitle content =
    let s   = I18N.localizer.Force ()
    let ttl = s[pageTitle]
    html [ _lang "" ] [
        head [] [
            meta [ _charset "UTF-8" ]
            title [] [ locStr ttl; titleSep; locStr s["PrayerTracker"] ]
        ]
        body [] [ content ]
    ]