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.
147 lines
4.3 KiB
147 lines
4.3 KiB
1 year ago
|
<template>
|
||
|
<div>
|
||
|
<div style="margin-bottom: 20px;">
|
||
|
<ClientOnly>
|
||
|
<MDBRow tag="form" class="g-3 needs-validation" novalidate @submit.prevent="checkForm">
|
||
|
<MDBCol md="12">
|
||
|
<MDBInput
|
||
|
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>
|
||
|
</ClientOnly>
|
||
|
</div>
|
||
|
<div>
|
||
|
<ClientOnly>
|
||
|
<MDBTable striped hover bordered>
|
||
|
<thead>
|
||
|
<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>
|
||
|
<template #fallback>
|
||
|
<!-- this will be rendered on server side -->
|
||
|
<p>Loading comments...</p>
|
||
|
</template>
|
||
|
</ClientOnly>
|
||
|
</div>
|
||
|
</div>
|
||
|
</template>
|
||
|
|
||
|
<script setup lang="ts">
|
||
|
import { MDBCard, MDBCardBody, MDBCardTitle, MDBCardText, MDBBtn, MDBCol, MDBCheckbox, MDBInput, MDBRow, MDBTable } from "mdb-vue-ui-kit";
|
||
|
import { ref } from "vue";
|
||
|
|
||
|
const bezeichnung = ref("e.g. Shirt");
|
||
|
|
||
|
|
||
|
const checkForm = (event: Event) => {
|
||
|
event.target.classList.add("was-validated");
|
||
|
};
|
||
|
const {data: typen } = await useFetch('http://ubodroid-2:8080/api/v1/typ');
|
||
|
|
||
|
/*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>
|