diff --git a/index.html b/index.html index e412529..f200987 100644 --- a/index.html +++ b/index.html @@ -1,6 +1,5 @@ - + - @@ -9,27 +8,25 @@ -
-
+
+ + + + + + - - - - - - - diff --git a/src/js/app.js b/src/js/app.js index 64d1f77..8b07aab 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -5,16 +5,18 @@ var app = angular.module('batmanDelivers', ['ngSanitize', 'ui.select']); //Controller /////////// -app.controller('myCtrl', function($scope, $http, $timeout) { +app.controller('myCtrl', function($scope, $http, $timeout, $rootScope) { var initializing = true; + + var map = null; var waypoints = []; var markers = []; var route = null; var map = null; var marker = null; - var markers = []; + var myLatLng = { lat: 0, lng: 0 }; var directionsService = new google.maps.DirectionsService; var directionsDisplay = new google.maps.DirectionsRenderer({ @@ -22,6 +24,8 @@ app.controller('myCtrl', function($scope, $http, $timeout) { strokeColor: "#d8d8d8" } }); + + var end; var marked; var valid = true; @@ -29,73 +33,104 @@ app.controller('myCtrl', function($scope, $http, $timeout) { $scope.stops = [{ "Description": "Start typing to search...", - "changed": false + "changed": false, + valid: false, + id: 1 }, { "Description": "Start typing to search...", - "changed": false - + "changed": false, + valid: false, + id: 2 }] - $scope.$watchCollection('stops', function () { - - if (initializing) { - $timeout(function() { initializing = false; }); - } else { - if ($scope.stops[$scope.stops.length -1].Description != "Start typing to search...") { - $scope.stops.forEach(function(stop, i){ - if (stop.Description != "Start typing to search...") { - valid = true; - } else { - valid = false; - } - }) - } else { - valid = false; - } - $scope.stops.forEach(function(stop, i){ - if (stop.Description != "Start typing to search..." && stop.changed == false) { - if (i != 0 && i != $scope.stops.length-1) { - drawMarker(stop.Latitude, stop.Longitude); - waypoints.push({ - location: stop.Description, - stopover: true - }); - } else { - drawMarker(stop.Latitude, stop.Longitude); + $scope.$on('StopChanged', function () { + var validstops = $scope.stops.filter(function (x) { return x.valid; }); + + if (validstops.length == 1) { + map.panTo(validstops[0].$marker.getPosition()); + } else if (validstops.length > 1) { + var bounds = new google.maps.LatLngBounds(); + + for (var i = 0; i < validstops.length; i++) { + bounds.extend(validstops[i].$marker.getPosition()); } - } - }) - if (valid == true) { - calculateAndDisplayRoute($scope.stops[0].Description, $scope.stops[$scope.stops.length - 1].Description); + map.fitBounds(bounds, 100); } - } - }, true); - function calculateAndDisplayRoute(start, end) { + if (validstops.length == $scope.stops.length) { + var waypoints = []; + if ($scope.stops.length > 2) { + waypoints = $scope.stops.slice(1, $scope.stops.length - 2); + } + calculateAndDisplayRoute($scope.stops[0], $scope.stops[$scope.stops.length - 1], waypoints); + } + }); + + + //$scope.$watch('stops', function () { + // if (initializing) { + // $timeout(function() { initializing = false; }); + // } else { + // if ($scope.stops[$scope.stops.length -1].Description != "Start typing to search...") { + // $scope.stops.forEach(function(stop, i){ + // if (stop.Description != "Start typing to search...") { + // valid = true; + // } else { + // valid = false; + // } + // }) + // } else { + // valid = false; + // } + + // $scope.stops.forEach(function(stop, i){ + // if (stop.Description != "Start typing to search..." && stop.changed == false) { + // if (i != 0 && i != $scope.stops.length-1) { + // drawMarker(stop.Latitude, stop.Longitude); + // waypoints.push({ + // location: stop.Description, + // stopover: true + // }); + // } else { + // drawMarker(stop.Latitude, stop.Longitude); + // } + // } + // }) + + // if (valid == true) { + // calculateAndDisplayRoute($scope.stops[0].Description, $scope.stops[$scope.stops.length - 1].Description); + // } + // } + + //}, true); + + function calculateAndDisplayRoute(start, end, waypoints) { directionsService.route({ - origin: start, - destination: end, - waypoints: waypoints, + origin: start.$marker.getPosition(), + destination: end.$marker.getPosition(), + waypoints: waypoints.map(function (x) { return x.$marker.getPosition(); }), travelMode: 'DRIVING', provideRouteAlternatives: false }, function(response, status) { if (status === 'OK') { directionsDisplay.setDirections(response); - directionsDisplay.setOptions( { suppressMarkers: true } ); - pinA = new google.maps.Marker({ - position: start, - map: map, - icon: '.././includes/images/c1.png' - }), - pinB = new google.maps.Marker({ - position: end, - map: map, - icon: '.././includes/images/c1.png' - }); + directionsDisplay.setOptions({ suppressMarkers: true }); + + var arrayOfPoints = response.routes[0].overview_path; + var marker = new google.maps.Marker({ + map: map, + position: arrayOfPoints[0] + }); + + var counter = 1; + setInterval(function () { + marker.setPosition(arrayOfPoints[counter]); + counter++; + }, 500); } else { console.log("Need more Stops", start, end, waypoints) } @@ -113,6 +148,7 @@ app.controller('myCtrl', function($scope, $http, $timeout) { } function drawMarker(lat, lng) { + return; var marker = new google.maps.Marker({ position: {lat: lat, lng: lng}, icon: '.././includes/images/c1.png', @@ -281,6 +317,7 @@ app.controller('myCtrl', function($scope, $http, $timeout) { ] }); directionsDisplay.setMap(map); + $rootScope.map = map; } }); diff --git a/src/js/directives/address-search/directive.js b/src/js/directives/address-search/directive.js index 8568e5a..d647dc3 100644 --- a/src/js/directives/address-search/directive.js +++ b/src/js/directives/address-search/directive.js @@ -1,66 +1,76 @@ -(function(angular) { +(function (angular) { var app = angular.module('batmanDelivers'); app.directive("addressSearch", addressSearch); - addressSearch.$inject = ['$parse', '$rootScope', '$http', '$timeout', '$sce'] + addressSearch.$inject = ['$parse', '$rootScope', '$http', '$timeout', '$sce', '$rootScope'] - function addressSearch($parse, $rootScope, $http, $timeout, $sce) { + function addressSearch($parse, $rootScope, $http, $timeout, $sce, $rootScope) { return { templateUrl: '/src/js/directives/address-search/partial.html', - replace: true, //study - transclude: true, //study - link: function(scope, elm, attrs) { - + scope: { + address: '=model' + }, + link: function (scope, elm, attrs) { scope.placeholder = attrs["placeholder"]; - scope.address = $parse(attrs['model'])(scope); + scope.selected = { + address: null + }; + scope.order = $parse(attrs['order'])(scope); scope.lbl = $parse(attrs['lbl'])(scope); + var autocompleteService = new google.maps.places.AutocompleteService(); + var placesService = new google.maps.places.PlacesService($rootScope.map); - - scope.request = function(value){ - if (value && value.length > 3) { - $http({ - dataType: 'jsonp', - method: "GET", - url: "https://maps.googleapis.com/maps/api/place/autocomplete/json?input=" + value + "&key=AIzaSyAPYatPrCcmNcVdAO_MF0YhO3c1mgdLvuQ" - }).then(function mySuccess(response) { - scope.addresses = response.data.predictions; - }, function myError(response) { - scope.error = response.statusText; - }); - } + scope.request = function (value) { + if (value && value.length > 3) { + autocompleteService.getPlacePredictions({ + input: value + }, function (results) { + scope.addresses = results; + scope.$apply(); + }); + } } - scope.selectAddress = function(place) { - $http({ - method: "GET", - url: "https://maps.googleapis.com/maps/api/place/details/json?placeid=" + place.place_id + "&fields=geometry,adr_address,address_component,formatted_address&key=AIzaSyAPYatPrCcmNcVdAO_MF0YhO3c1mgdLvuQ" - }).then(function mySuccess(response) { - scope.result = response.data.result; + scope.$watch('selected.address', function (newvalue) { + if (newvalue && newvalue.place_id) { + placesService.getDetails({ + placeId: newvalue.place_id + }, function (result) { + scope.result = result; + scope.address.AddressLine1 = scope.result.address_components[1].long_name; + scope.address.AddressLine2 = scope.result.address_components[2].long_name; + scope.address.City = scope.result.address_components[3].long_name; + scope.address.PostCode = scope.result.address_components[0].long_name; + scope.address.Latitude = scope.result.geometry.location.lat(); + scope.address.Longitude = scope.result.geometry.location.lng(); + scope.address.Description = newvalue.description; + scope.address.changed = false; + scope.address.valid = true; - scope.stops[scope.order] = { - AddressLine1: scope.result.address_components[1].long_name, - AddressLine2: scope.result.address_components[2].long_name, - City: scope.result.address_components[3].long_name, - PostCode: scope.result.address_components[0].long_name, - Latitude: scope.result.geometry.location.lat, - Longitude: scope.result.geometry.location.lng, - Description: place.description, - changed: false - } - }, function myError(response) { - scope.error = response.statusText; - }); - } + if (!scope.address.$marker) { + scope.address.$marker = new google.maps.Marker({ + map: $rootScope.map, + position: scope.result.geometry.location, + icon: '.././includes/images/c1.png' + }); + } else { + scope.address.$marker.setPosition({ lat: scope.result.geometry.location.lat(), lng: scope.result.geometry.location.lng() }); + } + scope.$apply(); + scope.$emit('StopChanged'); + }); + } + }); - scope.addStop = function(){ - scope.stops.push({ - Description: "Start typing to search..." - }) + scope.addStop = function () { + scope.stops.push({ + Description: "Start typing to search..." + }) } - scope.removeStop = function(index){ - scope.stops.splice(index, 1); + scope.removeStop = function (index) { + scope.stops.splice(index, 1); } } } diff --git a/src/js/directives/address-search/partial.html b/src/js/directives/address-search/partial.html index 37a09f6..c92ef2f 100644 --- a/src/js/directives/address-search/partial.html +++ b/src/js/directives/address-search/partial.html @@ -1,16 +1,15 @@

- - -

{{$select.selected.Description}}

- - - {{address.description}} - - - add - remove - + + +

{{$select.selected.description}}

+ + + {{a.description}} + + + add + remove
-- libgit2 0.21.0