From 5b4d3fdea0ab6fa34772b7085bf488beab34356b Mon Sep 17 00:00:00 2001
From: Georg Spar <g.spar@sparg.com>
Date: Sat, 17 Jun 2023 23:14:09 +0200
Subject: [PATCH] bought itembdetail

---
 .gitignore                 |  3 +++
 components/Bought.vue      | 21 +++++++++++++++++
 components/Itembdetail.vue | 47 ++++++++++++++++++++++++++++++++++++++
 pages/itembdetail.vue      |  5 ++++
 plugins/primevue.js        |  3 +++
 todo.md                    |  4 ++++
 6 files changed, 83 insertions(+)
 create mode 100644 components/Itembdetail.vue
 create mode 100644 pages/itembdetail.vue
 create mode 100644 todo.md

diff --git a/.gitignore b/.gitignore
index 768a14e..4a77c7f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,3 +21,6 @@ logs
 .env
 .env.*
 !.env.example
+
+# local photo folder
+photos
\ No newline at end of file
diff --git a/components/Bought.vue b/components/Bought.vue
index dafb3cf..f68377f 100644
--- a/components/Bought.vue
+++ b/components/Bought.vue
@@ -16,6 +16,11 @@
                                                     <i class="pi pi-tag"></i>
                                                     <span class="font-semibold">{{ slotProps.data.typid }}</span>
                                                 </span>
+                                                
+                                            </div>
+                                            <div class="col-12 gap-3 flex">
+                                                    <Button severity="info" @click="openDetail(slotProps.data.type.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>
                                         
@@ -41,4 +46,20 @@ import { ref } from "vue";
 //const itemsb = ref();
 const {data: itemsb } = await useFetch('http://ubodroid-2:8081/api/v1/itb');
 
+async function openDetail(id) {
+    await navigateTo({
+        path: '/itembdetail',
+        query: {
+            id: id,
+            
+        }
+        
+        },
+     ) 
+};
+
+async function openEval(id) {
+    
+};
+
 </script>
\ No newline at end of file
diff --git a/components/Itembdetail.vue b/components/Itembdetail.vue
new file mode 100644
index 0000000..17f79ed
--- /dev/null
+++ b/components/Itembdetail.vue
@@ -0,0 +1,47 @@
+<template>
+    <ClientOnly>
+        <Card style="margin-top: 78px; min-height: 200px;"> 
+            <template #content>
+                <Panel header="Bought, but not evaluated clothes - Detail Page" class="rounded-4 bg-white" >
+                    <div class="grid nested-grid">
+                        <div class="col-6">
+                            <Galleria :value="images" :responsive-options="responsiveOptions" :num-visible="5" container-style="max-width: 480px">
+                                <template #item="slotProps">
+                                    <img :src="`${pfad}/${slotProps.item.pfad}`"  style="width: 100%;" />
+                                </template>
+                                <template #thumbnail="slotProps">
+                                    <img :src="`${pfad}/thumb-${slotProps.item.pfad}`"  />
+                                </template>
+                            </Galleria>
+                        </div>
+                        <div class="col-6">
+                            <div class="grid">
+                                <p>{{ itemsbd.kurzbeschreibung }}</p>
+                                <p>Da kommt der Text rein</p>
+                            </div>
+                        </div>
+                        
+                    </div>
+                </Panel>
+            </template>
+        </Card>
+    </ClientOnly>
+    
+
+
+
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+const responsiveOptions = ref();
+const pfad = '/photos';
+const route = useRoute();
+const qid = route.query.id;
+
+
+//const itemsb = ref();
+const {data: itemsbd } = await useFetch('http://ubodroid-2:8081/api/v1/itb/'+qid);
+const {data: images } = await useFetch('http://ubodroid-2:8081/api/v1/pho/itb/'+qid);
+
+</script>
\ No newline at end of file
diff --git a/pages/itembdetail.vue b/pages/itembdetail.vue
new file mode 100644
index 0000000..c1ea503
--- /dev/null
+++ b/pages/itembdetail.vue
@@ -0,0 +1,5 @@
+<template>
+    <div>
+      <Itembdetail />
+    </div>
+  </template>
\ No newline at end of file
diff --git a/plugins/primevue.js b/plugins/primevue.js
index a1a4d62..f3d2880 100644
--- a/plugins/primevue.js
+++ b/plugins/primevue.js
@@ -13,6 +13,8 @@ import ToastService from 'primevue/toastservice';
 import Toast from 'primevue/toast';
 import Dialog from 'primevue/dialog';
 import DataView from "primevue/dataview";
+import Galleria from 'primevue/galleria';
+
 
 export default defineNuxtPlugin((nuxtApp) => {
     nuxtApp.vueApp.use(PrimeVue, { ripple: true });
@@ -29,4 +31,5 @@ export default defineNuxtPlugin((nuxtApp) => {
     nuxtApp.vueApp.component("Toast", Toast);   
     nuxtApp.vueApp.component("Dialog", Dialog); 
     nuxtApp.vueApp.component("DataView", DataView); 
+    nuxtApp.vueApp.component("Galleria", Galleria);
 });    
\ No newline at end of file
diff --git a/todo.md b/todo.md
new file mode 100644
index 0000000..328533e
--- /dev/null
+++ b/todo.md
@@ -0,0 +1,4 @@
+* Feld frontview bei itemb und itemext einführen
+* Ergänzung der API um die Felder, die für die Detailbetrachtung und das Speichern notwendig sind
+* localhost anstelle des Rechnernamens vor dem Container-Test einfügen
+* 
\ No newline at end of file