Pull to refresh

СметаCloud — составление смет онлайн. Отображение и печать больших таблиц в браузере

Reading time 4 min
Views 21K
image


Привет хабр, хочу рассказать о моем новом проекте для составления смет онлайн СметаCloud.

Цели и задачи СметаCloud


Основная цель проекта СметаCloud — предоставить удобный сервис для составления сметной документации и совместной работы над документами, используя лишь компьютер с выходом в интернет.

Для кого подходит СметаCloud


СметаCloud отлично подходит небольшим строительным организациям и индивидуальным предпринимателям, которые составляют небольшой объем строительной документации и пользуются своими расценками для составления смет.



Чем СметаCloud отличается от конкурентов


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

В архитектурном плане СметаCloud является уникальным решением на рынке сметных программ и полностью написан с применением веб-технологий.

Что уже сейчас умеет СметаCloud


СметаCloud находится на стадии бета тестирования и уже сейчас предлагает пользователям следующие возможности:

  • Создание документов со сметами
  • Создание таблиц с расценками (разделы) локальной сметы
  • Добавление, удаление, редактирование расценок локальной сметы
  • Ведение персональной базы данных пользовательских расценок и добавление их в смету
  • Печать/экспорт документа в PDF


image


Редактируемый в браузере документ полностью соответствует тому, что будет выведено на печать. Кстати, распечатать результат можно прямо из браузера с помощью кнопки: image

Что внутри?


Теперь хотел бы поделиться некоторыми техническими подробностями и трудностями, с которым пришлось столкнуться при разработке СметаCloud.

Поскольку внешний вид документа представляет собой набор таблиц, то первой сложностью оказалось решение проблем, связанных с производительностью. Как известно, html элемент table очень тяжелый для браузера, и когда количество таких элементов становится большим, то сильно ухудшается отзывчивость интерфейса из-за увеличении времени на reflow (перекомпоновка).

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

image


На сегодняшний день только Opera (до перехода на webkit) поддерживала CSS правило:

tr {
   page-break-inside: avoid;
}


Остальные браузеры пока строго придерживаются спецификации CSS2 и применяют это правило только к блочным элементам. На SO втречается масса вопросов о решении этой проблемы, но что-то разработчики браузеров не торопятся ее решать, в webkit этот баг тянется с 2005 года.

Обе эти проблемы пришлось решать довольно известным хаком, который работает во всех браузерах, начиная с IE8:

.cloud-dt-thead,
.cloud-dt-tfoot,
.cloud-dt-rowgroup {
  page-break-inside: avoid;
}

.cloud-dt-cell {
  display: table-cell;
}

<div class=”cloud-dt-table”>
     <div class=”cloud-dt-thead”></div>
     <div class=”cloud-dt-tfoot”></div>
          <div class=”cloud-dt-data”>
              <div class=”cloud-dt-rowgroup”>
                 <div class=”cloud-dt-row”>
                     <div class=”cloud-dt-cell”></div>
                </div>
          </div>
     </div>	
 </div>


При формировании таблиц с помощью этого подхода решаются сразу две описанные выше проблемы. Для браузера такая таблица становится намного “легче”, что позволяет использовать их в большом, но все же разумном количестве на одной странице. При печати таких таблиц больше не происходит неожиданного разрыва строк где-нибудь посередине, а строка или целый блок строк при нехватке места целиком переносится на следующую страницу.

Описанный выше подход используется не только для таблиц, формирующих структуру сметного документа, но и для обычных таблиц, например, таблицы расценок персональной базы данных.



Хочется подчеркнуть насколько важно следить за тем, как реализована работа с DOM при большом количестве элементов на странице. Есть множество способов вызвать reflow, что приводит к плохой отзывчивости всего интерфейса приложения. В идеале на каждое действие пользователя не должно уходить более одного reflow. Это относится и к правильному описанию CSS селекторов, поскольку браузеры читают их по-арабски (справа налево), то неправильно составленный селектор типа:

.my-widget div .my-widget-body * {
     height: 100%
}


может заметно уменьшить скорость работы веб-страницы

Поддержка браузерами



На текущий момент полностью поддерживаются только браузеры на движке webkit, но если вы зайдете через IE8, то тоже сможете немного поработать.

Планы на будущее



Сначала хотелось бы получить feedback и понять, в каком направлении двигаться дальше, а затем добавить новые фичи и возможности, среди которых:

  • Добавить больше типов документов (Акт выполненных работ (КС-2), Справка о стоимости выполненных работ (КС-3) и, возможно, создание индивидуальных документов для конкретных нужд пользователей)
  • Совместный доступ к документу с возможностью редактирования несколькими пользователями
  • Версионность документа. Undo/Redo для возврата и отмены действий
  • Offline-версия с возможностью синхронизации с web-версией (используя node-webkit)


www.smetacloud.ru
Демо версия
Руководство пользователя

Если у вас есть вопросы, предложения, или может кто-то захочет присоединиться к проекту, пишите: support@smetacloud.ru
Tags:
Hubs:
+20
Comments 15
Comments Comments 15

Articles

Information

Website
www.smetacloud.ru
Registered
Founded
Employees
1 employee (me only)
Location
Россия