- Студент: Дмитрий Щеклеин.
- Наставник: Олег Зубов.
- Ручная настройка Webpack
- Применение ООП подхода в архитектурном паттерне MVP
- Принципы ООП: Инкапсуляция, Наследование, Полиморфизм
- Опыт создания SPA приложения на чистом JS без использования сторонних фреймворков
- Знакомство с паттернами «Наблюдатель» (Observer), «Адаптер» (Adapter), «Одиночка» (Singleton)
подробнее
В правом верхнем углу шапки отображается звание пользователя. Звание зависит от количества просмотренных фильмов, вычисляется при загрузке приложения и может изменяться в ходе использования пользователем приложения (при добавлении или удалении фильмов из просмотренных).
- 0 — блок со званием не отображается;
- от 1 до 10 — novice;
- от 11 до 20 — fan;
- от 21 и выше — movie buff.
В правом углу подвала выводится информация о количестве фильмов в сервисе. Информация обновляется один раз — при загрузке приложения.
После загрузки приложения в списке отображается не более 5 карточек фильмов.
Показ оставшихся фильмов выполняется нажатием на кнопку «Show more». При нажатии показываются очередные 5 фильмов или оставшиеся фильмы, если их количество меньше 5.
После показа всех карточек с фильмами, кнопка «Show more» скрывается.
Любое изменение фильтра или сортировки сбрасывает счётчик показанных фильмов и отсчёт начинается заново.
В случае отсутствия фильмов вместо списка отображается текст: «There are no movies in our database».
Карточки фильмов представлены в двух вариантах: стандартный (в списке фильмов) и расширенный (отдельный попап с описанием фильма).
В стандартном варианте карточка с фильмом содержит следующую информацию:
- Постер (картинка);
- Название фильма;
- Рейтинг;
- Год релиза;
- Продолжительность в формате часы минуты (например «1h 36m»);
- Жанр;
- Краткое описание (не более 140 символов);
- Количество комментариев;
- Если описание фильма больше 140 символов, то в карточке отображается 139 символов описания и знак многоточие (…).
В карточке фильма отображается блок с кнопками управления:
- «Add to watchlist» — добавляет/удаляет фильм из списка к просмотру;
- «Already watched» — помечает фильм как просмотренный/непросмотренный;
- «Add to favorites» — добавляет/удаляет фильм в избранное. Клик по карточке фильма (за исключением кликов по кнопкам управления) открывает попап с подробной информацией о фильме;
Попап содержит расширенную информацию о фильме:
- Полноразмерная обложка;
- Название фильма;
- Оригинальное название фильма;
- Рейтинг;
- Режиссёр;
- Сценаристы;
- Актёрский состав;
- Дата и год релиза в формате день месяц год (например: «01 April 1995»);
- Продолжительность в формате часы минуты (например «1h 36m»);
- Страна;
- Жанр (ы);
- Полное описание;
- Возрастной рейтинг; Фильм может относиться к нескольким жанрам. Если фильм относится к нескольким жанрам, выводите «Genres», иначе «Genre».
В попапе отображается блок с кнопками управления:
- «Add to watchlist» — добавляет/удаляет фильм из списка к просмотру;
- «Already watched» — помечает фильм как просмотренный/непросмотренный;
- «Add to favorites» — добавляет/удаляет фильм в избранное. В заголовке «Comments» отображается количество комментариев к фильму. Например: «Comments 8».
Любое изменение информации о фильме в попапе должно отображаться в списке фильмов мгновенно. При изменении информации попап не должен закрываться самовольно.
При изменении информации о фильме и добавлении/удалении комментариев в попапе сохраняется позиция скролла.
Попап можно закрыть нажатием на кнопку закрытия в правом верхнем углу (крестик) или нажатием на клавиатуре кнопки «Esc». При закрытии попап удаляется из DOM.
Одновременно может быть открыт только один попап. При открытии нового попапа прежний закрывается, например при клике на другую карточку при открытом попапе. Несохранённые изменения (неотправленный комментарий) пропадают.
Список комментариев к фильму и форма добавления нового комментария доступны в попапе. Комментарии загружаются при открытии попапа.
Каждый комментарий состоит из:
- Текст комментария;
- Эмоция;
- Автор комментария;
- Дата комментария;
- Кнопка удаления. Дата комментария отображается в формате год/месяц/день часы:минуты (например «2019/12/31 23:59»).
Для добавления нового комментария пользователь заполняет текст комментария и выбирает эмоцию (один вариант из: smile, sleeping, puke, angry). Имя автора формируется случайным образом на сервере, с клиента оно не передаётся. Дата также приходит с сервера.
Введённые пользователем данные экранируются.
Отправка формы осуществляется нажатием комбинации клавиш Ctrl/Command + Enter.
Пользователь может удалить произвольный комментарий. Комментарий удаляется нажатием на кнопку «Delete», расположенную в блоке с комментарием.
Пользователь никак не может влиять на оценку фильма. Рейтинг фильма высчитывается на сервере.
В приложении предусмотрено несколько фильтров:
- «All movies» — все фильмы;
- «Watchlist» — фильмы, добавленные в список к просмотру (Watchlist);
- «History» — просмотренные фильмы (Already watched);
- «Favorites» — фильмы, добавленные в избранное (Favorites). Количество фильмов, соответствующих фильтру отображается справа в элементе с фильтром. Для фильтра «All movies» количество не отображается.
Информация о количестве фильмов, соответствующих каждому фильтру доступна сразу, без необходимости применения фильтра.
Фильтр должен переключаться при клике и на надпись, и на счётчик.
Если фильтру соответствует больше 5 фильмов, то в списке фильмов по этому фильтру отображается первые 5 фильмов, а остальные отображаются по нажатию на кнопку «Show more», как и в списке фильмов «All movies».
Если список фильмов был отфильтрован, и какой-то из фильмов перестал соответствовать критериям фильтрации (например пользователь убрал отметку «Add to favorites» в списке по фильтру «Favorites»), карточка этого фильма должна быть моментально удалена из списка. Это удаление карточки не должно каким-либо образом ломать логику кнопки «Show more» или нарушать порядок сортировки.
Если в отфильтрованном списке были удалены все карточки, вместо списка отображается соответствующий текст. Например, если пользователь убрал отметки «Add to favorites» во всех фильмах в списке по фильтру «Favorites», должна появиться заглушка «There are no favorite movies now». Все фразы приведены в файле в директории с разметкой.
Пользователю доступна возможность сортировки фильмов по дате выхода (клик по ссылке «Sort by date») и рейтингу (клик по ссылке «Sort by rating»). Сортировка работает в одном направлении — от максимального к минимальному: при сортировке по дате выхода в начале списка будут самые новые фильмы, при сортировке по рейтингу — с самым высоким рейтингом.
Для отмены сортировки и возвращению к исходному порядку пользователь кликает по ссылке «Sort by default».
При смене фильтра сортировка сбрасывается на состояние «Sort by default».
Сортировка не должна отображаться, если нет фильмов для сортировки.
Сервер расположен по адресу: https://18.ecmascript.pages.academy/cinemaddict/;
Все запросы, которые отправляются серверу должны содержать заголовок Authorization со значением Basic ${случайная строка}. Например, Basic er883jdzbdw. Случайная строка формируется однократно при старте приложения.
Интерфейс должен реагировать на отправку любого запроса к серверу. Примеры реакции описаны в соответствующих пунктах ТЗ.
При отправке комментария, форма, содержащая текст комментария, должна быть заблокирована.
Если запрос на отправку комментария выполнился успешно, то комментарий должен быть добавлен в список комментариев. Форму добавления комментария нужно очистить и разблокировать.
При возникновении ошибки в момент отправки комментария, форма, содержащая текст комментария, должна быть разблокирована и к ней применяется эффект «покачивание головой». Стили для эффекта есть в проекте.
Обновление любого элемента в DOM происходят только после успешного выполнения запроса на сервере.
Ниже описаны структуры данных, которые отдаёт или принимает сервер, и доступные методы для обращения. Путь, указанный рядом с методом, — это часть адреса, по которому нужно обращаться к серверу. Например, по адресу https://18.ecmascript.pages.academy/cinemaddict/movies можно сделать GET-запрос, чтобы получить все фильмы, доступные в приложении.
На время загрузки вместо карточек фильмов нужно вывести информационное сообщение.
При добавлении нового комментария, удалении комментария или изменении информации о фильме интерфейс приложения блокируется на время отправки запроса к серверу. После завершения запроса (неважно, успешно он выполнен или нет) интерфейс разблокируется.
При нажатии на кнопку удаления комментария «Delete» её заголовок изменяется на «Deleting...», а сама кнопка блокируется. Если при выполнении запроса к серверу возникла ошибка, заголовок нужно вернуть к изначальному — «Delete», кнопку разблокировать, а ко всему блоку комментария применить эффект «покачивание головой».
В момент отправки запроса на создание комментария форма блокируется от внесения изменений. Разблокировка формы происходит после завершения выполнения запроса (неважно, успешно выполнен запрос или нет).
Если запрос на создание комментария не удалось выполнить (сервер недоступен, произошла ошибка), форма создания остаётся открытой, к ней применяется эффект «покачивание головой».
Если запрос на изменение информации о фильме (с помощью кнопок управления) не удалось выполнить, то ко всему блоку с кнопками управления применяется эффект «покачивание головой».
Обновление элементов (удаление комментариев, обновление информации о фильме и так далее) в DOM происходит после успешного выполнения запроса к серверу.
Репозиторий создан для обучения на профессиональном курсе «JavaScript. Архитектура клиентских приложений» от HTML Academy.