From 96aea2535a85c615111496f6d077eb0e9c9fa644 Mon Sep 17 00:00:00 2001 From: Joel Stålnacke Date: Sun, 28 Sep 2025 14:28:50 +0300 Subject: Move HTML views from Core to Web Fable can't bundle Falco.Markup because it's a compiled library, so we can't have templates on the frontend. --- Aamukampa.Core/Aamukampa.Core.fsproj | 1 - Aamukampa.Core/Views.fs | 126 ----------------------------------- Aamukampa.Frontend/App.fs | 10 +-- Aamukampa.Web/Aamukampa.Web.fsproj | 1 + Aamukampa.Web/Modules/Index.fs | 113 ++++++++++++++++++++++++++++--- Aamukampa.Web/Views.fs | 23 +++++++ 6 files changed, 134 insertions(+), 140 deletions(-) delete mode 100644 Aamukampa.Core/Views.fs create mode 100644 Aamukampa.Web/Views.fs diff --git a/Aamukampa.Core/Aamukampa.Core.fsproj b/Aamukampa.Core/Aamukampa.Core.fsproj index c0afaae..5544c2d 100644 --- a/Aamukampa.Core/Aamukampa.Core.fsproj +++ b/Aamukampa.Core/Aamukampa.Core.fsproj @@ -8,7 +8,6 @@ - diff --git a/Aamukampa.Core/Views.fs b/Aamukampa.Core/Views.fs deleted file mode 100644 index b94e06f..0000000 --- a/Aamukampa.Core/Views.fs +++ /dev/null @@ -1,126 +0,0 @@ -namespace Aamukampa.Core.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 - ] - ] - -module Main = - type Model = { - TimeLeft : TimeSpan - TimeCompleted : TimeSpan - } - - 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) - // ] - // ] - ] diff --git a/Aamukampa.Frontend/App.fs b/Aamukampa.Frontend/App.fs index d388013..3d188e1 100644 --- a/Aamukampa.Frontend/App.fs +++ b/Aamukampa.Frontend/App.fs @@ -18,11 +18,11 @@ window.setInterval((fun () -> | false, _ -> None document.getElementById "time-units" |> fun el -> - el.outerHTML <- - Views.Main.timeUnits { - TimeLeft = Domain.getTimeLeft k st now |> Option.get - TimeCompleted = Domain.getTimeCompleted k now |> Option.get - } |> renderHtml + // el.outerHTML <- + // Views.Main.timeUnits { + // TimeLeft = Domain.getTimeLeft k st now |> Option.get + // TimeCompleted = Domain.getTimeCompleted k now |> Option.get + // } |> renderHtml ()), 1000, [||]) |> ignore 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 @@ + 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 [] 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 + ] + ] -- cgit v1.2.3