Solidarity transport implementation

web/layouts/_partials/address_autocomplete.html

@@ -1,13 +1,12 @@
 {{ 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({{printf "%s" .Address.MarshalJSON}}){{else}}null{{end}},
-    addressObject: {{if .Address}}{{printf "%s" .Address.MarshalJSON}}{{else}}null{{end}},
+<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 == '') {
+        if(this.input == null || this.input == "") {
             this.responselength = 0
             return []
         }
@@ -15,22 +14,22 @@
             this.responselength = 0
             return []
         }
-        result = await fetch('https://api.geocode.earth/v1/autocomplete/\?api_key=ge-4949288cd450ad31&text=' + this.input)
+        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']
+        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"
+        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"
@@ -46,3 +45,14 @@
     </ul>
 </div>
 {{ end }}
+
+{{define "geojson"}}{
+  "type": "Feature",
+  "geometry": {
+    "type": "Point",
+    "coordinates": [{{index .geometry.coordinates 0}}, {{index .geometry.coordinates 1}}],
+  },
+  "properties": {
+    "label": "{{.properties.label}}"
+  }
+}{{end}}