Сохранение макета гридстера с помощью angularjs

Question

Я создаю приложение для панели мониторинга с помощью Gridster: https://github.com/ManifestWebDesign/angular-gridster

Я хотел бы сохранить свой макет в базе данных, используя JSON. Что я знаю, так это то, что я храню массив диаграмм в базе данных и извлекаю его. Можно ли сохранить виджет col, row и size для определенного виджета, чтобы я мог затем дать size-x и size-y с угловым стилем {{chart.xsize}}. При создании виджета я мог бы назначить значения размера по умолчанию и сохранить только после того, как пользователь изменил размер или перетащил виджет. Или это совершенно неправильный способ сделать это? Как еще я могу хранить размеры виджета и позиции в базе данных?

У меня есть нг-повтор для моих виджетов, как это:

  <div ng-if="chart.type === settings.types.LINEAR_GAUGE">
      <div class="panel c8y" gridster-item size-x="2" size-y="1">
        <div class="panel-heading">
          <h3 class="panel-title">{{chart.title}}</h3>
          <button class="btn btn-danger pull-right btn-xs" ng-click="onClickDelete($index)"><span class="glyphicon glyphicon-remove"/></button>
        </div>
        <div class="panel-body">
          <c8y-linear-gauge dp="chart.dp" measurement="chart.data[0].measurement"/>
        </div>
      </div>
  </div>

Answer 1

Я на самом деле построил несколько угловых панелей с помощью angular-gridster и сохранил макет обратно в базу данных. Вот как я это делаю:

    <div gridster="gridsterOpts">
        <ul>
                <li
                    gridster-item
                    row="element.posY"
                    col="element.posX"
                    size-x="element.width"
                    size-y="element.height"
                    ng-repeat="element in elements track by $index">
                    <div class="element-title">
                        <!--some header stuff goes here-->
                    </div>
                    <div class="element-useable-area">
                        <!--Main widget stuff goes here-->
                    </div>
                </li>
        </ul>
    </div>

Итак, у меня есть массив с именем elements где я храню свои объекты виджета. Каждый объект в массиве включает свойства для высоты, ширины и размера. Итак, как то так:

{
    posY: 0,
    posX: 0,
    width: 100,
    height: 100,
    templateUrl: ...,
    data: ...
}

К счастью, из-за угловой привязки, когда пользователь изменяет размер или положение элемента gidster, он также меняет значение свойства! Важно отметить, что elements массив добавляется к объекту $sessionStorage из используемой мною среды ngStorage, так что все изменения будут сохраняться при обновлении страницы.

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