Initial frontend

2 files changed, 93 insertions, 0 deletions

diff --git a/TJLaskuri.Core/TJLaskuri.Core.fsproj b/TJLaskuri.Core/TJLaskuri.Core.fsproj
index c3b606a..bc6029f 100644
--- a/TJLaskuri.Core/TJLaskuri.Core.fsproj
+++ b/TJLaskuri.Core/TJLaskuri.Core.fsproj
@@ -7,7 +7,12 @@
 
   <ItemGroup>
     <Compile Include="Types.fs" />
+    <Compile Include="Views.fs" />
     <Compile Include="Library.fs" />
   </ItemGroup>
 
+  <ItemGroup>
+    <PackageReference Include="Falco.Markup" Version="1.2.0" />
+  </ItemGroup>
+
 </Project>
diff --git a/TJLaskuri.Core/Views.fs b/TJLaskuri.Core/Views.fs
new file mode 100644
index 0000000..939acec
--- /dev/null
+++ b/TJLaskuri.Core/Views.fs
@@ -0,0 +1,88 @@
+namespace TJLaskuri.Core.Views
+
+open System
+open Falco.Markup
+open Elem
+open Attr
+open Text
+
+module Document =
+    let view documentBody =
+        html [ lang "fi" ] [
+            head [] [ 
+                meta [ charset "utf-8" ]
+                meta [ name "viewport"; content "width=device-width" ]
+                Elem.title [] [ raw "TJ-laskuri" ]
+                script [ type' "module"; src "/js/app.js" ] [] 
+                link [ rel "stylesheet"; href "/styles.css" ]
+                ]
+            body [] [
+                documentBody
+            ]
+        ]
+
+module Main =
+    type Model = {
+        TimeLeft : TimeSpan
+        TimeCompleted : TimeSpan
+    }
+
+    let view model =
+        main [] [
+            div [ class' "counter" ] [
+                Elem.span [ class' "counter_title" ] [
+                    raw "Tänään jäljellä"
+                ]
+                Elem.span [ 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"))
+
+                div [
+                    class' "progress-bar_value"
+                    style <|
+                        sprintf "background-color: green; width: %s"
+                            cssWidth
+                ] [
+                    span <| sprintf "%s %%" (p.ToString("F2"))
+                ]
+            ]
+
+            Elem.p [
+                style "text-align: center; font-size: 1.5rem;"
+            ] [
+                enc "2/25 347"
+            ]
+
+            // 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)
+            //     ]
+            // ]
+        ]