I am new to mean stack (and programming in general) but have a simple app up and running.
My model looks like this:
var mongoose = require('bluebird').promisifyAll(require('mongoose'));
var RestaurantSchema = new mongoose.Schema({
name: String,
street: String,
zip: Boolean,
city: String,
country: String,
location: {
coordinates: {type: [Number], index: '2dsphere'}
},
kitchen: String,
rating: Number
});
RestaurantSchema.index({location: '2dsphere'});
export default mongoose.model('Restaurant', RestaurantSchema);
I seed my database with:
Restaurant.find({}).removeAsync()
.then(() => {
Restaurant.create({
name: 'Kaspers restaurant',
street: 'Nørrebrogade 1',
zip: '2200',
city: 'Copenhagen',
country: 'Denmark',
location: ['12.548057','55.7034'],
kitchen: 'Italian',
rating: '4.5'
}, {
name: 'Kristinas restaurant',
street: 'Østerbrogade 2',
zip: '2200',
city: 'Copenhagen',
country: 'Denmark',
location: ['12.541565', '55.689206'],
kitchen: 'Thai',
rating: '5'
}, {
name: 'Noma',
street: 'Strandgade 93',
zip: '1401',
city: 'Copenhagen',
country: 'Denmark',
location: ['12.59620', '55.677933'],
kitchen: 'Nordisk',
rating: '6'
});
});
My controller extracts the users location and list restaurants via:
angular.module('venueApp')
.controller('RestaurantsCtrl', function ($scope, $http, $window) {
$http.get('/api/restaurants')
.success(function(data) {
$scope.restaurants = data;
console.log($scope.restaurants);
})
.error(function(err) {
console.log('Error! Something went wrong');
});
$window.navigator.geolocation.getCurrentPosition(function(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
$scope.$apply(function () {
$scope.lat = lat;
$scope.lng = lng;
});
});
});
And my view shows the users location, takes maximum input and lists restaurants via:
<navbar></navbar>
<div>
This is your location:
<input type="text" class="disabled" placeholder="{{lat}}">
<input type="text" class="disabled" placeholder="{{lng}}">
<br>
How far do you want to search:
<div class="form-group">
<label for="distance">Max. Distance (miles)</label>
<input type="text" class="form-control" id="distance" placeholder="500" ng-model="formData.distance">
</div>
</div>
<div class="col-md-12">
<table class="table table-striped">
<thead>
<th>Navn</th>
<th>By</th>
<th>Køkken</th>
<th>Latitude</th>
<th>Longtitude</th>
</thead>
<tbody>
<tr ng-repeat="restaurant in restaurants">
<td>{{restaurant.name}}</td>
<td>{{restaurant.city}}</td>
<td>{{restaurant.kitchen}}</td>
<td>{{restaurant.location.coordinates[0]}}</td>
<td>{{restaurant.location.coordinates[1]}}</td>
</tr>
</tbody>
</table>
I have used yeoman angular-fullstack generator. In my html view I extract the users current location "lat" and "lng" and would like to then search through the database of restaurants that are within a max distance from the user.
How do I do this in this scaffold? I have tried to get these examples/tutorials to work but to no avail :(
