Georg Spar
1 year ago
8 changed files with 543 additions and 8 deletions
@ -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> |
||||||
|
|
@ -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> |
@ -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> |
Loading…
Reference in new issue