|
|
|
|
@ -1,40 +1,29 @@
|
|
|
|
|
<template> |
|
|
|
|
|
|
|
|
|
<MDBContainer class="bg-white vh-100 rounded-4" style="margin-top: 70px;"> |
|
|
|
|
<h3 class="text-secondary mb-4 pt-3" style="border-bottom: 3px solid black;">Type</h3> |
|
|
|
|
<div> |
|
|
|
|
<div style="margin-bottom: 20px;"> |
|
|
|
|
<ClientOnly> |
|
|
|
|
<MDBRow tag="form" class="g-3 mb-20 needs-validation" novalidate @submit.prevent="checkForm"> |
|
|
|
|
<MDBCol md="4"> |
|
|
|
|
<p>Image Galery</p> |
|
|
|
|
</MDBCol> |
|
|
|
|
<MDBCol md="8"> |
|
|
|
|
<MDBRow style="margin-bottom:20px;"> |
|
|
|
|
<MDBRow tag="form" class="g-3 needs-validation" novalidate @submit.prevent="checkForm"> |
|
|
|
|
<MDBCol md="12"> |
|
|
|
|
<MDBInput |
|
|
|
|
label="Description *" |
|
|
|
|
label="Description" |
|
|
|
|
v-model="bezeichnung" |
|
|
|
|
invalidFeedback="Please provide a description of the clothing-type" |
|
|
|
|
validFeedback="Looks good!" |
|
|
|
|
required |
|
|
|
|
/> |
|
|
|
|
</MDBCol> |
|
|
|
|
|
|
|
|
|
<MDBBtn variant="primary" @click="onSubmit()">Neu eintragen</MDBBtn> |
|
|
|
|
<b-button variant="secondary" @click="onUpdate()">Aktualisieren</b-button> |
|
|
|
|
<b-button variant="danger" @click="onDelete()">Löschen</b-button> |
|
|
|
|
<b-button type="reset" variant="danger">Reset</b-button> |
|
|
|
|
</MDBRow> |
|
|
|
|
<MDBRow style="margin-bottom:40px;"> |
|
|
|
|
<MDBCol md="12"> |
|
|
|
|
<MDBBtn class="" color="primary" @click="onSubmit()">NEW</MDBBtn> |
|
|
|
|
<MDBBtn color="secondary" @click="onUpdate()">UPDATE</MDBBtn> |
|
|
|
|
<MDBBtn color="danger" @click="onDelete()">DELETE</MDBBtn> |
|
|
|
|
<MDBBtn type="reset" color="dark">Reset</MDBBtn> |
|
|
|
|
</MDBCol> |
|
|
|
|
</MDBRow> |
|
|
|
|
</MDBCol> |
|
|
|
|
</MDBRow> |
|
|
|
|
<!--<MDBContainer class="bg-white rounded-4"> --> |
|
|
|
|
<MDBRow style="margin-bottom:40px;"> |
|
|
|
|
<MDBCol md="12"> |
|
|
|
|
<div id="datatable" data-mdb-loading="true"></div> |
|
|
|
|
<!-- <MDBTable striped hover border="primary" sm class="rounded-4"> |
|
|
|
|
<thead class="table-dark"> |
|
|
|
|
</ClientOnly> |
|
|
|
|
</div> |
|
|
|
|
<div> |
|
|
|
|
<ClientOnly> |
|
|
|
|
<MDBTable striped hover bordered> |
|
|
|
|
<thead> |
|
|
|
|
<tr> |
|
|
|
|
<th scope="col">#</th> |
|
|
|
|
<th scope="col">Description</th> |
|
|
|
|
@ -46,60 +35,27 @@
|
|
|
|
|
<td>{{ t.bezeichnung }}</td> |
|
|
|
|
</tr> |
|
|
|
|
</tbody> |
|
|
|
|
</MDBTable> --> |
|
|
|
|
</MDBCol> |
|
|
|
|
</MDBRow> |
|
|
|
|
<!--</MDBContainer>--> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</MDBTable> |
|
|
|
|
<template #fallback> |
|
|
|
|
<!-- this will be rendered on server side --> |
|
|
|
|
<p>Loading comments...</p> |
|
|
|
|
</template> |
|
|
|
|
</ClientOnly> |
|
|
|
|
</MDBContainer> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<style> |
|
|
|
|
@import 'bootstrap'; |
|
|
|
|
@import 'datatables.net-bs5'; |
|
|
|
|
</style> |
|
|
|
|
|
|
|
|
|
<script setup lang="ts"> |
|
|
|
|
import { MDBCard, MDBCardBody, MDBCardTitle, MDBCardText, MDBBtn, MDBCol, MDBCheckbox, MDBInput, MDBRow, MDBTable, MDBContainer, mdbClickOutside, } from "mdb-vue-ui-kit"; |
|
|
|
|
import { DataTable } from 'datatables.net-vue3'; |
|
|
|
|
import { DataTablesCore } from 'datatables.net-bs5'; |
|
|
|
|
import { MDBCard, MDBCardBody, MDBCardTitle, MDBCardText, MDBBtn, MDBCol, MDBCheckbox, MDBInput, MDBRow, MDBTable } from "mdb-vue-ui-kit"; |
|
|
|
|
import { ref } from "vue"; |
|
|
|
|
|
|
|
|
|
const bezeichnung = ref(""); |
|
|
|
|
const bezeichnung = ref("e.g. Shirt"); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const checkForm = (event: Event) => { |
|
|
|
|
event.target.classList.add("was-validated"); |
|
|
|
|
}; |
|
|
|
|
const {data: typen } = await useFetch('http://ubodroid-2:8081/api/v1/typ'); |
|
|
|
|
|
|
|
|
|
const columns = [ |
|
|
|
|
{ label: '#', field: 'id' }, |
|
|
|
|
{ label: 'Description', field: 'bezeichnung'}, |
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
const asyncTable = new MDBTable( |
|
|
|
|
document.getElementById('datatable'), |
|
|
|
|
{} |
|
|
|
|
) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
async function onSubmit() { |
|
|
|
|
let fd = new FormData(); |
|
|
|
|
fd.append('bezeichnung', bezeichnung.value); |
|
|
|
|
await $fetch('http://ubodroid-2:8081/api/v1/typ',{ |
|
|
|
|
method: 'POST', |
|
|
|
|
body: fd |
|
|
|
|
}); |
|
|
|
|
console.log('POST ausgeführt...'+ bezeichnung); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const {data: typen } = await useFetch('http://ubodroid-2:8080/api/v1/typ'); |
|
|
|
|
|
|
|
|
|
/*export default { |
|
|
|
|
data() { |
|
|
|
|
|
