1 files changed, 105 insertions, 8 deletions
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