7 changed files with 312 additions and 55 deletions
@ -0,0 +1,249 @@
|
||||
<template> |
||||
<ClientOnly> |
||||
<Card style="margin-top: 78px; min-height: 200px;"> |
||||
<template #content> |
||||
<Panel header="Evaluated Clothes - Detail Page" class="rounded-4 bg-white" > |
||||
<div class="grid nested-grid"> |
||||
<div class="col-4"> |
||||
<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-8"> |
||||
<div class="grid"> |
||||
<Card class="col-12 mb-4"> |
||||
<template #title> Evaluation </template> |
||||
<template #content> |
||||
<div class="grid"> |
||||
<div class="col-4"> |
||||
<label class="p-float-label" for="genehmigt">approved</label> |
||||
<InputSwitch id="genehmigt" v-model="itemext.genehmigt"></InputSwitch> |
||||
</div> |
||||
<div class="col-4"> |
||||
<label class="p-float-label" for="zuhause">at home</label> |
||||
<InputSwitch id="zuhause" v-model="itemext.zuhause"></InputSwitch> |
||||
</div> |
||||
<div class="col-4"> |
||||
<label class="p-float-label" for="draussen">outside</label> |
||||
<InputSwitch id="draussen" v-model="itemext.draussen"></InputSwitch> |
||||
</div> |
||||
<div class="col-12"> |
||||
<label class="p-float-label" for="bemerkung">Remark / Notice:</label> |
||||
<Textarea v-model="itemext.bemerkung" autoResize cols="100" rows="5" /> |
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
</template> |
||||
</Card> |
||||
<Card class="col-12"> |
||||
<template #header> |
||||
<h1>{{ itemext.itemb.kurzbeschreibung }}</h1> |
||||
</template> |
||||
<template #content> |
||||
<div class="grid nested-grid"> |
||||
<div class="col-4 mb-4"> |
||||
<Chip v-if="itemext.genehmigt" class="checked mr-2" label=" Approved " icon="pi pi-check-square" /> |
||||
<Chip v-else class="unchecked mr-2" label="Approved" icon="pi pi-stop" /> |
||||
</div> |
||||
<div class="col-4 mb-4"> |
||||
<Chip v-if="itemext.zuhause" class="checked mr-2" label=" At home " icon="pi pi-check-square" /> |
||||
<Chip v-else class="unchecked mr-2" label=" At home " icon="pi pi-stop" /> |
||||
</div> |
||||
<div class="col-4 mb-4"> |
||||
<Chip v-if="itemext.draussen" class="checked mr-2" label=" Outside " icon="pi pi-check-square" /> |
||||
<Chip v-else class="unchecked mr-2" label=" Outside " icon="pi pi-stop" /> |
||||
</div> |
||||
<div class="col-12"> |
||||
<label class="p-float-label" for="bemerkung">Remark / Notice</label> |
||||
<Textarea id="bemerkung" v-model="itemext.bemerkung" :disabled="true" autoResize/> |
||||
</div> |
||||
<div class="col-12"> |
||||
<label>{{ itemext.itemb.bezeichnung }}</label> |
||||
</div> |
||||
<div class="col-4 field gap-1"> |
||||
<small class="p-float-label" for="groesse">Size: </small> |
||||
<InputText class="p-inputtext-sm" id="groesse" :disabled="true" :value="itemext.itemb.groesse" /> |
||||
</div> |
||||
<div class="col-4 field gap-1"> |
||||
<small class="p-float-label" for="farbe">Color: </small> |
||||
<InputText class="p-inputtext-sm" id="farbe" :disabled="true" :value="itemext.itemb.farbe" /> |
||||
</div> |
||||
<div class="col-4 field gap-1"> |
||||
<small class="p-float-label" for="typ">Type: </small> |
||||
<InputText class="p-inputtext-sm" id="typ" :disabled="true" :value="itemext.itemb.type.bezeichnung" /> |
||||
</div> |
||||
<div class="col-12 field gap-1" > |
||||
<small class="p-float-label" for="material">Material:</small> |
||||
<InputText class="p-inputtext-sm" id="material" :disabled="true" :value="itemext.itemb.material" style="width:100%;"/> |
||||
</div> |
||||
|
||||
<table class="col-12 p-table-sm align-items-left measuretable"> |
||||
<thead> |
||||
<th>Measure:</th> |
||||
<th>Value (in cm):</th> |
||||
</thead> |
||||
<tr> |
||||
<td>Breast</td> |
||||
<td>{{ itemext.itemb.abmessungen.brust }}</td> |
||||
</tr> |
||||
<tr> |
||||
<td>Length Top</td> |
||||
<td>{{ itemext.itemb.abmessungen.laenget }}</td> |
||||
</tr> |
||||
<tr> |
||||
<td>Shoulder Width</td> |
||||
<td>{{ itemext.itemb.abmessungen.schulterbreite }}</td> |
||||
</tr> |
||||
<tr> |
||||
<td>Waist Girth Top</td> |
||||
<td>{{ itemext.itemb.abmessungen.taillenumfangt }}</td> |
||||
</tr> |
||||
<tr> |
||||
<td>Hip Girth</td> |
||||
<td>{{ itemext.itemb.abmessungen.hueftumfang }}</td> |
||||
</tr> |
||||
<tr> |
||||
<td>Inner Seam</td> |
||||
<td>{{ itemext.itemb.abmessungen.innennaht }}</td> |
||||
</tr> |
||||
<tr> |
||||
<td>Length Bottom</td> |
||||
<td>{{ itemext.itemb.abmessungen.laengeb }}</td> |
||||
</tr> |
||||
<tr> |
||||
<td>Waist Girth Bottom</td> |
||||
<td>{{ itemext.itemb.abmessungen.taillenumfangb }}</td> |
||||
</tr> |
||||
</table> |
||||
|
||||
</div> |
||||
</template> |
||||
<template #footer> |
||||
<div class="col-12 gap-3 flex"> |
||||
<Button severity="secondary" label=" UPDATE " icon="pi pi-file-edit" @click="doUpdate(itemext)" /> |
||||
|
||||
|
||||
</div> |
||||
</template> |
||||
</Card> |
||||
|
||||
</div> |
||||
</div> |
||||
</div> |
||||
</Panel> |
||||
</template> |
||||
</Card> |
||||
</ClientOnly> |
||||
|
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { useToast } from "primevue/usetoast"; |
||||
import { ref } from "vue"; |
||||
import { useDialog } from 'primevue/usedialog'; |
||||
|
||||
const dialog = useDialog(); |
||||
|
||||
const responsiveOptions = ref(); |
||||
const pfad = '/photos'; |
||||
let params: any; |
||||
params = inject('dialogRef'); |
||||
const qid = params.value.data.id; |
||||
//let isUpdate = ref(false); |
||||
//isUpdate = params.value.data.isupdate; |
||||
//console.log('isUpdate = ', isUpdate); |
||||
const toast = useToast(); |
||||
|
||||
|
||||
|
||||
|
||||
interface cItemB { |
||||
id: number; |
||||
bezeichnung: string; |
||||
kurzbeschreibung: string; |
||||
groesse: string; |
||||
farbe: string; |
||||
typid: number; |
||||
material: string; |
||||
abmessungenid: number; |
||||
frontviewid: number; |
||||
} |
||||
|
||||
interface cItemExt { |
||||
id: number; |
||||
zuhause: boolean; |
||||
draussen: boolean; |
||||
genehmigt: boolean; |
||||
bemerkung: string; |
||||
bewertung: number; |
||||
favorit: boolean; |
||||
itembid: number; |
||||
frontviewid: number; |
||||
} |
||||
|
||||
const {data: itemext} = await useFetch('http://ubodroid-2:8081/api/v1/ite/'+qid); |
||||
|
||||
|
||||
//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/ite/'+qid); |
||||
|
||||
//const mea = ref({id: 0, kurz: '', brust:0, laenget:0, schulterbreite:0, taillenumfangt:0, hueftumfang:0, innennaht:0, laengeb:0, taillenumfangb:0}); |
||||
|
||||
|
||||
|
||||
async function doCreate(ite: cItemExt) { |
||||
ite.itembid = qid; |
||||
let fd = new FormData(); |
||||
fd.append('zuhause', ite.zuhause.toString()); |
||||
fd.append('draussen', ite.draussen.toString()); |
||||
fd.append('genehmigt', ite.genehmigt.toString()); |
||||
fd.append('bemerkung', ite.bemerkung); |
||||
fd.append('bewertung', ite.bewertung.toString()); |
||||
fd.append('favorit', ite.favorit.toString()); |
||||
fd.append('itembid', ite.itembid.toString()); |
||||
fd.append('frontviewid', ite.frontviewid.toString()); |
||||
|
||||
console.log('fd = ', fd); |
||||
let insert = await $fetch('http://ubodroid-2:8081/api/v1/ite', { |
||||
method: 'POST', |
||||
body: fd |
||||
}); |
||||
if(insert) { |
||||
toast.add({ severity: 'success', summary: 'Item created', detail: 'Title: ' + ite.id, life: 3000 }); |
||||
} |
||||
this.params.close(); |
||||
}; |
||||
|
||||
async function doUpdate(ite: cItemExt) { |
||||
|
||||
let fd = new FormData(); |
||||
fd.append('zuhause', ite.zuhause.toString()); |
||||
fd.append('draussen', ite.draussen.toString()); |
||||
fd.append('genehmigt', ite.genehmigt.toString()); |
||||
fd.append('bemerkung', ite.bemerkung); |
||||
fd.append('bewertung', ite.bewertung.toString()); |
||||
fd.append('favorit', ite.favorit.toString()); |
||||
fd.append('itembid', ite.itemb.id.toString()); |
||||
fd.append('frontviewid', ite.frontview.id.toString()); |
||||
fd.append('id', qid.toString()); |
||||
console.log('fd = ', fd); |
||||
let upd = await $fetch('http://ubodroid-2:8081/api/v1/ite/'+qid, { |
||||
method: 'PUT', |
||||
body: fd |
||||
}); |
||||
if(upd) { |
||||
toast.add({ severity: 'success', summary: 'Item updated', detail: 'Title: ' + ite.id, life: 3000 }); |
||||
} |
||||
await refreshNuxtData(); |
||||
this.params.close(); |
||||
}; |
||||
|
||||
|
||||
</script> |
||||
Loading…
Reference in new issue