From 8769fc4dc19447f67a42eb941fb43ba7223772eb Mon Sep 17 00:00:00 2001
From: Arne Schauf <git@asw.io>
Date: Sat, 3 Mar 2018 01:06:44 +0100
Subject: upgrade quasar to latest version

---
 src/pages/UploadDetail.vue | 223 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 223 insertions(+)
 create mode 100644 src/pages/UploadDetail.vue

(limited to 'src/pages/UploadDetail.vue')

diff --git a/src/pages/UploadDetail.vue b/src/pages/UploadDetail.vue
new file mode 100644
index 0000000..d742a4a
--- /dev/null
+++ b/src/pages/UploadDetail.vue
@@ -0,0 +1,223 @@
+<template>
+  <div>
+    <q-btn class="pull-right" @click="$router.push({name: 'upload-list'})" outline icon="fa-list">Back to list</q-btn>
+    <div v-if="upload" class="row">
+      <q-card class="col-6">
+        <q-card-media v-if="upload.pic" overlay-position="top">
+          <q-card-title slot="overlay">
+            Mod: {{ upload.title }}
+            <span slot="subtitle">by {{ upload.author.username }}</span>
+            <span slot="right" class="text-white" style="margin-left: 3rem">updated {{ upload.updatedAt | moment("from") }}</span>
+          </q-card-title>
+          <img :src="`${$http.defaults.baseURL}/media/${upload.pic}`">
+        </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>
+        </q-card-title>
+        <q-card-separator />
+        <q-card-main>
+          <p class="text-faded description">
+            {{ upload.description }}
+          </p>
+        </q-card-main>
+        <q-card-actions>
+          <q-btn @click="openInOpenclonk" color="positive" outline>
+            Install mod with OpenClonk
+          </q-btn>
+          <q-btn v-if="$store.state.user.decodedToken.username === upload.author.username"
+                 outline
+                 color="negative"
+                 icon="fa-trash-o"
+                 @click="deleteUpload(upload)">
+            Delete mod
+          </q-btn>
+        </q-card-actions>
+        <q-card-media v-if="upload.pic" overlay-position="bottom">
+          <q-card-title slot="overlay">
+            Voting
+          </q-card-title>
+          <q-parallax :src="`${$http.defaults.baseURL}/media/${upload.pic}`" :height="150">
+          </q-parallax>
+        </q-card-media>
+        <q-card-title v-else>
+          Voting
+        </q-card-title>
+        <q-card-main>
+          <div class="group">
+            <upload-voter :upload="upload" @voted="refresh"></upload-voter>
+          </div>
+        </q-card-main>
+        <q-card-media v-if="upload.pic" overlay-position="bottom">
+          <q-card-title slot="overlay">
+            Dependencies
+          </q-card-title>
+          <q-parallax :src="`${$http.defaults.baseURL}/media/${upload.pic}`" :height="150">
+          </q-parallax>
+        </q-card-media>
+        <q-card-title v-else>
+          Dependencies
+        </q-card-title>
+        <q-card-main>
+          <q-btn disabled flat v-if="upload.dependency.length === 0">
+            No dependencies
+          </q-btn>
+          <div class="group" v-else>
+            <div v-for="d of upload.dependency"
+                 :key="d._id">
+              <q-btn @click="$router.push({name: 'upload-detail', params: {uploadId: d._id}})" no-caps outline>
+                {{ d.title }}
+              </q-btn>
+            </div>
+          </div>
+        </q-card-main>
+        <q-card-media v-if="upload.pic" overlay-position="bottom">
+          <q-card-title slot="overlay">
+            File downloads
+          </q-card-title>
+          <q-parallax :src="`${$http.defaults.baseURL}/media/${upload.pic}`" :height="150">
+          </q-parallax>
+        </q-card-media>
+        <q-card-title v-else>
+          File downloads
+        </q-card-title>
+        <q-card-main>
+          <q-btn disabled flat v-if="upload.file.length === 0">
+            No files
+          </q-btn>
+          <div class="group"
+               v-else
+               v-for="fid of upload.file"
+               :key="fid._id">
+            <q-btn loader
+                   no-caps
+                   color="primary"
+                   :percentage="(downloadProgresses[fid._id] || {}).percentage"
+                   @click="(event, done) => {downloadMedia(fid._id, fid.filename, done)}">
+              {{ fid.filename }} ({{ fid.length|prettyBytes }})
+              <span slot="loading">Downloading...</span>
+            </q-btn>
+            <span v-if="downloadProgresses[fid._id]">
+                <q-transition enter="fadeIn" leave="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>
+                  <span key="downloadDone" v-else><i class="fa fa-check fa-2x text-positive"></i></span>
+                </q-transition>
+              </span>
+          </div>
+        </q-card-main>
+        <q-card-media v-if="upload.pic" overlay-position="bottom">
+          <q-card-title slot="overlay">
+            Other data
+          </q-card-title>
+          <q-parallax :src="`${$http.defaults.baseURL}/media/${upload.pic}`" :height="150">
+          </q-parallax>
+        </q-card-media>
+        <q-card-title v-else>
+          Other data
+        </q-card-title>
+        <q-card-main>
+          <p>ID: {{ upload._id }}</p>
+        </q-card-main>
+      </q-card>
+    </div>
+    <div v-else>
+      <q-spinner size="50"></q-spinner> Loading mod data...
+    </div>
+  </div>
+</template>
+
+<script>
+  import {
+    Dialog,
+    openURL,
+  } from 'quasar'
+  import UploadVoter from 'components/UploadVoter'
+  import FileSaver from 'file-saver'
+
+  export default {
+    components: {
+      UploadVoter,
+    },
+    computed: {
+      routeId () {
+        return this.$route.params.uploadId
+      },
+    },
+    watch: {
+      routeId: {
+        handler (val, oldVal) {
+          if (val && val !== oldVal) {
+            this.refresh()
+          }
+        },
+        immediate: true,
+      },
+    },
+    data () {
+      return {
+        upload: null,
+        downloadProgresses: {},
+      }
+    },
+    methods: {
+      refresh () {
+        let that = this
+        this.$http.get(`/uploads/${this.routeId}`).then(response => {
+          that.upload = response.data
+        })
+      },
+      deleteUpload () {
+        let that = this
+        Dialog.create({
+          title: 'Delete mod?',
+          message: `Do you really want to delete the mod ${this.upload.title}?<br>This cannot be undone!`,
+          buttons: [
+            'Cancel',
+            {
+              label: '<i class="fa fa-trash-o"></i> Yes, delete!',
+              color: 'negative',
+              outline: true,
+              handler () {
+                that.$http.delete(`/uploads/${that.routeId}`).then(response => that.$router.push({name: 'upload-list'}))
+              }
+            }
+          ]
+        })
+      },
+      downloadMedia (mediaId, filename, done) {
+        console.log({mediaId, done})
+        let that = this
+        this.$set(this.downloadProgresses, mediaId, {})
+        this.$set(this.downloadProgresses[mediaId], 'done', done)
+        this.$set(this.downloadProgresses[mediaId], 'percentage', 0)
+        this.$set(this.downloadProgresses[mediaId], 'loaded', 0)
+        this.$set(this.downloadProgresses[mediaId], 'total', 0)
+        this.$http.get(
+          `${this.$http.defaults.baseURL}/media/${mediaId}`,
+          {
+            responseType: 'blob',
+            onDownloadProgress: progressEvent => { that.downloadProgress(mediaId, progressEvent) },
+          }
+        ).then((response) => {
+          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}`)
+      }
+    }
+  }
+</script>
+
+<style lang="styl" type="text/stylus" scoped>
+</style>
-- 
cgit v1.2.3-54-g00ecf