summaryrefslogtreecommitdiff
path: root/components
diff options
context:
space:
mode:
authorSanto Cariotti <santo@dcariotti.me>2022-09-24 15:57:30 +0200
committerSanto Cariotti <santo@dcariotti.me>2022-09-24 15:57:30 +0200
commit6c870e85cc152cb83855e74e1fc93302c6f96fe2 (patch)
treeb656c79517c398f5de0a9eda3fe443edb1783b51 /components
parentb2f16fcbd5b199847e00faeba743cd52a10f4ca1 (diff)
File preview on model edit
Diffstat (limited to 'components')
-rw-r--r--components/FilePreview.vue63
-rw-r--r--components/ModelForm.vue20
2 files changed, 82 insertions, 1 deletions
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 };
},