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.
178 lines
8.7 KiB
178 lines
8.7 KiB
<template> |
|
<ClientOnly> |
|
<Card style="margin-top: 78px; min-height: 200px;"> |
|
<template #content> |
|
<Panel header="Bought, but not 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"> |
|
<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> |
|
</template> |
|
<template #footer> |
|
<div class="col-12 gap-3 flex"> |
|
<Button severity="secondary" label=" UPDATE " icon="pi pi-file-edit" @click="onUpdate" /> |
|
<Button severity="danger" label=" DELETE " icon="pi pi-trash" @click="onDelete" /> |
|
</div> |
|
</template> |
|
</Card> |
|
|
|
</div> |
|
</div> |
|
|
|
<Dialog :visible="deleteItemBDialog" :style="{width: '450px'}" header="Delete Item?" :modal="true" class="p-fluid"> |
|
<div class="field"> |
|
<label>Do you really want to delete {{ itemsbd.kurzbeschreibung }}?</label> |
|
</div> |
|
<template #footer> |
|
<Button label="Cancel" icon="pi pi-times" text @click="hideDialog"/> |
|
<Button label="Delete" icon="pi pi-check" text @click="doDelete()" /> |
|
</template> |
|
</Dialog> |
|
</div> |
|
</Panel> |
|
</template> |
|
</Card> |
|
</ClientOnly> |
|
|
|
|
|
|
|
|
|
</template> |
|
|
|
<script setup lang="ts"> |
|
import { useToast } from "primevue/usetoast"; |
|
import { ref } from "vue"; |
|
import { useDialog } from 'primevue/usedialog'; |
|
import Upditemb from "./upditemb.vue"; |
|
|
|
const dialog = useDialog(); |
|
|
|
const responsiveOptions = ref(); |
|
const pfad = '/photos'; |
|
const route = useRoute(); |
|
const qid = route.query.id; |
|
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; |
|
} |
|
|
|
//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/itb/'+qid); |
|
|
|
|
|
|
|
const onDelete = () => { |
|
deleteItemBDialog.value = true; |
|
}; |
|
|
|
const onUpdate = () => { |
|
dialog.open(Upditemb, { data: {id: qid} }); |
|
}; |
|
|
|
const hideDialog = () => { |
|
deleteItemBDialog.value = false; |
|
|
|
}; |
|
|
|
|
|
async function doDelete() { |
|
let fd = new FormData(); |
|
//fd.append('bezeichnung', bezeichnung.value); |
|
fd.append('id', qid.toString()); |
|
await $fetch('http://ubodroid-2:8081/api/v1/itb/'+qid, { method: 'DELETE', body: fd } ); |
|
|
|
toast.add({ severity: 'success', summary: 'Item deleted', detail: '', life: 3000 }); |
|
deleteItemBDialog.value = false; |
|
await refreshNuxtData(); |
|
} |
|
|
|
|
|
</script> |