Fix #1416 -- Add canonical geodata field (#1458)

* Fix #1416 -- Add canonical geodata field for events and subevents

* Add optional geocoding through OpenCageData

* Fix markup everywhere

* Add Leaflet map to geo coordinates

* Fix tests, add credits

* Fix spelling

src/pretix/static/pretixcontrol/js/ui/geo.js

@@ -0,0 +1,122 @@
+/*globals $*/
+
+$(function () {
+  var j = 0;
+  $(".geodata-section").each(function () {
+    // Geocoding
+    var $sec = $(this);
+    var $inp = $(this).find("textarea[lang=en], input[lang=en]").first();
+    if ($inp.length === 0) {
+      $inp = $(this).find("textarea, input").first();
+    }
+    var timer, timer2;
+    var touched = $sec.find("input[name$=geo_lat]").val() !== "";
+
+    function load() {
+      window.clearTimeout(timer);
+      var q = $.trim($inp.val().replace(/\n/g, ", "));
+      if ((touched && $sec.find("input[name$=geo_lat]").val() !== "") || $.trim(q) === "") {
+        return;
+      }
+      $sec.find(".col-md-1").html("<span class='fa fa-cog fa-spin'></span>");
+      $.getJSON('/control/geocode/?q=' + escape(q), function (res) {
+        var q2 = $.trim($inp.val().replace(/\n/g, ", "));
+        if (q2 !== q) {
+          return;  // lost race
+        }
+        if (res.results) {
+          $sec.find("input[name$=geo_lat]").val(res.results[0].lat);
+          $sec.find("input[name$=geo_lon]").val(res.results[0].lon);
+          center(13);
+        }
+        $sec.find(".col-md-1").html("");
+      })
+    }
+
+    $sec.find("input[name$=geo_lat], input[name$=geo_lon]").change(function () {
+      touched = $sec.find("input[name$=geo_lat]").val() !== "";
+      center(13);
+    }).keyup(function () {
+      if (timer2) {
+        window.clearTimeout(timer2);
+      }
+      timer2 = window.setTimeout(center, 300);
+    });
+
+    $inp.change(load);
+    $inp.keyup(function () {
+      if (timer) {
+        window.clearTimeout(timer);
+      }
+      timer = window.setTimeout(load, 1000);
+    });
+
+    // Map
+    var $grp = $sec.find(".geodata-group");
+    var tiles = $grp.attr("data-tiles");
+    var attrib = $grp.attr("data-attrib");
+    if (tiles) {
+      var $map = $("<div>");
+      $grp.append($("<div>").addClass("col-md-9 col-md-offset-3").append($map));
+      var map = L.map($map.get(0));
+      L.tileLayer(tiles, {
+        attribution: attrib,
+        maxZoom: 18,
+      }).addTo(map);
+      var $lat = $sec.find("input[name$=geo_lat]");
+      var $lon = $sec.find("input[name$=geo_lon]");
+
+      function getpoint() {
+        if ($lat.val() !== "" && $lon.val() !== "") {
+          return [parseFloat($lat.val().replace(",", ".")), parseFloat($lon.val().replace(",", "."))];
+        } else {
+          return [0.0, 0.0];
+        }
+      }
+
+      var marker = L.marker(getpoint(), {
+        draggable: 'true',
+        icon: L.icon({
+          iconUrl: $grp.attr("data-icon"),
+          shadowUrl: $grp.attr("data-shadow"),
+          iconSize: [25, 41],
+          iconAnchor: [12, 41],
+          popupAnchor: [1, -34],
+          tooltipAnchor: [16, -28],
+          shadowSize: [41, 41]
+        })
+      });
+      marker.addTo(map);
+      marker.on("dragend", function (event) {
+        var position = marker.getLatLng();
+        marker.setLatLng(position, {
+          draggable: 'true'
+        }).bindPopup(position).update();
+        $lat.val(position.lat.toFixed(7));
+        $lon.val(position.lng.toFixed(7));
+        center(null);
+      });
+
+      function center(zoom) {
+        if ($lat.val() !== "" && $lon.val() !== "") {
+          if (zoom) {
+            map.setView(getpoint(), zoom);
+          } else {
+            map.panTo(getpoint());
+          }
+          marker.setLatLng(getpoint(), {
+            draggable: 'true'
+          }).bindPopup(getpoint()).update();
+        } else {
+          map.fitWorld();
+        }
+      }
+
+      center(13);
+    } else {
+      function center(zoom) {
+      }
+    }
+
+  });
+});

src/pretix/static/pretixcontrol/scss/_forms.scss

@@ -224,6 +224,23 @@ div.mail-preview {
 input[type=number].short {
   width: 80px !important;
 }
+.geodata-group {
+  .form-group {
+    margin: 0 0 10px 0;
+  }
+  .attrib {
+    padding: 0;
+    margin: 0;
+    font-size: $font-size-small;
+    a {
+      color: $text-muted;
+    }
+  }
+  .leaflet-container {
+    height: 200px;
+    margin: 0;
+  }
+}
 .metadata-group {
   .form-group {
     margin: 0 0 10px 0;

src/pretix/static/pretixcontrol/scss/main.scss

@@ -12,6 +12,7 @@
 @import "_dashboard.scss";
 @import "../../pretixbase/scss/webfont.scss";
 @import "../../fileupload/jquery.fileupload.scss";
+@import "../../leaflet/leaflet.scss";
 @import "../../select2/select2.scss";
 @import "../../select2/select2_bootstrap.scss";
 @import "../../colorpicker/bootstrap-colorpicker.scss";