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.
125 lines
3.4 KiB
125 lines
3.4 KiB
<template> |
|
<div> |
|
<div style="margin-bottom: 20px;"> |
|
<b-form @reset="onReset"> |
|
|
|
<b-form-group |
|
id="ip-g-1" |
|
label="Bezeichnung:" |
|
label-for="bezeichnung" |
|
description="Name des Zertifikat-Typs:" |
|
> |
|
<b-form-input |
|
id="bezeichnung" |
|
v-model="form.bezeichnung" |
|
required |
|
placeholder="Name eingeben" |
|
size="50" |
|
> |
|
</b-form-input> |
|
</b-form-group> |
|
|
|
<b-button variant="primary" @click="onSubmit()">Neu eintragen</b-button> |
|
<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> |
|
</b-form> |
|
</div> |
|
<div> |
|
<b-table striped hover bordered head-variant="dark" selectable :select-mode="selectMode" :items="certs" :fields="fields" @row-selected="onRowSelect"></b-table> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
|
|
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://localhost:8081/api/v1/typ' |
|
).then(res => res.json()) |
|
}, |
|
async onSubmit() { |
|
// event.preventDefault(); |
|
this.form.id = ""; |
|
console.log("submitting..."); |
|
await this.$http.$post('http://localhost:8081/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://localhost:8081/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://localhost:8081/api/v1/typ/'+this.form.id); |
|
// return result; |
|
// this.subm(this.form); |
|
this.fetch(); |
|
|
|
}, |
|
|
|
|
|
onReset(event) { |
|
event.preventDefault(); |
|
this.form.name = ''; |
|
this.form.laufzeit = 0; |
|
}, |
|
|
|
onFill(item) { |
|
// alert(JSON.stringify(item)); |
|
if(item.length !== 0) { |
|
this.form.bezeichnung = item[0].bezeichnung; |
|
this.form.id = item[0].id; |
|
this.form.laufzeit = parseInt(item[0].laufzeit); |
|
console.log(JSON.stringify(item[0].bezeichnung)); |
|
} |
|
} |
|
} |
|
} |
|
</script> |