Showing holidays

app/scripts/app.js

@@ -13,7 +13,12 @@ angular
     $routeProvider
       .when('/', {
         templateUrl: 'views/main.html',
-        controller: 'MainCtrl'
+        controller: 'MainCtrl',
+        resolve: {
+          holidays: ['Holidayservice', function (Holidayservice) {
+            return Holidayservice.getHolidays();
+          }]
+        }
       })
       .otherwise({
         redirectTo: '/'

app/scripts/controllers/main.js

@@ -1,9 +1,9 @@
 'use strict';
 
 angular.module('fridagarApp')
-  .controller('MainCtrl', function ($scope, Holidayservice) {
-    $scope.buttonValue = 'Yee boy';
-    Holidayservice.getHolidays().then(function (holidays) {
-      console.log(holidays);
-    });
+  .controller('MainCtrl', function ($scope, holidays) {
+    //
+    // scope variables
+    //
+    $scope.holidays = holidays.result;
   });

app/scripts/directives/calendar.js

@@ -4,23 +4,30 @@ angular.module('fridagarApp')
   .directive('calendar', function () {
     return {
       restrict: 'A',
-      link: function postLink(scope, element, attrs) {
-        console.log(attrs);
-        var template =
-          '<div class="clndr-grid"> \
-            <div class="days-of-the-week clearfix"> \
-              <% _.each(daysOfTheWeek, function(day) { %> \
-                <div class="header-day"><%= day %></div> \
-              <% }); %> \
-              <div class="days clearfix"> \
-                <% _.each(days, function(day) { %> \
-                  <div class="<%= day.classes %>" id="<%= day.id %>"><span class="day-number"><%= day.day %></span></div> \
-                <% }); %> \
-              </div> \
-            </div> \
-          </div>';
-        $(element).clndr({
-          template: template
+      scope: {
+        events: '='
+      },
+      link: function postLink(scope, element) {
+        console.log(scope.events);
+        var _calendar,
+            _template =
+              '<div class="clndr-grid"> \
+                <div class="days-of-the-week clearfix"> \
+                  <% _.each(daysOfTheWeek, function(day) { %> \
+                    <div class="header-day"><%= day %></div> \
+                  <% }); %> \
+                  <div class="days clearfix"> \
+                    <% _.each(days, function(day) { %> \
+                      <div class="<%= day.classes %>" id="<%= day.id %>"><span class="day-number"><%= day.day %></span></div> \
+                    <% }); %> \
+                  </div> \
+                </div> \
+              </div>';
+        // finally, init the calendar
+        _calendar = $(element).clndr({
+          template: _template,
+          events: scope.events,
+          dateParameter: 'holidayDate'
         });
       }
     };

app/views/main.html

@@ -5,8 +5,7 @@
     <div class="row">
       <div class="span12">
         <div class="title-page">
-          <h2 class="title">Frídagar</h2>
-          <h3 class="title-description color-text">Hvenær er frí?</h3>
+          <h2 class="title">Frídagar.is <small class="title-description color-text">Hvenær er frí?</small></h2>
         </div>
       </div>
     </div>
@@ -15,7 +14,7 @@ <h3 class="title-description color-text">Hvenær er frí?</h3>
     <!-- Start BlockQuote/Tooltip Section -->
     <div class="row">
       <!-- Start CLNDR -->
-      <div class="cal clearfix" calendar></div>  
+      <div class="cal clearfix" calendar events="holidays"></div>  
       <!-- End CLNDR -->
     </div>
     <!-- End BlockQuote/Tooltip Section -->

test/spec/controllers/main.js

@@ -5,18 +5,31 @@ describe('Controller: MainCtrl', function () {
   // load the controller's module
   beforeEach(module('fridagarApp'));
 
-  var MainCtrl,
-    scope;
+  var initController,
+      scope,
+      Holidayservice;
 
   // Initialize the controller and a mock scope
-  beforeEach(inject(function ($controller, $rootScope) {
+  beforeEach(inject(function ($controller, $rootScope, $injector) {
     scope = $rootScope.$new();
-    MainCtrl = $controller('MainCtrl', {
-      $scope: scope
-    });
+    initController = function () {
+      return $controller('MainCtrl', {
+        $scope: scope,
+        holidays: { result: 1 }
+      });
+    };
+    Holidayservice = $injector.get('Holidayservice');
   }));
 
-  it('should attach a list of awesomeThings to the scope', function () {
-    expect(scope.buttonValue).toBeDefined();
+  describe('Initialization', function () {
+    beforeEach(function () {
+      initController();
+    });
+    it('should have a \'holidays\' object', function () {
+      expect(scope.holidays).toBeDefined();
+    });
+    it('should take the value of the \'result\' object', function () {
+      expect(scope.holidays).toBe(1);
+    });
   });
 });