|
|
@ -6,11 +6,11 @@ |
|
|
|
<template #icons> |
|
|
|
<template #icons> |
|
|
|
<Button class="mr-2" @click="onNew" label=" NEW " icon="pi pi-plus" /> |
|
|
|
<Button class="mr-2" @click="onNew" label=" NEW " icon="pi pi-plus" /> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
<DataView :value="itemsb" paginator :rows="5"> |
|
|
|
<DataView id="dv" :value="itemsb" paginator :rows="5"> |
|
|
|
<template #list="slotProps"> |
|
|
|
<template #list="slotProps"> |
|
|
|
<div class="col-12"> |
|
|
|
<div class="col-12"> |
|
|
|
<div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4"> |
|
|
|
<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="getImageUrl(slotProps.data.frontview.pfad)" :alt="slotProps.data.kurzbeschreibung" /> |
|
|
|
<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 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="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="text-2xl font-bold text-900">{{ slotProps.data.kurzbeschreibung }}</div> |
|
|
@ -29,7 +29,6 @@ |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
</DataView> |
|
|
|
</DataView> |
|
|
@ -80,7 +79,7 @@ |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
<script setup lang="ts"> |
|
|
|
<script setup lang="ts"> |
|
|
|
import { ref } from "vue"; |
|
|
|
import { ref, onMounted } from "vue"; |
|
|
|
const pfad = '/photos'; |
|
|
|
const pfad = '/photos'; |
|
|
|
import { useToast } from 'primevue/usetoast'; |
|
|
|
import { useToast } from 'primevue/usetoast'; |
|
|
|
import { stringify } from "querystring"; |
|
|
|
import { stringify } from "querystring"; |
|
|
@ -99,12 +98,11 @@ import { stringify } from "querystring"; |
|
|
|
const toast = useToast(); |
|
|
|
const toast = useToast(); |
|
|
|
const createItemBDialog = ref(false); |
|
|
|
const createItemBDialog = ref(false); |
|
|
|
const itemb = ref({id: 0, bezeichnung: '', kurzbeschreibung: '', groesse: '', farbe: '', typid: 0, material: '', abmessungenid: 1, frontviewid: 4}); |
|
|
|
const itemb = ref({id: 0, bezeichnung: '', kurzbeschreibung: '', groesse: '', farbe: '', typid: 0, material: '', abmessungenid: 1, frontviewid: 4}); |
|
|
|
//const itemsb = ref(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const {data: itemsb } = await useFetch('http://ubodroid-2:8081/api/v1/itb'); |
|
|
|
|
|
|
|
const {data: typen } = await useFetch('http://ubodroid-2:8081/api/v1/typ'); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let imgurl = ref(); |
|
|
|
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) { |
|
|
|
async function openDetail(id) { |
|
|
|
await navigateTo({ |
|
|
|
await navigateTo({ |
|
|
@ -118,13 +116,33 @@ async function openDetail(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) { |
|
|
|
async function openEval(id) { |
|
|
|
|
|
|
|
|
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function getImageUrl(name) { |
|
|
|
|
|
|
|
return imgurl = computed(() => { return new URL(`${pfad}/${name}`, import.meta.url).href; }); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const onNew = () => { |
|
|
|
const onNew = () => { |
|
|
|
itemb.value = ref({id: 0, bezeichnung: '', kurzbeschreibung: '', groesse: '', farbe: '', typid: 0, material: '', abmessungenid: 1, frontviewid: 4}); |
|
|
|
itemb.value = ref({id: 0, bezeichnung: '', kurzbeschreibung: '', groesse: '', farbe: '', typid: 0, material: '', abmessungenid: 1, frontviewid: 4}); |
|
|
|