Browse Source

datepicker; change week

tags/1.0.0
Robin Thoni 8 years ago
parent
commit
7044c5e486
3 changed files with 79 additions and 10 deletions
  1. 49
    7
      app/controllers/home.controller.js
  2. 17
    1
      app/less/app.less
  3. 13
    2
      app/views/home.html

+ 49
- 7
app/controllers/home.controller.js View File

6
             $scope.dateFormat = "dd MMM yyyy";
6
             $scope.dateFormat = "dd MMM yyyy";
7
             $scope.hourFormat = "HH:mm";
7
             $scope.hourFormat = "HH:mm";
8
             $scope.courses = null;
8
             $scope.courses = null;
9
+            $scope.weekId = {
10
+                id: null,
11
+                date: null
12
+            };
9
             $scope.days = [{day:"Monday", date: null}, {day:"Tuesday", date: null}, {day:"Wednesday", date: null},
13
             $scope.days = [{day:"Monday", date: null}, {day:"Tuesday", date: null}, {day:"Wednesday", date: null},
10
                 {day:"Thursday", date: null}, {day:"Friday", date: null}, {day:"Saturday", date: null},
14
                 {day:"Thursday", date: null}, {day:"Friday", date: null}, {day:"Saturday", date: null},
11
                 {day:"Sunday", date: null}];
15
                 {day:"Sunday", date: null}];
12
             $scope.hours = [];
16
             $scope.hours = [];
13
 
17
 
18
+            $scope.selectedDate = new Date();
19
+            $scope.selectedDate.setHours(0, 0, 0, 0);
20
+
14
             for (var i = 0; i < 48; ++i) {
21
             for (var i = 0; i < 48; ++i) {
15
                 var d = new Date();
22
                 var d = new Date();
16
                 d.setHours(i / 2, 30 * (i % 2), 0, 0);
23
                 d.setHours(i / 2, 30 * (i % 2), 0, 0);
84
                 );
91
                 );
85
             };
92
             };
86
 
93
 
87
-            $scope.$watch(function(){return DataShareBusiness.CurrentGroups}, function()
94
+            $scope.onWeekReceived = function(data)
95
+            {
96
+                $scope.courses = data;
97
+                if ($scope.weekId.id == null) {
98
+                    $scope.weekId.date = $scope.getMonday(new Date());
99
+                    $scope.weekId.id = $scope.courses.Id;
100
+                }
101
+                $scope.setDates($scope.getMonday($scope.selectedDate));
102
+            };
103
+
104
+            $scope.loadWeeks = function()
88
             {
105
             {
89
                 var group = DataShareBusiness.getCurrentGroup();
106
                 var group = DataShareBusiness.getCurrentGroup();
90
                 if (group != null && $scope.getSheetCount() < 5) {
107
                 if (group != null && $scope.getSheetCount() < 5) {
92
                         id: "promiseLoadCourses",
109
                         id: "promiseLoadCourses",
93
                         groups: ["coursesView"]
110
                         groups: ["coursesView"]
94
                     };
111
                     };
95
-                    WeeksBusiness.getCurrentWeek({group_id: group.Id, type_id: group.Type}, promiseLoadCourses)
96
-                        .then(function(data)
97
-                        {
98
-                            $scope.courses = data;
99
-                            $scope.setDates($scope.getMonday(new Date()));
100
-                        });
112
+                    if ($scope.weekId.id == null) {
113
+                        WeeksBusiness.getCurrentWeek({group_id: group.Id, type_id: group.Type}, promiseLoadCourses)
114
+                            .then($scope.onWeekReceived);
115
+                    }
116
+                    else {
117
+                        var diff = Math.round(($scope.getMonday($scope.selectedDate) - $scope.weekId.date) / 604800000);
118
+                        var weekId = $scope.weekId.id + diff;
119
+                        WeeksBusiness.getWeek({
120
+                            group_id: group.Id,
121
+                            type_id: group.Type,
122
+                            week_id: weekId
123
+                        }, promiseLoadCourses).then($scope.onWeekReceived);
124
+                    }
101
                 }
125
                 }
102
                 else {
126
                 else {
103
                     $scope.courses = null;
127
                     $scope.courses = null;
104
                 }
128
                 }
129
+            };
130
+
131
+            $scope.weekDiff = function(date1, date2)
132
+            {
133
+                return Math.round(($scope.getMonday(date1) - $scope.getMonday(date2)) / 604800000)
134
+            };
135
+
136
+            $scope.$watch(function(){return DataShareBusiness.CurrentGroups}, $scope.loadWeeks);
137
+
138
+            $scope.$watch(function(){return $scope.selectedDate}, function(newValue, oldValue)
139
+            {
140
+                if (oldValue == null || newValue == oldValue) {
141
+                    return;
142
+                }
143
+                var diff = $scope.weekDiff($scope.selectedDate, oldValue);
144
+                if (diff != 0) {
145
+                    $scope.loadWeeks();
146
+                }
105
             });
147
             });
106
     }]);
148
     }]);

+ 17
- 1
app/less/app.less View File

80
   font-weight: bold;
80
   font-weight: bold;
81
 }
81
 }
82
 
82
 
83
+.day-column-header-current {
84
+  color: red;
85
+}
86
+
83
 .day-column-header-day {
87
 .day-column-header-day {
84
   padding-top: 5px;
88
   padding-top: 5px;
85
 }
89
 }
129
   width: 100%;
133
   width: 100%;
130
   margin-top: -10px;
134
   margin-top: -10px;
131
   text-align: right;
135
   text-align: right;
132
-}
136
+}
137
+
138
+
139
+/*
140
+.md-datepicker-input-container {
141
+  margin-bottom: 10px;
142
+  padding-bottom: 10px;
143
+  border-bottom-width: 2px;
144
+}
145
+.md-datepicker-input{
146
+  font-size: large;
147
+}
148
+*/

+ 13
- 2
app/views/home.html View File

9
     </p>
9
     </p>
10
 
10
 
11
     <div lu-busy="coursesView" class="col-xs-12 seven-cols">
11
     <div lu-busy="coursesView" class="col-xs-12 seven-cols">
12
+
13
+        <div class="col-xs-12">
14
+            <md-datepicker class="col-xs-2 col-xs-offset-5" ng-model="selectedDate" md-placeholder="Enter date"></md-datepicker>
15
+        </div>
16
+
12
         <div class="col-xs-1 hour-column">
17
         <div class="col-xs-1 hour-column">
13
             <div class="day-column-hours">
18
             <div class="day-column-hours">
14
                 <div class="day-column-hour" ng-hide="$first" ng-repeat="hour in hours" ng-style="{'top': ($index / hours.length * 100) + '%'}">
19
                 <div class="day-column-hour" ng-hide="$first" ng-repeat="hour in hours" ng-style="{'top': ($index / hours.length * 100) + '%'}">
19
         <div class="col-xs-11 days-container">
24
         <div class="col-xs-11 days-container">
20
             <div ng-repeat="day in days" class="col-sm-1 day-column"
25
             <div ng-repeat="day in days" class="col-sm-1 day-column"
21
                 ng-style="{'border-right': $last ? 'solid #505050 1px' : ''}">
26
                 ng-style="{'border-right': $last ? 'solid #505050 1px' : ''}">
22
-                <div class="day-column-header day-column-header-day">{{ day.day }}</div>
23
-                <div class="day-column-header day-column-header-date">{{ day.date | date : dateFormat }}</div>
27
+                <div class="day-column-header day-column-header-day"
28
+                     ng-class="{'day-column-header-current': selectedDate.getTime() == day.date.getTime()}">
29
+                    {{ day.day }}
30
+                </div>
31
+                <div class="day-column-header day-column-header-date"
32
+                     ng-class="{'day-column-header-current': selectedDate.getTime() == day.date.getTime()}">
33
+                    {{ day.date | date : dateFormat }}
34
+                </div>
24
                 <div class="day-column-courses">
35
                 <div class="day-column-courses">
25
                     <div class="day-column-course" ng-repeat="course in getCoursesByDate(day.date)" ng-click="showCourse(course)"
36
                     <div class="day-column-course" ng-repeat="course in getCoursesByDate(day.date)" ng-click="showCourse(course)"
26
                          ng-style="{'height': (course.EndPercent - course.BeginPercent) + '%',
37
                          ng-style="{'height': (course.EndPercent - course.BeginPercent) + '%',

Loading…
Cancel
Save