You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
181 lines
7.7 KiB
181 lines
7.7 KiB
<template> |
|
<ClientOnly> |
|
<Card style="margin-top: 78px; min-height: 200px;"> |
|
<template #content> |
|
<Panel header="Bought, but not evaluated clothes" class="rounded-4 bg-white" > |
|
<template #icons> |
|
<Button class="mr-2" @click="onNew" label=" NEW " icon="pi pi-plus" /> |
|
</template> |
|
<DataView id="dv" :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="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.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.typid }}</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> |
|
<Dialog :visible="createItemBDialog" :style="{width: '450px'}" header="New Bought Clothes" :modal="true" class="p-fluid"> |
|
<div class="field"> |
|
<label for="kurzbeschreibung">Title</label> |
|
<InputText id="kurzbeschreibung" v-model.trim="itemb.kurzbeschreibung" required="true" autofocus /> |
|
<small id="kurzbeschreibung-help" >Enter a title for the clothing</small> |
|
</div> |
|
<div class="field p-float-label"> |
|
<label for="bezeichnung">Description:</label> |
|
<Textarea id="bezeichnung" v-model.trim="itemb.bezeichnung" rows="5" cols="50"/> |
|
</div> |
|
<div class="field"> |
|
<label for="groesse">Size:</label> |
|
<InputText id="groesse" v-model.trim="itemb.groesse" /> |
|
<small id="groesse-help" >Enter a size for the clothing</small> |
|
</div> |
|
<div class="field"> |
|
<label for="farbe">Color</label> |
|
<InputText id="farbe" v-model.trim="itemb.farbe" /> |
|
<small id="farbe-help" >Enter a color for the clothing</small> |
|
</div> |
|
<div class="field"> |
|
<label for="type">Type of clothes</label> |
|
<Dropdown id="type" v-model.trim="itemb.typid" @change="OnChangeDD" :options="typen" optionLabel="bezeichnung" optionValue="id" placeholder="Select a type" /> |
|
|
|
</div> |
|
<div class="field"> |
|
<label for="material">Material</label> |
|
<InputText id="material" v-model.trim="itemb.material" /> |
|
<small id="material-help" >Enter a material for the clothing</small> |
|
</div> |
|
|
|
<template #footer> |
|
<Button label="Cancel" icon="pi pi-times" text @click="hideDialog"/> |
|
<Button label="Save" icon="pi pi-check" text @click="onSubmit(itemb)" /> |
|
</template> |
|
</Dialog> |
|
</Panel> |
|
</template> |
|
</Card> |
|
</ClientOnly> |
|
|
|
|
|
|
|
|
|
</template> |
|
|
|
<script setup lang="ts"> |
|
import { ref, onMounted } from "vue"; |
|
const pfad = '/photos'; |
|
import { useToast } from 'primevue/usetoast'; |
|
import { stringify } from "querystring"; |
|
|
|
interface cItemB { |
|
id: number; |
|
bezeichnung: string; |
|
kurzbeschreibung: string; |
|
groesse: string; |
|
farbe: string; |
|
typid: number; |
|
material: string; |
|
abmessungenid: number; |
|
frontviewid: number; |
|
} |
|
const toast = useToast(); |
|
const createItemBDialog = ref(false); |
|
const itemb = ref({id: 0, bezeichnung: '', kurzbeschreibung: '', groesse: '', farbe: '', typid: 0, material: '', abmessungenid: 1, frontviewid: 4}); |
|
let imgurl = ref(); |
|
const imgref = ref(); |
|
//imgref.value='1679468897186c75b5379eb6691871da30ef18b98a_1.jpg'; |
|
const {data: itemsb } = await awaitItemsb(); |
|
const {data: typen } = await useFetch('http://ubodroid-2:8081/api/v1/typ'); |
|
|
|
async function openDetail(id) { |
|
await navigateTo({ |
|
path: '/itembdetail', |
|
query: { |
|
id: id, |
|
|
|
} |
|
|
|
}, |
|
) |
|
}; |
|
|
|
async function awaitItemsb() { |
|
const res = await useFetch('http://ubodroid-2:8081/api/v1/itb'); |
|
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) { |
|
|
|
}; |
|
onMounted(() => { |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
const onNew = () => { |
|
itemb.value = ref({id: 0, bezeichnung: '', kurzbeschreibung: '', groesse: '', farbe: '', typid: 0, material: '', abmessungenid: 1, frontviewid: 4}); |
|
createItemBDialog.value = true; |
|
}; |
|
|
|
const hideDialog = () => { |
|
createItemBDialog.value = false; |
|
}; |
|
|
|
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>
|
|
|