5. Контрольный пример

Рисунок 5.1 - Главная страница системы

Такой видит главную страницу неавторизованный пользователь. В шапке сайта находится ссылка на авторизацию (рис. 5.1). На карте отображены различные типы проблем, при клике по ним открывается балун с текстом проблемы.

Ниже под картой располагаются функциональные переключатели, которые позволяют отфильтровать необходимую нам информацию (рис. 5.3). Так, например можно отобразить проблемы только определенной категории, или вывести последние 9 добавленных проблем. А также, при наведении на проблемы под картой, они подсвечиваются на карте.

Рисунок 5.2 - Карта проблем

Рисунок 5.3 - Фильтрация проблем

Авторизация через Loginza.API происходит в несколько кликов мыши: выбор провайдера, подтверждение разрешения получения информации от провайдера сервиса через который авторизуемся, подтверждение на нашем сайте, что переданная информация верна (рис. 5.4).

Рисунок 5.4 - Пользователь авторизован в системе

После авторизации становится доступен функционал добавления собственной информации об объекте на сайт. Форма вызывается двойным кликом по карте в месте, где существует проблема (рис. 5.5). Выйти из нее возможно нажатие клавиши ESC.

Рисунок 5.5 - Добавление проблемы

При перемещении курсора по карте адрес перестраивается заново. Поэтому если пользователь сразу не смог указать точное место, позднее он может это отредактировать. Пользователь системы может добавить заголовок, текст проблемы и выбрать категорию, к которой она относится, в зависимости от этого выбирается соответствующая иконка, которая отображается на карте. Также пользователь может прикрепить файлы. Стандартным загрузчиком, или же воспользовавшись технологией Drag-and-Drop, просто перенести мышью необходимые файлы на поле добавления.

С главной страницы можно перейти на страницу проблемы.

Рисунок 5.6 - Страница проблемы

Страница проблемы содержит: интерактивную миниатюру карту с точкой указанной пользователем, прикрепленные файлы, адрес полученный от сервиса геокодирования API ЯндексКарт, заголовок и описание проблемы, а также дату размещения (рис. 5.6). Также на странице отображается голосование и форма комментирования. Если пользователь авторизован и не голосовал, то ему отображается голосование с возможностью выбора.

Рисунок 5.7 - Форма комментирования

Если пользователь авторизован и уже проголосовал или он не авторизован, ему отображаются результаты голосования на данный момент. Также для авторизованных пользователей доступна форма комментирования (рис. 5.7). Для неавторизованных пользователей выводится только обсуждение.

Рисунок 5.8 - Подсветка комментариев

Рисунок 5.9 - Страница пользователя

На странице пользователя (рис. 5.9) отображается сводная статистика о пользователе. Имя с сервиса, через который он авторизовался, иконка фотографии, условная характеристика на сайте (карма), группа к которой принадлежит пользователь, сколько проблем добавил и сколько оставил комментариев. Также его добавленные проблемы отображены на карте, и список располагается ниже.