Anpassung Background und Photo

assets/mycss.css

@@ -1,8 +1,8 @@
 .bg-image {
     position: relative;
-    overflow: hidden;
+    overflow: box;
     background-repeat: no-repeat;
-    background-size: cover;
+    background-size: 500px;
     background-position: center center;
 }
 

components/Header.vue

@@ -53,7 +53,7 @@
         },
         {
           label: 'Photos',
-          url: '/photos'
+          url: '/photo'
         }
       ]
     }

components/Photo.vue

@@ -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>

layouts/default.vue

@@ -7,9 +7,9 @@
         </div>
      </div>
     <div class="vh-100 bg-image"
-        style="margin-top: -78px; background-image: url('/images/background_wardrobe.jpg'); background-size: cover;">
+        style="margin-top: -78px; background-image: url('/images/background_wardrobe.jpg'); background-size: cover; height:500px;">
-        <!-- Mask -->
+        <!-- Mask 
-        <div class="mask" style="background-color: hsla(0, 0%, 0%, 0.6)">
+        <div class="mask" style="background-color: hsla(0, 0%, 0%, 0.6)"> -->
             <div class="grid nested-grid">            
                     <div class="col-6 col-offset-3 justify-content-center align-items-center">
                         <!--<div class="flex sm:col-6 justify-content-center align-items-center"> -->
@@ -18,6 +18,6 @@
                         <!--</div>-->
                     </div>
             </div>
-        </div>
+        <!--</div>-->
     </div>
 </template>

pages/photo.vue

@@ -0,0 +1,5 @@
+<template>
+    <div>
+      <Photo />
+    </div>
+  </template>

plugins/primevue.js

@@ -18,6 +18,7 @@ import Textarea from "primevue/textarea";
 import Dropdown from "primevue/dropdown";
 import DialogService from 'primevue/dialogservice';
 import DynamicDialog from 'primevue/dynamicdialog';
+import FileUpload from "primevue/fileupload";
 
 
 export default defineNuxtPlugin((nuxtApp) => {
@@ -40,4 +41,5 @@ export default defineNuxtPlugin((nuxtApp) => {
     nuxtApp.vueApp.component("Dropdown", Dropdown);
     nuxtApp.vueApp.use(DialogService);
     nuxtApp.vueApp.component("DynamicDialog", DynamicDialog);
+    nuxtApp.vueApp.component("FileUpload", FileUpload);
 });