Skip to content

Instantly share code, notes, and snippets.

@aaronksaunders
Created May 14, 2013 02:50
Show Gist options
  • Save aaronksaunders/5573292 to your computer and use it in GitHub Desktop.
Save aaronksaunders/5573292 to your computer and use it in GitHub Desktop.
SampleKinveyApp Application using AngularJS and Kinvey
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment