Initial adapt to LegacyClonk

4 files changed, 71 insertions, 68 deletions

diff --git a/src/pages/FetchToken.vue b/src/pages/FetchToken.vue
index 6745377..d681ca8 100644
--- a/src/pages/FetchToken.vue
+++ b/src/pages/FetchToken.vue
@@ -47,7 +47,7 @@
             }
             else {
               let that = this
-              this.$http.get('/uploads', {headers: {Authorization: `Bearer ${this.routeToken}`}}).then(response => {
+              this.$http.get('/api/auth', {headers: {Authorization: `JWT ${this.routeToken}`}}).then(response => {
                 that.tokenValid = true
                 that.$store.commit('user/setAuthToken', { authToken: that.routeToken })
                 window.close()
diff --git a/src/pages/UploadCreate.vue b/src/pages/UploadCreate.vue
index 4b27725..c435a2f 100644
--- a/src/pages/UploadCreate.vue
+++ b/src/pages/UploadCreate.vue
@@ -43,7 +43,7 @@
           </q-alert>
           <dropzone id="picDropzone"
                     ref="picDropzone"
-                    @vdropzone-success="picUploadSuccess"
+                    @vdropzone-success="uploadSuccess"
                     :options="picDropzoneOptions">
           </dropzone>
           <q-stepper-navigation>
@@ -61,7 +61,7 @@
           </q-stepper-navigation>
         </q-step>
         <q-step name="files" title="Add files">
-          <p>Now please upload your mod files (e.g. the .ocs file). You have to upload at least one file</p>
+          <p>Now please upload your mod files (e.g. the .c4s file). You have to upload at least one file</p>
           <q-alert color="warning"
                    enter="bounceInLeft"
                    appear>
@@ -83,9 +83,9 @@
             </tr>
             </thead>
             <tbody>
-            <tr v-for="(file, idx) of files" :key="file._id">
+            <tr v-for="(file, idx) of files" :key="file.id">
               <td>{{ file.filename }}</td>
-              <td>{{ file._id }}</td>
+              <td>{{ file.id }}</td>
               <td>{{ file.length | prettyBytes }}</td>
               <td>uploaded {{ file.uploadDate|moment("from") }}</td>
               <td><q-btn round color="negative" small icon="fa-trash" @click="deleteFile(idx)"></q-btn></td>
@@ -110,13 +110,13 @@
         </q-step>
         <q-step name="done" title="Done">
           <h6 class="text-positive" v-if="savedScenario">
-            Successfully saved your mod with the id {{ savedScenario._id }}
+            Successfully saved your mod with the id {{ savedScenario.id }}
           </h6>
           <q-stepper-navigation>
             <q-btn color="warning" icon="fa-refresh" @click="reset">Upload another one</q-btn>
             <q-btn color="primary"
                    icon="fa-eye"
-                   @click="$router.push({name: 'upload-detail', params: {uploadId: savedScenario._id}})">
+                   @click="$router.push({name: 'upload-detail', params: {uploadId: savedScenario.id}})">
               Show the saved mod
             </q-btn>
           </q-stepper-navigation>
@@ -167,8 +167,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
         }
@@ -177,7 +177,7 @@
         return {
           url: `${this.$http.defaults.baseURL}/media`,
           paramName: 'media',
-          headers: { Authorization: `Bearer ${this.$store.state.user.authToken}` },
+          headers: { Authorization: `JWT ${this.$store.state.user.authToken}` },
           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
@@ -195,7 +195,7 @@
         if (!this.pic) {
           return ''
         }
-        return `${this.$http.defaults.baseURL}/media/${this.pic._id}`
+        return `${this.$http.defaults.baseURL}/media/${this.pic.id}`
       },
     },
     watch: {
@@ -209,11 +209,7 @@
       deleteFile (idx) {
         let file = this.files[idx]
         this.files.splice(idx, 1)
-        this.$http.delete(`${this.$http.defaults.baseURL}/media/${file._id}`)
-      },
-      picUploadSuccess (file, response) {
-        this.pic = response
-        this.$refs.picDropzone.disable()
+        this.$http.delete(`${this.$http.defaults.baseURL}/media/${file.id}`)
       },
       uploadSuccess (file, response) {
         this.files.push(response)
@@ -238,8 +234,7 @@
         let params = {
           title: this.title,
           description: this.description,
-          files: this.files.map(el => el._id),
-          pic: this.pic,
+          files: this.files.map(el => el.id),
           tags: this.tags,
         }
         this.$http.post('/uploads', params)
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())
       },
     }
   }
diff --git a/src/pages/UploadList.vue b/src/pages/UploadList.vue
index 733206f..423f381 100644
--- a/src/pages/UploadList.vue
+++ b/src/pages/UploadList.vue
@@ -17,16 +17,16 @@
         :visible-columns="visibleColumns"
         @refresh="refresh">
         <q-td slot='body-cell-title' slot-scope="props" :props='props'>
-          <router-link :to="{name: 'upload-detail', params: {uploadId: props.row._id}}">{{ props.value }}</router-link>
+          <router-link :to="{name: 'upload-detail', params: {uploadId: props.row.id}}">{{ props.value }}</router-link>
         </q-td>
         <q-td slot='body-cell-action' slot-scope="props" :props='props'>
           <q-btn color="primary"
-                 v-if="$route.params.uploadId !== props.row._id"
+                 v-if="$route.params.uploadId !== props.row.id"
                  small
                  outline
                  icon="fa-info-circle"
                  label="Show"
-                 @click="$router.push({name: 'upload-detail', params: {uploadId: props.row._id}})" />
+                 @click="$router.push({name: 'upload-detail', params: {uploadId: props.row.id}})" />
         </q-td>
         <q-td slot='body-cell-voting' slot-scope="props" :props='props'>
           {{ props.value.sum }} <i class="fa" :class="{'fa-caret-up text-positive': props.value.sum > 0, 'fa-caret-down text-negative': props.value.sum < 0, 'fa-sort text-dark': props.value.sum === 0}"></i>
@@ -82,7 +82,7 @@
             align: 'left',
             format: el => typeof el === 'string' && el.length > 50 ? el.slice(0, 50) + '...' : el,
           },
-          {name: 'author', label: 'Author', field: row => row.author.username, align: 'left'},
+          {name: 'author', label: 'Author', field: row => row.author.name, align: 'left'},
           {name: 'voting', label: 'Voting', field: 'voting', align: 'left'},
           {
             name: 'updatedAt',
@@ -99,6 +99,7 @@
       refresh (done) {
         let that = this
         this.$http.get('/uploads').then((response) => {
+          console.log(response.data.uploads)
           that.response = response
           that.uploads = response.data.uploads
           if (done) {
@@ -118,7 +119,7 @@
             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()))
       },
     },
   }