From 96aea2535a85c615111496f6d077eb0e9c9fa644 Mon Sep 17 00:00:00 2001
From: Joel Stålnacke <joel@saker.fi>
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.Web/Aamukampa.Web.fsproj |   1 +
 Aamukampa.Web/Modules/Index.fs     | 113 ++++++++++++++++++++++++++++++++++---
 Aamukampa.Web/Views.fs             |  23 ++++++++
 3 files changed, 129 insertions(+), 8 deletions(-)
 create mode 100644 Aamukampa.Web/Views.fs

(limited to 'Aamukampa.Web')

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
+            ]
+        ]
-- 
cgit v1.2.3