|
|
|
<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>
|