Want more features on Pastebin? Sign Up, it's FREE!
Guest

Untitled

By: a guest on Jan 11th, 2013  |  syntax: JavaScript  |  size: 4.64 KB  |  views: 80  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <!doctype html>
  2. <html ng-app="challenge">
  3. <head>
  4.     <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
  5.     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
  6.     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular-resource.min.js"></script>
  7. </head>
  8. <body>
  9.     <h2>
  10.         Weightloss Challenge
  11.     </h2>
  12.     <div ng-view></div>
  13. <script>
  14. angular.module('challenge', ['mongolab'])
  15.     .config(function ($routeProvider) {
  16.                 $routeProvider.when('/', {
  17.                         controller: ListControl,
  18.                         templateUrl: 'list.html'
  19.                 })
  20.                 .when('/detail/:clientId', {
  21.                         controller: DetailControl,
  22.                         templateUrl: 'detail.html'
  23.                 })
  24.         });
  25.  
  26.  
  27. function ListControl($scope, $location, Client) {
  28.     $scope.clients = Client.query();
  29.     $scope.addClient = function () {
  30.         Client.save($scope.client, function (client) {
  31.             $location.path('/detail/' + client._id.$oid);
  32.         });
  33.     }
  34. }
  35.  
  36. function DetailControl($scope, $location, $routeParams, Client) {
  37.     var self = this;
  38.  
  39.     Client.get({
  40.         id: $routeParams.clientId
  41.     }, function (client) {
  42.         self.original = client;
  43.         $scope.client = new Client(self.original);
  44.     });
  45.  
  46.     $scope.isClean = function () {
  47.         return angular.equals(self.original, $scope.client);
  48.     }
  49.  
  50.     $scope.destroy = function () {
  51.         self.original.destroy(function () {
  52.             $location.path('/');
  53.         });
  54.     };
  55.  
  56.     $scope.addWeighIn = function () {
  57.         console.log("addWeighIn: " + $scope.date + " : " + $scope.weight);
  58.         $weights = [ { date: $scope.date, weight: $scope.weight } ];
  59.         $scope.client.weights = $weights;
  60.         $scope.client.update(function () {
  61.             location.path('/');
  62.         });
  63.     };
  64.    
  65.     $scope.save = function () {
  66.         console.log("save");
  67.         $scope.client.update(function () {
  68.            
  69.         });
  70.     };
  71. }
  72.  
  73. // This is a module for cloud persistance in mongolab - https://mongolab.com
  74. angular.module('mongolab', ['ngResource']).
  75. factory('Client', function ($resource) {
  76.     var Client = $resource('https://api.mongolab.com/api/1/databases/clients/collections/clients/:id', {
  77.         apiKey: 'myapikey'
  78.     }, {
  79.         update: {
  80.             method: 'GET'
  81.         }
  82.     });
  83.  
  84.     Client.prototype.update = function (cb) {
  85.         return Client.update({ id: this._id.$oid },
  86.             angular.extend({}, this, { _id: undefined }), cb);
  87.     };
  88.  
  89.     Client.prototype.destroy = function (cb) {
  90.         return Client.remove({
  91.             id: this._id.$oid
  92.         }, cb);
  93.     };
  94.  
  95.     return Client;
  96. });
  97. </script>
  98. </body>
  99. </html>
  100.  
  101. /**list.html**/
  102. <input type="text" ng-model="search" class="search-query" placeholder="Search">
  103.  
  104. <form ng-submit="addClient()">
  105. <table class="table table-striped">
  106.     <thead>
  107.     <tr>
  108.         <th>First Name</th>
  109.         <th>Last Name</th>
  110.         <td></td>
  111.     </tr>
  112.     </thead>
  113.     <tbody>
  114.     <tr ng-repeat="client in clients | filter:search | orderBy:'lastName'">
  115.         <td>{{client.firstName}}</td>
  116.         <td>{{client.lastName}}</td>
  117.         <td>
  118.             <a href="#/detail/{{client._id.$oid}}"  class="btn">Edit</button>
  119.         </td>
  120.     </tr>
  121.     </tbody>
  122.     <tfoot>
  123.     <tr>
  124.         <td><input type="text" ng-model="client.firstName" placeholder="First name" required /></td>
  125.         <td><input type="text" ng-model="client.lastName" placeholder="Last name" required /></td>
  126.         <td><input type="submit" class="btn btn-primary" value="Add" /></td>
  127.     </tr>
  128.     </tfoot>
  129. </table>
  130. </form>
  131.  
  132. /** detail.html **/
  133. <strong>{{client.firstName}} {{client.lastName}}</strong>
  134.  
  135. <form ng-submit="addWeighIn()">
  136.     <table class="table table-striped">
  137.         <thead>
  138.         <tr>
  139.             <th>Date</th>
  140.             <th>Weight</th>
  141.             <td></td>
  142.         </tr>
  143.         </thead>
  144.         <tbody>
  145.         <tr ng-repeat="weight in client.weights | orderBy:'date'">
  146.             <td>{{weight.date}}</td>
  147.             <td>{{weight.weight}}</td>
  148.         </tr>
  149.         </tbody>
  150.         <tfoot>
  151.         <tr>
  152.             <td><input type="date" ng-model="client.date" required /></td>
  153.             <td class="input-append">
  154.                 <input type="text" ng-model="client.weight" placeholder="Weight" smart-float required />
  155.                 <span class="add-on">lbs</span>
  156.             </td>
  157.             <td><input type="submit" class="btn btn-primary" value="Add" /></td>
  158.         </tr>
  159.         </tfoot>
  160.     </table>
  161. </form>
  162.  
  163. <a href="#/" class="btn">Return</a>
  164. <button ng-click="destroy()" class="btn btn-danger">Delete</button>
clone this paste RAW Paste Data