hours

app/controllers/home.controller.js

@@ -1,13 +1,21 @@
 angular.module('app')
-    .controller('HomeController', ['$scope', '$state', 'DataShareBusiness', 'WeeksBusiness',
-        function($scope, $state, DataShareBusiness, WeeksBusiness) {
+    .controller('HomeController', ['$scope', '$state', 'DataShareBusiness', 'WeeksBusiness', '$mdDialog',
+        function($scope, $state, DataShareBusiness, WeeksBusiness, $mdDialog) {
 
             $scope.DataShareBusiness = DataShareBusiness;
             $scope.dateFormat = "dd MMM yyyy";
+            $scope.hourFormat = "HH:mm";
             $scope.courses = 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 = [];
+
+            for (var i = 0; i < 48; ++i) {
+                var d = new Date();
+                d.setHours(i / 2, 30 * (i % 2), 0, 0);
+                $scope.hours.push(d);
+            }
 
             $scope.getSheetCount = function()
             {
@@ -61,6 +69,21 @@ angular.module('app')
                 return courses.CourseList;
             };
 
+            $scope.showCourse = function(course)
+            {
+                console.log(course);
+
+                $mdDialog.show(
+                    $mdDialog.alert()
+                        .parent(angular.element(document.querySelector('#popupContainer')))
+                        .clickOutsideToClose(true)
+                        .title(course.Name)
+                        .content("<a href=''>42</a>")
+                        .ariaLabel(course.Name)
+                        .ok('Ok')
+                );
+            };
+
             $scope.$watch(function(){return DataShareBusiness.CurrentGroups}, function()
             {
                 var group = DataShareBusiness.getCurrentGroup();

app/less/app.less

@@ -63,12 +63,13 @@ footer {
 }
 
 @calendar-height: 24*30px;
+@grey-color: #505050;
 
 .day-column {
   .text-center();
-  border-left: solid #505050 1px;
-  border-top: solid #505050 1px;
-  border-bottom: solid #505050 1px;
+  border-left: solid @grey-color 1px;
+  border-top: solid @grey-color 1px;
+  border-bottom: solid @grey-color 1px;
   height: @calendar-height;
   padding: 0;
 }
@@ -85,18 +86,47 @@ footer {
 
 .day-column-header-date {
   padding-bottom: 5px;
+  border-bottom: solid @grey-color 1px;
 }
 
 .day-column-course {
   position: absolute;
   background-color: cadetblue;
   width: 100%;
-  border-top: solid #505050 1px;
-  border-bottom: solid #505050 1px;
+  border-top: solid @grey-color 1px;
+  border-bottom: solid @grey-color 1px;
   overflow: hidden;
+  cursor: pointer;
 }
 
 .day-column-courses {
   height: @calendar-height - 50px;
   position: relative;
+}
+
+.day-column-course-name {
+  font-weight: bold;
+}
+
+.days-container {
+  padding-left: 0;
+  width: 90%;
+}
+
+.hour-column {
+  .day-column();
+  margin-top: 50px;
+  height: @calendar-height - 50px;
+  width: 50px;
+}
+
+.day-column-hours {
+  .day-column-courses();
+}
+
+.day-column-hour {
+  position: absolute;
+  width: 100%;
+  margin-top: -10px;
+  text-align: right;
 }

app/views/home.html

@@ -9,17 +9,27 @@
     </p>
 
     <div lu-busy="coursesView" class="col-xs-12 seven-cols">
-        <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-courses">
-                <div class="day-column-course" ng-repeat="course in getCoursesByDate(day.date)"
-                     ng-style="{'height': (course.EndPercent - course.BeginPercent) + '%',
-                     'top' : course.BeginPercent + '%', 'width': (100 / course.ParallelCoursesCount)+'%',
-                     'left': (course.ParallelCoursesPosition * (100 / course.ParallelCoursesCount)) + '%',
-                     'border-left': (course.ParallelCoursesPosition != 0) ? 'solid #505050 1px' : ''}">
-                    {{ course.Name }}
+        <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) + '%'}">
+                    {{hour | date : hourFormat}} -
+                </div>
+            </div>
+        </div>
+        <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-courses">
+                    <div class="day-column-course" ng-repeat="course in getCoursesByDate(day.date)" ng-click="showCourse(course)"
+                         ng-style="{'height': (course.EndPercent - course.BeginPercent) + '%',
+                         'top' : course.BeginPercent + '%', 'width': (100 / course.ParallelCoursesCount)+'%',
+                         'left': (course.ParallelCoursesPosition * (100 / course.ParallelCoursesCount)) + '%',
+                         'border-left': (course.ParallelCoursesPosition != 0) ? 'solid #505050 1px' : ''}">
+                        <span class="day-column-course-name">{{ course.Name }}</span>
+                        <div ng-repeat="room in course.RoomList">{{room.Name}}</div>
+                    </div>
                 </div>
             </div>
         </div>