Запуск сервера базы данных осуществляется из папки ./server командой node index.js
. Доступ к базе осуществляется API-запросами к серверу.
Запуск веб-сервера производится из папки ./project и не требует сборщиков (на момент написания приложения данный способ создания сайта еще не был изучен и освоен), путем обычного запуска файла index.html.
Предоставление доступа пользователя к веб-интерфейсу управления базой данных клиентов компании.
Предварительно необходимо запустить сервер из папки ./server командой node index.js
. Проект располагается в папке ./project и не требует сборщиков для запуска, открывается путем открытия файла index.html
.
Приложение представлено в виде главной страницы с таблицей, содержащей список клиентов, внесенных в базу ранее. На текущий момент доступно управление списком:
- Добавление новых клиентов;
- Редактирование добавленных ранее клиентов;
- Удаление потерявших актуальность записей.
Управление списком клиентов доступно через управляющие команды, вызов которых производится путем нажатия кнопок в столбце "Действия" таблицы, а также в карточке клиента, доступной в виде модального окна.
В столбце "Контакты" в списке клиентов доступен переход по ссылкам контактов, расположенным внутри выпадающих вверху над контактом хинтов.
- Анимация работы с модальным окном;
- Ссылка на карточку клиента - выполнено путем чтения данных из hash-части url-адреса;
- Валидация формы перед отправкой запроса на сервер - валидация производится динамически при вводе данных в поля формы в модальном окне, а также сразу после нажатия на кнопку сохранения данных - в этом случае при ошибке запрос к серверу не отправляется, а над кнопкой сохранения отображаются ошибки и/или рекомендации по их устранению;
- Индикация загрузки/отправки данных к серверу - работает для получения списка клиентов, для открытия карточки клиента, а также сохранения измененных данных по клиенту.
Доступно путем нажатия на кнопку "Добавить клиента", расположенную под таблицей. В этом случае открыается пустая карточка нового клиента в виде модального окна.
Доступно путем нажатия на кнопку "Изменить", расположенную в последнем столбце таблицы в каждой из строк. В этом случае открывается доступная для внесения изменений карточка клиента в виде модального окна.
Возможно после внесения обязательынх полей: фамилии, имени, а также заполнения всех добавленных полей с контактами - путем нажатия на кнопку "Сохранить" в карточке клиента. Контакты добавляются нажатием на кнопку "Добавить контакт" внутри карточки под полями с фамилией, именем и отчеством клиента.
В случае, если сохранение невозможно по тем или иным причинам, над кнопкой "Сохранить" отображаются ошибки и/или рекомендации по их устранению. В случае же успешного сохранения изменения вносятся в клиентскую базу, модального окно закрывается и происходит автоматическое обновление списка клиентов.
Доступно по щелчку мыши на кнопку "Отмена", крестику в правом верхнем углу модального окна, либо в любом месте экрана вне модального окна. В этом случае модальное окно закрывается, а изменения не сохраняются.
Производится двумя способами:
- По нажатию кнопки "Удалить" в строке клиента в таблице на главной странице;
- Внутри карточки ранее добавленного клиента путем нажатия кнопки "Удалить клиента". При удалении записи происходит безвозвратное удаление клиента из клиентской базы, а список клиентов обновляется автоматически. Если удаление было произведено в модальном окне, модальное окно при этом закрывается.
В приложении используются следующие подключаемые библиотеки:
- https://github.com/Choices-js/Choices (Choices-js) - пользовательские выпадающие меню в карточке клиента;
- https://github.com/RobinHerbots/Inputmask (Inputmask) - маски для ввода данных в поля input в карточке клиента;
- https://just-validate.dev/ (JustValidate) - система валидации введенных в форму данных в карточке клиента;
- https://atomiks.github.io/tippyjs/ (Tippy.js) - пользовательские хинты, срабатывающие при наведенни мыши на значки контактов в списке клиентов.
Скриптовая база представлена двумя файлами:
- js/script.js - основные скрипты для управления элементами интерфейса и текущими данными приложения;
- js/server.js - скрипты для выполнения запросов к серверу.
- добавление авторизации;
- перевод проекта на Webpack/Vue 3;
- подключение всех библиотек через Node.js.