diff options
Diffstat (limited to 'Aamukampa.Web')
| -rw-r--r-- | Aamukampa.Web/Aamukampa.Web.fsproj | 1 | ||||
| -rw-r--r-- | Aamukampa.Web/Modules/Index.fs | 113 | ||||
| -rw-r--r-- | Aamukampa.Web/Views.fs | 23 |
3 files changed, 129 insertions, 8 deletions
diff --git a/Aamukampa.Web/Aamukampa.Web.fsproj b/Aamukampa.Web/Aamukampa.Web.fsproj index 1e24cf4..85f2d15 100644 --- a/Aamukampa.Web/Aamukampa.Web.fsproj +++ b/Aamukampa.Web/Aamukampa.Web.fsproj @@ -5,6 +5,7 @@ </PropertyGroup> <ItemGroup> + <Compile Include="Views.fs" /> <Compile Include="Modules/Index.fs" /> <Compile Include="Program.fs" /> </ItemGroup> diff --git a/Aamukampa.Web/Modules/Index.fs b/Aamukampa.Web/Modules/Index.fs index b6aacb6..03fb438 100644 --- a/Aamukampa.Web/Modules/Index.fs +++ b/Aamukampa.Web/Modules/Index.fs @@ -6,14 +6,113 @@ open Aamukampa.Core [<AutoOpen>] module Views = - open Aamukampa.Core.Views + open Falco.Markup + open Elem + open Attr + open Text + open Aamukampa.Web.Views type Model = { - Counter : Main.Model + TimeLeft : TimeSpan + TimeCompleted : TimeSpan } - let view model = - Main.view model.Counter + let timeUnits model = + let round (p : int) (f : float) = Math.Round(f, p) + + div [ id "time-units" ] [ + yield! + ([ + "Vuosia", "tj-years", model.TimeLeft.TotalDays / 365.0 |> round 2 + "Kuukausia", "tj-months", model.TimeLeft.TotalDays / 30.0 |> round 2 + "Viikkoja", "tj-weeks", model.TimeLeft.TotalDays / 7.0 |> round 1 + "Tunteja", "tj-hours", model.TimeLeft.TotalHours |> round 1 + "Minuutteja", "tj-minutes", model.TimeLeft.TotalMinutes |> round 0 + "Sekunteja", "tj-seconds", model.TimeLeft.TotalSeconds |> round 0 + ] + |> List.map (fun (title, valueId, value) -> + div [] [ + span title + Elem.span [ id valueId ] [ + enc (string value) + ] + ])) + ] + + let view model = + main [] [ + div [ class' "counter" ] [ + Elem.span [ class' "counter_title" ] [ + raw "Tänään jäljellä" + ] + Elem.span [ id "tj"; class' "counter_value" ] [ + enc (string <| Math.Ceiling model.TimeLeft.TotalDays) + ] + Elem.span [ class' "counter_mornings" ] [ + raw "aamua" + ] + ] + + div [ class' "progress-bar" ] [ + let p = 100.0 * (1.0 - model.TimeLeft / (model.TimeLeft + model.TimeCompleted)) + let cssWidth = sprintf "%s%%" (p.ToString("F2")) + + Elem.span [ class' "progress-bar_label" ] [ + raw <| sprintf "%s %%" (p.ToString("F2")) + ] + div [ class' "progress-bar_bar" ] [ + div [ + class' "progress-bar_value" + style <| + sprintf "width: %s" + cssWidth + ] [] + ] + ] + + div [] [ + Elem.label [ for' "kontingent-select" ] [ raw "Saapumiserä:" ] + select [ id "kontingent-select" ] [ + option [ value "1/25" ] [ enc "1/25" ] + option [ value "2/25" ] [ enc "2/25" ] + option [ value "1/26" ] [ enc "1/26" ] + option [ value "2/26" ] [ enc "2/26" ] + ] + ] + + Elem.p [ + style "text-align: center; font-size: 1.5rem;" + ] [ + enc "2/25 255" + ] + + timeUnits model + + // div [] [ + // Elem.label [ for' "kontingent-select" ] [ raw "Saapumiserä:" ] + // select [ id "kontingent-select" ] [ + // option [ value "1/25" ] [ enc "1/25" ] + // option [ value "2/25" ] [ enc "2/25" ] + // option [ value "1/26" ] [ enc "1/26" ] + // option [ value "2/26" ] [ enc "2/26" ] + // ] + // ] + + // div [] [ + // Elem.p [] [ + // span "Tunteina" + // enc (string model.TimeLeft.TotalHours) + // ] + // Elem.p [] [ + // span "Sekunteina" + // enc (string model.TimeLeft.TotalSeconds) + // ] + // Elem.p [] [ + // span "Aamuja ohi " + // enc (string <| Math.Floor model.TimeCompleted.TotalDays) + // ] + // ] + ] |> Document.view let get : HttpHandler = @@ -24,8 +123,6 @@ let get : HttpHandler = let completed = Domain.getTimeCompleted kontingent time |> Option.get view { - Counter = { - TimeLeft = timeLeft - TimeCompleted = completed - } + TimeLeft = timeLeft + TimeCompleted = completed } |> Response.ofHtml <| ctx diff --git a/Aamukampa.Web/Views.fs b/Aamukampa.Web/Views.fs new file mode 100644 index 0000000..94392eb --- /dev/null +++ b/Aamukampa.Web/Views.fs @@ -0,0 +1,23 @@ +namespace Aamukampa.Web.Views + +open System +open Falco.Markup +open Elem +open Attr +open Text +open Aamukampa.Core + +module Document = + let view documentBody = + html [ lang "fi" ] [ + head [] [ + meta [ charset "utf-8" ] + meta [ name "viewport"; content "width=device-width" ] + Elem.title [] [ raw "Aamukampa" ] + link [ rel "stylesheet"; href (sprintf "%s%s" Config.pathBase "styles.css") ] + script [ type' "module"; src (sprintf "%s%s" Config.pathBase "app.js") ] [] + ] + body [] [ + documentBody + ] + ] |