Доступно на gh-pages по ссылке
Лекции для разных школ доступны переключением по табам с соответствующими названиями школ.
Общие лекции выделены лейблом.
Для будущих лекций отображается дата и время проведения, для прошедших - ссылки на материалы и видео (убедиться в корректности отображения возможно после редактирования даты в задании №2).
При клике на имя спикера появляется окно с информацией. Окно пропадает при повторном клике на его же имя.
Работоспособность и адаптивность страницы протестирована в различных браузерах.
| Chrome | Yandex Browser | Safari | Opera | Firefox | Internet Explorer | |
|---|---|---|---|---|---|---|
| Desktop, OSX | ✓ | ✓ | ✓ | ✓ | ✓ | |
| Desktop, OSX, responsive mode | ✓✓ | ✓✓ | ? | ✓✓ | ✓✓ | |
| Mobile, iOS | ✓✓ | ✓✓ | ✓✓ | ✓✓ | ✓✓ | |
| Desktop, Windows | ✓ | |||||
| Desktop, Windows, responsive mode | ? | |||||
| Mobile, Windows Phone | ✓✓ |
✓ - тестировалось, работоспособно
✓✓ - тестировалось, работоспособно и адаптивно
? - тестировалось, работоспособно, но не адаптивно
По клику на "Редактирование" можно переключиться на интерфейс задания №2
Доступно на gh-pages по ссылке
Работоспособность веб-интерфейса гарантирована в браузерах: Chrome, Yandex Browser, Opera.
По умолчанию отображается информация о всех лекциях школы (аудитория, тема, дата и время). Выбрать нужную школу возможно переключением в селекте. По клику на "К выбору аудитории" отображается информация о лекциях выбранной аудитории, переключаться между которыми также можно селектом. Вернуться к выбору школ можно по клику на "К выбору школы"
Для каждой из таблиц возможна фильрация по дате. Для этого необходимо ввести даты начала и окончания в указанном формате (предполагается, что все лекции для 2017 года и выбор года не предусмотрен) и нажать на "Показать". Возможно ввести и какую-либо одну из дат и обе сразу.
В режиме отображения школ есть возможность редактирования и добавления данных о лекциях при нажатии на соответствующие кнопки. Если при добавлении/редактировании какое-то поле осталось незаполненным, то сохранение не срабатывает.
При сохранении отредактированных и добавляемых лекций осуществляется проверка по условиям:
- вместимость аудитории не меньше количества студентов школы
- в аудитории нет лекций в это время
- у школы нет лекций в это время (предполагается, что длительность лекции - два часа)
Если какое-либо из этих условий не выполнено, то сохранение/редактирование отменяется и показывается окно с ошибкой, скрыть которое можно кликом на него.
В любой момент редактирование и сохранение можно отменить, нажав на "отмена".
Ни для каких инпутов нет валидации, поэтому для корректной работы необходимо вводить данные в верном формате, указанном на форме.
Также можно проверить новые данные о лекциях, вернувшись в таблицу с расписанием занятий по клику на "Расписание".
Пример данных для тестирования:
- ввести начальную дату 04.04, конечную 19.05, по клику на "Показать" остаются 4 лекции, попадающие в указанный интервал дат.
- по клику на "Редактировать" рядом с последней лекцией из школы INTERFACE изменить дату на 2017-04-07 (или у любой лекции, кроме той, что уже имеет эту дату), по клику на "Сохранить" показан блок с ошибкой сохранения.
- изменить дату лекции 2017-04-07 на 2017-06-07, видно, что дата поменялась успешно, можно переключиться на табу с расписанием и увидеть, что т.к. теперь эта лекция стала будущей, то для нее показаны дата и время вместо ссылок на материалы и видео.
- по клику на "Добавить" для школы INTERFACE ввести Желтая, произвольную тему лекции, 2017-05-22, 19:00, по клику на "Сохранить" показан блок с ошибкой сохранения.
- по клику на "Добавить" для школы INTERFACE ввести Синяя, произвольную тему лекции, 2017-06-01, 18:00, по клику на "Сохранить" видна успешно сохраненная лекция, также она отображается в табе с расписанием.
Библиотека состоит из следующих функций:
- фильтрация лекций школы по заданным датам, файл
schedule/src/edit-lib/findLectures.js - фильтрация лекций аудитории по заданным датам, файл
schedule/src/edit-lib/findLectures.js - проверка вместимости аудитории для заданной школы, файл
schedule/src/edit-lib/checkRoomCapacity.js - проверка наличия лекций у школы в заданное время, файл
schedule/src/edit-lib/checkSchoolLoading.js - проверка наличия лекций у аудитории в заданное время, файл
schedule/src/edit-lib/checkRoomLoading.js
В указанных файлах в JSDoc описаны параметры функций, возвращаемые значения и примерные алгоритмы их работы.
Использованный стек технологий:
- Inferno (потому что хотелось использовать jsx-подобный синтаксис, но попробовать что-то отличное от React)
- Inferno router (потому что стандартный роутер для Inferno)
- jss (потому что раньше не доводилось использовать jss и хотелось попробовать)
- mobx (потому что есть опыт в его использовании с React, хотелось попробовать его с чем-то другим)
- webpack (потому что стандартный сборщик веб-проектов)
- ES6 (потому что красивый и понятный код)
- date-fns (потому что простая библиотека для упрощения работы с датами)
schedule/public/index.html - точка входа в приложение.
Здесь же - метатег для адаптивности и подключение полифиллов
schedule/App.js - контейнер приложения
schedule/index.js - роутинг
schedule/Schedule.js - отображение задания №1
schedule/Edit.js - отображение задания №2
schedule/schedule - директория для отображения задания №1: графические компоненты, вспомогательные функции, стор с хранением и обработкой данных
schedule/edit - директория для отображения задания №2: графические компоненты, стор с хранением и обработкой данных
schedule/common - директория для отображения общего хедера для двух заданий: графические компоненты, стор с хранением и обработкой данных, а также утильные функции
schedule/edit-lib - библиотека функций для задания №2, данные для школ, аудиторий и лекций, а также стор для хранения и обработки информации, связанной с применением библиотеки функций
Файлы снабжены комментариями (обычными и JSDoc в сторах и библиотеке)