schedule update, mobile schedule
This commit is contained in:
tmshv committed
1 parent
5ad7caf844
commit
27b1cfbec8
9 files changed
+300
-13
No files matched your search
@@ -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;
|
||||
}
|
||||
@@ -16,7 +16,8 @@
|
||||
text-align: center;
|
||||
|
||||
& > p{
|
||||
text-align: right;
|
||||
margin: 0 0 1em;
|
||||
//text-align: right;
|
||||
}
|
||||
|
||||
.schedule-block{
|
||||
|
||||
+38
-12
@@ -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);
|
||||
|
||||
@@ -0,0 +1,90 @@
|
||||
var getDates = require('../../utils/date').getDates;
|
||||
|
||||
module.exports = angular.module('hudozka.schedule', [])
|
||||
.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) {
|
||||
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]
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
});
|
||||
};
|
||||
@@ -18,6 +18,9 @@
|
||||
<link href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet">
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.5.7/slick.css"/>
|
||||
<script src="//cdn.jsdelivr.net/jquery.slick/1.5.7/slick.min.js"></script>
|
||||
|
||||
<script src="/data.js"></script>
|
||||
<script src="/app.js"></script>
|
||||
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
<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>
|
||||
@@ -0,0 +1,8 @@
|
||||
<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>
|
||||
@@ -0,0 +1,10 @@
|
||||
<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>
|
||||
Reference in new issue
Block a user