From 55181cfc589d7101313dc6619509cf88b3407371 Mon Sep 17 00:00:00 2001
From: Georg Spar <g.spar@sparg.com>
Date: Wed, 21 Jun 2023 20:29:32 +0200
Subject: [PATCH] Anpassung Background und Photo

---
 assets/mycss.css      |   4 +-
 components/Header.vue |   2 +-
 components/Photo.vue  | 107 ++++++++++++++++++++++++++++++++++++++++++
 layouts/default.vue   |   8 ++--
 pages/photo.vue       |   5 ++
 plugins/primevue.js   |   2 +
 6 files changed, 121 insertions(+), 7 deletions(-)
 create mode 100644 components/Photo.vue
 create mode 100644 pages/photo.vue

diff --git a/assets/mycss.css b/assets/mycss.css
index d856eaf..f15323b 100644
--- a/assets/mycss.css
+++ b/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;
 }
 
diff --git a/components/Header.vue b/components/Header.vue
index 52ec9eb..ccf30fa 100644
--- a/components/Header.vue
+++ b/components/Header.vue
@@ -53,7 +53,7 @@
         },
         {
           label: 'Photos',
-          url: '/photos'
+          url: '/photo'
         }
       ]
     }
diff --git a/components/Photo.vue b/components/Photo.vue
new file mode 100644
index 0000000..c49bde4
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/layouts/default.vue b/layouts/default.vue
index ad63d39..f21d1da 100644
--- a/layouts/default.vue
+++ b/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;">
-        <!-- Mask -->
-        <div class="mask" style="background-color: hsla(0, 0%, 0%, 0.6)">
+        style="margin-top: -78px; background-image: url('/images/background_wardrobe.jpg'); background-size: cover; height:500px;">
+        <!-- Mask 
+        <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>
\ No newline at end of file
diff --git a/pages/photo.vue b/pages/photo.vue
new file mode 100644
index 0000000..ca583ea
--- /dev/null
+++ b/pages/photo.vue
@@ -0,0 +1,5 @@
+<template>
+    <div>
+      <Photo />
+    </div>
+  </template>
\ No newline at end of file
diff --git a/plugins/primevue.js b/plugins/primevue.js
index b2176ed..c9e0d70 100644
--- a/plugins/primevue.js
+++ b/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);
 });    
\ No newline at end of file