|
|
|
<template>
|
|
|
|
<ClientOnly>
|
|
|
|
<Card style="margin-top: 78px; min-height: 200px;">
|
|
|
|
<template #content>
|
|
|
|
<Panel header="Evaluate Clothes - detail" 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 #header>
|
|
|
|
<h1>{{ itemsbd.kurzbeschreibung }}</h1>
|
|
|
|
</template>
|
|
|
|
<template #content>
|
|
|
|
<div class="grid nested-grid">
|
|
|
|
<div class="col-12">
|
|
|
|
<label>{{ itemsbd.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="itemsbd.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="itemsbd.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="itemsbd.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="itemsbd.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>{{ itemsbd.abmessungen.brust }}</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>Length Top</td>
|
|
|
|
<td>{{ itemsbd.abmessungen.laenget }}</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>Shoulder Width</td>
|
|
|
|
<td>{{ itemsbd.abmessungen.schulterbreite }}</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>Waist Girth Top</td>
|
|
|
|
<td>{{ itemsbd.abmessungen.taillenumfangt }}</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>Hip Girth</td>
|
|
|
|
<td>{{ itemsbd.abmessungen.hueftumfang }}</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>Inner Seam</td>
|
|
|
|
<td>{{ itemsbd.abmessungen.innennaht }}</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>Length Bottom</td>
|
|
|
|
<td>{{ itemsbd.abmessungen.laengeb }}</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>Waist Girth Bottom</td>
|
|
|
|
<td>{{ itemsbd.abmessungen.taillenumfangb }}</td>
|
|
|
|
</tr>
|
|
|
|
</table>
|
|
|
|
<div class="col-12">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
</Card>
|
|
|
|
|
|
|
|
<Card class="col-12">
|
|
|
|
<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>
|
|
|
|
<template #footer>
|
|
|
|
<Button v-if="isUpdate" severity="secondary" label=" UPDATE " icon="pi pi-file-edit" @click="doUpdate(itemext)" />
|
|
|
|
<Button v-else severity="secondary" label=" SAVE " icon="pi pi-file-edit" @click="doCreate(itemext)" />
|
|
|
|
</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 config = useRuntimeConfig();
|
|
|
|
|
|
|
|
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();
|
|
|
|
const deleteItemBDialog = ref(false);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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;
|
|
|
|
}
|
|
|
|
|
|
|
|
let itemext = ref({id: 0, zuhause: false, draussen: false, genehmigt: false, bemerkung: '', bewertung: 0, favorit: false, itembid: 0, frontviewid: 4});
|
|
|
|
|
|
|
|
if(isUpdate) {
|
|
|
|
const {data: itemext} = await useFetch(config.public.apiHostname + 'api/v1/ite/'+qid);
|
|
|
|
}
|
|
|
|
|
|
|
|
//const itemsb = ref();
|
|
|
|
const {data: itemsbd } = await useFetch(config.public.apiHostname + 'api/v1/itb/'+qid);
|
|
|
|
const {data: images } = await useFetch(config.public.apiHostname + 'api/v1/pho/itb/'+qid);
|
|
|
|
|
|
|
|
const mea = ref({id: 0, kurz: '', brust:0, laenget:0, schulterbreite:0, taillenumfangt:0, hueftumfang:0, innennaht:0, laengeb:0, taillenumfangb:0});
|
|
|
|
|
|
|
|
const onDelete = () => {
|
|
|
|
deleteItemBDialog.value = true;
|
|
|
|
};
|
|
|
|
|
|
|
|
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(config.public.apiHostname + '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) {
|
|
|
|
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 upd = await $fetch(config.public.apiHostname + 'api/v1/ite/'+qid, {
|
|
|
|
method: 'PUT',
|
|
|
|
body: fd
|
|
|
|
});
|
|
|
|
if(upd) {
|
|
|
|
toast.add({ severity: 'success', summary: 'Item updated', detail: 'Title: ' + ite.id, life: 3000 });
|
|
|
|
}
|
|
|
|
this.params.close();
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|