parcoursmob-default-theme/web/layouts/agenda/_partials/address.html

67 lines
2.7 KiB
HTML
Raw Normal View History

{{ define "address" }}
<div class="col-span-6 relative" x-data="{
input: {{if .Adress}}'{{.Address.Properties.label}}'{{else}}`{{ .Default.properties.label}}`{{end}},
def: `{{ .Default}}`,
address: {{if .Address}}JSON.stringify({{printf "%s" .Address.MarshalJSON}}){{else}}null{{end}},
addressObject: {{if .Address}}{{printf "%s" .Address.MarshalJSON}}{{else}}null{{end}},
responselength: 0,
async autocomplete() {
if(this.input == null || this.input == '') {
this.responselength = 0
return []
}
if(this.addressObject != null && this.input == this.addressObject.properties.label) {
this.responselength = 0
return []
}
if(this.input == `{{ .Default.properties.label}}`) {
this.responselength = 0
this.address = this.def
this.input = `{{ .Default.properties.label}}`
result = await fetch('https://geocode.ridygo.fr/v1/autocomplete/\?text=' + this.input)
json = await result.json()
bb = json['features'][0]
console.log(bb)
this.address = JSON.stringify(bb)
this.addressObject = bb
this.input = bb.properties.label
return [bb]
}
result = await fetch('https://geocode.ridygo.fr/v1/autocomplete/\?text=' + this.input)
json = await result.json()
this.responselength = json['features'].length
return json['features']
},
select(a) {
this.address = JSON.stringify(a)
this.addressObject = a
this.input = a.properties.label
}
}">
<input type="hidden" name="{{ .FieldName }}" x-model="address" >
<label for="address" class="block text-sm font-medium text-gray-700">{{ if .FieldLabel }}{{.FieldLabel}}{{else}}Adresse{{end}}</label>
<input type="text"
class="mt-1 focus:ring-co-blue focus:border-co-blue block w-full shadow-sm sm:text-sm border-gray-300 rounded-2xl"
x-model="input">
<ul x-show="responselength > 0"
class="absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-xl py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" tabindex="-1" role="listbox" aria-labelledby="listbox-label" aria-activedescendant="listbox-option-3">
<template x-for="item in autocomplete">
<a href="#">
<li class="text-gray-900 hover:bg-gray-200 cursor-default select-none relative py-2 pl-3 pr-9"
@click="select(item)">
<span class="font-normal block truncate" x-text="item.properties.label" ></span>
</li>
</a>
</template>
</ul>
</div>
{{ end }}