schedule cleaning up, schedule table directive, url updating

client/app.js

@@ -28,28 +28,11 @@ app.config(function ($locationProvider, $routeProvider) {
             controller: "HomePageController",
             title: "ДХШ Шлиссельбурга"
         },
-        function () {
-            var default_route = {
-                name: "/schedule/:period?/:semester?",
-                templateUrl: "/views/schedule.html",
-                controller: "SchedulePageController",
-                title: "Расписание"
-            };
-
-            try {
-                if (window.matchMedia('(max-device-width: 30em)').matches) {
-                    return {
-                        name: "/schedule/:period?/:semester?",
-                        templateUrl: "/views/schedule-mobile.html",
-                        controller: "SchedulePageController",
-                        title: "Расписание"
-                    }
-                } else {
-                    return default_route;
-                }
-            } catch (e) {
-                return default_route;
-            }
+        {
+            name: "/schedule/:period?/:semester?",
+            templateUrl: "/views/schedule.html",
+            controller: "SchedulePageController",
+            title: "Расписание"
         },
         {
             name: "/team",
@@ -106,7 +89,6 @@ require("./filters/removeNewline")(app);
 require("./filters/uppercase-first")(app);
 require("./pages/home")(app);
 require("./pages/schedule")(app);
-require("./pages/schedule-mobile")(app);
 require("./pages/team")(app);
 require("./pages/gallery")(app);
 require("./pages/docs")(app);

client/data.js

@@ -6,7 +6,7 @@ angular.module("hudozhka.data", [])
     .service("team", function () {
         return require("../models/team");
     })
-    .service("schedule", function () {
+    .service("scheduleData", function () {
         return require("../models/schedule");
     })
     .service("docs", function () {

client/modules/schedule.js

@@ -1,17 +1,66 @@
 var getDates = require('../../utils/date').getDates;
 
 module.exports = angular.module('hudozka.schedule', [])
+    .directive('schedule', function($compile){
+        return {
+            restrict: 'E',
+            scope: {
+                groups: '='
+            },
+            link: function (scope, element) {
+                var template = `<schedule-table groups="${scope.groups}"></schedule-table>`;
+
+                try {
+                    if (window.matchMedia('(max-device-width: 30em)').matches) {
+                        template = `<schedule-slider groups="${scope.groups}"></schedule-slider>`
+                    }
+                } catch (e) {
+                }
+
+                element.html(template).show();
+                $compile(element.contents())(scope);
+            }
+        };
+    })
+    .directive('scheduleTable', function(){
+        return {
+            templateUrl: '/views/schedule/table.html',
+            link: function(scope, element){
+                var now = new Date();
+                var dates = getDates(now);
+
+                scope.isToday = function (weekDayIndex) {
+                    return (now.getDay() - 1) === weekDayIndex;
+                };
+
+                scope.weekDay = function (weekDayIndex) {
+                    return dates[weekDayIndex];
+                };
+
+                var $tbody = element.find('table tbody');
+                var $thead = element.find('table thead');
+
+                $(window).scroll(function () {
+                    if ($(this).scrollTop() >= 220) {
+                        $thead.addClass('fix animated fadeInDown');
+                        $tbody.addClass('fix');
+                    } else {
+                        $thead.removeClass('fix animated fadeInDown');
+                        $tbody.removeClass('fix');
+                    }
+                });
+            }
+        }
+    })
     .directive('scheduleSlider', function ($compile) {
         return {
             restrict: 'E',
             template: '<div class="schedule-slick"></div>',
-            scope: {
-                schedule: '='
-            },
+
             link: function (scope, element) {
                 var $slick = element.find('.schedule-slick');
 
-                scope.$watch('schedule', function (value) {
+                scope.$watch('groups', function (value) {
                     try {
                         $slick.slick('unslick');
                     } catch (e) {

client/pages/schedule-mobile.js

@@ -1,79 +0,0 @@
-var populate = require('../../utils/populate').populate;
-const course = require('../../models/course');
-
-function indexEquals(i) {
-    return function (_, index) {
-        return i === index;
-    }
-}
-
-function isRequested(period, semester) {
-    return function (schedule) {
-        return schedule.period === period && schedule.semester === semester;
-    }
-}
-
-module.exports = function (app) {
-    app.controller('MobileScheduleController', function ($scope, $http, $location, $routeParams, schedule, team) {
-        var current_period = $routeParams.period;
-        var current_semester = $routeParams.semester;
-        var isScheduleRequested = current_period && current_semester;
-
-        $http.get("/schedules", {cache: true})
-            .success(function (schedules) {
-                // By url params or last element
-                var select_fn = isScheduleRequested ? isRequested(current_period, current_semester) : indexEquals(schedules.length - 1);
-
-                schedules = schedules.map(function (schedule) {
-                    var sem = [['spring', 'Весена'], ['autumn', 'Осень']].reduce(function (s, word) {
-                        if (word[0] === schedule.semester) return word[1];
-                        else return s[1];
-                    });
-                    schedule.text = `${sem} ${schedule.period} года`;
-
-                    return schedule;
-                });
-
-                schedules.forEach(function (schedule, i) {
-                    if (select_fn(schedule, i)) {
-                        $scope.currentSchedule = schedules[i];
-                    }
-                });
-
-                $scope.schedules = schedules;
-                $scope.loadSchedule($scope.currentSchedule, isScheduleRequested);
-            });
-
-        $scope.loadSchedule = function (s, updateURL) {
-            var id = s._id;
-            var schedule_item = getScheduleByID(id);
-
-            if (schedule_item) {
-                var sem = schedule_item.semester;
-                var period = schedule_item.period;
-
-                var url = `/schedule/${period}/${sem}`;
-                $http.get(url, {cache: true})
-                    .success(function (scheduleRecord) {
-                        $scope.groups = schedule.populate(scheduleRecord.schedule, [
-                            populate(team.short, 'teacher'),
-                            populate(course.name, 'lesson')
-                        ]);
-
-                        if (updateURL) {
-                            $location.url(url);
-                        }
-                    });
-            }
-        };
-
-        function getScheduleByID(id) {
-            var schedules = $scope.schedules;
-            for (var i = 0, l = schedules.length; i < l; i++) {
-                var s = schedules[i];
-                if (id === s._id) return s;
-            }
-            return null;
-        }
-    });
-};

client/pages/schedule.js

@@ -1,100 +1,79 @@
-var populate = require("../../utils/populate").populate;
-const course = require("../../models/course");
+var populate = require('../../utils/populate').populate;
+const course = require('../../models/course');
+
+function indexEquals(i) {
+    return function (_, index) {
+        return i === index;
+    }
+}
+
+function isRequested(period, semester) {
+    return function (schedule) {
+        return schedule.period === period && schedule.semester === semester;
+    }
+}
 
 module.exports = function (app) {
-    app.controller("ScheduleController", function ($scope, $http, schedule, team) {
-        var now = new Date();
-        var dates = getDates(now);
+    app.controller('ScheduleController', function ($scope, $http, $location, $routeParams, scheduleData, team) {
+        var current_period = $routeParams.period;
+        var current_semester = $routeParams.semester;
+        var isScheduleRequested = current_period && current_semester;
 
         $http.get("/schedules", {cache: true})
             .success(function (schedules) {
-                var last = schedules.length - 1;
+                // By url params or last element
+                var select_fn = isScheduleRequested ? isRequested(current_period, current_semester) : indexEquals(schedules.length - 1);
 
-                $scope.schedules = schedules.map(function (schedule) {
-                    var sem = [["spring", "весеннего"], ["autumn", "осеннего"]].reduce(function (s, word) {
+                schedules = schedules.map(function (schedule) {
+                    var sem = [['spring', 'Весена'], ['autumn', 'Осень']].reduce(function (s, word) {
                         if (word[0] === schedule.semester) return word[1];
                         else return s[1];
                     });
+                    schedule.text = `${sem} ${schedule.period} года`;
 
-                    schedule.text = `Расписание ${sem} семестра ${schedule.period} года`;
                     return schedule;
                 });
-                $scope.schedules[last].selected = true;
-                $scope.currentSchedule = $scope.schedules[last]._id;
-                $scope.loadSchedule();
+
+                schedules.forEach(function (schedule, i) {
+                    if (select_fn(schedule, i)) {
+                        $scope.currentSchedule = schedules[i];
+                    }
+                });
+
+                $scope.schedules = schedules;
+                $scope.loadSchedule($scope.currentSchedule, isScheduleRequested);
             });
 
-        $scope.loadSchedule = function (id) {
-            var schedule_item = getScheduleByID(id || $scope.currentSchedule);
+        $scope.loadSchedule = function (s, updateURL) {
+            var id = s._id;
+            var schedule_item = getScheduleByID(id);
 
-            if(schedule_item) {
+            if (schedule_item) {
                 var sem = schedule_item.semester;
                 var period = schedule_item.period;
 
                 var url = `/schedule/${period}/${sem}`;
                 $http.get(url, {cache: true})
                     .success(function (scheduleRecord) {
-                        $scope.groups = schedule.populate(scheduleRecord.schedule, [
-                            populate(team.short, "teacher"),
-                            populate(course.name, "lesson")
+                        $scope.groups = scheduleData.populate(scheduleRecord.schedule, [
+                            populate(team.short, 'teacher'),
+                            populate(course.name, 'lesson')
                         ]);
+
+                        if (updateURL) {
+                            $location.url(url);
+                        }
                     });
             }
         };
 
         function getScheduleByID(id) {
             var schedules = $scope.schedules;
-            for (var i in schedules) {
+            for (var i = 0, l = schedules.length; i < l; i++) {
                 var s = schedules[i];
                 if (id === s._id) return s;
             }
             return null;
         }
-
-        $scope.isToday = function (weekDayIndex) {
-            return (now.getDay() - 1) === weekDayIndex;
-        };
-
-        $scope.weekDay = function (weekDayIndex) {
-            return dates[weekDayIndex];
-        };
-
-        $(window).scroll(function () {
-            if ($(this).scrollTop() >= 220) {
-                $(".schedule table thead").addClass("fix animated fadeInDown");
-                $(".schedule table tbody").addClass("fix");
-            } else {
-                $(".schedule table thead").removeClass("fix animated fadeInDown");
-                $(".schedule table tbody").removeClass("fix");
-            }
-        });
     });
-};
-
-/**
- * Generates list of numbers
- * @param  {Number} start starting value
- * @param  {Number} num   amount of numbers in list
- * @param  {Number} step  difference value
- * @return {Array}        list of numbers
- */
-function range(start, num, step) {
-    var list = [];
-    var val = start;
-    for (var i = 0; i < num; i++) {
-        list.push(val);
-        val += step;
-    }
-    return list;
-}
-
-function getDates(start) {
-    var day = start.getDay();
-    return range(0, 6, 1).reduce(function (dates, weekDay) {
-        var d = 1 + weekDay - day;
-        var time = start.getTime() + (1000 * 60 * 60 * 24) * d;
-        var date = new Date(time);
-        dates.push(date.getDate());
-        return dates;
-    }, []);
-}
+};

templates/views/schedule-mobile.html

@@ -1,9 +0,0 @@
-<div class="schedule" ng-controller="MobileScheduleController">
-    <p>
-        <label>
-            <select ng-model="currentSchedule" ng-change="loadSchedule(currentSchedule, true)" ng-options="s.text for s in schedules"></select>
-        </label>
-    </p>
-
-    <schedule-slider schedule="groups"></schedule-slider>
-</div>

templates/views/schedule.html

@@ -1,66 +1,9 @@
 <div class="schedule" ng-controller="ScheduleController">
     <p>
-        <select ng-model="currentSchedule" ng-change="loadSchedule(currentSchedule)">
-            <option ng-repeat="s in schedules" value="{{s._id}}" selected="{{s.selected}}">{{s.text}}</option>
-        </select>
+        <label>
+            <select ng-model="currentSchedule" ng-change="loadSchedule(currentSchedule, true)" ng-options="s.text for s in schedules"></select>
+        </label>
     </p>
 
-    <div class="schedule-block" ng-show="groups">
-        <table>
-            <thead class="">
-            <tr>
-                <th class="group">Гр.</th>
-                <th ng-class="{current: isToday(0)}">
-                    <p class="day">Понедельник</p>
-
-                    <p class="date">{{weekDay(0)}}</p>
-                </th>
-                <th ng-class="{current: isToday(1)}">
-                    <p class="day">Вторник</p>
-
-                    <p class="date">{{weekDay(1)}}</p>
-                </th>
-                <th ng-class="{current: isToday(2)}">
-                    <p class="day">Среда</p>
-
-                    <p class="date">{{weekDay(2)}}</p>
-                </th>
-                <th ng-class="{current: isToday(3)}">
-                    <p class="day">Четверг</p>
-
-                    <p class="date">{{weekDay(3)}}</p>
-                </th>
-                <th ng-class="{current: isToday(4)}">
-                    <p class="day">Пятница</p>
-
-                    <p class="date">{{weekDay(4)}}</p>
-                </th>
-                <th ng-class="{current: isToday(5)}">
-                    <p class="day">Суббота</p>
-
-                    <p class="date">{{weekDay(5)}}</p>
-                </th>
-            </tr>
-            </thead>
-            <tbody>
-            <tr ng-repeat="group in groups">
-                <td class="group">
-                    <p class="name">{{group.name}}</p>
-
-                    <p class="time">{{group.time}}</p>
-                </td>
-
-                <td ng-repeat="day in group.days track by $index" ng-class="{current: isToday($index)}">
-                    <p class="lesson"><a href="">{{day.lesson}}</a></p>
-
-                    <p class="teacher"><a href="">{{day.teacher}}</a></p>
-
-                    <p class="time">{{day.time[0]}}</p>
-
-                    <p class="time">{{day.time[1]}}</p>
-                </td>
-            </tr>
-            </tbody>
-        </table>
-    </div>
+    <schedule groups="groups"></schedule>
 </div>

templates/views/schedule/table.html

@@ -0,0 +1,58 @@
+<div class="schedule-block" ng-show="groups">
+    <table>
+        <thead class="">
+        <tr>
+            <th class="group">Гр.</th>
+            <th ng-class="{current: isToday(0)}">
+                <p class="day">Понедельник</p>
+
+                <p class="date">{{weekDay(0)}}</p>
+            </th>
+            <th ng-class="{current: isToday(1)}">
+                <p class="day">Вторник</p>
+
+                <p class="date">{{weekDay(1)}}</p>
+            </th>
+            <th ng-class="{current: isToday(2)}">
+                <p class="day">Среда</p>
+
+                <p class="date">{{weekDay(2)}}</p>
+            </th>
+            <th ng-class="{current: isToday(3)}">
+                <p class="day">Четверг</p>
+
+                <p class="date">{{weekDay(3)}}</p>
+            </th>
+            <th ng-class="{current: isToday(4)}">
+                <p class="day">Пятница</p>
+
+                <p class="date">{{weekDay(4)}}</p>
+            </th>
+            <th ng-class="{current: isToday(5)}">
+                <p class="day">Суббота</p>
+
+                <p class="date">{{weekDay(5)}}</p>
+            </th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr ng-repeat="group in groups">
+            <td class="group">
+                <p class="name">{{group.name}}</p>
+
+                <p class="time">{{group.time}}</p>
+            </td>
+
+            <td ng-repeat="day in group.days track by $index" ng-class="{current: isToday($index)}">
+                <p class="lesson"><a href="">{{day.lesson}}</a></p>
+
+                <p class="teacher"><a href="">{{day.teacher}}</a></p>
+
+                <p class="time">{{day.time[0]}}</p>
+
+                <p class="time">{{day.time[1]}}</p>
+            </td>
+        </tr>
+        </tbody>
+    </table>
+</div>