diff options
| -rw-r--r-- | assets/sass/_models.sass | 4 | ||||
| -rw-r--r-- | components/FilePreview.vue | 63 | ||||
| -rw-r--r-- | components/ModelForm.vue | 20 |
3 files changed, 86 insertions, 1 deletions
diff --git a/assets/sass/_models.sass b/assets/sass/_models.sass index 1d7688b..e54e6ce 100644 --- a/assets/sass/_models.sass +++ b/assets/sass/_models.sass @@ -13,3 +13,7 @@ h3 &+ svg float: right + +.file-preview + img + margin: 0 auto diff --git a/components/FilePreview.vue b/components/FilePreview.vue new file mode 100644 index 0000000..a738a93 --- /dev/null +++ b/components/FilePreview.vue @@ -0,0 +1,63 @@ +<template lang="pug"> + .file-preview + img( + v-if="isImage(path)" + :src="baseAPI + '' + path" + ) + model-stl( + v-else-if="isStl(path)" + :rotate="rotate" + :src="baseAPI + '' + path" + :backgroundColor="'#D1D5DB'" + ) + model-obj( + v-else-if="isObj(path)" + :src="baseAPI + '' + path" + :backgroundColor="'#D1D5DB'" + ) +</template> + +<script> +import { ModelStl, ModelObj } from "vue-3d-model"; + +export default { + name: "FilePreview", + props: ["path"], + data() { + return { + baseAPI: "", + rotate: { + x: -Math.PI / 2, + y: 0, + z: 0, + }, + }; + }, + components: { + ModelStl, + ModelObj, + }, + created() { + this.baseAPI = this.$config.api; + }, + methods: { + checkExt(path, ext) { + return path.indexOf("." + ext) > 0; + }, + isImage(path) { + return ( + this.checkExt(path, "png") || + this.checkExt(path, "jpg") || + this.checkExt(path, "jpeg") || + this.checkExt(path, "webp") + ); + }, + isStl(path) { + return this.checkExt(path, "stl") || this.checkExt(path, "sla"); + }, + isObj(path) { + return this.checkExt(path, "obj") || this.checkExt(path, "octet-stream"); + }, + }, +}; +</script> diff --git a/components/ModelForm.vue b/components/ModelForm.vue index a2658fc..ea1d3c3 100644 --- a/components/ModelForm.vue +++ b/components/ModelForm.vue @@ -1,5 +1,17 @@ <template lang="pug"> form.mt-3 + .relative.z-10(aria-labelledby="modal-title", role="dialog", aria-modal="true" v-if="openPreview") + .fixed.inset-0.bg-gray-900.bg-opacity-90.transition-opacity + .fixed.inset-0.z-10.overflow-y-auto + .flex.min-h-full.items-center.justify-center.p-4.text-center + .relative.transform.overflow-hidden.rounded-lg.bg-white.shadow-xl.transition-all(class="w-10/12 sm:w-8/12") + file-preview(:path="openPreview") + .bg-gray-50.px-4.py-3(class="sm:flex sm:flex-row-reverse sm:px-6") + button.mt-3.inline-flex.w-full.justify-center.rounded-md.border.border-gray-300.bg-white.px-4.py-2.text-base.font-medium.text-gray-700.shadow-sm( + type="button" + class="hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm" + @click="openPreview = null" + ) Close .relative.z-10(aria-labelledby="modal-title", role="dialog", aria-modal="true" v-if="boxDeleteModelUpload > 0") .fixed.inset-0.bg-gray-900.bg-opacity-90.transition-opacity .fixed.inset-0.z-10.overflow-y-auto @@ -147,7 +159,7 @@ path(fill-rule="evenodd", d="M15.621 4.379a3 3 0 00-4.242 0l-7 7a3 3 0 004.241 4.243h.001l.497-.5a.75.75 0 011.064 1.057l-.498.501-.002.002a4.5 4.5 0 01-6.364-6.364l7-7a4.5 4.5 0 016.368 6.36l-3.455 3.553A2.625 2.625 0 119.52 9.52l3.45-3.451a.75.75 0 111.061 1.06l-3.45 3.451a1.125 1.125 0 001.587 1.595l3.454-3.553a3 3 0 000-4.242z", clip-rule="evenodd") span.ml-2.w-0.flex-1.truncate {{ getFileName(upload.filepath) }} .ml-4 - a.font-medium.text-black-700.cursor-pointer.mr-2(class="hover:underline") Preview + a.font-medium.text-black-700.cursor-pointer.mr-2(class="hover:underline" @click="openPreview = upload.filepath") Preview a.font-medium.text-red-700.cursor-pointer(class="hover:underline" @click="boxDeleteModelUpload = upload.id") Delete hr h3 Add new uploads @@ -177,6 +189,8 @@ </template> <script> +import FilePreview from "@/components/FilePreview.vue"; + import { mapGetters } from "vuex"; export default { @@ -187,12 +201,16 @@ export default { form: {}, tab: "info", boxDeleteModelUpload: 0, + openPreview: null, filesToUpload: [], }; }, computed: { ...mapGetters(["isLoading"]), }, + components: { + "file-preview": FilePreview, + }, created() { if (this.data) this.form = { ...this.data }; }, |