#calendar ###Запуск та використання:
Всі команди виконуються з кореневої папки проекту.
Зібраний проект розміщено в папці public.
Для запуску потрібно запустити сервер статичних файлів
npm run dev-serve
Сторінка буде доступна за адресою:
#####Інші команди:
Щоб перезібрати проект:
npm install
npm run dev-build
Документація jsdoc проекта:
documentation-output/index.html
або через сервер статичних файлів:
npm run dev-doc
Сторінка буде доступна за адресою:
Production build:
npm run prod-build
В цьому режимі вимикається побудова документації, css source maps та вмикається мініфікація скриптів
Watcher:
npm run dev-watch
Для пришвидшення роботи в режимі вотч, відключений лінтер. Він використовується тільки при збиранні
###Виконані завдання:
Виконано всі завдання туру.
- Додаток має працювати без підлючення до інтернету і локального серверу (10 балів);
Використовано Service Worker. Стратегія кешування: При встановленні робітника кешуються всі необхідні для роботи сторінки файли для того, щоб вони були доступні вже при наступному відкритті сторінки. При кожному запиті обробник намагається отримати дані і з сервера, і з кешу Якщо дані з сервера отримані, відповідь не помилка та джерело http або https, то дані в кеші оновлюються Обробник повертає відповідь з того джерела, яке надало відповідь. Якщо є відповідь з обох джерел, то сервер має вищій за кеш пріоритет, це дозволяє мати найсвіжішу версію файлу та може працювати в offline.
-
Всі дані зберігаються в Local Storage (5 балів)
-
Відображати розклад подій на обраний тиждень (5 балів)
-
Додавати події з датою та часом початку, тривалістю і заголовком (5 балів)
-
Редагувати та видаляти події існуючі події (5 балів)
-
Навігація по тижням (наступний/попередній) (5 балів)
-
Відображення календаря на місяць і рік (10 балів)
В календарі на місяць можна побачити всі події кожного дня місяця. Спочатку показано дві перших події, при наведенні миші на блок дня можна побачити всі події. В правому верхньому куті відображено кількість прихованих подій додатково до двох показаних. Натискання на подію - редагування її, натискання на блок дня - створення нової події, натискання на дату - перехід на відповідний день.
В календарі на рік помічені вихідні та державні свята (2017 рік). Пунктирними рамками помічені дні, коли є створені події. Натискання на дату відкриває відповідний день.
-
Все що в “стандарт” (45 балів)
-
Контроль масштабу (можливість вибору певних тижнів для відображення) (5 балів)
чотири режими відображення: день, тиждень, місяць, рік навігація до попереднього та наступного періоду в режимах місяця та року натискання на дату переводить на режим дня вказаної дати
- Створення подій через “малювання” мишею (5 балів)
В режимах дня та тижня через малювання можна створювати короткі (в межах дня) та довгі (в межах тижня) події. В режимі місяця подія створюється якщо натиснути на блок дня. Щоб створити подію в режимі року, потрібно або скористуватися кнопкою, або перейти на необхідний день (натиснувши на потрібну дату) і створити подію там.
- Підтримувати події, що займають більше одного дня (5 балів)
В режимах дня та тижня довгі події відображені в верхній частині поля. В режимі місяця та року довгі події опрацьовуються так само, як і короткі.
- Події, що пересікаються, повинні охайно організовуватись (10 балів)
Плитки подій на полі дня розкладаються щоб забезпечити доступність подій, що пересікаються.
-
Браузерні нотифікації (5 балів)
-
Експорт події у .ics формат (можна використовувати спеціалізовану бібліотеку) (5 балів)
Використано бібліотеку https://github.com/nwcell/ics.js/
###Використані інструменти:
Service Worker, Local Storage, Notifications API, MVC Pattern, Handlebars templating, html5, es2015 класи, jsdoc документація, лінтер eslint, препроцесор less, gulp, сервер статичних файлів
на сторінці:
- jquery
- handlebars
- lodash
- moment
- materializecss
- https://github.com/nwcell/ics.js/ - для експорту подій
для розробки та збирання:
- gulp
- less
- eslint (eslint:recommended, google)
- babel (es2015)
- jsdoc - документація
- http-server - локальний сервер статичних файлів