1 files changed, 125 insertions, 0 deletions
diff --git a/src/marker.ts b/src/marker.ts
new file mode 100644
index 0000000..67b9649
--- /dev/null
+++ b/src/marker.ts
@@ -0,0 +1,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