Browse Source

hours

tags/1.0.0
Robin Thoni 8 years ago
parent
commit
64b810ff5c
3 changed files with 81 additions and 18 deletions
  1. 25
    2
      app/controllers/home.controller.js
  2. 35
    5
      app/less/app.less
  3. 21
    11
      app/views/home.html

+ 25
- 2
app/controllers/home.controller.js View File

@@ -1,13 +1,21 @@
1 1
 angular.module('app')
2
-    .controller('HomeController', ['$scope', '$state', 'DataShareBusiness', 'WeeksBusiness',
3
-        function($scope, $state, DataShareBusiness, WeeksBusiness) {
2
+    .controller('HomeController', ['$scope', '$state', 'DataShareBusiness', 'WeeksBusiness', '$mdDialog',
3
+        function($scope, $state, DataShareBusiness, WeeksBusiness, $mdDialog) {
4 4
 
5 5
             $scope.DataShareBusiness = DataShareBusiness;
6 6
             $scope.dateFormat = "dd MMM yyyy";
7
+            $scope.hourFormat = "HH:mm";
7 8
             $scope.courses = null;
8 9
             $scope.days = [{day:"Monday", date: null}, {day:"Tuesday", date: null}, {day:"Wednesday", date: null},
9 10
                 {day:"Thursday", date: null}, {day:"Friday", date: null}, {day:"Saturday", date: null},
10 11
                 {day:"Sunday", date: null}];
12
+            $scope.hours = [];
13
+
14
+            for (var i = 0; i < 48; ++i) {
15
+                var d = new Date();
16
+                d.setHours(i / 2, 30 * (i % 2), 0, 0);
17
+                $scope.hours.push(d);
18
+            }
11 19
 
12 20
             $scope.getSheetCount = function()
13 21
             {
@@ -61,6 +69,21 @@ angular.module('app')
61 69
                 return courses.CourseList;
62 70
             };
63 71
 
72
+            $scope.showCourse = function(course)
73
+            {
74
+                console.log(course);
75
+
76
+                $mdDialog.show(
77
+                    $mdDialog.alert()
78
+                        .parent(angular.element(document.querySelector('#popupContainer')))
79
+                        .clickOutsideToClose(true)
80
+                        .title(course.Name)
81
+                        .content("<a href=''>42</a>")
82
+                        .ariaLabel(course.Name)
83
+                        .ok('Ok')
84
+                );
85
+            };
86
+
64 87
             $scope.$watch(function(){return DataShareBusiness.CurrentGroups}, function()
65 88
             {
66 89
                 var group = DataShareBusiness.getCurrentGroup();

+ 35
- 5
app/less/app.less View File

@@ -63,12 +63,13 @@ footer {
63 63
 }
64 64
 
65 65
 @calendar-height: 24*30px;
66
+@grey-color: #505050;
66 67
 
67 68
 .day-column {
68 69
   .text-center();
69
-  border-left: solid #505050 1px;
70
-  border-top: solid #505050 1px;
71
-  border-bottom: solid #505050 1px;
70
+  border-left: solid @grey-color 1px;
71
+  border-top: solid @grey-color 1px;
72
+  border-bottom: solid @grey-color 1px;
72 73
   height: @calendar-height;
73 74
   padding: 0;
74 75
 }
@@ -85,18 +86,47 @@ footer {
85 86
 
86 87
 .day-column-header-date {
87 88
   padding-bottom: 5px;
89
+  border-bottom: solid @grey-color 1px;
88 90
 }
89 91
 
90 92
 .day-column-course {
91 93
   position: absolute;
92 94
   background-color: cadetblue;
93 95
   width: 100%;
94
-  border-top: solid #505050 1px;
95
-  border-bottom: solid #505050 1px;
96
+  border-top: solid @grey-color 1px;
97
+  border-bottom: solid @grey-color 1px;
96 98
   overflow: hidden;
99
+  cursor: pointer;
97 100
 }
98 101
 
99 102
 .day-column-courses {
100 103
   height: @calendar-height - 50px;
101 104
   position: relative;
105
+}
106
+
107
+.day-column-course-name {
108
+  font-weight: bold;
109
+}
110
+
111
+.days-container {
112
+  padding-left: 0;
113
+  width: 90%;
114
+}
115
+
116
+.hour-column {
117
+  .day-column();
118
+  margin-top: 50px;
119
+  height: @calendar-height - 50px;
120
+  width: 50px;
121
+}
122
+
123
+.day-column-hours {
124
+  .day-column-courses();
125
+}
126
+
127
+.day-column-hour {
128
+  position: absolute;
129
+  width: 100%;
130
+  margin-top: -10px;
131
+  text-align: right;
102 132
 }

+ 21
- 11
app/views/home.html View File

@@ -9,17 +9,27 @@
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-sm-1 day-column"
13
-            ng-style="{'border-right': $last ? 'solid #505050 1px' : ''}">
14
-            <div class="day-column-header day-column-header-day">{{ day.day }}</div>
15
-            <div class="day-column-header day-column-header-date">{{ day.date | date : dateFormat }}</div>
16
-            <div class="day-column-courses">
17
-                <div class="day-column-course" ng-repeat="course in getCoursesByDate(day.date)"
18
-                     ng-style="{'height': (course.EndPercent - course.BeginPercent) + '%',
19
-                     'top' : course.BeginPercent + '%', 'width': (100 / course.ParallelCoursesCount)+'%',
20
-                     'left': (course.ParallelCoursesPosition * (100 / course.ParallelCoursesCount)) + '%',
21
-                     'border-left': (course.ParallelCoursesPosition != 0) ? 'solid #505050 1px' : ''}">
22
-                    {{ course.Name }}
12
+        <div class="col-xs-1 hour-column">
13
+            <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) + '%'}">
15
+                    {{hour | date : hourFormat}} -
16
+                </div>
17
+            </div>
18
+        </div>
19
+        <div class="col-xs-11 days-container">
20
+            <div ng-repeat="day in days" class="col-sm-1 day-column"
21
+                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>
24
+                <div class="day-column-courses">
25
+                    <div class="day-column-course" ng-repeat="course in getCoursesByDate(day.date)" ng-click="showCourse(course)"
26
+                         ng-style="{'height': (course.EndPercent - course.BeginPercent) + '%',
27
+                         'top' : course.BeginPercent + '%', 'width': (100 / course.ParallelCoursesCount)+'%',
28
+                         'left': (course.ParallelCoursesPosition * (100 / course.ParallelCoursesCount)) + '%',
29
+                         'border-left': (course.ParallelCoursesPosition != 0) ? 'solid #505050 1px' : ''}">
30
+                        <span class="day-column-course-name">{{ course.Name }}</span>
31
+                        <div ng-repeat="room in course.RoomList">{{room.Name}}</div>
32
+                    </div>
23 33
                 </div>
24 34
             </div>
25 35
         </div>

Loading…
Cancel
Save