diff options
Diffstat (limited to 'src/pages/UploadDetail.vue')
| -rw-r--r-- | src/pages/UploadDetail.vue | 97 |
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()) }, } } |