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.
145 lines
3.9 KiB
145 lines
3.9 KiB
1 year ago
|
<template>
|
||
|
<div>
|
||
|
<div style="margin-bottom: 20px;">
|
||
|
<b-form @reset="onReset">
|
||
|
|
||
|
<b-form-group
|
||
|
id="ip-g-1"
|
||
|
label="Name:"
|
||
|
label-for="name"
|
||
|
description="Name des Zertifikat-Typs:"
|
||
|
>
|
||
|
<b-form-input
|
||
|
id="name"
|
||
|
v-model="form.name"
|
||
|
required
|
||
|
placeholder="Name eingeben"
|
||
|
size="50"
|
||
|
>
|
||
|
</b-form-input>
|
||
|
</b-form-group>
|
||
|
<b-form-group
|
||
|
id="ip-g-2"
|
||
|
label="Laufzeit (in Tagen):"
|
||
|
label-for="laufzeit"
|
||
|
description="Laufzeit des Zertifikats:"
|
||
|
>
|
||
|
<b-form-input
|
||
|
id="laufzeit"
|
||
|
v-model="form.laufzeit"
|
||
|
required
|
||
|
placeholder="Laufzeit 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: "",
|
||
|
name: "",
|
||
|
laufzeit: 0,
|
||
|
},
|
||
|
fields: [
|
||
|
{
|
||
|
key: 'id',
|
||
|
sortable: true
|
||
|
},
|
||
|
{
|
||
|
key: 'name',
|
||
|
sortable: true
|
||
|
},
|
||
|
{
|
||
|
key: 'laufzeit',
|
||
|
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/typ'
|
||
|
).then(res => res.json())
|
||
|
},
|
||
|
async onSubmit() {
|
||
|
// event.preventDefault();
|
||
|
this.form.id = "";
|
||
|
console.log("submitting...");
|
||
|
await this.$http.$post('http://localhost:3000/api/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:3000/api/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:3000/api/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.name = item[0].name;
|
||
|
this.form.id = item[0].id;
|
||
|
this.form.laufzeit = parseInt(item[0].laufzeit);
|
||
|
console.log(JSON.stringify(item[0].name));
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
</script>
|