chore(sample): add a state which display a modal onEnter

This state mustn't be display in the breadcrumb.
ncuillery · May 6, 2014 · 7a9bedd · 7a9bedd
1 parent c53fc6f
commit 7a9bedd
Show file tree

Hide file tree

Showing 8 changed files with 90 additions and 10 deletions.
diff --git a/sample/app.js b/sample/app.js
@@ -13,6 +13,30 @@ angular.module('ncy-sample', ['ui.router.state', 'ui.bootstrap', 'ncy-angular-br
     {roomId: 3, roomNumber: 103, type: 'Single'},
     {roomId: 4, roomNumber: 104, type: 'Double'}
   ])
+  .factory('dateUtils', function() {
+    return {
+      addDays: function(days, date) {
+        if(!date) {
+          var todayTime = new Date();
+          todayTime.setHours(0,0,0,0);
+          date = new Date(todayTime);
+        }
+
+        var newDate = new Date(date);
+        newDate.setDate(date.getDate() + days);
+        return newDate;
+        }
+    }
+  })
+  .factory('reservations', function(dateUtils) {
+    return [
+      {reservationId: 1, guestName: 'Robert Smith', roomId: '2', from: dateUtils.addDays(-1), nights: 3},
+      {reservationId: 2, guestName: 'John Doe', roomId: '3', from: dateUtils.addDays(-8), nights: 5},
+      {reservationId: 3, guestName: 'William Gordon', roomId: '1', from: dateUtils.addDays(3), nights: 6},
+      {reservationId: 4, guestName: 'Michael Robinson', roomId: '2', from: dateUtils.addDays(6), nights: 2},
+      {reservationId: 5, guestName: 'Tracy Marschall', roomId: '3', from: dateUtils.addDays(12), nights: 1}
+    ];
+  })
   .config(function($stateProvider, $urlRouterProvider) {
 
     $stateProvider
@@ -40,6 +64,19 @@ angular.module('ncy-sample', ['ui.router.state', 'ui.bootstrap', 'ncy-angular-br
           ncyBreadcrumbLabel: 'Reservations for {{reservationDate | date:\'mediumDate\'}}'
         }
       })
+      .state('booking.day.detail', {
+        url: '/{reservationId}',
+        onEnter: function($stateParams, $state, $modal) {
+          $modal.open({
+            templateUrl: "views/booking_detail.html",
+            controller: 'BookingDetailCtrl'
+          }).result.then(function(result) {
+            return $state.go("^");
+          }, function(result) {
+            return $state.go("^");
+          });
+        }
+      })
       .state('room', {
         url: '/room',
         templateUrl: 'views/room_list.html',

diff --git a/sample/controllers/booking_day.js b/sample/controllers/booking_day.js
@@ -1,4 +1,8 @@
 angular.module('ncy-sample')
-  .controller('BookingDayCtrl', function($scope, $stateParams) {
+  .controller('BookingDayCtrl', function($scope, $stateParams, rooms) {
     $scope.reservationDate = new Date($stateParams.year, $stateParams.month - 1, $stateParams.day);
+
+    $scope.getRoom = function(id) {
+        return _.findWhere(rooms, {roomId: parseInt(id)});
+    }
   });
diff --git a/sample/controllers/booking_detail.js b/sample/controllers/booking_detail.js
@@ -0,0 +1,9 @@
+angular.module('ncy-sample')
+  .controller('BookingDetailCtrl', function($scope, $stateParams, dateUtils, reservations, rooms) {
+    $scope.addDays = dateUtils.addDays;
+    $scope.reservation = _.findWhere(reservations, {reservationId: parseInt($stateParams.reservationId)});
+    $scope.room = _.findWhere(rooms, {roomId: parseInt($scope.reservation.roomId)});
+    $scope.dismiss = function() {
+      $scope.$dismiss();
+    };
+  });
diff --git a/sample/controllers/booking_list.js b/sample/controllers/booking_list.js
@@ -1,18 +1,21 @@
 angular.module('ncy-sample')
-  .controller('BookingListCtrl', function($scope, $state) {
+  .controller('BookingListCtrl', function($scope, $state, dateUtils, reservations) {
 
     // Some hardcoded data ;
-    $scope.reservations = [
-      {reservationId: 1, guestName: 'Robert Smith', roomId: '2', from: new Date(2013, 09, 04), nights: 3},
-      {reservationId: 2, guestName: 'John Doe', roomId: '3', from: new Date(2013, 08, 14), nights: 5},
-      {reservationId: 3, guestName: 'William Gordon', roomId: '1', from: new Date(2013, 08, 16), nights: 6},
-      {reservationId: 4, guestName: 'Michael Robinson', roomId: '2', from: new Date(2013, 08, 31), nights: 2}
-    ];
+    $scope.reservations = reservations;
 
     $scope.$watch('reservationFilter', function(newValue) {
       if(newValue) {
         $state.go('booking.day', {year: newValue.getFullYear(), month: newValue.getMonth() + 1, day: newValue.getDate()});
       }
     });
 
+    $scope.between = function(date) {
+      return _.filter($scope.reservations, function(reservation) {
+        var from = reservation.from;
+        var to = dateUtils.addDays(reservation.nights, reservation.from);
+        return from <= date && date < to;
+      });
+    };
+
   });
diff --git a/sample/index.html b/sample/index.html
@@ -46,6 +46,7 @@ <h1>Sample</h1>
     <script src="controllers/room_detail.js"></script>
     <script src="controllers/booking_list.js"></script>
     <script src="controllers/booking_day.js"></script>
+    <script src="controllers/booking_detail.js"></script>
 
   </body>
 </html>
diff --git a/sample/views/booking_day.html b/sample/views/booking_day.html
@@ -1 +1,16 @@
-<h2>Reservations for {{reservationDate | date:'mediumDate'}}</h2>
+<table class="table">
+    <thead>
+        <tr>
+            <th>Id</th>
+            <th>Room</th>
+            <th></th>
+        </tr>
+    </thead>
+    <tbody>
+    <tr ng-repeat="reservation in between(reservationDate)">
+        <td>{{reservation.reservationId}}</td>
+        <td>{{getRoom(reservation.roomId).roomNumber}}</td>
+        <td><a ui-sref=".detail({reservationId: reservation.reservationId})" class="btn">View</a></td>
+    </tr>
+    </tbody>
+</table>
diff --git a/sample/views/booking_detail.html b/sample/views/booking_detail.html
@@ -0,0 +1,11 @@
+<div class="well" style="margin-bottom: 0px">
+    <button type="button" class="close" ng-click="dismiss()">&times;</button>
+    <h2>Reservation {{reservation.reservationId}}</h2>
+    <dl class="dl-horizontal">
+        <dt>Id</dt><dd>{{reservation.reservationId}}</dd>
+        <dt>Guest</dt><dd>{{reservation.guestName}}</dd>
+        <dt>Room</dt><dd>{{room.roomNumber}}</dd>
+        <dt>From</dt><dd>{{reservation.from | date:'mediumDate'}}</dd>
+        <dt>To</dt><dd>{{addDays(reservation.nights, reservation.from) | date:'mediumDate'}}</dd>
+    </dl>
+</div>
diff --git a/sample/views/booking_list.html b/sample/views/booking_list.html
@@ -7,7 +7,7 @@ <h2>Booking</h2>
 <div class="row">
     <div class="span6">
         <div ng-model="reservationFilter">
-            <datepicker></datepicker>
+            <datepicker date-disabled="!between(date).length" />
         </div>
     </div>
     <div class="span6" ui-view>