Skip to content
Snippets Groups Projects
Select Git revision
  • 1950c40fac8a3c7e179a9781f4efedcc6c8d2aa6
  • main default protected
2 results

utils.py

Blame
  • LayersEditor.vue 1.54 KiB
    <template>
      <div class="layersEditor">
        <h2 class="title is-6">Custom layers</h2>
    
        <b-field position="is-centered">
          <b-button class="addButton" icon-left="plus-box" type="is-info" @click="addLayer" expanded> Add custom layer </b-button>
        </b-field>
    
        <b-field v-for="(layer, index) in layers" v-bind:key="layer.name" grouped position="is-centered">
    
          <p class="control">
            <b-button icon-left="close-circle" type="is-danger" outlined @click="deleteLayer(layer)"/>
          </p>
    
          <b-input :placeholder="'Layer ' + index + ' name'" v-model="layer.name"/>
    
          <p class="control">
            <b-upload v-model="layer.file" accept=".py">
              <a class="button is-primary">
                <b-icon icon="upload"></b-icon>
                <span>Upload layer file</span>
              </a>
            </b-upload>
            <span class="file-name" v-if="layer.file">{{ layer.file.name }}</span>
          </p>
    
        </b-field>
      </div>
    </template>
    
    <script>
    export default {
      name: 'LayersEditor',
      props: {
        layers: {
          type: Array,
          default: function () {
            return []
          }
        }
      },
      methods: {
        addLayer () {
          this.layers.push({
            id: this.layers.length,
            name: null
          })
        },
        deleteLayer (layer) {
          const index = this.layers.indexOf(layer)
          if (index > -1) {
            this.layers.splice(index, 1)
          }
        }
      }
    }
    </script>
    
    <style scoped>
    .layersEditor h2 {
      padding: 0;
      margin: 0;
      margin-top: 15px;
    }
    
    .layersEditor .addButton {
      margin: 0;
      margin-top: 5px;
      margin-bottom: 10px;
    }
    </style>