bit-badger/myPrayerJournal
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases 36 Activity

WIP on request edit form

Browse Source
This commit is contained in:
Daniel J. Summers 2021-10-04 18:53:45 -04:00
parent ade3430fb3
commit 5e712d2598
2 changed files with 107 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
src/MyPrayerJournal/Server/Views.fs
View File

@ -409,6 +409,106 @@ module Request =
]
]
let edit (req : JournalRequest) isNew = article [ _class "container mt-3" ] [
form [ _hxPost "/request" ] [
input [
_type "hidden"
_name "requestId"
_value (match isNew with true -> "new" | false -> RequestId.toString req.requestId)
]
div [ _class "form-floating mb-3" ] [
textarea [
_id "request_text"
_name "request_text"
_class "form-control"
_style "min-height: 4rem;"
_placeholder "Enter the text of the request"
_autofocus; _required
] [ str req.text ]
label [ _for "request_text" ] [ str "Prayer Request" ]
]
br []
match isNew with
| true ->
label [] [ str "Also Mark As" ]
br []
div [ _class "form-check form-check-inline" ] [
input [ _type "radio"; _class "form-check-input"; _id "sU"; _name "status"; _value "Updated"; _checked ]
label [ _for "sU" ] [ str "Updated" ]
]
div [ _class "form-check form-check-inline" ] [
input [ _type "radio"; _class "form-check-input"; _id "sP"; _name "status"; _value "Prayed" ]
label [ _for "sP" ] [ str "Prayed" ]
]
div [ _class "form-check form-check-inline" ] [
input [ _type "radio"; _class "form-check-input"; _id "sA"; _name "status"; _value "Answered" ]
label [ _for "sA" ] [ str "Answered" ]
]
br []
| false -> ()
label [] [
rawText "Recurrence     "
em [ _class "text-muted" ] [ rawText "After prayer, request reappears…" ]
]
br []
div [ _class "row" ] [
div [ _class "col-4 form-check" ] [
input [
_type "radio"
_class "form-check-input"
_id "rI"
_name "recurType"
_value "Immediate"
_onclick "toggleRecurrence"
match req.recurType with Immediate -> _checked | _ -> ()
]
label [ _for "rI" ] [ str "Immediately" ]
]
div [ _class "col-3 form-check"] [
input [
_type "radio"
_class "form-check-input"
_id "rO"
_name "recurType"
_value "Other"
_onclick "toggleRecurrence"
match req.recurType with Immediate -> () | _ -> _checked
]
label [ _for "rO" ] [ rawText "Every…" ]
]
div [ _class "col-2 form-floating"] [
input [
_type "number"
_class "form-control"
_id "recurCount"
_name "recurCount"
_placeholder "0"
_value (string req.recurCount)
_required
]
label [ _for "recurCount" ] [ str "Count" ]
]
div [ _class "col-3 form-floating" ] [
select [ _class "form-control"; _id "recurInterval"; _name "recurInterval"; _required ] [
option [ _value "Hours"; match req.recurType with Hours -> _selected | _ -> () ] [ str "hours" ]
option [ _value "Days"; match req.recurType with Days -> _selected | _ -> () ] [ str "days" ]
option [ _value "Weeks"; match req.recurType with Weeks -> _selected | _ -> () ] [ str "weeks" ]
]
label [ _form "recurInterval" ] [ str "Interval" ]
]
]
div [ _class "text-right" ] [
button [ _class "btn btn-primary"; _type "submit" ] [ icon "save"; str " Save" ]
a [ _class "btn btn-secondary"; _href "#"; _onclick "history.go(-1)" ] [icon "arrow_back"; str " Cancel"]
]
]
script [] [
rawText """toggleRecurrence ({ target }) {
const isDisabled = target.value === "Immediate"
;["recurCount","recurInterval"].forEach(it => document.getElementById(it).disabled = isDisabled)
}"""
]
]
/// Layout views
module Layout =

9
src/MyPrayerJournal/Server/wwwroot/style/style.css
View File

@ -20,12 +20,17 @@ nav .j {
text-decoration: none;
}
.nav-item a:hover {
cursor: pointer;
background-color: rgba(255, 255, 255, .2);
cursor: pointer;
background-color: rgba(255, 255, 255, .2);
}
.navbar-nav .is-active-route {
background-color: rgba(255, 255, 255, .2);
}
form {
max-width: 60rem;
margin: auto;
}
.action-cell .material-icons {
font-size: 1.1rem ;
}