<!doctype html>
<html ng-app="challenge">
<head>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular-resource.min.js"></script>
</head>
<body>
<h2>
Weightloss Challenge
</h2>
<div ng-view></div>
<script>
angular.module('challenge', ['mongolab'])
.config(function ($routeProvider) {
$routeProvider.when('/', {
controller: ListControl,
templateUrl: 'list.html'
})
.when('/detail/:clientId', {
controller: DetailControl,
templateUrl: 'detail.html'
})
});
function ListControl($scope, $location, Client) {
$scope.clients = Client.query();
$scope.addClient = function () {
Client.save($scope.client, function (client) {
$location.path('/detail/' + client._id.$oid);
});
}
}
function DetailControl($scope, $location, $routeParams, Client) {
var self = this;
Client.get({
id: $routeParams.clientId
}, function (client) {
self.original = client;
$scope.client = new Client(self.original);
});
$scope.isClean = function () {
return angular.equals(self.original, $scope.client);
}
$scope.destroy = function () {
self.original.destroy(function () {
$location.path('/');
});
};
$scope.addWeighIn = function () {
console.log("addWeighIn: " + $scope.date + " : " + $scope.weight);
$weights = [ { date: $scope.date, weight: $scope.weight } ];
$scope.client.weights = $weights;
$scope.client.update(function () {
location.path('/');
});
};
$scope.save = function () {
console.log("save");
$scope.client.update(function () {
});
};
}
// This is a module for cloud persistance in mongolab - https://mongolab.com
angular.module('mongolab', ['ngResource']).
factory('Client', function ($resource) {
var Client = $resource('https://api.mongolab.com/api/1/databases/clients/collections/clients/:id', {
apiKey: 'myapikey'
}, {
update: {
method: 'GET'
}
});
Client.prototype.update = function (cb) {
return Client.update({ id: this._id.$oid },
angular.extend({}, this, { _id: undefined }), cb);
};
Client.prototype.destroy = function (cb) {
return Client.remove({
id: this._id.$oid
}, cb);
};
return Client;
});
</script>
</body>
</html>
/**list.html**/
<input type="text" ng-model="search" class="search-query" placeholder="Search">
<form ng-submit="addClient()">
<table class="table table-striped">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<td></td>
</tr>
</thead>
<tbody>
<tr ng-repeat="client in clients | filter:search | orderBy:'lastName'">
<td>{{client.firstName}}</td>
<td>{{client.lastName}}</td>
<td>
<a href="#/detail/{{client._id.$oid}}" class="btn">Edit</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td><input type="text" ng-model="client.firstName" placeholder="First name" required /></td>
<td><input type="text" ng-model="client.lastName" placeholder="Last name" required /></td>
<td><input type="submit" class="btn btn-primary" value="Add" /></td>
</tr>
</tfoot>
</table>
</form>
/** detail.html **/
<strong>{{client.firstName}} {{client.lastName}}</strong>
<form ng-submit="addWeighIn()">
<table class="table table-striped">
<thead>
<tr>
<th>Date</th>
<th>Weight</th>
<td></td>
</tr>
</thead>
<tbody>
<tr ng-repeat="weight in client.weights | orderBy:'date'">
<td>{{weight.date}}</td>
<td>{{weight.weight}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td><input type="date" ng-model="client.date" required /></td>
<td class="input-append">
<input type="text" ng-model="client.weight" placeholder="Weight" smart-float required />
<span class="add-on">lbs</span>
</td>
<td><input type="submit" class="btn btn-primary" value="Add" /></td>
</tr>
</tfoot>
</table>
</form>
<a href="#/" class="btn">Return</a>
<button ng-click="destroy()" class="btn btn-danger">Delete</button>