Georg Spar
1 year ago
6 changed files with 121 additions and 7 deletions
@ -0,0 +1,107 @@
|
||||
<template> |
||||
<ClientOnly> |
||||
<Card style="margin-top: 78px; min-height: 200px;"> |
||||
<template #content> |
||||
<Panel header="Managing photos" class="rounded-4 bg-white" > |
||||
<template #icons> |
||||
<Button class="mr-2" @click="onNew" label=" NEW " icon="pi pi-plus" /> |
||||
</template> |
||||
<div class="grid"> |
||||
<FileUpload :custom-upload="true" |
||||
@uploader="onAdvancedUpload" |
||||
:multiple="true" |
||||
accept="image/*" |
||||
:maxFileSize="10000000" |
||||
class="col-6" |
||||
style="max-width: 50%;"> |
||||
<template #content> |
||||
<ul v-if="uploadedFiles && uploadedFiles[0]"> |
||||
<li v-for="file of uploadedFiles[0]" :key="file"> |
||||
{{ file.name }} - {{ file.size }} bytes |
||||
</li> |
||||
</ul> |
||||
</template> |
||||
<template #empty> |
||||
<p>Drag and drop files to here to upload.</p> |
||||
</template> |
||||
</FileUpload> |
||||
<DataView class="col-6" id="dv" :value="photos" paginator :rows="5"> |
||||
<template #list="slotProps"> |
||||
<div class="col-12"> |
||||
<div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4"> |
||||
<img class="w-2 shadow-2 block xl:block mx-auto border-round" :src="`${pfad}/thumb-${slotProps.data.pfad}`" :alt="slotProps.data.pfad" /> |
||||
<div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4"> |
||||
<div class="flex flex-column align-items-center sm:align-items-start gap-3"> |
||||
<div class="text-2xl font-bold text-900">{{ slotProps.data.kurzbeschreibung }}</div> |
||||
<div class="flex align-items-center gap-3"> |
||||
<span class="flex align-items-center gap-2"> |
||||
<i class="pi pi-tag"></i> |
||||
<span class="font-semibold">{{ slotProps.data.itembid }}</span> |
||||
<span class="font-semibold">{{ slotProps.data.itemextid }}</span> |
||||
</span> |
||||
|
||||
</div> |
||||
<div class="col-12 gap-3 flex"> |
||||
<Button severity="info" @click="openDetail(slotProps.data.id)" target="_blank" label=" Details " icon="pi pi-list" /> |
||||
<Button severity="success" @click="openEval(slotProps.data.typid)" label=" Evaluation " icon="pi pi-eye" /> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
</DataView> |
||||
</div> |
||||
|
||||
</Panel> |
||||
</template> |
||||
</Card> |
||||
</ClientOnly> |
||||
|
||||
|
||||
|
||||
|
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { ref, defineProps } from "vue"; |
||||
const pfad = '/photos'; |
||||
const files = ref([]); |
||||
import { useToast } from 'primevue/usetoast'; |
||||
const toast = useToast(); |
||||
const uploadedFiles = ref([]); |
||||
const {data: photos } = await useFetch('http://ubodroid-2:8081/api/v1/pho'); |
||||
|
||||
const onAdvancedUpload = async (event) => { |
||||
const files = event.files; |
||||
const imgUpload = await useFetch("http://ubodroid-2:8081/api/v1/upload", { |
||||
method: "POST", |
||||
body: files, |
||||
}); |
||||
if (imgUpload) { |
||||
console.log(imgUpload); |
||||
toast.add({ |
||||
severity: "info", |
||||
summary: "Success", |
||||
detail: "File Uploaded", |
||||
life: 10000, |
||||
}); |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
const openDetail = (id: number) => { |
||||
|
||||
} |
||||
|
||||
const openEval = (id: number) => { |
||||
|
||||
} |
||||
|
||||
const onNew = () => { |
||||
|
||||
} |
||||
|
||||
</script> |
Loading…
Reference in new issue