cubash-archive/frontend/src/components/routes/MarketplaceCreate.vue

<template>
  <main>
    <center>
      <div class="section">
        <div class="column is-6">
          <div class="box">
            <div v-if="stage === 1">
              <center><h1>Hi, what asset would you like to create?</h1>
                <p v-if="!$store.state.modeler">Want to upload more than just shirts and pants? Apply to become an asset creator and get access to much more.</p>
                <b-tooltip label="You may not upload hats at this time, Contact Troplo if you'd like to upload one.">
                  <b-button disabled @click="createType = 0; stage = 2" v-if="$store.state.modeler" class="is-large">
                    Hat
                  </b-button>
                </b-tooltip>
                &nbsp;
                <b-button @click="createType = 1; stage = 2" v-if="$store.state.modeler" class="is-large">
                  Face
                </b-button>
                &nbsp;
                <b-button @click="createType = 2; stage = 2" class="is-large">
                  Shirt
                </b-button>
                &nbsp;
                <b-button @click="createType = 3; stage = 2" class="is-large">
                  Pants
                </b-button>
              </center>
            </div>
            <div v-if="stage === 2">
              <b-button @click="goBack()">Go back</b-button><br>
              <h1 v-if="createType === 0">
                Uploading a hat
              </h1>
              <h1 v-if="createType === 1">
                Uploading a face
              </h1>
              <h1 v-if="createType === 2">
                Uploading a shirt
              </h1>
              <h1 v-if="createType === 3">
                Uploading pants
              </h1>
              <b-button v-if="createType === 3" tag="a" :href="'https://cdn.kaverti.com/templates/pantsTemplate.png'">Download template</b-button><br>
              <b-button v-if="createType === 2" tag="a" :href="'https://cdn.kaverti.com/templates/shirtTemplate.png'">Download template</b-button><br>
              <p v-if="createType === 0">Please contact Troplo if you do not have the required assets for uploading this item type.</p>
              <p v-if="createType === 1">Please contact Troplo if you do not have the required assets for uploading this item type.</p>
              Name:
              <b-input :value="$store.state.username + '\'s ' + createType"
                       v-model="item.name"
                       maxlength="30">
              </b-input>
              Description:
              <b-input v-model="item.description" maxlength="150" type="textarea">

              </b-input>
              Options:<br>
              <b-switch v-model="item.limited" v-if="$store.state.admin">
                Limited
              </b-switch>
              <div v-if="item.limited && $store.state.admin">
                Quantity allowed (0 for unlimited):
                <b-numberinput v-model="item.quantity"></b-numberinput>
              </div>
              <br>
              <b-switch v-model="item.onSale">
                On sale
              </b-switch>
              <br>
              <div v-if="item.onSale">
                On sale price:
                <b-input v-model="item.onSalePrice" v-if="item.onSale"></b-input>
                <br>
              </div>
              <br>
              Price:
              <b-input v-model="item.price"></b-input>
              <br>
              <b-field class="file">
                <b-upload v-model="item.file" expanded>
                  <a class="button is-primary is-fullwidth">
                    <b-icon icon="upload"></b-icon>
                    <span>{{ item.file.name || "Upload .OBJ"}}</span>
                  </a>
                </b-upload>
              </b-field>
              <b-field class="file">
                <b-upload v-model="item.fileMtl" expanded>
                  <a class="button is-primary is-fullwidth">
                    <b-icon icon="upload"></b-icon>
                    <span>{{ item.fileMtl.name || "Upload .MTL"}}</span>
                  </a>
                </b-upload>
              </b-field>
              <b-button v-if="createType === 1" @click="submitItem" :loading="loading">Submit</b-button>
              <b-button v-if="createType === 2" @click="submitItem" :loading="loading">Submit</b-button>
              <b-button v-if="createType === 3" @click="submitItem" :loading="loading">Submit</b-button>
            </div>
          </div>
        </div>
      </div>
    </center>
  </main>
</template>
<script>
// eslint-disable-next-line no-unused-vars
import AjaxErrorHandler from "@/assets/js/errorHandler";

export default {
  name: 'MarketplaceCreate',
  data() {
    return {
      createType: 0,
      stage: 1,
      loading: false,
      item: {
        file: '',
        fileMtl: '',
        dropFiles: null,
        name: 'Item',
        limited: false,
        onSale: false,
        onSalePrice: 0,
        quantity: 0,
        price: 100,
        description: ''
      }
    }
  },
  methods: {
    goBack() {
      this.createType = null
      this.stage = 1
      this.file = null
      this.dropFiles = null
    },
    submitItem() {
      this.loading = true
      const data = new FormData();

      data.append('name', this.item.name);
      data.append('price', this.item.price);
      data.append('image', this.item.file);
      data.append('description', this.item.description);
      data.append('onSale', this.item.onSale);
      data.append('onSalePrice', this.item.onSalePrice);
      this.axios.post(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'marketplace/upload/' + this.createType, data)
        .then((res) => {
          this.loading = false
          this.$router.push('/m/' + res.data.id)
        }).catch((e) => {
          this.loading = false
        AjaxErrorHandler(this.$store)(e)
      })
    }
  }
}
</script>