Интерактивный план объекта с поиском по реестру

Задача

Есть объект, состоящий из множества одинаковых по смыслу единиц: участки в посёлке, места на площадке, боксы на складе, помещения в здании. Посетитель сайта хочет узнать про одну конкретную — свободна ли, какая площадь, сколько стоит.

Сайт обычно отвечает на это картинкой. Генплан в JPEG нельзя ни найти, ни отфильтровать, ни связать с ценой, поэтому человек берёт телефон и звонит. Менеджер тратит разговор на справку, из которой не следует сделка.

Что сделано

План собран из элементов, а не из картинки. Каждый участок — отдельный объект в разметке: у него есть номер, статус и данные. Поэтому его можно подсветить, отфильтровать, найти и связать с карточкой. Это главное отличие от изображения, и всё остальное следует из него.

Статусы различаются заливкой. Свободные, забронированные и проданные видно с одного взгляда, без легенды и без изучения. Фильтр оставляет на плане только нужные.

Поиск идёт по номеру. Человек, которому назвали участок по телефону или в договоре, вводит номер и сразу видит место на плане. Совпадение строгое: подстрока в номерах даёт ложные попадания, и на этом такие поиски обычно ломаются.

Карточка открывается рядом с планом. Не всплывающим окном поверх, а в колонке сбоку — чтобы место и данные были видны одновременно.

Реестр отделён от кода. Данные приходят таблицей заказчика. Это то, что превращает демонстрацию во внедрение: объект ваш, единицы ваши, разметка та же. Терминология тоже настраивается — «участок» может быть боксом, помещением или местом.

Как обновляются статусы

Участки продаются и бронируются, значит реестр меняется. Способ обновления выбирается под частоту правок и под то, где заказчик уже ведёт учёт.

Таблица и пересборка. Менеджер правит файл — таблицу в репозитории или выгрузку из учётной системы, — сайт пересобирается и выкладывается сам. Задержка минуты, разработчик не участвует. Темп посёлка или базы отдыха, где участок уходит раз в несколько дней, это покрывает целиком.

Облачная таблица, которую страница читает при загрузке. Менеджер ведёт обычный лист в Google Sheets, изменения видны сразу. Цена — зависимость от внешнего сервиса и открыто лежащий реестр.

Бесплатный облачный бэкенд. Yandex Cloud Functions, Supabase и подобные дают базу и функции в бесплатных лимитах, которых реестру на несколько сотен позиций хватает с запасом. Появляется полноценная админка: кнопка «забронировать» прямо на плане, права доступа, история изменений. Такой же тариф держит бота квалификации — там расходы начинаются на тысячах обращений, а не на десятках.

Сервер заказчика. Если он уже есть и на нём живёт учётная система, план подключается к ней напрямую, без второго места хранения данных. Обычно это самый правильный вариант из всех — и самый редкий, потому что учётная система есть не у всех.

Само отображение плана серверу не подчинено ни в одном из вариантов: страница остаётся статической, а бэкенд, если он нужен, отвечает только за данные.

Результат

Блок, который снимает поток справочных звонков и даёт причину открыть сайт до того, как что-то понадобилось. Встраивается в существующий сайт, в том числе сделанный не мной и работающий на чужой CMS.

Что дальше

Загрузка реестра таблицей прямо в интерфейсе, без участия разработчика, и связь карточки с заявкой: выбрал единицу — оставил обращение по ней, с уже подставленным номером.