v0.1.0: bought, about, typ

components/About.vue

@@ -0,0 +1,22 @@
+<template>
+        <ClientOnly>
+            <Card style="margin-top: 78px; min-height: 200px;"> 
+                <template #content>
+                    <Panel header="About this software" class="rounded-4 bg-white">
+                        <span style="font-size:xx-large;">Wardrobe Master</span>
+                        <p>Version: 0.1.0</p>
+                    </Panel>
+                </template>
+            </Card>
+        </ClientOnly>
+        
+    
+    
+    
+  </template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+
+</script>

components/Bought.vue

@@ -0,0 +1,44 @@
+<template>
+    <ClientOnly>
+        <Card style="margin-top: 78px; min-height: 200px;"> 
+            <template #content>
+                <Panel header="Bought, but not evaluated clothes" class="rounded-4 bg-white" >
+                    <DataView :value="itemsb" 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-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" :src="`/photos/16266842344a52797c13c72c9c769e2c6b52e827b0.webp`" :alt="slotProps.data.bezeichnung" />
+                                    <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.bezeichnung }}</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.typid }}</span>
+                                                </span>
+                                            </div>
+                                        </div>
+                                        
+                                    </div>
+                                </div>
+
+                            </div>
+                        </template>
+                    </DataView>
+                </Panel>
+            </template>
+        </Card>
+    </ClientOnly>
+    
+
+
+
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+//const itemsb = ref();
+const {data: itemsb } = await useFetch('http://ubodroid-2:8081/api/v1/itb');
+
+</script>

components/Typ.vue

@@ -1,6 +1,8 @@
 <template>
     <ClientOnly>
-      <Panel header="Maintainance / Type" class="bg-white rounded-4" style="margin-top: 78px;">
+      <Card style="margin-top: 78px; min-height: 200px;"> 
+            <template #content>
+                <Panel header="Maintainance / Type" class="bg-white rounded-4">
                 
                   
                     <div tag="form" class="g-3 mb-20 needs-validation" novalidate @submit.prevent="checkForm">
@@ -78,6 +80,8 @@
                       </template>
                     </Dialog>
                 </Panel>
+            </template>
+        </Card>
       </ClientOnly>
       
   </template>

pages/about.vue

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

pages/bought.vue

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

plugins/primevue.js

@@ -12,7 +12,7 @@ import InputText from 'primevue/inputtext';
 import ToastService from 'primevue/toastservice';
 import Toast from 'primevue/toast';
 import Dialog from 'primevue/dialog';
-
+import DataView from "primevue/dataview";
 
 export default defineNuxtPlugin((nuxtApp) => {
     nuxtApp.vueApp.use(PrimeVue, { ripple: true });
@@ -28,4 +28,5 @@ export default defineNuxtPlugin((nuxtApp) => {
     nuxtApp.vueApp.use(ToastService);
     nuxtApp.vueApp.component("Toast", Toast);   
     nuxtApp.vueApp.component("Dialog", Dialog); 
+    nuxtApp.vueApp.component("DataView", DataView); 
 });