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.
191 lines
5.9 KiB
191 lines
5.9 KiB
<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> |
|
<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;"> |
|
<MDBCol md="12"> |
|
<MDBInput |
|
label="Description *" |
|
v-model="bezeichnung" |
|
invalidFeedback="Please provide a description of the clothing-type" |
|
validFeedback="Looks good!" |
|
required |
|
/> |
|
</MDBCol> |
|
</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"> |
|
<tr> |
|
<th scope="col">#</th> |
|
<th scope="col">Description</th> |
|
</tr> |
|
</thead> |
|
<tbody> |
|
<tr v-for="t in typen"> |
|
<td>{{ t.id }}</td> |
|
<td>{{ t.bezeichnung }}</td> |
|
</tr> |
|
</tbody> |
|
</MDBTable> --> |
|
</MDBCol> |
|
</MDBRow> |
|
<!--</MDBContainer>--> |
|
|
|
|
|
<template #fallback> |
|
<!-- this will be rendered on server side --> |
|
<p>Loading comments...</p> |
|
</template> |
|
</ClientOnly> |
|
</MDBContainer> |
|
</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 { ref } from "vue"; |
|
|
|
const bezeichnung = ref(""); |
|
|
|
|
|
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); |
|
} |
|
|
|
|
|
/*export default { |
|
data() { |
|
return { |
|
selectMode: 'single', |
|
componentKey: 0, |
|
certs: [], |
|
form:{ |
|
id: "", |
|
bezeichnung: "", |
|
}, |
|
fields: [ |
|
{ |
|
key: 'id', |
|
sortable: true |
|
}, |
|
{ |
|
key: 'bezeichnung', |
|
sortable: true |
|
}, |
|
] |
|
} |
|
}, |
|
created() { |
|
this.fetch(); |
|
} |
|
, |
|
methods: { |
|
onRowSelect(items) { |
|
this.selected = items; |
|
// alert(JSON.stringify(this.selected)); |
|
this.onFill(this.selected); |
|
}, |
|
async fetch() { |
|
console.log("fetching..."); |
|
this.certs = await fetch( |
|
'http://ubodroid-2:8080/api/v1/typ' |
|
).then(res => res.json()) |
|
}, |
|
async onSubmit() { |
|
// event.preventDefault(); |
|
this.form.id = ""; |
|
console.log("submitting..."); |
|
await this.$http.$post('http://ubodroid-2:8080/api/v1/typ', this.form); |
|
// return result; |
|
// this.subm(this.form); |
|
this.fetch(); |
|
|
|
}, |
|
|
|
async onUpdate() { |
|
// event.preventDefault(); |
|
console.log("updating..."); |
|
console.log("Laufzeit: ", this.form.laufzeit) |
|
console.log(this.form); |
|
await this.$http.$put('http://ubodroid-2:8080/api/v1/typ/'+this.form.id, this.form); |
|
// return result; |
|
// this.subm(this.form); |
|
this.fetch(); |
|
|
|
}, |
|
|
|
async onDelete() { |
|
// event.preventDefault(); |
|
console.log("updating..."); |
|
await this.$http.$delete('http://ubodroid-2:8080/api/v1/typ/'+this.form.id); |
|
// return result; |
|
// this.subm(this.form); |
|
this.fetch(); |
|
|
|
}, |
|
|
|
|
|
onReset(event) { |
|
event.preventDefault(); |
|
this.form.bezeichnung = ''; |
|
}, |
|
|
|
onFill(item) { |
|
// alert(JSON.stringify(item)); |
|
if(item.length !== 0) { |
|
this.form.bezeichnung = item[0].bezeichnung; |
|
this.form.id = item[0].id; |
|
console.log(JSON.stringify(item[0].bezeichnung)); |
|
} |
|
} |
|
} |
|
}*/ |
|
</script> |