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
|
import gleam/list
import lustre
import lustre/attribute
import lustre/element.{type Element}
import lustre/element/html
import lustre/event
import lustre/ui
// MAIN ------------------------------------------------------------------------
pub fn app() {
lustre.simple(init, update, view)
}
// MODEL -----------------------------------------------------------------------
pub type Model =
List(#(String, String, String, String))
fn init(_) -> Model {
[]
}
// UPDATE ----------------------------------------------------------------------
pub opaque type Msg {
Incr
Decr
}
fn update(_: Model, msg: Msg) -> Model {
case msg {
Incr -> [
#("1", "1", "1", "1"),
#("2", "2", "2", "2"),
#("3", "3", "3", "3"),
#("4", "4", "4", "4"),
#("5", "5", "5", "5"),
]
Decr -> [
#("3", "3", "3", "3"),
#("2", "2", "2", "2"),
#("1", "1", "1", "1"),
]
}
}
// VIEW ------------------------------------------------------------------------
fn view(model: Model) -> Element(Msg) {
let styles = [#("width", "100vw"), #("height", "100vh"), #("padding", "1rem")]
ui.centre(
[attribute.style(styles)],
ui.stack([], [
ui.button([event.on_click(Incr)], [element.text("ascending")]),
ui.button([event.on_click(Decr)], [element.text("descending")]),
html.div([], [
ui.stack([], [
html.table([], [
html.thead([], [
html.tr([attribute.style([])], [
html.th([], [html.text("Part No")]),
html.th([], [html.text("Customer")]),
html.th([], [html.text("Job No")]),
html.th([], [html.text("Due Date")]),
]),
]),
{
// let rows =
html.tbody([], {
list.map(model, fn(tuple) {
html.tr([], [
html.td([], [html.text(tuple.0)]),
html.td([], [html.text(tuple.1)]),
html.td([], [html.text(tuple.2)]),
html.td([], [html.text(tuple.3)]),
])
})
})
},
]),
]),
]),
]),
)
}
|
