bought itembdetail

.gitignore

@@ -21,3 +21,6 @@ logs
 .env
 .env.*
 !.env.example
+
+# local photo folder
+photos

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>

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>

pages/itembdetail.vue

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

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);
 });    

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
+*