Skip to content

younglifer/younglifer.github.io

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Задание №1-2

Расписание школ Мобилизации Яндекс

Описание

Оба задания объеденены в один проект. Дизайн создан с нуля, верстка тоже. Для стартового отображения во всех браузерах используется файл стилей vendor/normalize.css. Проект выполнен с использованием фреймворка Angular JS, а также дополнительных модулей/библиотек:

  • UI-Router - навигация в проекте
  • DateJS - кроссбраузерная работа со временем
  • TaffyDB - хранение информации в localstorage и удобные инструменты для получения данных
  • Angular Colorpicker Dr - пикер цвета
  • Angular Datepicker - пикер даты
  • SweetAlert & Angular wrapper - вывод предупреждений и ошибок
  • Jasmine - тесты к библиотеке

Подробнее о реализации

Приложение одностраничное, переход между состояниями происходит без перезагрузки страницы, если не существует запрошенного состояния - выводится страница 404. Данные организованы файлом data_new.json со следующей структурой:
[школы, лекторы, аудитории, лекции], с навигацией по id. При первой загрузке страницы - данные загружаются с сервера в localstorage, далее они загружаются и обновлятся только в localstorage. Изменение/добавление информации выполняется с помощью сервиса Data. Реализованы все проверки по заданию (проверки форм RegEX выражениями), а также все предложенные фильтрации. Вынос некоторых функций API в контроллеры можно считать минусом (например, не удобно тестировать), но этому есть оправдание в их редком использовании.

Встречаемые проблемы

  • В браузерах, не поддерживаемых input[time] - время в поле ввода не имеет формат HH:mm, а имеет вид 10:00:00.000

Как запустить

  • Просто перейдите по ссылке younglifer.github.io
  • Клонируйте или скачайте *.zip файл репозитория. Установите простой веб-сервер, например npm install http-server или используйте встроенный веб-сервер, например PhpStorm

Тесты API

Как создать продакшн версию

  • Установите gulp npm install gulp а затем все необходимые плагины:
    gulp-clean
    gulp-html-replace
    gulp-concat

  • Затем запустите команду gulp из папки проекта, эта команда запустит clean и default задания

  • Приложение появится в папке /build