diff --git a/assets/style/schedule-mobile.scss b/assets/style/schedule-mobile.scss new file mode 100644 index 00000000..3c18a57f --- /dev/null +++ b/assets/style/schedule-mobile.scss @@ -0,0 +1,61 @@ +.schedule-slider { + width: 100%; + max-width: 30em; + //width: 90%; + //margin: 0 auto; +} + +.schedule-slider__slide { + height: 100%; + overflow-y: auto; + + &.current { + border-left: .3em solid #4b8ff3; + border-right: .3em solid #4b8ff3; + } +} + +.schedule-slider__body { +} + +.schedule-slider__head { + text-align: center; + font-size: 2em; + margin: 0 0 .5em; +} + +.schedule-record { + min-height: 10em; + text-align: center; + + &.even{ + background-color: #f3f3fd; + } + + &.empty { + .schedule-record__head{ + color: #bbb; + } + } + + p { + margin: .2em 0; + } +} + +.schedule-record__head { + padding: .25em 0; + font-size: 1.2em; +} + +.schedule-record__main { +} + +.schedule-record__name { + font-weight: bold; + font-size: 1.2em; +} + +.schedule-record__group { + position: absolute; +} \ No newline at end of file diff --git a/assets/style/schedule.scss b/assets/style/schedule.scss index a76a39d5..e77d5d7a 100644 --- a/assets/style/schedule.scss +++ b/assets/style/schedule.scss @@ -16,7 +16,8 @@ text-align: center; & > p{ - text-align: right; + margin: 0 0 1em; + //text-align: right; } .schedule-block{ diff --git a/client/app.js b/client/app.js index cf34cee7..f181fcee 100644 --- a/client/app.js +++ b/client/app.js @@ -2,13 +2,20 @@ * Created by tmshv on 04/11/14. */ -var app = angular.module("hudozhka", [ +var deps = [ + require('./modules/schedule') +] + .map(function(m){ + return m.name; + }); + +var app = angular.module("hudozhka", deps.concat([ "hudozhka.data", "ngRoute", "angulartics", "angulartics.google.analytics", "angularSpinner" -]); +])); app.config(function ($locationProvider, $routeProvider) { $locationProvider.hashPrefix("!"); @@ -19,25 +26,42 @@ app.config(function ($locationProvider, $routeProvider) { name: "/", templateUrl: "/views/home.html", controller: "HomePageController", - title:"ДХШ Шлиссельбурга" + title: "ДХШ Шлиссельбурга" }, - { - name: "/schedule", - templateUrl: "/views/schedule.html", - controller: "SchedulePageController", - 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: "/team", templateUrl: "/views/team.html", controller: "TeamPageController", - title:"Преподаватели" + title: "Преподаватели" }, { name: "/gallery", templateUrl: "/views/gallery.html", controller: "GalleryPageController", - title:"Работы учащихся" + title: "Работы учащихся" }, { name: "/gallery/:year/:course/:album", @@ -53,6 +77,7 @@ app.config(function ($locationProvider, $routeProvider) { ]; routes.forEach(function (route) { + if (typeof route === 'function') route = route(); $routeProvider.when(route.name, route); }); @@ -61,10 +86,10 @@ app.config(function ($locationProvider, $routeProvider) { }); }); -app.run(function($location, $rootScope, $http) { +app.run(function ($location, $rootScope, $http) { $rootScope.$on("$routeChangeSuccess", function (event, current) { var title = current["$$route"].title; - if(title) $rootScope.title = title; + if (title) $rootScope.title = title; }); $http.defaults.headers.common["Accept"] = "application/json"; @@ -81,6 +106,7 @@ 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); diff --git a/client/modules/schedule.js b/client/modules/schedule.js new file mode 100644 index 00000000..1d68beef --- /dev/null +++ b/client/modules/schedule.js @@ -0,0 +1,90 @@ +var getDates = require('../../utils/date').getDates; + +module.exports = angular.module('hudozka.schedule', []) + .directive('scheduleSlider', function ($compile) { + return { + restrict: 'E', + template: '
', + scope: { + schedule: '=' + }, + link: function (scope, element) { + var $slick = element.find('.schedule-slick'); + + scope.$watch('schedule', 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/client/pages/schedule-mobile.js b/client/pages/schedule-mobile.js new file mode 100644 index 00000000..75353b6a --- /dev/null +++ b/client/pages/schedule-mobile.js @@ -0,0 +1,79 @@ +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; + } + }); +}; \ No newline at end of file diff --git a/templates/main.html b/templates/main.html index 8dd475a2..233322f8 100644 --- a/templates/main.html +++ b/templates/main.html @@ -18,6 +18,9 @@ + + + diff --git a/templates/views/schedule-mobile.html b/templates/views/schedule-mobile.html new file mode 100644 index 00000000..7334eb7b --- /dev/null +++ b/templates/views/schedule-mobile.html @@ -0,0 +1,9 @@ +
+

+ +

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

{{record.content.lesson}}

+

{{record.content.teacher}}

+

{{time}}

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

{{day.day}}

+

{{day.date}}

+
+ +
+ +
+
\ No newline at end of file