calendar header; get courses by date

app/controllers/home.controller.js

@@ -3,8 +3,11 @@ angular.module('app')
         function($scope, $state, DataShareBusiness, WeeksBusiness) {
 
             $scope.DataShareBusiness = DataShareBusiness;
+            $scope.dateFormat = "dd MMM yyyy";
             $scope.courses = null;
-            $scope.days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
+            $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.getSheetCount = function()
             {
@@ -21,6 +24,44 @@ angular.module('app')
                 return sheetCount(DataShareBusiness.getCurrentGroupOrRoot())
             };
 
+            $scope.getMonday = function(d)
+            {
+                d = new Date(d);
+                var day = d.getDay(), diff = d.getDate() - day + (day == 0 ? -6:1); // adjust when day is sunday
+                d = new Date(d.setDate(diff));
+                d.setHours(0, 0, 0, 0);
+                return d;
+            };
+
+            $scope.setDates = function(monday)
+            {
+                $scope.days[0].date = new Date(monday);
+                for (var i = 1; i < $scope.days.length; ++i) {
+                    $scope.days[i].date = new Date(monday.setDate(monday.getDate() + 1));
+                }
+            };
+
+            $scope.getCourseListByDay = function(date)
+            {
+                if ($scope.courses == null || date == null) {
+                    return null;
+                }
+                return $scope.courses.DayList.find(function(day)
+                {
+                    var d = new Date(day.DateTime);
+                    return d.getTime() == date.getTime();
+                });
+            };
+
+            $scope.getCoursesByDate = function(date)
+            {
+                var courses = $scope.getCourseListByDay(date);
+                if (courses == null) {
+                    return [];
+                }
+                return ["42", "24"];
+            };
+
             $scope.$watch(function(){return DataShareBusiness.CurrentGroups}, function()
             {
                 var group = DataShareBusiness.getCurrentGroup();
@@ -33,6 +74,7 @@ angular.module('app')
                         .then(function(data)
                         {
                             $scope.courses = data;
+                            $scope.setDates($scope.getMonday(new Date()));
                         });
                 }
                 else {

app/less/app.less

@@ -48,39 +48,37 @@ footer {
   font-size: large;
 }
 
-@media (min-width: 768px){
-  .seven-cols .col-xs-1,
-  .seven-cols .col-sm-1,
-  .seven-cols .col-md-1,
-  .seven-cols .col-sm-1,
-  .seven-cols .col-lg-1  {
+@media (max-width: 479px){
+  .seven-cols .col-sm-1  {
     width: 100%;
     *width: 100%;
   }
 }
 
-@media (min-width: 992px) {
-  .seven-cols .col-xs-1,
-  .seven-cols .col-sm-1,
-  .seven-cols .col-md-1,
-  .seven-cols .col-sm-1,
-  .seven-cols .col-lg-1 {
+@media (min-width: 480px) {
+  .seven-cols .col-sm-1  {
     width: 14.285714285714285714285714285714%;
     *width: 14.285714285714285714285714285714%;
   }
 }
 
-/**
- *  The following is not really needed in this case
- *  Only to demonstrate the usage of @media for large screens
- */
-@media (min-width: 1200px) {
-  .seven-cols .col-xs-1,
-  .seven-cols .col-sm-1,
-  .seven-cols .col-md-1,
-  .seven-cols .col-sm-1,
-  .seven-cols .col-lg-1 {
-    width: 14.285714285714285714285714285714%;
-    *width: 14.285714285714285714285714285714%;
-  }
+.day-column {
+  .text-center();
+  border: solid #505050 1px;
+  height: 24*30px;
+  padding: 0;
+}
+
+.day-column-header {
+  background-color: darkorange;
+  color: #2e6da4;
+  font-weight: bold;
+}
+
+.day-column-header-day {
+  padding-top: 5px;
+}
+
+.day-column-header-date {
+  padding-bottom: 5px;
 }

app/views/home.html

@@ -9,10 +9,14 @@
     </p>
 
     <div lu-busy="coursesView" class="col-xs-12 seven-cols">
-        <div ng-repeat="day in days" class="col-xs-1">
-            {{day}}
+        <div ng-repeat="day in days" class="col-sm-1 day-column">
+            <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 ng-repeat="course in getCoursesByDate(day.date)" ng-style="{'heigth': '0'}">
+                {{course}}
+            </div>
         </div>
+        {{ courses }}
     </div>
-    {{ courses }}
 
 </div>