1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
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)
// ]
// ]
]
|
