351 lines
16 KiB
Forth
351 lines
16 KiB
Forth
/// Layout items for PrayerTracker
|
|
module PrayerTracker.Views.Layout
|
|
|
|
open Giraffe.ViewEngine
|
|
open Giraffe.ViewEngine.Accessibility
|
|
open PrayerTracker.ViewModels
|
|
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 _dropdown = _class "dropdown-btn"
|
|
let leftLinks = [
|
|
match m.User with
|
|
| Some u ->
|
|
li [ _class "dropdown" ] [
|
|
a [ _dropdown; _ariaLabel s["Requests"].Value; _title s["Requests"].Value; _roleButton ] [
|
|
icon "question_answer"; space; locStr s["Requests"]; space; icon "keyboard_arrow_down" ]
|
|
div [ _class "dropdown-content"; _roleMenuBar ] [
|
|
pageLink "/prayer-requests"
|
|
[ _roleMenuItem ]
|
|
[ icon "compare_arrows"; menuSpacer; locStr s["Maintain"] ]
|
|
pageLink "/prayer-requests/view"
|
|
[ _roleMenuItem ]
|
|
[ icon "list"; menuSpacer; locStr s["View List"] ] ] ]
|
|
li [ _class "dropdown" ] [
|
|
a [ _dropdown; _ariaLabel s["Group"].Value; _title s["Group"].Value; _roleButton ] [
|
|
icon "group"; space; locStr s["Group"]; space; icon "keyboard_arrow_down" ]
|
|
div [ _class "dropdown-content"; _roleMenuBar ] [
|
|
pageLink "/small-group/members"
|
|
[ _roleMenuItem ]
|
|
[ icon "email"; menuSpacer; locStr s["Maintain Group Members"] ]
|
|
pageLink "/small-group/announcement"
|
|
[ _roleMenuItem ]
|
|
[ icon "send"; menuSpacer; locStr s["Send Announcement"] ]
|
|
pageLink "/small-group/preferences"
|
|
[ _roleMenuItem ]
|
|
[ icon "build"; menuSpacer; locStr s["Change Preferences"] ] ] ]
|
|
if u.IsAdmin then
|
|
li [ _class "dropdown" ] [
|
|
a [ _dropdown
|
|
_ariaLabel s["Administration"].Value
|
|
_title s["Administration"].Value
|
|
_roleButton ] [
|
|
icon "settings"; space; locStr s["Administration"]; space; icon "keyboard_arrow_down" ]
|
|
div [ _class "dropdown-content"; _roleMenuBar ] [
|
|
pageLink "/churches" [ _roleMenuItem ] [ icon "home"; menuSpacer; locStr s["Churches"] ]
|
|
pageLink "/small-groups"
|
|
[ _roleMenuItem ]
|
|
[ icon "send"; menuSpacer; locStr s["Groups"] ]
|
|
pageLink "/users" [ _roleMenuItem ] [ icon "build"; menuSpacer; locStr s["Users"] ] ] ]
|
|
| None ->
|
|
match m.Group with
|
|
| Some _ ->
|
|
li [] [
|
|
pageLink "/prayer-requests/view"
|
|
[ _ariaLabel s["View Request List"].Value; _title s["View Request List"].Value ]
|
|
[ icon "list"; space; locStr s["View Request List"] ] ]
|
|
| None ->
|
|
li [ _class "dropdown" ] [
|
|
a [ _dropdown; _ariaLabel s["Log On"].Value; _title s["Log On"].Value; _roleButton ] [
|
|
icon "security"; space; locStr s["Log On"]; space; icon "keyboard_arrow_down" ]
|
|
div [ _class "dropdown-content"; _roleMenuBar ] [
|
|
pageLink "/user/log-on" [ _roleMenuItem ] [ icon "person"; menuSpacer; locStr s["User"] ]
|
|
pageLink "/small-group/log-on"
|
|
[ _roleMenuItem ]
|
|
[ icon "group"; menuSpacer; locStr s["Group"] ] ] ]
|
|
li [] [
|
|
pageLink "/prayer-requests/lists"
|
|
[ _ariaLabel s["View Request List"].Value; _title s["View Request List"].Value ]
|
|
[ icon "list"; space; locStr s["View Request List"] ] ]
|
|
li [] [
|
|
a [ _href "/help"; _ariaLabel 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 [] [
|
|
pageLink "/user/password"
|
|
[ _ariaLabel s["Change Your Password"].Value; _title s["Change Your Password"].Value ]
|
|
[ icon "lock"; space; locStr s["Change Your Password"] ] ]
|
|
| None -> ()
|
|
li [] [
|
|
pageLink "/log-off"
|
|
[ _ariaLabel s["Log Off"].Value; _title s["Log Off"].Value; Target.body ]
|
|
[ icon "power_settings_new"; space; locStr s["Log Off"] ] ] ]
|
|
| None -> []
|
|
header [ _class "pt-title-bar"; Target.content ] [
|
|
section [ _class "pt-title-bar-left"; _ariaLabel "Left side of top menu" ] [
|
|
span [ _class "pt-title-bar-home" ] [
|
|
pageLink "/" [ _title s["Home"].Value ] [ locStr s["PrayerTracker"] ] ]
|
|
ul [] leftLinks ]
|
|
section [ _class "pt-title-bar-center"; _ariaLabel "Empty center space in top menu" ] []
|
|
section [ _class "pt-title-bar-right"; _roleToolBar; _ariaLabel "Right side of top menu" ] [
|
|
ul [] rightLinks ] ]
|
|
|
|
/// Identity bar (below top nav)
|
|
let identity m =
|
|
let s = I18N.localizer.Force()
|
|
header [ _id "pt-language"; Target.body ] [
|
|
div [] [
|
|
span [ _title s["Language"].Value ] [ icon "record_voice_over"; space ]
|
|
match langCode () with
|
|
| "es" ->
|
|
strong [] [ locStr s["Spanish"] ]
|
|
rawText " "
|
|
pageLink "/language/en" [] [ locStr s["Change to English"] ]
|
|
| _ ->
|
|
strong [] [ locStr s["English"] ]
|
|
rawText " "
|
|
pageLink "/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.Name ]
|
|
rawText " "
|
|
| None ->
|
|
locStr s["Logged On as a Member of"]
|
|
rawText " "
|
|
icon "group"
|
|
space
|
|
match m.User with
|
|
| Some _ -> pageLink "/small-group" [] [ strong [] [ str g.Name ] ]
|
|
| None -> strong [] [ str g.Name ] ]
|
|
| 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 "/_/app.css" ] ]
|
|
|
|
/// Render the <head> portion of the page
|
|
let private htmlHead viewInfo pgTitle =
|
|
let s = I18N.localizer.Force()
|
|
head [] [
|
|
meta [ _charset "UTF-8" ]
|
|
title [] [ locStr pgTitle; titleSep; locStr s["PrayerTracker"] ]
|
|
yield! commonHead
|
|
for cssFile in viewInfo.Style do
|
|
link [ _rel "stylesheet"; _href $"/_/{cssFile}.css"; _type "text/css" ] ]
|
|
|
|
|
|
/// Render a link to the help page for the current page
|
|
let private helpLink link =
|
|
let s = I18N.localizer.Force()
|
|
sup [ _class "pt-help-link" ] [
|
|
a [ _href link
|
|
_title s["Click for Help on This Page"].Value
|
|
_onclick $"return PT.showHelp('{link}')" ] [ iconSized 18 "help_outline" ] ]
|
|
|
|
/// Render the page title, and optionally a help link
|
|
let private renderPageTitle viewInfo pgTitle =
|
|
h2 [ _id "pt-page-title" ] [
|
|
match viewInfo.HelpLink with
|
|
| Some link -> helpLink $"/help/{link}"
|
|
| None -> ()
|
|
locStr pgTitle ]
|
|
|
|
/// Render the messages that may need to be displayed to the user
|
|
let private messages viewInfo =
|
|
let s = I18N.localizer.Force()
|
|
if List.isEmpty viewInfo.Messages then []
|
|
else
|
|
viewInfo.Messages
|
|
|> List.map (fun msg ->
|
|
div [ _class $"pt-msg {MessageLevel.toCssClass msg.Level}" ] [
|
|
match msg.Level with
|
|
| Info -> ()
|
|
| lvl ->
|
|
strong [] [ locStr s[MessageLevel.toString lvl] ]
|
|
rawText " » "
|
|
rawText msg.Text.Value
|
|
match msg.Description with
|
|
| Some desc ->
|
|
br []
|
|
div [ _class "description" ] [ rawText desc.Value ]
|
|
| None -> () ])
|
|
|> div [ _class "pt-messages" ]
|
|
|> List.singleton
|
|
|
|
|
|
open NodaTime
|
|
|
|
/// Render the <footer> at the bottom of the page
|
|
let private htmlFooter viewInfo =
|
|
let s = I18N.localizer.Force()
|
|
let imgText = $"""%O{s["PrayerTracker"]} %O{s["from Bit Badger Solutions"]}"""
|
|
let resultTime = (SystemClock.Instance.GetCurrentInstant() - viewInfo.RequestStart).TotalSeconds
|
|
footer [ _class "pt-footer" ] [
|
|
div [ _id "pt-legal" ] [
|
|
pageLink "/legal/privacy-policy" [] [ locStr s["Privacy Policy"] ]
|
|
rawText " "
|
|
pageLink "/legal/terms-of-service" [] [ locStr s["Terms of Service"] ]
|
|
rawText " "
|
|
a [ _href "https://git.bitbadger.solutions/bit-badger/PrayerTracker"
|
|
_title s["View source code and get technical support"].Value
|
|
_target "_blank"
|
|
_relNoOpener ] [
|
|
locStr s["Source & Support"] ] ]
|
|
div [ _id "pt-footer" ] [
|
|
pageLink "/" [ _style "line-height:28px;" ] [
|
|
img [ _src $"""/img/%O{s["footer_en"]}.png"""
|
|
_alt imgText
|
|
_title imgText
|
|
_width "331"; _height "28" ] ]
|
|
span [ _id "pt-version" ] [ str viewInfo.Version ]
|
|
space
|
|
i [ _title s["This page loaded in {0:N3} seconds", resultTime].Value; _class "material-icons md-18" ] [
|
|
str "schedule" ] ] ]
|
|
|
|
/// The content portion of the PrayerTracker layout
|
|
let private contentSection viewInfo pgTitle (content: XmlNode) =
|
|
[ Navigation.identity viewInfo
|
|
renderPageTitle viewInfo pgTitle
|
|
yield! messages viewInfo
|
|
match viewInfo.ScopedStyle with
|
|
| [] -> ()
|
|
| styles -> style [] [ rawText (styles |> String.concat " ") ]
|
|
content
|
|
htmlFooter viewInfo
|
|
match viewInfo.OnLoadScript with
|
|
| Some onLoad ->
|
|
let doCall = if onLoad.EndsWith ")" then "" else "()"
|
|
script [] [
|
|
rawText $"
|
|
window.doOnLoad = () => {{
|
|
if (window.PT) {{
|
|
{onLoad}{doCall}
|
|
delete window.doOnLoad
|
|
}} else {{ setTimeout(window.doOnLoad, 500) }}
|
|
}}
|
|
window.doOnLoad()" ]
|
|
| None -> () ]
|
|
|
|
/// The HTML head element for partial responses
|
|
let private partialHead pgTitle =
|
|
let s = I18N.localizer.Force()
|
|
head [] [
|
|
meta [ _charset "UTF-8" ]
|
|
title [] [ locStr pgTitle; titleSep; locStr s["PrayerTracker"] ] ]
|
|
|
|
/// The body of the PrayerTracker layout
|
|
let private pageLayout viewInfo pgTitle content =
|
|
body [] [
|
|
Navigation.top viewInfo
|
|
div [ _id "pt-body"; Target.content ] (contentSection viewInfo pgTitle content)
|
|
match viewInfo.Layout with
|
|
| FullPage ->
|
|
script [ _src "/js/ckeditor/ckeditor.js" ] []
|
|
Htmx.Script.minified
|
|
script [ _src "/_/app.js" ] []
|
|
| _ -> () ]
|
|
|
|
/// The standard layout(s) for PrayerTracker
|
|
let standard viewInfo pageTitle content =
|
|
let s = I18N.localizer.Force()
|
|
let pgTitle = s[pageTitle]
|
|
html [ _lang (langCode ()) ] [
|
|
match viewInfo.Layout with
|
|
| FullPage ->
|
|
htmlHead viewInfo pgTitle
|
|
pageLayout viewInfo pgTitle content
|
|
| PartialPage ->
|
|
partialHead pgTitle
|
|
pageLayout viewInfo pgTitle content
|
|
| ContentOnly ->
|
|
partialHead pgTitle
|
|
body [] (contentSection viewInfo pgTitle content) ]
|
|
|
|
/// A layout with nothing but a title and content
|
|
let bare pageTitle content =
|
|
let s = I18N.localizer.Force()
|
|
html [ _lang (langCode ()) ] [
|
|
partialHead s[pageTitle]
|
|
body [] [ content ] ]
|
|
|
|
/// Help page layout
|
|
let help pageTitle isHome content =
|
|
let s = I18N.localizer.Force()
|
|
let pgTitle = s[pageTitle]
|
|
html [ _lang (langCode ()) ] [
|
|
head [] [
|
|
meta [ _charset "UTF-8" ]
|
|
meta [ _name "viewport"; _content "width=device-width, initial-scale=1" ]
|
|
title [] [ locStr pgTitle; titleSep; locStr s["PrayerTracker Help"] ]
|
|
link [ _href "https://fonts.googleapis.com/icon?family=Material+Icons"; _rel "stylesheet" ]
|
|
link [ _href "/_/app.css"; _rel "stylesheet" ]
|
|
link [ _href "/_/help.css"; _rel "stylesheet" ] ]
|
|
body [] [
|
|
header [ _class "pt-title-bar" ] [
|
|
section [ _class "pt-title-bar-left" ] [
|
|
span [ _class "pt-title-bar-home" ] [
|
|
a [ _href "/help"; _title "Home" ] [ locStr s["PrayerTracker"] ] ] ]
|
|
section [ _class "pt-title-bar-right" ] [ locStr s["Help"] ] ]
|
|
div [ _id "pt-body" ] [
|
|
header [ _id "pt-language" ] [
|
|
div [] [
|
|
locStr s["Language"]; rawText ": "
|
|
match langCode () with
|
|
| "es" ->
|
|
locStr s["Spanish"]; rawText " • "
|
|
a [ _href "/language/en" ] [ locStr s["Change to English"] ]
|
|
| _ ->
|
|
locStr s["English"]; rawText " • "
|
|
a [ _href "/language/es" ] [ locStr s["Cambie a Español"] ] ] ]
|
|
h2 [ _id "pt-page-title" ] [ locStr pgTitle ]
|
|
div [ _class "pt-content" ] [
|
|
yield! content
|
|
div [ _class "pt-close-window" ] [
|
|
p [ _class "pt-center-text" ] [
|
|
a [ _href "#"; _title s["Click to Close This Window"].Value
|
|
_onclick "window.close(); return false" ] [
|
|
i [ _class "material-icons"] [ rawText "cancel" ]
|
|
space; locStr s["Close Window"] ] ] ]
|
|
if not isHome then
|
|
div [ _class "pt-help-index" ] [
|
|
p [ _class "pt-center-text" ] [
|
|
a [ _href "/help"; _title s["Help Index"].Value ] [
|
|
rawText "« "; locStr s["Back to Help Index"] ] ] ] ] ] ] ]
|