ember-ui/addon/components/coordinates-input.hbs at 3ed19c0c87529b6246c801d580b657befc03ca7b · fleetbase/ember-ui · GitHub

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
<div class="grid grid-cols-2 gap-2 coordinates-input" ...attributes>
    <Input class="w-full form-input" @type="text" placeholder="Latitude" aria-label="Latitude" @value={{this.latitude}} disabled={{this.disabled}} />
    <Input class="w-full form-input" @type="text" placeholder="Longitude" aria-label="Longitude" @value={{this.longitude}} disabled={{this.disabled}} />
</div>
<div class="my-1">
    <BasicDropdown ...attributes @verticalPosition="top" @horizontalPosition="left" @onClose={{this.onClose}} @renderInPlace={{or @renderInPlace true}} @disabled={{this.disabled}} as |dd|>
        <dd.Trigger class="{{@triggerClass}} {{if this.disabled 'disabled'}}" disabled={{this.disabled}}>
            <span class="text-sky-500 hover:text-sky-600">Select from map</span>
        </dd.Trigger>
        <dd.Content class="bg-transparent min-w-500px">
            <div class="coordinates-input-map-container rounded shadow-md w-60 h-60 relative my-3 {{@mapContainerClass}}">
                <LeafletMap
                    class={{@leafletMapClass}}
                    @lat={{this.mapLat}}
                    @lng={{this.mapLng}}
                    @zoomControl={{this.zoomControl}}
                    @zoom={{this.zoom}}
                    @onLoad={{this.onMapLoaded}}
                    @onMoveend={{this.setCoordinatesFromMap}}
                    @doubleClickZoom={{false}}
                    as |layers|
                >
                    <layers.tile @url={{this.tileSourceUrl}} />
                </LeafletMap>
                <div class="coordinates-input-zoom-controls {{@zoomControlClass}}">
                    <div class="coordinates-input-zoom-controls-container {{@zoomControlContainerClass}}">
                        <div id="map-toolbar-zoom-in-button-wrapper">
                            <button type="button" id="map-toolbar-zoom-in-button" class="toolbar-button" {{on "click" this.onZoomIn}}>
                                <FaIcon @icon="plus" @prefix="fas" class="text-gray-100" />
                            </button>
                        </div>
                        <div id="map-toolbar-zoom-out-button-wrapper">
                            <button type="button" class="toolbar-button" {{on "click" this.onZoomOut}}>
                                <FaIcon @icon="minus" id="map-toolbar-zoom-out-button" @prefix="fas" class="text-gray-100" />
                            </button>
                        </div>
                    </div>
                </div>
                <div class="absolute inset-0 m-auto z-9999 w-10 h-10 pointer-events-none">
                    <img src="/images/map-marker.png" alt="Draggable map marker" class="w-10" />
                </div>
            </div>
            <div class="flex flex-col">
                <div class="flex flex-row items-center pb-4">
                    <Input @type="text" class="form-input mr-2" @value={{this.lookupQuery}} aria-label="Address Search" disabled={{or this.disabled this.reverseLookup.isRunning}} placeholder="Enter address" />
                    <Button @wrapperClass="mr-2" @icon="search-location" @type="primary" @size="sm" @text="Lookup" @onClick={{perofrm this.reverseLookup}} @isLoading={{this.reverseLookup.isRunning}} />
                    <Button @type="default" @iconPrefix="fas" @icon="times" @size="sm" @text="Done" @onClick={{dd.actions.close}} />
                </div>
            </div>
        </dd.Content>
    </BasicDropdown>
</div>