Вступление
В этой публикации речь пойдет о решении виртуальной задачи средствами, которые мне показались интересными.
Описание задачи
Необходимо разработать автоматизированное рабочее место с возможностью анализа дебиторской задолженности.
Основные требования:
- Предоставление информации о дебиторской задолженности:
- просроченная задолженность;
- планируемое поступление денежных средств в течение ближайшей недели (7 календарных дней);
- планируемое поступление денежных средств в течение ближайших 2-х недель (14 календарных дней);
- планируемое поступление денежных средств в течение ближайших 3-х недель (21 календарных дней);
- планируемое поступление денежных средств в течение ближайших 4-х недель (28 календарных дней).
- Вывод информации о задолженности в виде карточки (далее - Карточка):
- контрагент;
- договор;
- срок оплаты;
- сумма;
- количество просроченных дней или количество дней до ожидаемой оплаты.
- В одной строке отображать несколько Карточек;
- Обеспечить доступность на ПК и на смартфоне, посредством использования веб-клиента, с корректным адаптивным отображением.
- Предоставить пользователю возможность управлять некоторыми настройками интерфейса:
- цвет заголовка;
- цвет оформления Карточки;
- количество карточек в строке (количество столбцов) на большом экране.
Вариант решения
Исходя из требования обеспечить адаптивность интерфейсной части попробую использовать Bootstrap - фреймворк для front-end. В большей части меня интересует, так называемая, сетка, которая позволит управлять количеством столбцов с Карточками на разных размерах экрана, а также некоторые другие возможности, например, управление цветом элементов, их расположением и т.д.
В связи с тем, что решается виртуальная задача, то и данные для вывода в интерфейс пользователя тоже будут виртуальными.
Описание реализации
Для решения задачи создам обработку с режимом основного окна - Киоск (необязательное условие реализации), содержащее поле HTML документа, которое будет отображать:
- Навигационное меню, одинаковое для всех страниц;
- Главное меню, в большей части повторяющее команды из навигационного меню, но существующее только на основной странице;
- Несколько страниц с отображением информации о задолженности;
- Страницу с настройками, которыми управляет пользователь. Предоставлю возможность сохранять и восстанавливать настройки по умолчанию. Сохранение реализую с использованием стандартного хранилища общих настроек.
Реализация в картинках
Очередность картинок: изображение на большом экране, изображение на маленьком экране.
Главное меню
и
Отмечу, что меню на небольшом экране сворачивается и принимает более удобный вид.
Информация о задолженности
и
Здесь наглядно демонстрируется адаптивный дизайн. Количество колонок подгоняется под размер экрана.
Настройки
и
Кстати, выбор пользователем, например, цвета выглядит так:
Как подключать Bootstrap
Подключение в текущей реализации происходит посредством CDN и требует доступ в интернет.
Используется подключение следующего кода:
- bootstrap.min.css;
- jquery-3.5.1.slim.min.js;
- bootstrap.min.js.
Если Вы скачали обработку, то укажите соответствующие ссылки на актуальную версию кода в макете ОбщийШаблонСтраницы вместо текста CDN.
Информация о том, как это делать здесь.
Заключение
На мой взгляд, указанная виртуальная задача решена. Пользователь может комфортно работать на устройствах с разным размером экрана. В целом, думаю, могут возникнуть ситуации когда эта реализация будет иметь смысл.
В тексте присутствует несколько ссылок для получения более подробной информации. Старался сделать так, чтобы публикация не была слишком большой, надеюсь это не повлияет на понимание о чем тут вообще речь.
Послесловие
Решение тестировалось на платформе 8.3.16.1063, на пустой конфигурации.
Вступайте в нашу телеграмм-группу Инфостарт