wdm-web4/components/Evaluated.vue

<template>
    <ClientOnly>
        <Card style="margin-top: 78px; min-height: 200px;"> 
            <template #content>
                <Panel header="Evaluated clothes" class="rounded-4 bg-white" >
                    <template #icons>
                        
                    </template>
                    <DataView id="dv" :value="itemsext" 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="slotProps.data.frontview.imgurl" :alt="slotProps.data.kurzbeschreibung" />
                                    <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.genehmigt }}</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.id }}</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="warning" @click="openFrontview(slotProps.data.id)" label=" Frontview" icon="pi pi-camera" />                                                 
                                            </div>
                                        </div>
                                        
                                    </div>
                                </div>
                            </div>
                        </template>
                    </DataView>
                    
                </Panel>
            </template>
        </Card>
    </ClientOnly>
    



</template>

<script setup lang="ts">
import { ref } from "vue";
const pfad = '/photos';
import { useToast } from 'primevue/usetoast';
import { useDialog } from "primevue/usedialog";
import UpdPhoto  from "./UpdPhoto.vue";
import internal from "stream";


    interface cItemExt {
      id: number;
      zuhause: boolean;
      draussen: boolean;
      genehmigt: boolean;
      bemerkung: string;
      bewertung: number;
      favorit: boolean;
      itembid: number;
      frontviewid: number;
    }
const toast = useToast();    
const dialog = useDialog();
const createItemBDialog = ref(false);
let itemExt = ref({id: 0, zuhause: false, draussen: false, genehmigt: false, bemerkung: '', bewertung: 0, favorit: false, itembid: 0, frontviewid: 4});
let imgurl = ref();
const imgref = ref();
//imgref.value='1679468897186c75b5379eb6691871da30ef18b98a_1.jpg';
const {data: itemsext } = await awaitItemsext();
const {data: typen } = await useFetch('http://ubodroid-2:8081/api/v1/typ');

async function openDetail(id) {
    await navigateTo({
        path: '/itemextdetail',
        query: {
            id: id,
            
        }
        
        },
     ) 
};

async function awaitItemsext() {
    const res = await useFetch('http://ubodroid-2:8081/api/v1/ite');
    let r: any;
    
    
    for (r in res.data.value) {
        console.log('Ausgabe r: ', res.data.value[r]);
        const st = res.data.value[r].frontview.pfad;
        res.data.value[r].frontview.imgurl =  new URL(`${pfad}/${st}`, import.meta.url).href;
        console.log( res.data.value[r].frontview.imgurl);
    }

    console.log('Ausgabe res: ', res.data.value);
    return res;
}



async function openEval(id) {
    
}

async function openFrontview(iid: number) {
    const itemext = await useFetch('http://ubodroid-2:8081/api/v1/ite/'+iid);
    let ite: cItemExt;
    console.log(itemext.data.value);
    ite = itemext.data.value;
    console.log(ite);
    let refid = ref();
    dialog.open(UpdPhoto, { onClose(options) {
        refid = options?.data;
        console.log('RefId = ', refid);
        if (refid) {
            console.log('refid.id = ', refid.id);
            ite.frontviewid = refid.id;

            doUpdate(ite);
        }
    
    },});
}

async function doUpdate(t: cItemExt) {
      let fd = new FormData();
      fd.append('id', t.id.toString());
      fd.append('zuhause', t.zuhause.toString());
      fd.append('draussen', t.draussen.toString());
      fd.append('genehmigt', t.genehmigt.toString());
      fd.append('bemerkung', t.bemerkung);
      fd.append('bewertung', t.bewertung.toString());
      fd.append('favorit', t.favorit.toString());
      fd.append('itembid', t.itemb.id.toString());
      fd.append('frontviewid', t.frontviewid.toString());
      console.log('fd = ', fd);
      await $fetch('http://ubodroid-2:8081/api/v1/ite/'+t.id,{
      method: 'PUT',
      body: fd
      });
      toast.add({ severity: 'success', summary: 'Item updated', detail: 'Title: ' + t.id, life: 3000 });
      await refreshNuxtData();
    console.log('PUT ausgeführt...'+ t.id);
    } 



    
    
    async function onSubmit(t: cItemB) {
      let fd = new FormData();
      fd.append('bezeichnung', t.bezeichnung);
      fd.append('kurzbeschreibung', t.kurzbeschreibung);
      fd.append('groesse', t.groesse);
      fd.append('farbe', t.farbe);
      fd.append('typid', t.typid.toString());
      fd.append('material', t.material);
      fd.append('abmessungenid', t.abmessungenid.toString());
      fd.append('frontviewid', t.frontviewid.toString());
      console.log('fd = ', fd);
      await $fetch('http://ubodroid-2:8081/api/v1/itb',{
      method: 'POST',
      body: fd
      });
      createItemBDialog.value = false;
      toast.add({ severity: 'success', summary: 'New bought item created', detail: 'Title: ' + t.kurzbeschreibung, life: 3000 });
      await refreshNuxtData();
    console.log('POST ausgeführt...'+ t.kurzbeschreibung);
    } 

const OnChangeDD = () => {
    console.log('Die ausgewählte Option ist: ', itemb.value)
}

</script>