codeforokc · Mike-Loffland · Jul 24, 2015
diff --git a/school-finder-frontend/app/DefaultController.js b/school-finder-frontend/app/DefaultController.js
@@ -15,22 +15,40 @@
     $scope.defaultDataType = 'schools';
     $scope.selectedDataTypes = [];
     $scope.selectedDataTypes.push($scope.defaultDataType);
-    console.log('Selected DataTypes');
-    console.log($scope.selectedDataTypes);
     $scope.dataType = $scope.dataTypeList[0];
-    $scope.myapitoken = 'pk.eyJ1IjoibWxvZmZsYW5kIiwiYSI6Ik5leC11NlUifQ.h2UgWXhT5l7zjts894SySw';
+    $scope.addressSelection = [];
+    $scope.results = [];
+    $scope.userCoordinates = {};
+    $scope.usingCurrentPosition = false;
 
-    $scope.mapboxoptions = {
-      defaultPlaceHolderText: 'Search Address, City or Zip',
+    // settings
+    angular.extend($scope, {
+      // enable auto suggest
+      autoSuggest: true,
+      // min length error text
+      minLengthErrorText: 'Search text must be at least %N% character(s).',
+      // specify their own placeholder text
+      placeHolderText: 'Search Address, City or Zip',
+      // allow directive user to determine what property they want to be used in the auto suggest results
+      displayProperty: 'place_name',
+      // exclude results where place_name is empty or absent in the mapbox results
       excludeEntriesWithNoPlaceName: true,
+      // minimum length before suggestive search kicks in
       minLength: 3,
-      includeThisKeyword: 'oklahoma'
-    };
+      // attempt to limit the Mapbox query results based on a keyword
+      includeThisKeyword: 'oklahoma',
+      // string to use if displayProperty is empty
+      emptyPropertyText: '(empty property)',
+      // apitoken
+      apiToken: 'pk.eyJ1IjoibWxvZmZsYW5kIiwiYSI6Ik5leC11NlUifQ.h2UgWXhT5l7zjts894SySw'
+  });
+
+    $scope.minLengthErrorText = $scope.minLengthErrorText.replace('%N%',$scope.minLength);
 
     // watch the addressSelection model
     $scope.$watchCollection('addressSelection',function(){
       // just spit it out to the console for now
-      if(angular.isDefined($scope.addressSelection)){
+      if($scope.addressSelection.hasOwnProperty('id')){
         console.log('Selected address/city/zip info');
         console.log($scope.addressSelection);
       }
@@ -39,7 +57,7 @@
     // watch the results model
     $scope.$watchCollection('results',function(){
       // just spit it out to the console for now
-      if(angular.isDefined($scope.results)){
+      if($scope.results.length > 0){
         console.log('Submitted query results');
         console.log($scope.results);
       }
@@ -58,28 +76,138 @@
       console.log('Selected DataTypes');
       console.log($scope.selectedDataTypes);
     };
+    $scope.isSelected = function(id) {
+      if($scope.selectedDataTypes.indexOf(id) > -1) {
+        return true;
+      }
+      return false;
+    };
 
     $scope.useCurrentPosition = function (event) {
-      $scope.finding = "Finding position";
-      event.preventDefault();
-      var options = { timeout: 8000 };
-
-      geolocationFactory.getCurrentPosition(options)
-        .then(function (position) {
-          // success
-          $scope.finding = undefined;
-          $scope.userCoordinates = {latitude: position.coords.latitude, longitude: position.coords.longitude};
-          console.log('Use my current location info');
-          console.log($scope.userCoordinates);
-        },
-        function (data) {
-          // error
-          $scope.error = "Error: " + data.error.message;
+      if($scope.userCoordinates.hasOwnProperty("latitude")){ // reset userCoordinates
+        resetUserCoordinates();
+        setUsingPos(false);
+        setSelectedLoc($scope.placeHolderText);
+      }else{ // try to get user's position
+        setFinding("Finding position");
+        event.preventDefault();
+        var options = { timeout: 8000 };
+
+        geolocationFactory.getCurrentPosition(options)
+          .then(function (position) {
+            // success
+            setFinding(undefined);
+            $scope.userCoordinates = {latitude: position.coords.latitude, longitude: position.coords.longitude};
+            setSelectedLoc('<Using user location>');
+            setUsingPos(true);
+            console.log('Use my current location info');
+            console.log($scope.userCoordinates);
+          },
+          function (data) {
+            $scope.error = "Error: " + data.error.message;
+          });
+      }
+    };
+
+    $scope.search = function (src) {
+      var myurl;
+
+      if (angular.isUndefined($scope.searchText) || $scope.searchText.length < $scope.minLength) {
+        setMinFlag(true);
+        resetSuggestions();
+        return;
+      }
+
+      myurl = setUrl($scope.searchText);
+
+      $http.get(myurl)
+        .success(function (data) {
+          resetUserCoordinates();
+          $scope.suggestions = data.features.map(function (val) {
+            if ($scope.excludeEntriesWithNoPlaceName) {
+              if (val.place_name) {
+                return val;
+              }
+            } else {
+              return val;
+            }
+          });
+          if(src != undefined){
+            $scope.results = $scope.suggestions.slice(0);
+            setUsingPos(false);
+            setSelectedLoc($scope.searchText);
+            setMinFlag(false);
+            resetSearchText();
+            resetSuggestions();
+          }
+
+        })
+        .error(function (data, status) {
+          var errorObj = {}, msg;
+          // empty the suggestion array
+          while ($scope.suggestions.length > 0) {
+            $scope.suggestions.pop();
+          }
+          msg = "Error getting Mapbox data:  [" + status + " | api token used: " + $scope.apiToken + "]";
+          errorObj[$scope.displayProperty] = msg;
+          $scope.suggestions.push(errorObj);
+          console.log(msg);
         });
     };
 
+    $scope.useSelectedLocation = function  (index) {
+      $scope.addressSelection = $scope.suggestions[index];
+      resetUserCoordinates();
+      setSelectedLoc($scope.addressSelection.place_name);
+      setMinFlag(false);
+      setUsingPos(false);
+      resetSearchText();
+      resetSuggestions();
+    };
+
+    function setUrl(searchText){
+      var localSearchText;
+      localSearchText = encodeURI(searchText);
+      // attempting to increase the relevance of Mapbox query results based on a keyword
+      // - i.e: includeThisKeyword = 'texas'
+      //    > should produce results more specific to Texas
+      if ($scope.includeThisKeyword) {
+        if (localSearchText.toLowerCase().indexOf($scope.includeThisKeyword.toLowerCase()) < 0) {
+          localSearchText += '%20' + $scope.includeThisKeyword;
+        }
+      }
+      return 'https://api.tiles.mapbox.com/v4/geocode/mapbox.places/' + localSearchText + '.json?access_token=' + $scope.apiToken;
+    }
+
+    function setSelectedLoc(text){
+      $scope.selectedLoc = text;
+    }
+
+    function setMinFlag(flag){
+      $scope.flagminerror = flag;
+    }
+
+    function setUsingPos(flag){
+      $scope.usingCurrentPosition = flag;
+    }
+
+    function resetSuggestions(){
+      $scope.suggestions = []
+    }
+    function setFinding(val){
+      $scope.finding = val;
+    }
+
+    function resetSearchText(){
+      $scope.searchText = '';
+    }
+
+    function resetUserCoordinates(){
+      $scope.userCoordinates = {};
+    }
   };
 
   DefaultCtrl.$inject = ['$scope', '$http', 'staticDataFactory', 'geolocationFactory'];
   sfApp.controller('DefaultController', DefaultCtrl);
+
 }());
diff --git a/school-finder-frontend/app/app.js b/school-finder-frontend/app/app.js
@@ -7,7 +7,7 @@
 */
 
 (function () {
-  var sfApp = angular.module('sfApp', ['leaflet-directive', 'ui.router','mapbox-forward-geo']);
+  var sfApp = angular.module('sfApp', ['leaflet-directive', 'ui.router']);
 
   sfApp.config(function ($stateProvider, $urlRouterProvider) {
 

diff --git a/school-finder-frontend/app/components/nav/nav.html b/school-finder-frontend/app/components/nav/nav.html
@@ -16,6 +16,8 @@
             <ul class="nav navbar-nav">
                 <li ui-sref-active-eq="active"><a ui-sref="root">Home</a></li>
                 <li ui-sref-active="active"><a ui-sref="root.map">Map</a></li>
+		            <li ui-sref-active="active"><a ui-sref="root.about">About</a></li>
+		            <li ui-sref-active="active"><a ui-sref="root.terms">Terms</a></li>
             </ul>
         </div><!-- /.navbar-collapse -->
     </div><!-- /.container-fluid -->

diff --git a/school-finder-frontend/app/css/app.css b/school-finder-frontend/app/css/app.css
@@ -50,6 +50,12 @@ div.map-wrapper{
     color: #555;
 }
 
+@media screen and (min-width: 630px){
+    form.mapbbox-fgd {
+        width:70% !important;
+    }
+}
+
 @media screen and (max-width: 767px){
     .legend {
         display: none;
@@ -136,6 +142,7 @@ div.search-wrap {
 
 .geoLocate {
     padding-top:8px;
+    display:inline-block;
 }
 
 
@@ -145,16 +152,16 @@ div.search-wrap {
 .sflabel {
     margin: 2px;
 }
- /*mapbox forward geo directive*/
+
 form.mapbbox-fgd{
     margin:0 auto;
-    margin-top:16px;
-    width:400px;
+    display: inline-block;
+    padding-top: 12px;
+    width:100%;
     position:relative;
 }
 form.mapbbox-fgd input[type="text"] {
-    float: left;
-    width:320px;
+    /*width:362px;*/
 
 }
 
@@ -168,6 +175,9 @@ form.mapbbox-fgd ul li {
     margin: 2px 0 0;
 }
 
+ul.mapbbox-fgdfilter {
+    width: 220px !important;
+}
 
 form.mapbbox-fgd ul li:last-of-type {
     padding-bottom:6px;
@@ -183,9 +193,25 @@ form.mapbbox-fgd ul {
     border-radius: 4px;
     background-color: white;
 }
+.fyesdselect, .fyesuser{
+    background: #ffffff url('https://doc.owncloud.org/server/8.0/developer_manual/_images/checkmark.png') no-repeat 3px;
+}
+
+.fyesdselect, .fyesdselect:hover {
+    background-color: #c2ddc5 !important;
+}
+
+.fyesuser, .fyesuser:hover {
+    background-color: #31b0d5 !important;
+    color: white;
+}
+
+.fno{
+
+}
 
 form.mapbbox-fgd ul li {
-    padding-left: 12px;
+    padding-left: 26px;
     padding-top:6px;
     padding-bottom:6px;
 }
@@ -194,4 +220,10 @@ form.mapbbox-fgd ul li:hover {
     cursor: pointer;
     cursor: hand;
     background-color:#e6e6e6;
+}
+
+
+.input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
 }
diff --git a/school-finder-frontend/app/default.html b/school-finder-frontend/app/default.html
@@ -1,30 +1,51 @@
 <div id="landing">
 
-		<h3>Search for . . .</h3>
-
-		<div class="search-wrap well">
-			<div class="btn-group sf-data-types" ng-repeat="dtype in dataTypeList">
-				<label class="btn btn-default sflabel ng-class:{lblactive:selectedDataTypes.indexOf(dtype.id) > -1}">
-					<input type='checkbox' ng-click='onDataSelect(dtype.id)' autocomplete='off'>{{dtype.display}}
-				</label>
+	<h3>OKC Metro Search</h3>
+
+	<div class="search-wrap">
+		<form class="mapbbox-fgd" name="mapboxFGD" ng-submit="search('nonauto')">
+			<div class="input-group">
+				<input class="form-control" name="searchText" type="text" ng-focus="flagminerror=false"
+				       placeholder="{{selectedLoc || placeHolderText}}" id="mbac-searchInput" ng-minlength="minLength"
+				       ng-model="searchText" ng-keyup="!autoSuggest || search()" autocomplete="off"/>
+		<span class="input-group-btn">
+      <button class="btn btn-default" type="submit" id="mbfgd-searchbtn">
+	      <span class="glyphicon glyphicon-search"></span>
+      </button>
+      <button type="button" class="btn dropdown-toggle" ng-class="usingCurrentPosition ? 'btn-info' : 'btn-default'" data-toggle="dropdown" auto-close="outsideClick">
+	      <span class="glyphicon glyphicon-cog"></span>
+      </button>
+      <ul class="dropdown-menu dropdown-menu-right mapbbox-fgdfilter" role="menu" ng-click="$event.stopPropagation()">
+	      <li ng-repeat="dtype in dataTypeList" ng-click="onDataSelect(dtype.id)"
+	          ng-class="isSelected(dtype.id) ? 'fyesdselect' : 'fno'">
+		      {{dtype.display}}
+	      </li>
+	      <li ng-class="usingCurrentPosition ? 'fyesuser' : 'fno'" ng-click="useCurrentPosition($event)" class="cdivider">
+		      Use My Current Location
+	      </li>
+      </ul>
+    </span>
 			</div>
-
-			<mapbox-forward-geocoding selected-location="addressSelection" query-results="results" options="{autoSuggest: true}" api-token="myapitoken"></mapbox-forward-geocoding>
-
-			<div class="geoLocate">&middot;<a id="link-2" href="" ng-click="useCurrentPosition($event)">Use My Current
-				Location</a></div>
-
-
-			<div ng-show="error || finding"
-			     ng-class="{'alert': finding || error, 'alert-info': finding, 'alert-danger': error}" role="alert">
-				<span ng-show="error" class="sr-only">Error:</span>
-				{{error}}{{finding}}
+			<ul id="mbfgd-suggestions" ng-show="suggestions.length > 0">
+				<li ng-repeat="suggestion in suggestions" ng-if="autoSuggest" ng-click="useSelectedLocation($index)">
+					{{suggestion[displayProperty] ? suggestion[displayProperty] : emptyPropertyText}}
+				</li>
+			</ul>
+			<div>
+				&nbsp;<span ng-show="flagminerror">{{minLengthErrorText}}</span>
 			</div>
-		</div>
+		</form>
+	</div>
 
+	<div ng-show="error || finding"
+	     ng-class="{'alert': finding || error, 'alert-info': finding, 'alert-danger': error}" role="alert">
+		<span ng-show="error" class="sr-only">Error:</span>
+		{{error}}{{finding}}
+	</div>
 
-		<div class="well" style="margin:0 auto;margin-top:15px;width:60%;background-color: rgba(208, 208, 107, 0.15);">
-			Just spitting captured data to console.log for now
-		</div>
+	<div class="well" style="margin:0 auto;margin-top:15px;width:39%;background-color: rgba(208, 208, 107, 0.15);">
+		Just spitting captured data to console.log for now
+	</div>
 
 </div>
+
diff --git a/school-finder-frontend/app/fonts/glyphicons-halflings-regular.eot b/school-finder-frontend/app/fonts/glyphicons-halflings-regular.eot