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
|
import { h } from 'lib/h'
import * as Button from 'lib/button'
import * as Form from 'lib/form'
import * as Layout from 'lib/layout'
import * as Modal from 'lib/modal'
import * as FontAwesome from 'lib/fontAwesome'
import * as AutoComplete from 'lib/autoComplete'
export function form(
onValidate: (name: string, color: string, icon: string) => void,
colors: string[],
name: string,
color: string,
icon: string
): Element {
const onSubmit = () => {
onValidate(name, color, icon)
Modal.hide()
}
const domIcon = h('div', { className: `fa fa-${icon}` })
return h('div',
{},
Layout.section(
{},
h('form',
{ className: 'g-MarkerForm',
onsubmit: (e: Event) => {
e.preventDefault()
onSubmit()
}
},
Layout.section(
{},
Form.input(
'g-MarkerForm__Name',
'Name',
{ oninput: (e: Event) => {
if (e.target !== null) {
name = (e.target as HTMLInputElement).value
}
},
value: name
}
),
Form.colorInput(
colors,
'g-MarkerForm__Color',
'Color',
color,
newColor => color = newColor
),
h('div',
{ className: 'g-Form__Field' },
h('div',
{ className: 'g-Form__Label' },
h('label', { for: 'g-MarkerForm__IconInput' }, 'Icon')
),
Layout.line(
{ className: 'g-MarkerForm__AutoCompleteAndIcon' },
AutoComplete.create(
{ value: icon,
className: 'g-MarkerForm__AutoComplete'
},
'g-MarkerForm__IconInput',
FontAwesome.icons,
icon => h('div',
{},
h('div', { className: `g-MarkerForm__IconEntry fa fa-${icon}` }),
icon
),
newIcon => {
icon = newIcon
domIcon.className = `fa fa-${icon}`
}),
h('div', { className: 'g-MarkerForm__Icon' }, domIcon)
)
)
)
),
Layout.line(
{},
Button.action({ onclick: () => onSubmit() }, 'Save'),
Button.cancel(
{ onclick: () => Modal.hide(),
type: 'button'
},
'Cancel'
)
)
)
)
}
// let create on_remove on_update colors pos init_name init_color init_icon =
// let marker =
// Leaflet.marker pos
// { title = init_name
// ; icon = Icon.create init_icon init_color
// ; draggable = true
// }
// in
//
// (* Context menu *)
// let () = Leaflet.on marker 'contextmenu' (fun event ->
// ContextMenu.show
// (Leaflet.original_event event)
// [| { label = 'Modify'
// ; action = fun _ ->
// Modal.show (form (on_update pos pos) colors init_name init_color init_icon)
// }
// ; { label = 'Remove'
// ; action = fun _ -> on_remove pos
// }
// |])
// in
//
// (* Move the cursor on drag *)
// let () = Leaflet.on marker 'dragend' (fun e ->
// let newPos = Leaflet.get_lat_lng (Leaflet.target e) () in
// on_update pos newPos init_name init_color init_icon) in
//
// let () = Leaflet.on marker 'dblclick' (fun _ ->
// Modal.show (form (on_update pos pos) colors init_name init_color init_icon)) in
//
// marker
|
