Registration address (#441)

* refactor(search): Add geocoder component

Move address search to own geocoder component

* feat(Registration): Add address search to registration

Use own geocoder component to search for addresses during registration

fix #320

Author: mpfeil

Gruntfile.js

@@ -231,6 +231,7 @@ module.exports = function (grunt) {
           "<%= yeoman.app %>/components/loader.directive.js",
           "<%= yeoman.app %>/components/clipboard.directive.js",
           "<%= yeoman.app %>/components/announcement.directive.js",
+          "<%= yeoman.app %>/components/geocoder.directive.js",
         ],
         tasks: [
           // 'newer:copy:api',

app/components/geocoder.directive.html

@@ -0,0 +1,13 @@
+<div class="ng-cloak input-group xxxl" style="display: table; padding: 0px 12px; z-index: 2000;">
+  <input id="searchField" type="text" style="border-radius: 4px;" class="form-control" ng-model="geocoder.searchString"
+    ng-change="geocoder.searchStringChanged()" ng-model-options="geocoder.modelOptions"
+    placeholder="{{ 'SEARCH' | translate }}"
+    uib-typeahead="address.display_name for address in geocoder.getLocations($viewValue)"
+    typeahead-on-select="geocoder.selectResult($item)" typeahead-loading="geocoder.loadingLocations"
+    typeahead-no-results="geocoder.noResults" typeahead-popup-template-url="/views/search.html"
+    typeahead-template-url="views/search.item.html" typeahead-min-length="3" />
+  <div id="reset_search" ng-show="geocoder.showClearSearch" ng-cloak>
+    <span class="helper"></span>
+    <i class="fa fa-times fa-lg" aria-hidden="true" ng-click="geocoder.clearSearch()"></i>
+  </div>
+</div>

app/components/geocoder.directive.js

@@ -0,0 +1,105 @@
+(function () {
+  'use strict';
+
+  angular
+    .module('openSenseMapApp')
+    .directive('osemGeocoder', osemGeocoder);
+
+  osemGeocoder.$inject = [];
+
+  function osemGeocoder () {
+    var directive = {
+      templateUrl: 'components/geocoder.directive.html',
+      link: link,
+      // eslint-disable-next-line angular/directive-restrict
+      restrict: 'E',
+      transclude: true,
+      controller: GeocoderController,
+      controllerAs: 'geocoder',
+      bindToController: true, // because the scope is isolated
+      scope: {
+        selectBox: '='
+      },
+    };
+
+    return directive;
+
+    ////
+
+    function link (scope, element, attrs) {}
+  }
+
+  GeocoderController.$inject = ['$scope', '$http'];
+
+  function GeocoderController ($scope, $http) {
+    var vm = this;
+
+    vm.$onInit = onInit;
+    vm.$onDestroy = onDestroy;
+
+    vm.searchString = '';
+    vm.showClearSearch = false;
+    vm.modelOptions = {
+      debounce: {
+        default: 300,
+        blur: 250,
+      },
+      getterSetter: true,
+    };
+
+    vm.searchStringChanged = searchStringChanged;
+    vm.getLocations = getLocations;
+    vm.selectResult = selectResult;
+    vm.clearSearch = clearSearch;
+
+    ////
+
+    function onInit () {
+      activate();
+    }
+
+    function onDestroy () {}
+
+    function activate () {}
+
+    function searchStringChanged () {
+      if (vm.searchString !== '') {
+        vm.showClearSearch = true;
+      } else {
+        vm.showClearSearch = false;
+      }
+    }
+
+    function getLocations (searchstring) {
+      var results = [];
+
+      return $http
+        .get('//locationiq.org/v1/search.php', {
+          params: {
+            format: 'json',
+            key: '23e12b10d8c3aad04e8e',
+            addressdetails: 1,
+            limit: 4,
+            q: searchstring,
+          },
+        })
+        .then(function (response) {
+          return results.concat(response.data);
+        })
+        .catch(function () {
+          return results;
+        });
+    }
+
+    function selectResult (item) {
+      $scope.geocoder.selectBox(item);
+    }
+
+    function clearSearch () {
+      vm.searchString = '';
+      vm.searchStringChanged();
+    }
+
+    ////
+  }
+})();

app/index.html

@@ -386,6 +386,7 @@
   <script src="scripts/models/box.js"></script>
   <script src="scripts/models/sensor.js"></script>
   <script src="components/announcement.directive.js"></script>
+  <script src="components/geocoder.directive.js"></script>
   <script src="components/calendar.directive.js"></script>
   <script src="components/leaflet.directive.js"></script>
   <script src="components/leaflet.service.js"></script>

app/scripts/controllers/header.js

@@ -207,7 +207,6 @@
     });
 
     $rootScope.$on('osemAnnouncementClosed', function () {
-      console.log('header closed');
       vm.showAnnouncment = false;
     });
   }