Skip to content

Commit

Permalink
Added place search with typeheader
Browse files Browse the repository at this point in the history
  • Loading branch information
@tanykim
tanykim committed Feb 12, 2016
1 parent 1285eed commit f5736c1
Show file tree
Hide file tree
Showing 4 changed files with 100 additions and 47 deletions.
96 changes: 57 additions & 39 deletions app/scripts/controllers/setup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,8 @@ angular.module('365daysApp').controller('SetupCtrl', [
$scope.candidates = {}; //home, work, and other places
$scope.selected = {}; //true or false, selected candidates' index, used in checkbox ng-model
var selectUpto = 3; //default number of selection
$scope.namedPlaces = []; //name places to use auto completion
$scope.typedPlace = undefined;

//place name edit
$scope.isEditCollapsed = true;
Expand Down Expand Up @@ -126,25 +128,53 @@ angular.module('365daysApp').controller('SetupCtrl', [
[_.max(_.pluck($scope.map.markers, 'lat')), _.max(_.pluck($scope.map.markers, 'lng'))],
[_.min(_.pluck($scope.map.markers, 'lat')), _.min(_.pluck($scope.map.markers, 'lng'))]
]);
$scope.map.center = { lat: markers[0].lat, lng: markers[0].lng };
}

function locateOnMap(type, i) {

//update the previously highlighted marker colors
var prevMarker = $scope.map.markers[$scope.highlighted];
if (!_.isUndefined(prevMarker)) {
if ($scope.selected[type][$scope.highlighted]) {
prevMarker.icon.markerColor = markerSelectedColor;
} else {
prevMarker.icon.markerColor = markerNormalColor;
}
}

//update highlight
$scope.highlighted = i;
$scope.map.markers[i].icon.markerColor = markerHighlightedColor;
//centering map
$scope.map.center = {
lat: $scope.map.markers[i].lat,
lng: $scope.map.markers[i].lng,
zoom: 12
};
}

/***
**** places at the later steps
****/

function getCandidates(type) {
function getCandidates(type, isReverted) {

$scope.candidates[type] = analyzer.getPlaces(type);
$scope.namedPlaces = _.filter($scope.candidates[type], function (p) {
return p.name !== 'unnamed';
});

//by default choose up to 3 places
var count = $scope.candidates[type].length;
$scope.selected[type] = _.map(_.range(count), function (i) {
return i < selectUpto ? true : false;
});

//show candidates on map
getMarkers($scope.candidates[type]);
if (isReverted) { //remove all markers if it's reverting
$scope.map.markers = [];
} else { //show candidates on map
getMarkers($scope.candidates[type]);
}
}

/***
Expand Down Expand Up @@ -206,28 +236,13 @@ angular.module('365daysApp').controller('SetupCtrl', [
}
};

//when "map" is clicked
$scope.locateOnMap = function (type, i) {

//update the previously highlighted marker colors
var prevMarker = $scope.map.markers[$scope.highlighted];
if (!_.isUndefined(prevMarker)) {
if ($scope.selected[type][$scope.highlighted]) {
prevMarker.icon.markerColor = markerSelectedColor;
} else {
prevMarker.icon.markerColor = markerNormalColor;
}
}

//update highlight
$scope.highlighted = i;
$scope.map.markers[i].icon.markerColor = markerHighlightedColor;
//centering map
$scope.map.center = {
lat: $scope.map.markers[i].lat,
lng: $scope.map.markers[i].lng,
zoom: 12
};
//type place to search
$scope.addTypedPlace = function (item, type) {
var typedPlaceId = _.findIndex($scope.candidates[type], { id: item.id });
$scope.candidates[type].splice(typedPlaceId, 1); //remove typed place first from the candidate list
$scope.candidates[type].unshift(item); //add the typed place on top
$scope.selected[type].unshift(true); //select it by default
locateOnMap(type, 0); //highlight on map
};

//check/uncheck candidate
Expand All @@ -239,40 +254,45 @@ angular.module('365daysApp').controller('SetupCtrl', [
}
};

//when 'map' is clicked
$scope.locateOnMap = locateOnMap;

//delete candidate
$scope.deleteCandidate = function (type, index) {
$scope.candidates[type].splice(index, 1);
$scope.map.markers.splice(index, 1);

//add a new marker
//add a new marker to the newly added place
var markerCount = $scope.map.markers.length;
addMarker($scope.candidates[type][markerCount].location, markerCount);
$scope.locateOnMap(index);
locateOnMap(type, index);
};

//update location name
$scope.updateLocationName = function (i, type) {
$scope.candidates[type][i].name = $scope.newLocationNames[i];
$scope.newLocationNames[i] = '';
$scope.updateLocationName = function (type, index) {
$scope.candidates[type][index].name = $scope.newLocationNames[index];
$scope.newLocationNames[index] = '';
};
$scope.clearLocationName = function (i) {
$scope.newLocationNames[i] = '';
$scope.clearLocationName = function (index) {
$scope.newLocationNames[index] = '';
};

//merge locate
$scope.mergeAt = function (index) {
$scope.mergeAt = function (index) { //index in the list
$scope.mergingAt = index;
getMarkers($scope.duplicates[index]);
};
$scope.mergeDuplicates = function (index) {
analyzer.mergeDuplicates(index, _.keys($scope.merged[index]));
if ($scope.isReadyToMerge && index < $scope.duplicates.length - 1) {
$scope.mergeAt(index + 1);
}
};
$scope.isReadyToMerge = function (index) {
return _.size(_.compact($scope.merged[index])) > 1 ? true : false;
};
$scope.editMergedPlaces = function (index) {
var temp = analyzer.resetToOriginalDuplicate(index);
console.log(temp);
analyzer.resetToOriginalDuplicate(index);
};

//edit previous steps
Expand All @@ -296,9 +316,7 @@ angular.module('365daysApp').controller('SetupCtrl', [

//revert to all places and candidates to original
analyzer.resetAllPlaces();
var type = $scope.steps[index].label;
$scope.candidates[type] = analyzer.getPlaces(type);

getCandidates($scope.steps[index].label, index === 0 ? true : false);
$scope.done = false;
};

Expand Down
1 change: 0 additions & 1 deletion app/scripts/services/analyzer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -192,7 +192,6 @@ angular.module('365daysApp').factory('analyzer', [
//when edit happens
this.resetToOriginalDuplicate = function (index) {
duplicates[index] = angular.copy(originalDuplicates[index]);
return originalDuplicates[index];
};
this.resetSelectedPlace = function (type) {
selectedPlaces[type] = [];
Expand Down
24 changes: 17 additions & 7 deletions app/views/setup.html
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,10 @@
<script type="text/ng-template" id="place.html">
<span ng-bind-html="match.label.name | uibTypeaheadHighlight:query"></span> /
<span ng-bind-html="match.label.humanTime | uibTypeaheadHighlight:query"></span> /
<span ng-bind-html="match.label.count | uibTypeaheadHighlight:query"></span>
<span> days </span>
</script>

<div class="wrapper-left">

<!-- each step -->
Expand Down Expand Up @@ -27,12 +34,15 @@ <h1 class="title"> Step{{ $index + 1 }}. {{ step.title }} </h1>

<!-- step >1. select places -->
<div ng-if="$index >= 1 && $index < steps.length - 1" class="content">
<!-- <div class="input-group">
<span class="input-group-addon" id="basic-addon1">Search</span>
<input type="text" class="form-control" placeholder="Type a place name">
</div> -->
<!-- <div class="container-fluid typeahead-demo"> -->
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Search</span>
<!-- <input auto-complete ui-items="namedPlaces" type="text" class="form-control" placeholder="Type a place name"> -->
<input type="text" ng-model="typedPlace" uib-typeahead="place.name as place for place in namedPlaces | filter:{name:$viewValue} | limitTo:10" class="form-control" placeholder="Type a place name" typeahead-template-url="place.html" typeahead-on-select="addTypedPlace($item, step.label); typedPlace = '';" ng-blur="true">
</div>
<!-- </div> -->
<ol>
<li ng-repeat="p in candidates[step.label] | limitTo: 10" class="{{ highlighted == $index ? 'highlighted' : '' }}">
<li ng-repeat="p in candidates[step.label] | limitTo: 10 track by $index " class="{{ highlighted == $index ? 'highlighted' : '' }}">
<input type="checkbox" ng-model="selected[step.label][$index]" ng-click="updateMarkerColor(step.label, $index)">
{{ p.name }} / {{ p.humanTime }} / {{ p.count }} days
<span><a ng-click="locateOnMap(step.label, $index)">Map</a></span>
Expand All @@ -45,7 +55,7 @@ <h1 class="title"> Step{{ $index + 1 }}. {{ step.title }} </h1>
<span><a ng-click="deleteCandidate(step.label, $index)">Delete</a></span>
<div ng-hide="isEditCollapsed">
<input type="text" class="form-control" ng-model="newLocationNames[$index]" placeholder=" Enter a new name" ng-click="clearLocationName($index)">
<button type="button" class="btn btn-primary" ng-click="updateLocationName($index, step.label); isEditCollapsed = true">Edit</button>
<button type="button" class="btn btn-primary" ng-click="updateLocationName(step.label, $index); isEditCollapsed = true">Edit</button>
</div>
</li>
</ol>
Expand All @@ -70,7 +80,7 @@ <h1 class="title"> Step{{ $index + 1 }}. {{ step.title }} </h1>
{{ p.count }} days
</span>
<span ng-class="isReadyToMerge($index) ? '' : 'disabled'">
<a ng-click="isReadyToMerge($index) && mergeDuplicates($index)">merge</a>
<a ng-click="mergeDuplicates($index)">merge</a>
</span>
</div>
</li>
Expand Down
26 changes: 26 additions & 0 deletions less/main.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,32 @@
background-color: #efefef;
}

/* typehead */
.typeahead-demo .custom-popup-wrapper {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
background-color: #f9f9f9;
}

.typeahead-demo .custom-popup-wrapper > .message {
padding: 10px 20px;
border-bottom: 1px solid #ddd;
color: #868686;
}

.typeahead-demo .custom-popup-wrapper > .dropdown-menu {
position: static;
float: none;
display: block;
min-width: 160px;
background-color: transparent;
border: none;
border-radius: 0;
box-shadow: none;
}
/* vis */
.vis-options {
a {
Expand Down

0 comments on commit f5736c1

Please sign in to comment.