ソースを参照

calendar header; get courses by date

tags/1.0.0
Robin Thoni 8年前
コミット
f9e73ce970
3個のファイルの変更73行の追加29行の削除
  1. 43
    1
      app/controllers/home.controller.js
  2. 23
    25
      app/less/app.less
  3. 7
    3
      app/views/home.html

+ 43
- 1
app/controllers/home.controller.js ファイルの表示

@@ -3,8 +3,11 @@ angular.module('app')
3 3
         function($scope, $state, DataShareBusiness, WeeksBusiness) {
4 4
 
5 5
             $scope.DataShareBusiness = DataShareBusiness;
6
+            $scope.dateFormat = "dd MMM yyyy";
6 7
             $scope.courses = null;
7
-            $scope.days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
8
+            $scope.days = [{day:"Monday", date: null}, {day:"Tuesday", date: null}, {day:"Wednesday", date: null},
9
+                {day:"Thursday", date: null}, {day:"Friday", date: null}, {day:"Saturday", date: null},
10
+                {day:"Sunday", date: null}];
8 11
 
9 12
             $scope.getSheetCount = function()
10 13
             {
@@ -21,6 +24,44 @@ angular.module('app')
21 24
                 return sheetCount(DataShareBusiness.getCurrentGroupOrRoot())
22 25
             };
23 26
 
27
+            $scope.getMonday = function(d)
28
+            {
29
+                d = new Date(d);
30
+                var day = d.getDay(), diff = d.getDate() - day + (day == 0 ? -6:1); // adjust when day is sunday
31
+                d = new Date(d.setDate(diff));
32
+                d.setHours(0, 0, 0, 0);
33
+                return d;
34
+            };
35
+
36
+            $scope.setDates = function(monday)
37
+            {
38
+                $scope.days[0].date = new Date(monday);
39
+                for (var i = 1; i < $scope.days.length; ++i) {
40
+                    $scope.days[i].date = new Date(monday.setDate(monday.getDate() + 1));
41
+                }
42
+            };
43
+
44
+            $scope.getCourseListByDay = function(date)
45
+            {
46
+                if ($scope.courses == null || date == null) {
47
+                    return null;
48
+                }
49
+                return $scope.courses.DayList.find(function(day)
50
+                {
51
+                    var d = new Date(day.DateTime);
52
+                    return d.getTime() == date.getTime();
53
+                });
54
+            };
55
+
56
+            $scope.getCoursesByDate = function(date)
57
+            {
58
+                var courses = $scope.getCourseListByDay(date);
59
+                if (courses == null) {
60
+                    return [];
61
+                }
62
+                return ["42", "24"];
63
+            };
64
+
24 65
             $scope.$watch(function(){return DataShareBusiness.CurrentGroups}, function()
25 66
             {
26 67
                 var group = DataShareBusiness.getCurrentGroup();
@@ -33,6 +74,7 @@ angular.module('app')
33 74
                         .then(function(data)
34 75
                         {
35 76
                             $scope.courses = data;
77
+                            $scope.setDates($scope.getMonday(new Date()));
36 78
                         });
37 79
                 }
38 80
                 else {

+ 23
- 25
app/less/app.less ファイルの表示

@@ -48,39 +48,37 @@ footer {
48 48
   font-size: large;
49 49
 }
50 50
 
51
-@media (min-width: 768px){
52
-  .seven-cols .col-xs-1,
53
-  .seven-cols .col-sm-1,
54
-  .seven-cols .col-md-1,
55
-  .seven-cols .col-sm-1,
56
-  .seven-cols .col-lg-1  {
51
+@media (max-width: 479px){
52
+  .seven-cols .col-sm-1  {
57 53
     width: 100%;
58 54
     *width: 100%;
59 55
   }
60 56
 }
61 57
 
62
-@media (min-width: 992px) {
63
-  .seven-cols .col-xs-1,
64
-  .seven-cols .col-sm-1,
65
-  .seven-cols .col-md-1,
66
-  .seven-cols .col-sm-1,
67
-  .seven-cols .col-lg-1 {
58
+@media (min-width: 480px) {
59
+  .seven-cols .col-sm-1  {
68 60
     width: 14.285714285714285714285714285714%;
69 61
     *width: 14.285714285714285714285714285714%;
70 62
   }
71 63
 }
72 64
 
73
-/**
74
- *  The following is not really needed in this case
75
- *  Only to demonstrate the usage of @media for large screens
76
- */
77
-@media (min-width: 1200px) {
78
-  .seven-cols .col-xs-1,
79
-  .seven-cols .col-sm-1,
80
-  .seven-cols .col-md-1,
81
-  .seven-cols .col-sm-1,
82
-  .seven-cols .col-lg-1 {
83
-    width: 14.285714285714285714285714285714%;
84
-    *width: 14.285714285714285714285714285714%;
85
-  }
65
+.day-column {
66
+  .text-center();
67
+  border: solid #505050 1px;
68
+  height: 24*30px;
69
+  padding: 0;
70
+}
71
+
72
+.day-column-header {
73
+  background-color: darkorange;
74
+  color: #2e6da4;
75
+  font-weight: bold;
76
+}
77
+
78
+.day-column-header-day {
79
+  padding-top: 5px;
80
+}
81
+
82
+.day-column-header-date {
83
+  padding-bottom: 5px;
86 84
 }

+ 7
- 3
app/views/home.html ファイルの表示

@@ -9,10 +9,14 @@
9 9
     </p>
10 10
 
11 11
     <div lu-busy="coursesView" class="col-xs-12 seven-cols">
12
-        <div ng-repeat="day in days" class="col-xs-1">
13
-            {{day}}
12
+        <div ng-repeat="day in days" class="col-sm-1 day-column">
13
+            <div class="day-column-header day-column-header-day">{{ day.day }}</div>
14
+            <div class="day-column-header day-column-header-date">{{ day.date | date : dateFormat }}</div>
15
+            <div ng-repeat="course in getCoursesByDate(day.date)" ng-style="{'heigth': '0'}">
16
+                {{course}}
17
+            </div>
14 18
         </div>
19
+        {{ courses }}
15 20
     </div>
16
-    {{ courses }}
17 21
 
18 22
 </div>

読み込み中…
キャンセル
保存