67
Рисунок 2.19 – Алгоритм изменения текста задачи
При изменении текста в задаче, пользователю необходимо выбрать задачу,
которую необходимо отредактировать. Затем кликнуть на элемент в форме
«карандаша», после чего элемент INPUT будет готов к редактированию.
Пользователь меняет текст задачи и нажимает клавишу ENTER. После этого,
запись в базе данных по этой задаче обновится.
Алгоритм удаления задачи из карточки приведен на рисунке 2.20.
68
Рисунок 2.20 – Алгоритм удаления задачи из карточки
После прохождения задачей через все этапы жизненного цикла от создания до её
завершения, со временем возникает необходимость её удалить, так как нету
смысла собирать старые задачи и засорять базу данных ненужными записями. Для
этого её требуется удалить. При удалении задачи из карточки, пользователю
необходимо выбрать задачу и нажать на элемент в форме «карандаша». После
этого задача исчезнет из карточки, а запись в базе данных о данной задаче
удалится.
Алгоритм перемещения задачи в другую карточку приведен на рисунке 2.21.
69
Рисунок 2.21 – Алгоритм перемещения задачи в другую карточку
Основная идея в разрабатываемом приложении состоит в отслеживании статуса
задач. Например, есть список задач в карточке под названием
«Запланированные», для их решения назначается специалист. Он перемещает
одну из задач в карточку под названием «В работе», тем самым указав другим
сотрудникам её статус. После завершения задачи, специалист перемещает задачу
в карточку «Готовые». Для того, чтобы переместить конкретную задачу в другую
карточку, пользователю необходимо выбрать задачу и нажать на элемент в форме
«карандаша». Далее, с помощью элемента SELECT выбрать карточку, в которую
необходимо эту задачу переместить. После чего, выбранная задача перемещается
в выбранную карточку.
70
2.4. Контрольный пример реализации проекта и его описание
Для начала работы с системой необходимо пройти авторизацию
пользователя. Для этого используется форма авторизации. При правильном вводе
логина и пароля пользователь нажимает кнопку «Войти» и попадает в систему. В
качестве логина используется электронная почта. Форма авторизации
представлена на рисунке 2.22.
Рисунок 2.22 – Форма авторизации
Форма авторизации с введенными данными представлена на рисунке 2.23.
Рисунок 2.23 – Форма авторизации с введенными данными
71
Если запись отсутствует в базе данных и пользователь не зарегистрирован в
системе, ему предлагается создать новый аккаунт. Для этого он нажимает кнопку
«Создать новый аккаунт». Пользователь заполняет поля формы и нажимает на
кнопку «Зарегистрироваться». В форме регистрации предусмотрена проверка на
пустое значение в полях ввода. Если какое-либо из полей формы не заполнено,
появляется сообщение о том, что это поле необходимо заполнить. В форме
регистрации все поля обязательны для заполнения. При успешной попытке
регистрации, запись о новом сотруднике добавляется в базу данных в таблицу
«Пользователи». Форма регистрации представлена на рисунке 2.24.
Рисунок 2.24 – Форма регистрации
Форма регистрации с введенными данными представлена на рисунке 2.25.
72
Рисунок 2.25 – Форма регистрации с введенными данными
Форма с незаполненным полем и сообщением представлена на рисунке 2.26
Рисунок 2.26 – Форма с незаполненным полем и сообщением
73
.
После успешной авторизации пользователь попадает в систему, где уже может
начинать создавать, отслеживать, изменять и удалять задачи. Интерфейс системы
представлен на рисунке 2.27.
Рисунок 2.27 – Интерфейс системы
Интерфейс представляет собой отдельные блоки, именуемые карточками,
которые пользователь может именовать по своему усмотрению. В данном
примере это «В ожидании», «В процессе», «Готовые». Карточки содержат в себе
блоки, именуемые задачами. В карточке «В ожидании» для примера, уже
представлены некоторые задачи. Рабочая зона системы имеет контейнер с
фиксированной шириной, поэтому в одной строке может поместиться только
четыре карточки. При добавлении новой карточки, она сместится вниз на вторую
строку. Приложение разработано с максимальной минимизацией кнопок и прочих
лишних элементов, которые усложняют интерфейс. Взаимодействие с
элементами производится простым нажатием на элемент, затем вводится название
или текст и, путем нажатия клавиши ENTER, процесс завершается.
Чтобы добавить карточку, необходимо нажать на входной элемент INPUT
с заголовком «Добавить новую карточку». Элемент INPUT станет активным,
далее необходимо ввести название, например, «В процессе» и нажать кнопку
ENTER. Карточка будет создана. Чтобы удалить карточку, необходимо нажать на
74
элемент в форме «крестика». Далее рассмотрим процесс написания заголовка для
карточки, который представлен на рисунке 2.28.
Рисунок 2.28 – Написание заголовка для карточки
На рисунке 2.29 представлена созданная карточка посредством нажатия клавиши
ENTER.
Рисунок 2.29 – Созданная карточка
После того, как создана карточка, в неё можно добавлять задачи. Для этого
необходимо нажать на входной элемент INPUT с заголовком «Новая задача».
75
Элемент INPUT станет активным, далее необходимо ввести текст задачи,
например, «Разместить сайт на сервере» и нажать кнопку ENTER. Задача будет
создана. Чтобы удалить задачу, необходимо нажать на элемент в форме
«крестика». Далее рассмотрим процесс написания текста для задачи, который
представлен на рисунке 2.30.
Рисунок 2.30 – Написание текста для задачи
На рисунке 2.31 представлена созданная задача посредством нажатия клавиши
ENTER.
Рисунок 2.31 – Созданная задача
76
Далее рассмотрим процесс редактирования текста задачи. Для этой цели
необходимо нажать на элемент в форме «карандаша». Редактирование текста
задачи представлено на рисунке 2.32.
Рисунок 2.32 – Редактирование текста задачи
На рисунке 2.33 представлен измененный текст задачи посредством нажатия
клавиши ENTER.
Рисунок 2.33 – Измененный текст задачи