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