interface.html

<div id="interactive-map-app" class="is-loading">
  <main v-if="!showAddMarkersUI">
    <header>
      <p>
        Configure interactive map
        <a href="https://help.fliplet.com/interactive-graphics-component/" class="help-icon" target="_blank">
          <i class="fa fa-question-circle-o"></i>
        </a>
      </p>
    </header>
    <div class="loading-message">
      <div class="spinner-holder animated">
        <div class="spinner-overlay">Loading...</div>
        <p>Loading... Please wait!</p>
      </div>
    </div>
    <section class="app-content">
      <form class="form-horizontal">
        <div class="form-group clearfix maps-form-group">
          <div class="col-sm-12 control-label">
            <label>Add your maps</label>
          </div>
          <div class="col-sm-12">
            <div class="map-panels-holder">
              <div class="add-map-panel" @click.prevent="onAddMap"><i class="fa fa-plus-circle"></i> Add a new map</div>
              <div class="panel-group" id="map-accordion" v-sortable="{ handle: '.panel-heading', group: { name: 'mapPanels', pull: false }, scrollSensitivity: 116, scrollSpeed: 10, onUpdate: onSortMaps }">

                <div v-for="(map, idx) in maps" v-bind:class="[map.error ? 'panel-danger' : 'panel-default']" v-bind:key="map.id" class="panel map-panel" :data-id="map.id">
                  <div class="panel-heading grabbable">
                    <h4 class="panel-title" v-bind:class="{ 'collapsed': !map.isFromNew }" data-toggle="collapse" data-parent="#map-accordion" :data-target="'#collapse-' + map.id">
                      <div class="screen-reorder-handle">
                        <i class="fa fa-ellipsis-v"></i><i class="fa fa-ellipsis-v"></i>
                      </div>
                      <span class="panel-title-text">\{{map.name}}</span>
                      <span class="fa panel-chevron fa-chevron-up"></span>
                    </h4>
                    <a href="#" @click.prevent="deleteMap(idx)"><span class="icon-delete fa fa-trash"></span></a>
                  </div>
                  <div :id="'collapse-' + map.id" class="panel-collapse collapse" v-bind:class="{ in: map.isFromNew }">
                    <div class="panel-body">

                      <component :is="map.type" v-bind="map"></component>

                    </div>
                  </div>
                </div>

              </div>
            </div>
          </div>
        </div>

        <div class="form-group clearfix add-markers-form-group">
          <div class="col-sm-4 control-label">
            <label>Add markers to your map(s)</label>
          </div>
          <div class="col-sm-8">
            <div class="btn btn-default" @click.prevent="openAddMarkers">Mark map(s)</div>
          </div>
        </div>
      </form>
    </section>
  </main>
  <main v-else>
    <header>
      <div class="title-holder">
        <div class="go-back" @click.prevent="goBackToSettings"><i class="fa fa-angle-left"></i> Back to settings</div>
        <p>Add markers</p>
      </div>
    </header>
    <div ref="add-markers-wrapper" class="add-markers-wrapper">
      <component is="add-markers" v-bind="{
        widgetData: settings,
        dataSources: dataSources,
        markersDataSourceId: settings.markersDataSourceId,
        markerNameColumn: settings.markerNameColumn,
        markerMapColumn: settings.markerMapColumn,
        markerTypeColumn: settings.markerTypeColumn,
        markerXPositionColumn: settings.markerXPositionColumn,
        markerYPositionColumn: settings.markerYPositionColumn,
        changedDataSource: settings.changedDataSource
      }"></component>
    </div>
  </main>

  <div v-if="hasError || hasErrorOnSave" ref="errors-holder" class="errors-holder">
    <p v-if="hasError" class="text-danger">\{{ hasError.message }}</p>
    <p v-if="hasErrorOnSave" class="text-danger">\{{ hasErrorOnSave.message }}</p>
  </div>
</div>