Adapt to new picture format, support nonexistent authors

2 files changed, 24 insertions, 13 deletions

diff --git a/src/pages/UploadCreate.vue b/src/pages/UploadCreate.vue
index c435a2f..6cdabcd 100644
--- a/src/pages/UploadCreate.vue
+++ b/src/pages/UploadCreate.vue
@@ -14,9 +14,12 @@
           <div class="group">
             <q-field :error="errors.title !== undefined"
                      :error-label="errors.title"
-                     icon="fa-pencil">
+                     icon="fa-edit">
               <q-input v-model="title" float-label="Title" />
             </q-field>
+            <q-field icon="fa-edit">
+              <q-input v-model="version" float-label="Version" />
+            </q-field>
             <q-field :error="errors.tags !== undefined"
                      :error-label="errors.tags"
                      icon="fa-tags">
@@ -105,7 +108,7 @@
           </q-field>
           <q-stepper-navigation>
             <q-btn color="primary" flat @click="$refs.stepper.previous()">Back</q-btn>
-            <q-btn color="positive" icon="fa-save" @click="postUpload" :disabled="!uploadEnabled">Save mod</q-btn>
+            <q-btn color="positive" icon="fa-save" @click="postUpload" :disabled="!uploadEnabled">&nbsp;Save mod</q-btn>
           </q-stepper-navigation>
         </q-step>
         <q-step name="done" title="Done">
@@ -146,6 +149,7 @@
         files: [],
         tags: [],
         title: '',
+        version: '',
         description: '',
         slug: '',
         errors: {},
@@ -170,7 +174,7 @@
           headers: { Authorization: `JWT ${this.$store.state.user.authToken}` },
           acceptedFiles: '.ocs,.ocf,.ocd,.ocg,.ocr,.ocu,.c4d,.c4g,.c4f,.c4r,.c4s,.c4v,.c4l,.c4u',
           dictDefaultMessage: "<p><i class='fa fa-3x fa-cloud-upload'></i></p><p>Drop your mod files here or click to upload</p>",
-          maxFilesize: 30, // MB
+          maxFilesize: 100, // MB
         }
       },
       picDropzoneOptions () {
@@ -181,7 +185,6 @@
           acceptedFiles: '.png,.jpg',
           dictDefaultMessage: "<p><i class='fa fa-3x fa-cloud-upload'></i></p><p>Drop your image here or click to upload</p>",
           maxFilesize: 3, // MB
-          maxFiles: 1,
           thumbnailWidth: null,
           thumbnailHeight: 300,
           createImageThumbnails: true,
@@ -233,6 +236,7 @@
         }
         let params = {
           title: this.title,
+          version: this.version,
           description: this.description,
           files: this.files.map(el => el.id),
           tags: this.tags,
@@ -253,6 +257,7 @@
       },
       reset () {
         this.title = ''
+        this.version = ''
         this.description = ''
         this.savedScenario = ''
         this.errors = {}
diff --git a/src/pages/UploadDetail.vue b/src/pages/UploadDetail.vue
index ec75faa..d93c16d 100644
--- a/src/pages/UploadDetail.vue
+++ b/src/pages/UploadDetail.vue
@@ -2,27 +2,27 @@
   <div>
     <div v-if="upload">
       <q-card>
-        <q-card-media v-if="upload.pictures.length > 0" overlay-position="top">
+        <q-card-media v-if="pictures.length > 0" overlay-position="top">
           <q-card-title slot="overlay">
-            {{ upload.title }}
+            {{ upload.title }} v{{ upload.version }}
             <span slot="subtitle">
-              by {{ upload.author.name }},
+              <span v-if="hasAuthor">by {{ upload.author.name }}</span>,
               updated {{ upload.updatedAt | moment("from") }}
             </span>
             <span slot="right" class="text-white" style="margin-left: 3rem">
             <q-btn @click="$router.push({name: 'upload-list'})" flat round icon="fa-times" color="negative"/>
             </span>
           </q-card-title>
-          <q-carousel class="text-width" v-if="upload.pictures.length > 1" style="height: 300px;" arrows quick-nav infinite autoplay>
-            <q-carousel-slide v-for="picture in upload.pictures" :key="picture.id" :style="`background: url('${$http.defaults.baseURL}/media/${picture.id}') no-repeat; background-size: 100% auto;`">
+          <q-carousel class="text-width" v-if="pictures.length > 1" style="height: 300px;" arrows quick-nav infinite autoplay>
+            <q-carousel-slide v-for="picture in pictures" :key="picture.id" :style="`background: url('${$http.defaults.baseURL}/media/${picture.id}') no-repeat; background-size: 100% auto;`">
             </q-carousel-slide>
           </q-carousel>
-          <div v-else :style="`background: url('${$http.defaults.baseURL}/media/${upload.pictures[0].id}') no-repeat; background-size: 100% auto; height: 300px;`">
+          <div v-else :style="`background: url('${$http.defaults.baseURL}/media/${pictures[0].id}') no-repeat; background-size: 100% auto; height: 300px;`">
           </div>
         </q-card-media>
         <q-card-title class="bg-positive text-white" v-else>
-          {{ upload.title }}
-          <span slot="subtitle" class="text-white">by {{ upload.author.name }}</span>
+          {{ upload.title }} v{{ upload.version }}
+          <span slot="subtitle" class="text-white" v-if="hasAuthor">by {{ upload.author.name }}</span>
           <span slot="right" class="text-white" style="margin-left: 3rem">updated {{ upload.updatedAt | moment("from") }}</span>
           <span slot="right" class="text-white" style="">
             <q-btn @click="$router.push({name: 'upload-list'})" flat round icon="fa-times" color="negative"/>
@@ -284,8 +284,11 @@
       routeId () {
         return this.$route.params.uploadId
       },
+      hasAuthor() {
+        return this.upload && this.upload.author && this.upload.author.name !== ""
+      },
       isAuthor () {
-        return this.upload && this.upload.author && this.upload.author.name === this.name
+        return this.hasAuthor && this.upload.author.name === this.name
       },
       name () {
         return this.$store.state.user.decodedToken.name
@@ -293,6 +296,9 @@
       loggedIn () {
         return this.$store.getters['user/loggedIn']
       },
+      pictures() {
+        return this.upload ? this.upload.files.filter(file => file["content-type"].startsWith("image/")) : []
+      },
       filesDropzoneOptions () {
         return {
           url: `${this.$http.defaults.baseURL}/media`,