datepicker; change week

app/controllers/home.controller.js

@@ -6,11 +6,18 @@ angular.module('app')
             $scope.dateFormat = "dd MMM yyyy";
             $scope.hourFormat = "HH:mm";
             $scope.courses = null;
+            $scope.weekId = {
+                id: null,
+                date: null
+            };
             $scope.days = [{day:"Monday", date: null}, {day:"Tuesday", date: null}, {day:"Wednesday", date: null},
                 {day:"Thursday", date: null}, {day:"Friday", date: null}, {day:"Saturday", date: null},
                 {day:"Sunday", date: null}];
             $scope.hours = [];
 
+            $scope.selectedDate = new Date();
+            $scope.selectedDate.setHours(0, 0, 0, 0);
+
             for (var i = 0; i < 48; ++i) {
                 var d = new Date();
                 d.setHours(i / 2, 30 * (i % 2), 0, 0);
@@ -84,7 +91,17 @@ angular.module('app')
                 );
             };
 
-            $scope.$watch(function(){return DataShareBusiness.CurrentGroups}, function()
+            $scope.onWeekReceived = function(data)
+            {
+                $scope.courses = data;
+                if ($scope.weekId.id == null) {
+                    $scope.weekId.date = $scope.getMonday(new Date());
+                    $scope.weekId.id = $scope.courses.Id;
+                }
+                $scope.setDates($scope.getMonday($scope.selectedDate));
+            };
+
+            $scope.loadWeeks = function()
             {
                 var group = DataShareBusiness.getCurrentGroup();
                 if (group != null && $scope.getSheetCount() < 5) {
@@ -92,15 +109,40 @@ angular.module('app')
                         id: "promiseLoadCourses",
                         groups: ["coursesView"]
                     };
-                    WeeksBusiness.getCurrentWeek({group_id: group.Id, type_id: group.Type}, promiseLoadCourses)
-                        .then(function(data)
-                        {
-                            $scope.courses = data;
-                            $scope.setDates($scope.getMonday(new Date()));
-                        });
+                    if ($scope.weekId.id == null) {
+                        WeeksBusiness.getCurrentWeek({group_id: group.Id, type_id: group.Type}, promiseLoadCourses)
+                            .then($scope.onWeekReceived);
+                    }
+                    else {
+                        var diff = Math.round(($scope.getMonday($scope.selectedDate) - $scope.weekId.date) / 604800000);
+                        var weekId = $scope.weekId.id + diff;
+                        WeeksBusiness.getWeek({
+                            group_id: group.Id,
+                            type_id: group.Type,
+                            week_id: weekId
+                        }, promiseLoadCourses).then($scope.onWeekReceived);
+                    }
                 }
                 else {
                     $scope.courses = null;
                 }
+            };
+
+            $scope.weekDiff = function(date1, date2)
+            {
+                return Math.round(($scope.getMonday(date1) - $scope.getMonday(date2)) / 604800000)
+            };
+
+            $scope.$watch(function(){return DataShareBusiness.CurrentGroups}, $scope.loadWeeks);
+
+            $scope.$watch(function(){return $scope.selectedDate}, function(newValue, oldValue)
+            {
+                if (oldValue == null || newValue == oldValue) {
+                    return;
+                }
+                var diff = $scope.weekDiff($scope.selectedDate, oldValue);
+                if (diff != 0) {
+                    $scope.loadWeeks();
+                }
             });
     }]);

app/less/app.less

@@ -80,6 +80,10 @@ footer {
   font-weight: bold;
 }
 
+.day-column-header-current {
+  color: red;
+}
+
 .day-column-header-day {
   padding-top: 5px;
 }
@@ -129,4 +133,16 @@ footer {
   width: 100%;
   margin-top: -10px;
   text-align: right;
-}
+}
+
+
+/*
+.md-datepicker-input-container {
+  margin-bottom: 10px;
+  padding-bottom: 10px;
+  border-bottom-width: 2px;
+}
+.md-datepicker-input{
+  font-size: large;
+}
+*/

app/views/home.html

@@ -9,6 +9,11 @@
     </p>
 
     <div lu-busy="coursesView" class="col-xs-12 seven-cols">
+
+        <div class="col-xs-12">
+            <md-datepicker class="col-xs-2 col-xs-offset-5" ng-model="selectedDate" md-placeholder="Enter date"></md-datepicker>
+        </div>
+
         <div class="col-xs-1 hour-column">
             <div class="day-column-hours">
                 <div class="day-column-hour" ng-hide="$first" ng-repeat="hour in hours" ng-style="{'top': ($index / hours.length * 100) + '%'}">
@@ -19,8 +24,14 @@
         <div class="col-xs-11 days-container">
             <div ng-repeat="day in days" class="col-sm-1 day-column"
                 ng-style="{'border-right': $last ? 'solid #505050 1px' : ''}">
-                <div class="day-column-header day-column-header-day">{{ day.day }}</div>
-                <div class="day-column-header day-column-header-date">{{ day.date | date : dateFormat }}</div>
+                <div class="day-column-header day-column-header-day"
+                     ng-class="{'day-column-header-current': selectedDate.getTime() == day.date.getTime()}">
+                    {{ day.day }}
+                </div>
+                <div class="day-column-header day-column-header-date"
+                     ng-class="{'day-column-header-current': selectedDate.getTime() == day.date.getTime()}">
+                    {{ day.date | date : dateFormat }}
+                </div>
                 <div class="day-column-courses">
                     <div class="day-column-course" ng-repeat="course in getCoursesByDate(day.date)" ng-click="showCourse(course)"
                          ng-style="{'height': (course.EndPercent - course.BeginPercent) + '%',