Initial adapt to LegacyClonk

1 files changed, 52 insertions, 45 deletions

diff --git a/src/pages/UploadDetail.vue b/src/pages/UploadDetail.vue
index a26b0c2..f274eec 100644
--- a/src/pages/UploadDetail.vue
+++ b/src/pages/UploadDetail.vue
@@ -2,31 +2,41 @@
   <div>
     <div v-if="upload">
       <q-card>
-        <q-card-media v-if="upload.pic" overlay-position="top">
+        <q-card-media v-if="upload.pictures.length > 0" overlay-position="top">
           <q-card-title slot="overlay">
             {{ upload.title }}
             <span slot="subtitle">
-              by {{ upload.author.username }},
+              by {{ upload.author.name }},
               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>
-          <img :src="`${$http.defaults.baseURL}/media/${upload.pic._id}`">
+          <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-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>
         </q-card-media>
         <q-card-title class="bg-positive text-white" v-else>
           {{ upload.title }}
-          <span slot="subtitle" class="text-light">by {{ upload.author.username }}</span>
-          <span slot="right" class="text-light" style="margin-left: 3rem">updated {{ upload.updatedAt | moment("from") }}</span>
+          <span slot="subtitle" class="text-white">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"/>
+          </span>
         </q-card-title>
         <q-card-separator />
         <q-card-actions>
-          <q-btn @click="openInOpenclonk"
+          <q-btn @click="openInLegacyClonk"
                  color="positive"
                  outline
                  icon="fa-download"
-                 label="Install mod with OpenClonk" />
+                 label="Install mod with LegacyClonk"
+                 disabled
+                 v-if="false" />
           <q-btn v-if="isAuthor"
                  outline
                  color="negative"
@@ -126,12 +136,12 @@
             <em>Please log in to comment</em>
           </div>
           <div class="flex row no-wrap items-center"
-               v-for="comment of comments.comments"
-               :key="comment._id">
+               v-for="comment of comments.slice().reverse()"
+               :key="comment.id">
             <q-chat-message
               style="max-width: 90%"
               :bg-color="comment.voting.sum > 0 ? 'light-green-2' : ( comment.voting.sum === 0 ? 'grey-3' : 'red-2')"
-              :name="(comment.author || {}).username"
+              :name="(comment.author || {}).name"
               :text="comment.body.split('\n').filter(el => el.trim() !== '')"
               :stamp="$moment(comment.createdAt).format('LLLL')" />
             <q-btn v-if="isAuthor"
@@ -141,7 +151,7 @@
                    icon="fa-trash"
                    color="negative"
                    @click="deleteComment(comment)"/>
-            <comment-voter @voted="loadComments" :comment="comment"></comment-voter>
+            <comment-voter @voted="refresh" :comment="comment"></comment-voter>
           </div>
         </q-card-main>
         <q-card-separator />
@@ -163,8 +173,8 @@
           </q-btn>
           <div class="group" v-else>
             <div v-for="d of upload.dependencies"
-                 :key="d._id">
-              <q-btn @click="$router.push({name: 'upload-detail', params: {uploadId: d._id}})" no-caps outline>
+                 :key="d.id">
+              <q-btn @click="$router.push({name: 'upload-detail', params: {uploadId: d.id}})" no-caps outline>
                 {{ d.title }}
               </q-btn>
             </div>
@@ -203,22 +213,22 @@
           <div class="group"
                v-else
                v-for="(fid, idx) of upload.files"
-               :key="fid._id">
+               :key="fid.id">
             <q-btn loader
                    no-caps
                    outline
                    icon="fa-download"
                    color="primary"
-                   :percentage="(downloadProgresses[fid._id] || {}).percentage"
-                   :loading="downloadProgresses[fid._id] && downloadProgresses[fid._id].percentage < 100"
-                   @click="(event, done) => {downloadMedia(fid._id, fid.filename, done)}"
+                   :percentage="(downloadProgresses[fid.id] || {}).percentage"
+                   :loading="downloadProgresses[fid.id] && downloadProgresses[fid.id].percentage < 100"
+                   @click="(event, done) => {downloadMedia(fid.id, fid.filename, done)}"
                    :label="`${fid.filename} (${$options.filters.prettyBytes(fid.length)})`">
               <span slot="loading">Downloading...</span>
             </q-btn>
-            <span v-if="downloadProgresses[fid._id]">
+            <span v-if="downloadProgresses[fid.id]">
               <transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut" mode="out-in">
-                <span key="sizeDownloaded" v-if="downloadProgresses[fid._id].percentage < 100">
-                  {{ downloadProgresses[fid._id].loaded|prettyBytes }} / {{ downloadProgresses[fid._id].total|prettyBytes }}
+                <span key="sizeDownloaded" v-if="downloadProgresses[fid.id].percentage < 100">
+                  {{ downloadProgresses[fid.id].loaded|prettyBytes }} / {{ downloadProgresses[fid.id].total|prettyBytes }}
                 </span>
                 <span key="downloadDone" v-else><i class="fa fa-check fa-2x text-positive"></i></span>
               </transition>
@@ -244,7 +254,7 @@
           <i class="far fa-hand-point-right"></i> Other data
         </q-card-title>
         <q-card-main>
-          <p>ID: {{ upload._id }}</p>
+          <p>ID: {{ upload.id }}</p>
         </q-card-main>
       </q-card>
     </div>
@@ -260,7 +270,7 @@
   import { openURL } from 'quasar'
   import UploadVoter from 'components/UploadVoter'
   import CommentVoter from 'components/CommentVoter'
-  import FileSaver from 'file-saver'
+  /* import FileSaver from 'file-saver' */
   import VueMarkdown from 'vue-markdown'
 
   export default {
@@ -275,10 +285,10 @@
         return this.$route.params.uploadId
       },
       isAuthor () {
-        return this.upload && this.upload.author && this.upload.author.username === this.username
+        return this.upload && this.upload.author && this.upload.author.name === this.name
       },
-      username () {
-        return this.$store.state.user.decodedToken.username
+      name () {
+        return this.$store.state.user.decodedToken.name
       },
       loggedIn () {
         return this.$store.getters['user/loggedIn']
@@ -287,8 +297,8 @@
         return {
           url: `${this.$http.defaults.baseURL}/media`,
           paramName: 'media',
-          headers: { Authorization: `Bearer ${this.$store.state.user.authToken}` },
-          acceptedFiles: '.ocs,.ocf,.ocd,.ocg,.ocr,.c4d,.c4g,.c4f,.c4r,.c4s,c4v',
+          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
         }
@@ -321,7 +331,7 @@
         let that = this
         this.$http.get(`/uploads/${this.routeId}`).then(response => {
           that.upload = response.data
-          that.loadComments()
+          that.comments = response.data.comments
         }).catch((error) => {
           if (error.response.status === 404) {
             that.$router.push({name: 'upload-list'})
@@ -331,14 +341,8 @@
           }
         })
       },
-      loadComments () {
-        let that = this
-        this.$http.get(`/uploads/${this.routeId}/comments`).then(response => {
-          that.comments = response.data
-        }).catch((error) => {
-          that.$q.notify('Failed loading comments')
-          console.error(error)
-        })
+      getPictures (picture) {
+        return picture.map(p => `${this.$http.defaults.baseURL}/media/${p.id}`)
       },
       uploadSuccess (file, response) {
         this.upload.files.push(response)
@@ -347,7 +351,7 @@
       },
       saveUpload () {
         let that = this
-        this.$http.put(`/uploads/${this.upload._id}`, this.upload).then(response => {
+        this.$http.put(`/uploads/${this.upload.id}`, this.upload).then(response => {
           that.editDescription = false
           that.editTags = false
           that.editFiles = false
@@ -366,9 +370,11 @@
             outline: true,
           },
           cancel: 'Cancel',
-        }).then(() => that.$http.delete(`/uploads/${upload._id}`).then(response => that.refresh()))
+        }).then(() => that.$http.delete(`/uploads/${upload.id}`).then(response => that.refresh()))
       },
       downloadMedia (mediaId, filename, done) {
+        window.open(`${this.$http.defaults.baseURL}/media/${mediaId}?download=1`)
+        /*
         console.log({mediaId, done})
         let that = this
         this.$set(this.downloadProgresses, mediaId, {})
@@ -386,36 +392,37 @@
           FileSaver.saveAs(response.data, filename)
           that.downloadProgresses[mediaId].done()
           that.downloadProgresses[mediaId].percentage = 100
-        })
+        }) */
       },
       downloadProgress (mediaId, progressEvent) {
         this.downloadProgresses[mediaId].percentage = progressEvent.loaded * 100 / progressEvent.total
         this.downloadProgresses[mediaId].loaded = progressEvent.loaded
         this.downloadProgresses[mediaId].total = progressEvent.total
       },
-      openInOpenclonk () {
-        openURL(`openclonk://installmod/${this.upload._id}`)
+      openInLegacyClonk () {
+        openURL(`clonk://installmod/${this.upload.id}`)
       },
       sendComment () {
         let that = this
         this.commentSaving = true
         if (this.comment.length > 0) {
-          this.$http.post(`/uploads/${this.upload._id}/comments`, {body: this.comment}).then(() => {
+          this.$http.post(`/uploads/${this.upload.id}/comments`, {body: this.comment}).then(() => {
             that.comment = ''
             that.$q.notify({color: 'positive', icon: 'fa-check', message: 'Comment sent'})
-            that.loadComments()
             this.commentSaving = false
+            that.refresh()
           }).catch((error) => {
             that.$q.notify('Error sending your comment')
-            that.loadComments()
             this.commentSaving = false
+            that.refresh()
+            console.log(error)
             console.error(error)
           })
         }
       },
       deleteComment (comment) {
         let that = this
-        this.$http.delete(`/uploads/${comment.upload}/comments/${comment._id}/`).then(() => that.loadComments())
+        this.$http.delete(`/uploads/${comment.upload}/comments/${comment.id}/`).then(() => that.refresh())
       },
     }
   }