diff options
Diffstat (limited to 'src/markerForm.ts')
-rw-r--r-- | src/markerForm.ts | 116 |
1 files changed, 0 insertions, 116 deletions
diff --git a/src/markerForm.ts b/src/markerForm.ts deleted file mode 100644 index 54670ae..0000000 --- a/src/markerForm.ts +++ /dev/null @@ -1,116 +0,0 @@ -import { h } from 'lib/h' -import * as AutoComplete from 'lib/autoComplete' -import * as Button from 'lib/button' -import * as Dom from 'lib/dom' -import * as Form from 'lib/form' -import * as Icons from 'lib/icons' -import * as Layout from 'lib/layout' -import * as State from 'state' - -interface FormParams { - onValidate: (color: string, icon: string, name: string, radius: number) => void, - onCancel: () => void, - color: string, - icon: string, - name: string, - radius: number, -} - -export function view({ onValidate, onCancel, color, icon, name, radius }: FormParams): Element { - var radiusStr = radius.toString() - const onSubmit = () => onValidate(color, icon, name, parseInt(radiusStr) || 0) - const domIcon = h('div', - { className: 'g-MarkerForm__Icon' }, - Icons.get(icon, { fill: 'black', stroke: 'black' }) - ) - return h('div', - {}, - Layout.section( - {}, - h('form', - { className: 'g-MarkerForm', - onsubmit: (e: Event) => { - e.preventDefault() - onSubmit() - } - }, - Layout.section( - {}, - Form.input({ - label: 'Name', - attrs: { - oninput: (e: Event) => { - if (e.target !== null) { - name = (e.target as HTMLInputElement).value - } - }, - onblur: (e: Event) => { - if (e.target !== null) { - name = (e.target as HTMLInputElement).value.trim() - } - }, - value: name - } - }), - Form.colorInput({ - colors: State.colors(), - label: 'Color', - initValue: color, - onInput: 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', - Icons.keys().sort(), - iconKey => h('div', - { className: 'g-MarkerForm__IconEntry' }, - h('div', { className: 'g-MarkerForm__IconElem' }, Icons.get(iconKey, { fill: 'black', stroke: 'black' }) ), - iconKey - ), - newIcon => { - icon = newIcon - Dom.replaceChildren(domIcon, Icons.get(icon, { fill: 'black', stroke: 'black' })) - }), - domIcon - ) - ), - Form.input({ - label: 'Radius (m)', - attrs: { oninput: (e: Event) => { - if (e.target !== null) { - radiusStr = (e.target as HTMLInputElement).value - } - }, - value: radiusStr, - type: 'number', - } - }) - ), - ), - Layout.line( - {}, - Button.action({ onclick: () => onSubmit() }, 'Save'), - Button.cancel( - { onclick: () => onCancel(), - type: 'button' - }, - 'Cancel' - ) - ) - ) - ) -} - -function restrictCharacters(str: string, chars: string): string { - return str.split('').filter(c => chars.indexOf(c) != -1).join('') -} |