Schedule ES6 update

src/client/app.js

@@ -12,6 +12,11 @@ import Timeline from './components/Timeline';
 import TimelineRecord from './components/TimelineRecord';
 import TimelineRecordPost from './components/TimelineRecordPost';
 import TimelineRecordInstagram from './components/TimelineRecordInstagram';
+import Schedule from './components/Schedule';
+import ScheduleTable from './components/ScheduleTable';
+import ScheduleSlider from './components/ScheduleSlider';
+import ScheduleSlide from './components/ScheduleSlide';
+import ScheduleRecord from './components/ScheduleRecord';
 import AppController from './controllers/AppController';
 import HomeController from './controllers/HomeController';
 import ScheduleController from './controllers/ScheduleController';
@@ -29,17 +34,13 @@ import IOService from './services/io';
 import MenuService from './services/menu';
 import api from './api/api';
 
-let deps = [
-    require('./modules/schedule')
-].map(m => m.name);
-
-let app = angular.module('hudozka', deps.concat([
+let app = angular.module('hudozka', [
     'hudozhka.data',
     'ngRoute',
     'angulartics',
     'angulartics.google.analytics',
     'angularSpinner'
-]));
+]);
 
 app.config(($locationProvider, $routeProvider) => {
     $locationProvider.hashPrefix('!');
@@ -129,6 +130,11 @@ app.run(($location, $rootScope, $http) => {
     DocumentsController,
     CopyrightController,
     ContactsController,
+    Schedule,
+    ScheduleTable,
+    ScheduleSlider,
+    ScheduleSlide,
+    ScheduleRecord,
     function (app) {
         app.controller('HomePageController', ($scope) => {
             $scope.pageClass = 'page-home';

src/client/components/Schedule.js

@@ -0,0 +1,20 @@
+import template from '../../templates/components/schedule.html';
+
+export default function(app) {
+    app.component('schedule', {
+        bindings: {
+            schedule: '<'
+        },
+        template: template,
+        controller: function () {
+            this.type = 'table';
+
+            try {
+                if (window.matchMedia('(max-device-width: 30em)').matches) {
+                    this.type = 'slider';
+                }
+            } catch (e) {
+            }
+        }
+    });
+};

src/client/components/ScheduleRecord.js

@@ -0,0 +1,11 @@
+import template from '../../templates/components/schedule-record.html';
+
+export default function(app) {
+    app.component('scheduleRecord', {
+        bindings: {
+            record: '<',
+            i: '<'
+        },
+        template: template
+    })
+};

src/client/components/ScheduleSlide.js

@@ -0,0 +1,10 @@
+import template from '../../templates/components/schedule-slide.html';
+
+export default function(app) {
+    app.component('scheduleSlide', {
+        bindings: {
+            day: '<'
+        },
+        template: template
+    })
+};

src/client/components/ScheduleSlider.js

@@ -0,0 +1,73 @@
+import template from '../../templates/components/schedule-slider.html';
+import {getDates} from '../../utils/date';
+
+function week(schedule) {
+    let now = new Date();
+    let dates = getDates(now);
+
+    return ['Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота']
+        .map((day, i) => {
+            return {
+                current: i === now.getDay() - 1,
+                day: day,
+                date: dates[i],
+                groups: schedule.map(group => {
+                    return {
+                        name: group.name,
+                        time: group.time,
+                        content: group.days[i]
+                    }
+                })
+            }
+        });
+}
+
+export default function(app) {
+    app.directive('scheduleSlider', ($compile) => {
+        return {
+            restrict: 'E',
+            template: template,
+            scope:{
+                schedule: '='
+            },
+            link: function (scope, element) {
+                let $slick = element.find('.schedule-slick');
+
+                scope.$watch('schedule', value => {
+                    try {
+                        $slick.slick('unslick');
+                    } catch (e) {
+
+                    }
+
+                    if (value) {
+                        let days = week(value);
+                        scope.days = days;
+
+                        $slick.html(
+                            days.map((day, i) => {
+                                return `<schedule-slide day="days[${i}]"></schedule-slide>`
+                            }).join('')
+                        ).show();
+                        $compile($slick.contents())(scope);
+
+                        $slick.slick({
+                            mobileFirst: true,
+                            infinite: false,
+                            dots: false,
+                            arrows: false,
+                            touchThreshold: 20,
+                            speed: 250,
+                            slidesToShow: 1,
+                            centerMode: false
+                        });
+
+                        let now = new Date();
+                        let currentWeekIndex = now.getDay() - 1;
+                        $slick.slick('slickGoTo', currentWeekIndex);
+                    }
+                });
+            }
+        }
+    });
+};

src/client/components/ScheduleTable.js

@@ -0,0 +1,56 @@
+import template from '../../templates/components/schedule-table.html';
+import {getDates} from '../../utils/date';
+
+export default function(app) {
+    app.component('scheduleTable', {
+        bindings: {
+            schedule: '<'
+        },
+        template: template,
+        controller: function () {
+            const now = new Date();
+            const dates = getDates(now);
+
+            this.isToday = weekDayIndex => (now.getDay() - 1) === weekDayIndex;
+            this.weekDay = weekDayIndex => dates[weekDayIndex];
+
+            //var $tbody = element.find('table tbody');
+            //var $thead = element.find('table thead');
+
+            //let setHeadWidth = () => {
+            //    var $td_list = element.find('table tbody tr:first-child td');
+            //    $td_list.each(function (i) {
+            //        var w = this.offsetWidth;
+            //        $thead.find('th')[i].style.width = `${w}px`;
+            //    });
+            //};
+
+            //let resetHeadWidth = () => {
+            //    var $td_list = element.find('table tbody tr:first-child td');
+            //    $td_list.each(function (i) {
+            //        var w = this.offsetWidth;
+            //        $thead.find('th')[i].style.width = null;
+            //    });
+            //};
+
+            //var min;
+            //var max;
+            //$(window).scroll(function () {
+            //    const scrollOffset = 150;
+            //    if(!min) min = element.find('table tbody tr:first-child')[0].offsetTop + scrollOffset;
+            //    if(!max) max = element.find('table tbody tr:last-child')[0].offsetTop + scrollOffset;
+            //
+            //    var scroll = $(this).scrollTop();
+            //    if (scroll >= min && scroll <= max) {
+            //        setHeadWidth();
+            //        $thead.addClass('fix animated fadeInDown');
+            //        $tbody.addClass('fix');
+            //    } else {
+            //        resetHeadWidth();
+            //        $thead.removeClass('fix animated fadeInDown');
+            //        $tbody.removeClass('fix');
+            //    }
+            //});
+        }
+    });
+};

src/client/controllers/ScheduleController.js

@@ -48,7 +48,7 @@ export default function (app) {
                 $scope.loadSchedule($scope.currentSchedule, isScheduleRequested);
             });
 
-        $scope.loadSchedule = (s, updateURL) => {
+        $scope.loadSchedule = (s, doUpdateURL) => {
             let id = s._id;
             let schedule_item = getScheduleByID(id);
 
@@ -59,12 +59,12 @@ export default function (app) {
                 let url = `/schedule/${period}/${sem}`;
                 $http.get(url, {cache: true})
                     .success(scheduleRecord => {
-                        $scope.groups = scheduleData.populate(scheduleRecord.schedule, [
+                        $scope.schedule = scheduleData.populate(scheduleRecord.schedule, [
                             populate(team.short, 'teacher'),
                             populate(getCourseNameByID, 'lesson')
                         ]);
 
-                        if (updateURL) $location.url(url);
+                        if (doUpdateURL) $location.url(url);
                     });
             }
         };

src/client/modules/schedule.js

@@ -1,166 +0,0 @@
-import {getDates} from '../../utils/date';
-
-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 this_element = element[0];
-
-                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');
-
-                let setHeadWidth = () => {
-                    var $td_list = element.find('table tbody tr:first-child td');
-                    $td_list.each(function (i) {
-                        var w = this.offsetWidth;
-                        $thead.find('th')[i].style.width = `${w}px`;
-                    });
-                };
-
-                let resetHeadWidth = () => {
-                    var $td_list = element.find('table tbody tr:first-child td');
-                    $td_list.each(function (i) {
-                        var w = this.offsetWidth;
-                        $thead.find('th')[i].style.width = null;
-                    });
-                };
-
-                var min;
-                var max;
-                $(window).scroll(function () {
-                    const scrollOffset = 150;
-                    if(!min) min = element.find('table tbody tr:first-child')[0].offsetTop + scrollOffset;
-                    if(!max) max = element.find('table tbody tr:last-child')[0].offsetTop + scrollOffset;
-
-                    var scroll = $(this).scrollTop();
-                    if (scroll >= min && scroll <= max) {
-                        setHeadWidth();
-                        $thead.addClass('fix animated fadeInDown');
-                        $tbody.addClass('fix');
-                    } else {
-                        resetHeadWidth();
-                        $thead.removeClass('fix animated fadeInDown');
-                        $tbody.removeClass('fix');
-                    }
-                });
-            }
-        }
-    })
-    .directive('scheduleSlider', function ($compile) {
-        return {
-            restrict: 'E',
-            template: '<div class="schedule-slick"></div>',
-
-            link: function (scope, element) {
-                var $slick = element.find('.schedule-slick');
-
-                scope.$watch('groups', function (value) {
-                    try {
-                        $slick.slick('unslick');
-                    } catch (e) {
-
-                    }
-
-                    if (value) {
-                        var days = week(value);
-                        scope.days = days;
-
-                        $slick.html(
-                            days.map(function (day, i) {
-                                return `<schedule-slide day="days[${i}]"></schedule-slide>`
-                            }).join('')
-                        ).show();
-                        $compile($slick.contents())(scope);
-
-                        $slick.slick({
-                            mobileFirst: true,
-                            infinite: false,
-                            dots: false,
-                            arrows: false,
-                            touchThreshold: 20,
-                            speed: 250,
-                            slidesToShow: 1,
-                            centerMode: false
-                        });
-
-                        var now = new Date();
-                        var currentWeekIndex = now.getDay() - 1;
-                        $slick.slick('slickGoTo', currentWeekIndex);
-                    }
-                });
-            }
-        }
-    })
-    .directive('scheduleSlide', function () {
-        return {
-            restrict: 'E',
-            templateUrl: "/views/schedule/slide.html",
-            scope: {
-                day: '='
-            }
-        }
-    })
-    .directive('scheduleRecord', function () {
-        return {
-            restrict: 'E',
-            templateUrl: "/views/schedule/record.html",
-            scope: {
-                record: '=',
-                i: '='
-            }
-        }
-    });
-
-function week(schedule) {
-    var now = new Date();
-    var dates = getDates(now);
-
-    return ['Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота']
-        .map(function (day, i) {
-            return {
-                current: i === now.getDay() - 1,
-                day: day,
-                date: dates[i],
-                groups: schedule.map(function (group) {
-                    return {
-                        name: group.name,
-                        time: group.time,
-                        content: group.days[i]
-                    }
-                })
-            }
-        });
-}

src/style/components/schedule-table.scss

@@ -1,4 +1,6 @@
-$current-week-day-color: #4b8ff3;
+@import "../variables";
+
+$current-week-day-color: $blue-color;
 
 .schedule-table {
   margin: 0 auto;
@@ -7,7 +9,7 @@ $current-week-day-color: #4b8ff3;
   position: relative;
 
   table {
-    margin: 2em auto;
+    //margin: 2em auto;
     border-spacing: 0;
     text-align: center;
 

src/style/schedule.scss

@@ -1,10 +1,10 @@
-.schedule {
-    position: relative;
-    margin: 30px auto 0 auto;
-    padding-bottom: 50px;
-    text-align: center;
-
-    & > p {
-        margin: 0 0 1em;
-    }
-}
+//.schedule {
+//    position: relative;
+//    margin: 30px auto 0 auto;
+//    padding-bottom: 50px;
+//    text-align: center;
+//
+//    & > p {
+//        margin: 0 0 1em;
+//    }
+//}

src/style/style.scss

@@ -7,3 +7,4 @@
 @import "./components/timeline-record";
 @import "./components/timeline-record-post";
 @import "./components/timeline-record-instagram";
+@import "./components/schedule-table";

src/templates/components/schedule-record.html

@@ -0,0 +1,8 @@
+<div class="schedule-record" ng-class="{even: $ctrl.i % 2 === 0, empty: !$ctrl.record.content.lesson}">
+    <div class="schedule-record__head">Группа {{$ctrl.record.name}} ({{$ctrl.record.time}})</div>
+    <div class="schedule-record__main">
+        <p class="schedule-record__name">{{$ctrl.record.content.lesson}}</p>
+        <p class="schedule-record__tutor">{{$ctrl.record.content.teacher}}</p>
+        <p class="schedule-record__time" ng-repeat="time in $ctrl.record.content.time">{{time}}</p>
+    </div>
+</div>

src/templates/components/schedule-slide.html

@@ -0,0 +1,10 @@
+<div class="schedule-slider__slide" ng-class="{current: $ctrl.day.current}">
+    <div class="schedule-slider__head">
+        <p>{{$ctrl.day.day}}</p>
+        <p>{{$ctrl.day.date}}</p>
+    </div>
+
+    <div class="schedule-slider__body">
+        <schedule-record ng-repeat="group in $ctrl.day.groups track by $index" record="group" i="$index"></schedule-record>
+    </div>
+</div>

src/templates/components/schedule-slider.html

@@ -0,0 +1 @@
+<div class="schedule-slick"></div>

src/templates/components/schedule-table.html

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

src/templates/components/schedule.html

@@ -0,0 +1,8 @@
+<div ng-switch="$ctrl.type">
+    <schedule-slider schedule="$ctrl.schedule"
+        ng-switch-when="slider"
+    ></schedule-slider>
+    <schedule-table schedule="$ctrl.schedule"
+        ng-switch-default
+    ></schedule-table>
+</div>

src/templates/views/schedule.html

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

src/templates/views/schedule/record.html

@@ -1,8 +0,0 @@
-<div class="schedule-record" ng-class="{even: i % 2 === 0, empty: !record.content.lesson}">
-    <div class="schedule-record__head">Группа {{record.name}} ({{record.time}})</div>
-    <div class="schedule-record__main">
-        <p class="schedule-record__name">{{record.content.lesson}}</p>
-        <p class="schedule-record__tutor">{{record.content.teacher}}</p>
-        <p class="schedule-record__time" ng-repeat="time in record.content.time">{{time}}</p>
-    </div>
-</div>

src/templates/views/schedule/slide.html

@@ -1,10 +0,0 @@
-<div class="schedule-slider__slide" ng-class="{current: day.current}">
-    <div class="schedule-slider__head">
-        <p>{{day.day}}</p>
-        <p>{{day.date}}</p>
-    </div>
-
-    <div class="schedule-slider__body">
-        <schedule-record ng-repeat="group in day.groups track by $index" record="group" i="$index"></schedule-record>
-    </div>
-</div>