g.spar
/
wdm-web4
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity
Browse Source

Measure und Update

pull/1/head
Georg Spar 1 year ago
parent
7051ed621a
commit
7489c38cd6
8 changed files with 543 additions and 8 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 118
      components/AssMea.vue
  2. 20
      components/Itembdetail.vue
  3. 211
      components/Measure.vue
  4. 4
      components/Typ.vue
  5. 173
      components/UpdMeas.vue
  6. 6
      components/UpdPhoto.vue
  7. 14
      components/upditemb.vue
  8. 5
      pages/measure.vue

118
components/AssMea.vue
Unescape View File

@ -0,0 +1,118 @@
<template>
<ClientOnly>
<Card style="margin-top: 78px; min-height: 200px;">
<template #content>
<Panel header="Maintainance / Assign Measures" class="bg-white rounded-4 gap-3">
<div class="g-3 mb-20 needs-validation">
<div class="grid nested-grid">
<Card class="col-12">
<template #content>
<DataTable class="p-datatable-sm" :filters="filters" dataKey="id" filterDisplay="row" :value="measures"
showGridlines stripedRows paginator :rows="10" :rowsPerPageOptions="[5, 10, 20, 50]"
:globalFilterFields="['kurz']"
v-model:selection="selectedTyp" selection-mode="single" @row-select="onRowSelect" :meta-key-selection="false"
tableStyle="min-width: 50rem;">
<template #header>
<div class="flex justify-content-end">
<span class="p-input-icon-left">
<i class="pi pi-search" />
<InputText v-model="filters['global'].value" placeholder="Keyword Search" />
</span>
</div>
</template>
<template #empty> No customers found. </template>
<!--<template #loading> Loading customers data. Please wait. </template> -->
<Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" sortable :filter-field="col.field" >
</Column>
</DataTable>
</template>
<template #footer>
<Button label="Assign" icon="pi pi-check" text @click="onSubmit(id)" />
</template>
</Card>
</div>
</div>
</Panel>
</template>
</Card>
</ClientOnly>
</template>
<script setup lang="ts">
//import { MDBBtn, MDBCol, MDBCheckbox, MDBInput, MDBRow, MDBContainer } from "mdb-vue-ui-kit";
import { ref, onMounted } from "vue";
import { FilterMatchMode } from "primevue/api";
import { useToast } from 'primevue/usetoast';
interface cMeasures {
id: number;
kurz: string;
brust: number;
laenget: number;
schulterbreite: number;
taillenumfangt: number;
hueftumfang: number;
innennaht: number;
laengeb: number;
taillenumfangb: number;
}
const mea = ref({id: 0, kurz: '', brust:0, laenget:0, schulterbreite:0, taillenumfangt:0, hueftumfang:0, innennaht:0, laengeb:0, taillenumfangb:0});
const kurz = ref("");
//const loading = ref(true);
const selectedTyp = ref("");
const id = ref(0);
const toast = useToast();
let params: any;
params = inject('dialogRef');
const {data: measures } = await useFetch('http://ubodroid-2:8081/api/v1/meas');
const columns = [
{ field: 'id', header: '#'},
{ header: 'Description', field: 'kurz'},
{ header: 'Breast', field: 'brust'},
{ header: 'Lengh Top', field: 'laenget'},
{ header: 'Shoulder Width', field: 'schulterbreite'},
{ header: 'Waist Girth Top', field: 'taillenumfangt'},
{ header: 'Hip Girth', field: 'hueftumfang'},
{ header: 'Inner Seam', field: 'innennaht'},
{ header: 'Length Bottom', field: 'laengeb'},
{ header: 'Waist Girth Bottom', field: 'taillenumfangb'},
];
const filters = ref({
global: { value: null, matchMode: FilterMatchMode.CONTAINS },
kurz: {value: null, matchMode: FilterMatchMode.STARTS_WITH }
})
const onRowSelect = (event) => {
id.value = event.data.id;
kurz.value = event.data.kurz;
toast.add({ severity: 'info', summary: 'Measure Selected', detail: 'Description: ' + event.data.kurz, life: 3000 });
};
onMounted(() => {
mea.value = params.value.data.mea;
});
async function onSubmit(id: number) {
console.log('id = ', id);
await this.params.close({ id: id });
}
</script>

20
components/Itembdetail.vue
Unescape View File

@ -86,7 +86,8 @@
<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" />
<Button severity="danger" label=" DELETE " icon="pi pi-trash" @click="onDelete" />
<Button severity="info" label=" ASSIGN MEASURE " icon="pi pi-table" @click="onAssign" />
</div>
</template>
</Card>
@ -119,6 +120,7 @@ import { useToast } from "primevue/usetoast";
import { ref } from "vue";
import { useDialog } from 'primevue/usedialog';
import Upditemb from "./upditemb.vue";
import AssMea from "./AssMea.vue";
const dialog = useDialog();
@ -147,7 +149,7 @@ interface cItemB {
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 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;
@ -157,6 +159,20 @@ const onUpdate = () => {
dialog.open(Upditemb, { data: {id: qid} });
};
const onAssign = () => {
let mid: any;
dialog.open(AssMea, {data: { mea }, onClose(options) {
mid = options?.data;
if (mid) {
console.log('mid vor dem zweiten Dialog: ', mid)
dialog.open(Upditemb, { data: {id:qid, mid: mid.id }});
}
}
});
}
const hideDialog = () => {
deleteItemBDialog.value = false;

211
components/Measure.vue
Unescape View File

@ -0,0 +1,211 @@
<template>
<ClientOnly>
<Card style="margin-top: 78px; min-height: 200px;">
<template #content>
<Panel header="Maintainance / Measures" class="bg-white rounded-4 gap-3">
<template #icons>
<Button class="mr-2" severity="primary" label=" NEW " icon="pi pi-check" @click="openNew()" />
<Button class="mr-2" severity="secondary" label=" UPDATE " icon="pi pi-file-edit" @click="onUpdate()" />
<Button class="mr-2" severity="danger" label=" DELETE " icon="pi pi-trash" @click="onDelete()" />
</template>
<div class="g-3 mb-20 needs-validation">
<div class="grid nested-grid">
<Card class="col-12">
<template #content>
<DataTable class="p-datatable-sm" :filters="filters" dataKey="id" filterDisplay="row" :value="measures"
showGridlines stripedRows paginator :rows="10" :rowsPerPageOptions="[5, 10, 20, 50]"
:globalFilterFields="['kurz']"
v-model:selection="selectedTyp" selection-mode="single" @row-select="onRowSelect" :meta-key-selection="false"
tableStyle="min-width: 50rem;">
<template #header>
<div class="flex justify-content-end">
<span class="p-input-icon-left">
<i class="pi pi-search" />
<InputText v-model="filters['global'].value" placeholder="Keyword Search" />
</span>
</div>
</template>
<template #empty> No customers found. </template>
<!--<template #loading> Loading customers data. Please wait. </template> -->
<Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" sortable :filter-field="col.field" >
</Column>
</DataTable>
</template>
<template #footer>
</template>
</Card>
</div>
</div>
</Panel>
</template>
</Card>
</ClientOnly>
</template>
<script setup lang="ts">
//import { MDBBtn, MDBCol, MDBCheckbox, MDBInput, MDBRow, MDBContainer } from "mdb-vue-ui-kit";
import { ref } from "vue";
import { FilterMatchMode } from "primevue/api";
import { useToast } from 'primevue/usetoast';
import { useDialog } from "primevue/usedialog";
import UpdMeas from "./UpdMeas.vue";
interface cMeasures {
id: number;
kurz: string;
brust: number;
laenget: number;
schulterbreite: number;
taillenumfangt: number;
hueftumfang: number;
innennaht: number;
laengeb: number;
taillenumfangb: number;
}
const kurz = ref("");
//const loading = ref(true);
const selectedTyp = ref("");
const id = ref(0);
const toast = useToast();
const dialog = useDialog();
const createTypDialog = ref(false);
const mea = ref({id: 0, kurz: '', brust:0, laenget:0, schulterbreite:0, taillenumfangt:0, hueftumfang:0, innennaht:0, laengeb:0, taillenumfangb:0});
const {data: measures } = await useFetch('http://ubodroid-2:8081/api/v1/meas');
const columns = [
{ field: 'id', header: '#'},
{ header: 'Description', field: 'kurz'},
{ header: 'Breast', field: 'brust'},
{ header: 'Lengh Top', field: 'laenget'},
{ header: 'Shoulder Width', field: 'schulterbreite'},
{ header: 'Waist Girth Top', field: 'taillenumfangt'},
{ header: 'Hip Girth', field: 'hueftumfang'},
{ header: 'Inner Seam', field: 'innennaht'},
{ header: 'Length Bottom', field: 'laengeb'},
{ header: 'Waist Girth Bottom', field: 'taillenumfangb'},
];
const filters = ref({
global: { value: null, matchMode: FilterMatchMode.CONTAINS },
kurz: {value: null, matchMode: FilterMatchMode.STARTS_WITH }
})
const onRowSelect = (event) => {
id.value = event.data.id;
kurz.value = event.data.kurz;
mea.value = event.data;
console.log('mea nach Auswahl: ',mea);
toast.add({ severity: 'info', summary: 'Measure Selected', detail: 'Description: ' + event.data.kurz, life: 3000 });
};
const openNew = () => {
let refmea = ref();
mea.value = ref({id: 0, kurz: '', brust:'', laenget:'', schulterbreite:'', taillenumfangt:'', hueftumfang:'', innennaht:'', laengeb:'', taillenumfangb:''});
dialog.open(UpdMeas, { data: {mea}, onClose(options) {
refmea = options?.data;
console.log('RefMea = ', refmea);
if (refmea) {
doInsert(refmea);
}
},});
};
const hideDialog = () => {
createTypDialog.value = false;
};
async function doInsert(t: cMeasures) {
let fd = new FormData();
fd.append('kurz', t.kurz);
fd.append('brust', t.brust.toString());
fd.append('laenget', t.laenget.toString());
fd.append('schulterbreite', t.schulterbreite.toString());
fd.append('taillenumfangt', t.taillenumfangt.toString());
fd.append('hueftumfang', t.hueftumfang.toString());
fd.append('innennaht', t.innennaht.toString());
fd.append('laengeb', t.laengeb.toString());
fd.append('taillenumfangb', t.taillenumfangb.toString());
await $fetch('http://ubodroid-2:8081/api/v1/meas',{
method: 'POST',
body: fd
});
createTypDialog.value = false;
toast.add({ severity: 'success', summary: 'New Measure created', detail: 'Description: ' + t.kurz, life: 3000 });
await refreshNuxtData();
console.log('POST ausgeführt...'+ t.kurz);
}
async function onUpdate() {
let refmea = ref();
dialog.open(UpdMeas, { data: {mea}, onClose(options) {
refmea = options?.data;
console.log('RefMea = ', refmea);
if (refmea) {
doUpdate(refmea);
}
},});
}
async function doUpdate(t: cMeasures) {
let fd = new FormData();
fd.append('id', t.id.toString());
fd.append('kurz', t.kurz);
fd.append('brust', t.brust.toString());
fd.append('laenget', t.laenget.toString());
fd.append('schulterbreite', t.schulterbreite.toString());
fd.append('taillenumfangt', t.taillenumfangt.toString());
fd.append('hueftumfang', t.hueftumfang.toString());
fd.append('innennaht', t.innennaht.toString());
fd.append('laengeb', t.laengeb.toString());
fd.append('taillenumfangb', t.taillenumfangb.toString());
await $fetch('http://ubodroid-2:8081/api/v1/meas/'+t.id,{
method: 'PUT',
body: fd
});
createTypDialog.value = false;
toast.add({ severity: 'success', summary: 'Measure updated', detail: 'Description: ' + t.kurz, life: 3000 });
await refreshNuxtData();
console.log('PUT ausgeführt...'+ t.kurz);
}
async function onDelete() {
let fd = new FormData();
fd.append('id', id.value.toString());
const res = await $fetch('http://ubodroid-2:8081/api/v1/meas/'+id.value,{
method: 'DELETE',
body: fd
});
if (res) {
toast.add({ severity: 'success', summary: 'Measure deleted', detail: 'Description: ' + kurz.value, life: 3000 });
}
await refreshNuxtData();
console.log('DELETE ausgeführt...'+ kurz.value);
}
</script>

4
components/Typ.vue
Unescape View File

@ -157,7 +157,9 @@
method: 'PUT',
body: fd
});
console.log('UPDATE ausgeführt...'+ bezeichnung);
toast.add({ severity: 'success', summary: 'Type updated', detail: 'Description: ' + bezeichnung.value, life: 3000 });
await refreshNuxtData();
console.log('UPDATE ausgeführt...'+ bezeichnung.value);
}
async function onDelete() {

173
components/UpdMeas.vue
Unescape View File

@ -0,0 +1,173 @@
<template>
<ClientOnly>
<Card style="margin-top: 78px; min-height: 200px;">
<template #content>
<Panel header="Maintainance / Measures" class="bg-white rounded-4 gap-3">
<div class="g-3 mb-20">
<div class="grid nested-grid">
<Card class="col-12">
<template #content>
<div class="col-12 mb-20">
<div class="field">
<label for="kurz">Title</label>
<InputText id="kurz" v-model.trim="measure.kurz" required="true" autofocus />
<small id="kurz-help" >Enter a short description for the measure</small>
</div>
</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>
<InputText id="brust" v-model.trim="measure.brust" />
</td>
</tr>
<tr>
<td>Length Top</td>
<td>
<InputText id="laenget" v-model.trim="measure.laenget" />
</td>
</tr>
<tr>
<td>Shoulder Width</td>
<td>
<InputText id="schulterbreite" v-model.trim="measure.schulterbreite" />
</td>
</tr>
<tr>
<td>Waist Girth Top</td>
<td>
<InputText id="taillenumfangt" v-model.trim="measure.taillenumfangt" />
</td>
</tr>
<tr>
<td>Hip Girth</td>
<td>
<InputText id="hueftumfang" v-model.trim="measure.hueftumfang" />
</td>
</tr>
<tr>
<td>Inner Seam</td>
<td>
<InputText id="innennaht" v-model.trim="measure.innennaht" />
</td>
</tr>
<tr>
<td>Length Bottom</td>
<td>
<InputText id="laengeb" v-model.trim="measure.laengeb" />
</td>
</tr>
<tr>
<td>Waist Girth Bottom</td>
<td>
<InputText id="taillenumfangb" v-model.trim="measure.taillenumfangb" />
</td>
</tr>
</table>
</template>
<template #footer>
<Button label="Save" icon="pi pi-check" text @click="onSubmit(measure)" />
</template>
</Card>
</div>
</div>
<template #fallback>
<!-- this will be rendered on server side -->
<p>Loading comments...</p>
</template>
</Panel>
</template>
</Card>
</ClientOnly>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useToast } from 'primevue/usetoast';
let params : any;
params = inject('dialogRef');
//const test = params.data;
interface cMeasures {
id: number;
kurz: string;
brust: number;
laenget: number;
schulterbreite: number;
taillenumfangt: number;
hueftumfang: number;
innennaht: number;
laengeb: number;
taillenumfangb: number;
}
onMounted (() => {
//const measure = ref({id: 0, kurz: '', brust:0, laenget:0, schulterbreite:0, taillenumfangt:0, hueftumfang:0, innennaht:0, laengeb:0, taillenumfangb:0});
console.log('Params: ', params.value);
measure.value = params.value.data.mea;
console.log('measure nach onMounted: ', measure);
});
const toast = useToast();
const measure = ref({id: 0, kurz: '', brust:0, laenget:0, schulterbreite:0, taillenumfangt:0, hueftumfang:0, innennaht:0, laengeb:0, taillenumfangb:0});
async function onSubmit(m: cMeasures) {
if(!m.brust) {
m.brust = 0;
}
if(!m.laenget) {
m.laenget = 0;
}
if(!m.schulterbreite) {
m.schulterbreite = 0;
}
if(!m.taillenumfangt) {
m.taillenumfangt = 0;
}
if(!m.hueftumfang) {
m.hueftumfang = 0;
}
if(!m.innennaht) {
m.innennaht = 0;
}
if(!m.laengeb) {
m.laengeb = 0;
}
if(!m.taillenumfangb) {
m.taillenumfangb = 0;
}
await this.params.close(m);
}
</script>

6
components/UpdPhoto.vue
Unescape View File

@ -27,11 +27,13 @@
<template #empty> No Photos found. </template>
<!--<template #loading> Loading customers data. Please wait. </template> -->
<Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" sortable :filter-field="col.field" >
<Column v-if="col.field=='image'">
<!-- todo: Tabelle mit Templates ausarbeiten, damit die Fotos auch mit angezeigt werden
<template #body="slotProps">
<img :src="`${pfad}/thumb-${slotProps.data.pfad}`" :alt="slotProps.data.pfad" />
</template>
</Column>
-->
</Column>
</DataTable>

14
components/upditemb.vue
Unescape View File

@ -135,12 +135,13 @@ const toast = useToast();
const {data: typen } = await useFetch('http://ubodroid-2:8081/api/v1/typ');
let blubb: any;
let blubb, assm: any;
let params: any;
params = inject('dialogRef');
blubb = params.value.data.id;
//console.log(blubb);
assm = params.value.data.mid;
console.log('assm = ', assm);
@ -149,12 +150,19 @@ onMounted(() => {
})
console.log('Blubb außerhalb von onMounted: ', blubb);
const {data: itemb } = await useFetch('http://ubodroid-2:8081/api/v1/itb/'+blubb);
const {data: itemb } = await modifyItem();
const hideDialog = () => {
};
async function modifyItem() {
const res = await useFetch('http://ubodroid-2:8081/api/v1/itb/'+blubb);
console.log(res);
res.data.value.abmessungen.id = assm;
return res;
}
async function doUpdate(t: cItemB) {
let fd = new FormData();
fd.append('id', t.id);

5
pages/measure.vue
Unescape View File

@ -0,0 +1,5 @@
<template>
<div>
<Measure />
</div>
</template>
Write Preview
Loading…
Cancel
Save