diff --git a/src/client/app.js b/src/client/app.js index 897d8812..f00cdccf 100644 --- a/src/client/app.js +++ b/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'; diff --git a/src/client/components/Schedule.js b/src/client/components/Schedule.js new file mode 100644 index 00000000..e014df3e --- /dev/null +++ b/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) { + } + } + }); +}; \ No newline at end of file diff --git a/src/client/components/ScheduleRecord.js b/src/client/components/ScheduleRecord.js new file mode 100644 index 00000000..4d40ea55 --- /dev/null +++ b/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 + }) +}; diff --git a/src/client/components/ScheduleSlide.js b/src/client/components/ScheduleSlide.js new file mode 100644 index 00000000..4f683b4a --- /dev/null +++ b/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 + }) +}; \ No newline at end of file diff --git a/src/client/components/ScheduleSlider.js b/src/client/components/ScheduleSlider.js new file mode 100644 index 00000000..6503acda --- /dev/null +++ b/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 `` + }).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); + } + }); + } + } + }); +}; diff --git a/src/client/components/ScheduleTable.js b/src/client/components/ScheduleTable.js new file mode 100644 index 00000000..8c669adf --- /dev/null +++ b/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'); + // } + //}); + } + }); +}; \ No newline at end of file diff --git a/src/client/controllers/ScheduleController.js b/src/client/controllers/ScheduleController.js index f47bc0b8..bd1f02be 100644 --- a/src/client/controllers/ScheduleController.js +++ b/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); }); } }; diff --git a/src/client/modules/schedule.js b/src/client/modules/schedule.js deleted file mode 100644 index c72403c3..00000000 --- a/src/client/modules/schedule.js +++ /dev/null @@ -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 = ``; - - try { - if (window.matchMedia('(max-device-width: 30em)').matches) { - template = `` - } - } 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: '
', - - 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 `` - }).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] - } - }) - } - }); -} \ No newline at end of file diff --git a/src/style/schedule-table.scss b/src/style/components/schedule-table.scss similarity index 95% rename from src/style/schedule-table.scss rename to src/style/components/schedule-table.scss index 8500c0f5..e2738f84 100644 --- a/src/style/schedule-table.scss +++ b/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; diff --git a/src/style/schedule.scss b/src/style/schedule.scss index 4c0553ab..b5a1828b 100644 --- a/src/style/schedule.scss +++ b/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; - } -} \ No newline at end of file +//.schedule { +// position: relative; +// margin: 30px auto 0 auto; +// padding-bottom: 50px; +// text-align: center; +// +// & > p { +// margin: 0 0 1em; +// } +//} \ No newline at end of file diff --git a/src/style/style.scss b/src/style/style.scss index b4913191..bce8c8ed 100644 --- a/src/style/style.scss +++ b/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"; diff --git a/src/templates/components/schedule-record.html b/src/templates/components/schedule-record.html new file mode 100644 index 00000000..910c159a --- /dev/null +++ b/src/templates/components/schedule-record.html @@ -0,0 +1,8 @@ +
+
Группа {{$ctrl.record.name}} ({{$ctrl.record.time}})
+
+

{{$ctrl.record.content.lesson}}

+

{{$ctrl.record.content.teacher}}

+

{{time}}

+
+
\ No newline at end of file diff --git a/src/templates/components/schedule-slide.html b/src/templates/components/schedule-slide.html new file mode 100644 index 00000000..2b739cca --- /dev/null +++ b/src/templates/components/schedule-slide.html @@ -0,0 +1,10 @@ +
+
+

{{$ctrl.day.day}}

+

{{$ctrl.day.date}}

+
+ +
+ +
+
\ No newline at end of file diff --git a/src/templates/components/schedule-slider.html b/src/templates/components/schedule-slider.html new file mode 100644 index 00000000..526789b5 --- /dev/null +++ b/src/templates/components/schedule-slider.html @@ -0,0 +1 @@ +
\ No newline at end of file diff --git a/src/templates/views/schedule/table.html b/src/templates/components/schedule-table.html similarity index 56% rename from src/templates/views/schedule/table.html rename to src/templates/components/schedule-table.html index b18b724f..b59dc099 100644 --- a/src/templates/views/schedule/table.html +++ b/src/templates/components/schedule-table.html @@ -1,49 +1,49 @@ -
+
- - - - - - - + -
Гр. +

Понедельник

-

{{weekDay(0)}}

+

{{$ctrl.weekDay(0)}}

 +

Вторник

-

{{weekDay(1)}}

+

{{$ctrl.weekDay(1)}}

 +

Среда

-

{{weekDay(2)}}

+

{{$ctrl.weekDay(2)}}

 +

Четверг

-

{{weekDay(3)}}

+

{{$ctrl.weekDay(3)}}

 +

Пятница

-

{{weekDay(4)}}

+

{{$ctrl.weekDay(4)}}

 +

Суббота

-

{{weekDay(5)}}

+

{{$ctrl.weekDay(5)}}

{{group.name}}

{{group.time}}

 +

{{day.lesson}}

{{day.teacher}}

{{day.time[0]}}

diff --git a/src/templates/components/schedule.html b/src/templates/components/schedule.html new file mode 100644 index 00000000..570470a6 --- /dev/null +++ b/src/templates/components/schedule.html @@ -0,0 +1,8 @@ +
+ + +
\ No newline at end of file diff --git a/src/templates/views/schedule.html b/src/templates/views/schedule.html index f39f1cf0..537e0809 100644 --- a/src/templates/views/schedule.html +++ b/src/templates/views/schedule.html @@ -1,9 +1,13 @@ -
+

- +
\ No newline at end of file diff --git a/src/templates/views/schedule/record.html b/src/templates/views/schedule/record.html deleted file mode 100644 index fccc846d..00000000 --- a/src/templates/views/schedule/record.html +++ /dev/null @@ -1,8 +0,0 @@ -
-
Группа {{record.name}} ({{record.time}})
-
-

{{record.content.lesson}}

-

{{record.content.teacher}}

-

{{time}}

-
-
\ No newline at end of file diff --git a/src/templates/views/schedule/slide.html b/src/templates/views/schedule/slide.html deleted file mode 100644 index 1966d34f..00000000 --- a/src/templates/views/schedule/slide.html +++ /dev/null @@ -1,10 +0,0 @@ -
-
-

{{day.day}}

-

{{day.date}}

-
- -
- -
-
\ No newline at end of file