aaronksaunders/index.html

## index.html
<!doctype html>
<html ng-app="sampleKinveyApp">
<head>
    <meta charset="utf-8">
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
    <style>
        body {
            padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
        }
    </style>
    <link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet">

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
    <script src="https://da189i1jfloii.cloudfront.net/js/kinvey-js-0.9.14.min.js"></script>

    <script type="text/javascript">
        var sampleKinveyApp = angular.module("sampleKinveyApp", []);

        sampleKinveyApp.config(function ($routeProvider) {

        });

        sampleKinveyApp.factory('KinveyService', function () {
            // Service logic

            var Farmer = null;
            var currentFarmer = null;
            var currentLocation = null;


            return {
                initialize: function () {
                    debugger;
                    Kinvey.init({
                        appKey: 'app-key',
                        appSecret: 'app-secret'
                    });

                },
                queryByDistance: function ($scope, distance) {
                    navigator.geolocation.getCurrentPosition(function (loc) {
                        var coord = $scope.currentLocation = [loc.coords.longitude, loc.coords.latitude];
                        // Query for buildings close by.
                        var query = new Kinvey.Query();
                        query.on('_geoloc').nearSphere(coord, distance || 10);
                        var collection = new Kinvey.Collection('locations', { query: query });
                        collection.fetch({
                            success: function (list) {
                                // list contains all restaurants within a 10 mile radius.
                                $scope.$apply(function () {
                                    $scope.collection = collection.toJSON();
                                });
                            },
                            error: function (e) {
                                // Failed to fetch events.
                                // e holds information about the nature of the error.
                            }
                        });
                    });
                },
                query: function ($scope) {
                    var collection = new Kinvey.Collection('locations');
                    collection.fetch({
                        success: function () {
                            debugger;
                            $scope.$apply(function () {
                                $scope.collection = collection.toJSON();
                            });
                        },
                        error: function () {

                        }
                    });

                },
                queryByNameStartsWith: function ($scope) {
                    debugger;
                    var query = new Kinvey.Query();
                    var re = new RegExp("^" + $scope.yourName);
                    query.on('Name').regex(re);

                    var collection = new Kinvey.Collection('locations', { query: query });

                    collection.fetch({
                        success: function () {
                            debugger;
                            $scope.$apply(function () {
                                $scope.collection = collection.toJSON();
                            });
                        },
                        error: function () {

                        }
                    });

                }
            }
        });


        sampleKinveyApp.controller('AppController', function ($rootScope, $scope, KinveyService) {
            // set up the parse service and load default data
            KinveyService.initialize();

            // holds the query results
            $scope.locations = {};
            $scope.current = {};

            // set the initial distance, this will also trigger the
            // query to render the initial view
            $scope.distance = 10;


            // watch for a change in the scope distance, when it changes query
            // the data to get the information based on distance
            $scope.$watch('distance', function (newDistance) {
                KinveyService.queryByDistance($scope, newDistance);
            });


            //
            // when clicked set a variable on the rootscope that we are watching
            // in the MapController to update the current location
            $scope.showClickedLocation = function (_object) {
                console.log(_object);
                $scope.current = _object;
                //$rootScope.theOne = _object.parseObject.get("location").toJSON();
            };

            $scope.queryByNameStartsWith = function () {
                KinveyService.queryByNameStartsWith($scope);
            };

            $scope.resetQuery = function () {
                KinveyService.queryByDistance($scope, 10);
                $scope.yourName = "";
            };

            $scope.theClass = function (_object) {
                //return _object.id === $scope.current.id ? "success" : "";
            };

            /**
             * calc distance from current location to _item location
             *
             * @param _item
             * @param _startPoint
             */
            $scope.distanceFromHere = function (_item, _startPoint) {
                var start = null;

                var radiansTo = function (start, end) {
                    var d2r = Math.PI / 180.0;
                    var lat1rad = start.latitude * d2r;
                    var long1rad = start.longitude * d2r;
                    var lat2rad = end.latitude * d2r;
                    var long2rad = end.longitude * d2r;
                    var deltaLat = lat1rad - lat2rad;
                    var deltaLong = long1rad - long2rad;
                    var sinDeltaLatDiv2 = Math.sin(deltaLat / 2);
                    var sinDeltaLongDiv2 = Math.sin(deltaLong / 2);
                    // Square of half the straight line chord distance between both points.
                    var a = ((sinDeltaLatDiv2 * sinDeltaLatDiv2) +
                            (Math.cos(lat1rad) * Math.cos(lat2rad) *
                                    sinDeltaLongDiv2 * sinDeltaLongDiv2));
                    a = Math.min(1.0, a);
                    return 2 * Math.asin(Math.sqrt(a));
                };


                if ($scope.currentLocation) {
                    start = {
                        longitude: $scope.currentLocation[0],
                        latitude: $scope.currentLocation[1]
                    };
                }
                start = _startPoint || start;

                var end = {
                    longitude: _item._geoloc[0],
                    latitude: _item._geoloc[1]
                };

                var num = radiansTo(start, end) * 3958.8;
                return Math.round(num * 100) / 100

            }
        });

    </script>
</head>
<body>
<div ng-controller="AppController" class="container">

    <h1>Kinvey + AngularJS</h1>
    <hr>


    <label class="control-label" for="searchText">Enter Search Text:</label>

    <div class="controls input-append">
        <input type="text" id="searchText" ng-model="yourName" placeholder="Enter a name here">
        <button class=" btn btn-primary" ng-click="queryByNameStartsWith()">Search</button>
        <button class="btn btn-danger" ng-click="resetQuery()">Reset</button>
    </div>

    <hr>
    <table class="table table-hover span4">
        <tr ng-repeat="loc in collection" ng-class="theClass(thing)" ng-click="showClickedLocation(thing)">
            <td>{{loc.Name}}<br>{{loc.Address}}</td>
            <td>{{distanceFromHere(loc)}}</td>
        </tr>
    </table>
</div>

</body>
</html>
	<!doctype html>
	<html ng-app="sampleKinveyApp">
	<head>
	<meta charset="utf-8">
	<title>Bootstrap, from Twitter</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="">
	<meta name="author" content="">

	<!-- Le styles -->
	<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
	<style>
	body {
	padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
	}
	</style>
	<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet">

	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
	<script src="https://da189i1jfloii.cloudfront.net/js/kinvey-js-0.9.14.min.js"></script>

	<script type="text/javascript">
	var sampleKinveyApp = angular.module("sampleKinveyApp", []);

	sampleKinveyApp.config(function ($routeProvider) {

	});

	sampleKinveyApp.factory('KinveyService', function () {
	// Service logic

	var Farmer = null;
	var currentFarmer = null;
	var currentLocation = null;


	return {
	initialize: function () {
	debugger;
	Kinvey.init({
	appKey: 'app-key',
	appSecret: 'app-secret'
	});

	},
	queryByDistance: function ($scope, distance) {
	navigator.geolocation.getCurrentPosition(function (loc) {
	var coord = $scope.currentLocation = [loc.coords.longitude, loc.coords.latitude];
	// Query for buildings close by.
	var query = new Kinvey.Query();
	query.on('_geoloc').nearSphere(coord, distance \|\| 10);
	var collection = new Kinvey.Collection('locations', { query: query });
	collection.fetch({
	success: function (list) {
	// list contains all restaurants within a 10 mile radius.
	$scope.$apply(function () {
	$scope.collection = collection.toJSON();
	});
	},
	error: function (e) {
	// Failed to fetch events.
	// e holds information about the nature of the error.
	}
	});
	});
	},
	query: function ($scope) {
	var collection = new Kinvey.Collection('locations');
	collection.fetch({
	success: function () {
	debugger;
	$scope.$apply(function () {
	$scope.collection = collection.toJSON();
	});
	},
	error: function () {

	}
	});

	},
	queryByNameStartsWith: function ($scope) {
	debugger;
	var query = new Kinvey.Query();
	var re = new RegExp("^" + $scope.yourName);
	query.on('Name').regex(re);

	var collection = new Kinvey.Collection('locations', { query: query });

	collection.fetch({
	success: function () {
	debugger;
	$scope.$apply(function () {
	$scope.collection = collection.toJSON();
	});
	},
	error: function () {

	}
	});

	}
	}
	});


	sampleKinveyApp.controller('AppController', function ($rootScope, $scope, KinveyService) {
	// set up the parse service and load default data
	KinveyService.initialize();

	// holds the query results
	$scope.locations = {};
	$scope.current = {};

	// set the initial distance, this will also trigger the
	// query to render the initial view
	$scope.distance = 10;


	// watch for a change in the scope distance, when it changes query
	// the data to get the information based on distance
	$scope.$watch('distance', function (newDistance) {
	KinveyService.queryByDistance($scope, newDistance);
	});


	//
	// when clicked set a variable on the rootscope that we are watching
	// in the MapController to update the current location
	$scope.showClickedLocation = function (_object) {
	console.log(_object);
	$scope.current = _object;
	//$rootScope.theOne = _object.parseObject.get("location").toJSON();
	};

	$scope.queryByNameStartsWith = function () {
	KinveyService.queryByNameStartsWith($scope);
	};

	$scope.resetQuery = function () {
	KinveyService.queryByDistance($scope, 10);
	$scope.yourName = "";
	};

	$scope.theClass = function (_object) {
	//return _object.id === $scope.current.id ? "success" : "";
	};

	/**
	* calc distance from current location to _item location
	*
	* @param _item
	* @param _startPoint
	*/
	$scope.distanceFromHere = function (_item, _startPoint) {
	var start = null;

	var radiansTo = function (start, end) {
	var d2r = Math.PI / 180.0;
	var lat1rad = start.latitude * d2r;
	var long1rad = start.longitude * d2r;
	var lat2rad = end.latitude * d2r;
	var long2rad = end.longitude * d2r;
	var deltaLat = lat1rad - lat2rad;
	var deltaLong = long1rad - long2rad;
	var sinDeltaLatDiv2 = Math.sin(deltaLat / 2);
	var sinDeltaLongDiv2 = Math.sin(deltaLong / 2);
	// Square of half the straight line chord distance between both points.
	var a = ((sinDeltaLatDiv2 * sinDeltaLatDiv2) +
	(Math.cos(lat1rad) * Math.cos(lat2rad) *
	sinDeltaLongDiv2 * sinDeltaLongDiv2));
	a = Math.min(1.0, a);
	return 2 * Math.asin(Math.sqrt(a));
	};


	if ($scope.currentLocation) {
	start = {
	longitude: $scope.currentLocation[0],
	latitude: $scope.currentLocation[1]
	};
	}
	start = _startPoint \|\| start;

	var end = {
	longitude: _item._geoloc[0],
	latitude: _item._geoloc[1]
	};

	var num = radiansTo(start, end) * 3958.8;
	return Math.round(num * 100) / 100

	}
	});

	</script>
	</head>
	<body>
	<div ng-controller="AppController" class="container">

	<h1>Kinvey + AngularJS</h1>
	<hr>


	<label class="control-label" for="searchText">Enter Search Text:</label>

	<div class="controls input-append">
	<input type="text" id="searchText" ng-model="yourName" placeholder="Enter a name here">
	<button class=" btn btn-primary" ng-click="queryByNameStartsWith()">Search</button>
	<button class="btn btn-danger" ng-click="resetQuery()">Reset</button>
	</div>

	<hr>
	<table class="table table-hover span4">
	<tr ng-repeat="loc in collection" ng-class="theClass(thing)" ng-click="showClickedLocation(thing)">
	<td>{{loc.Name}}<br>{{loc.Address}}</td>
	<td>{{distanceFromHere(loc)}}</td>
	</tr>
	</table>
	</div>

	</body>
	</html>