Solidarity transport implementation

web/layouts/_partials/orb_address_autocomplete.html

@@ -0,0 +1,59 @@
+
+{{ define "address_autocomplete" }}
+
+<div class="col-span-6 relative" x-data='{
+    input: {{if .Address}}"{{.Address.Properties.label}}"{{else}}null{{end}},
+    address: {{if .Address}}JSON.stringify({{template "geojson" .Address}}){{else}}null{{end}},
+    addressObject: {{if .Address}}{{template "geojson" .Address }}{{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 []
+        }
+        result = await fetch("https://api.geocode.earth/v1/autocomplete/\?api_key=ge-4949288cd450ad31&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="p-2 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 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 }}
+
+{{define "geojson"}}{
+  "type": "Feature",
+  "geometry": {
+    "type": "Point",
+    "coordinates": [{{index .Point 0}}, {{index .Point 1}}],
+  },
+  "properties": {
+    "label": "{{.Properties.label}}"
+  }
+}{{end}}