瀏覽代碼

datepicker; change week

tags/1.0.0
Robin Thoni 8 年之前
父節點
當前提交
7044c5e486
共有 3 個檔案被更改,包括 79 行新增10 行删除
  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 查看文件

@@ -6,11 +6,18 @@ angular.module('app')
6 6
             $scope.dateFormat = "dd MMM yyyy";
7 7
             $scope.hourFormat = "HH:mm";
8 8
             $scope.courses = null;
9
+            $scope.weekId = {
10
+                id: null,
11
+                date: null
12
+            };
9 13
             $scope.days = [{day:"Monday", date: null}, {day:"Tuesday", date: null}, {day:"Wednesday", date: null},
10 14
                 {day:"Thursday", date: null}, {day:"Friday", date: null}, {day:"Saturday", date: null},
11 15
                 {day:"Sunday", date: null}];
12 16
             $scope.hours = [];
13 17
 
18
+            $scope.selectedDate = new Date();
19
+            $scope.selectedDate.setHours(0, 0, 0, 0);
20
+
14 21
             for (var i = 0; i < 48; ++i) {
15 22
                 var d = new Date();
16 23
                 d.setHours(i / 2, 30 * (i % 2), 0, 0);
@@ -84,7 +91,17 @@ angular.module('app')
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 106
                 var group = DataShareBusiness.getCurrentGroup();
90 107
                 if (group != null && $scope.getSheetCount() < 5) {
@@ -92,15 +109,40 @@ angular.module('app')
92 109
                         id: "promiseLoadCourses",
93 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 126
                 else {
103 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 查看文件

@@ -80,6 +80,10 @@ footer {
80 80
   font-weight: bold;
81 81
 }
82 82
 
83
+.day-column-header-current {
84
+  color: red;
85
+}
86
+
83 87
 .day-column-header-day {
84 88
   padding-top: 5px;
85 89
 }
@@ -129,4 +133,16 @@ footer {
129 133
   width: 100%;
130 134
   margin-top: -10px;
131 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 查看文件

@@ -9,6 +9,11 @@
9 9
     </p>
10 10
 
11 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 17
         <div class="col-xs-1 hour-column">
13 18
             <div class="day-column-hours">
14 19
                 <div class="day-column-hour" ng-hide="$first" ng-repeat="hour in hours" ng-style="{'top': ($index / hours.length * 100) + '%'}">
@@ -19,8 +24,14 @@
19 24
         <div class="col-xs-11 days-container">
20 25
             <div ng-repeat="day in days" class="col-sm-1 day-column"
21 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 35
                 <div class="day-column-courses">
25 36
                     <div class="day-column-course" ng-repeat="course in getCoursesByDate(day.date)" ng-click="showCourse(course)"
26 37
                          ng-style="{'height': (course.EndPercent - course.BeginPercent) + '%',

Loading…
取消
儲存