meme: add config and delete

This updates the web view to provide a screen to edit any particular
config in a text area, update the image URL, and remove a meme.

fixes #330
This commit is contained in:
Chris Sexton 2021-01-09 16:14:57 -05:00 committed by Chris Sexton
parent c61b84d21b
commit 8408da48d4
1 changed files with 132 additions and 56 deletions

View File

@ -35,7 +35,51 @@ var memeIndex = `
@dismissed="err = ''"> @dismissed="err = ''">
{{ err }} {{ err }}
</b-alert> </b-alert>
<b-form @submit="addMeme"> <b-form @submit="saveConfig" v-if="editConfig">
<b-container>
<b-row>
<b-col cols="1">
Name:
</b-col>
<b-col>
{{ editConfig.name }}
</b-col>
</b-row>
<b-row>
<b-col cols="1">
Image:
</b-col>
<b-col>
<img :src="editConfig.url" :alt="editConfig.url" rounded block fluid />
</b-col>
</b-row>
<b-row>
<b-col cols="1">
URL:
</b-col>
<b-col>
<b-input placeholder="URL..." v-model="editConfig.url"></b-input>
</b-col>
</b-row>
<b-row>
<b-col cols="1">
Config:
</b-col>
<b-col>
<b-form-textarea v-model="editConfig.config" rows="10">
</b-form-textarea>
</b-col>
</b-row>
<b-row>
<b-button type="submit" variant="primary">Save</b-button>
&nbsp;
<b-button @click="rm" variant="danger">Delete</b-button>
&nbsp;
<b-button type="cancel" @click="editConfig = null" variant="secondary">Cancel</b-button>
</b-row>
</b-container>
</b-form>
<b-form @submit="addMeme" v-if="!editConfig">
<b-container> <b-container>
<b-row> <b-row>
<b-col cols="3"> <b-col cols="3">
@ -59,6 +103,7 @@ var memeIndex = `
:fields="fields"> :fields="fields">
<template v-slot:cell(config)="data"> <template v-slot:cell(config)="data">
<pre>{{data.item.config}}</pre> <pre>{{data.item.config}}</pre>
<b-button @click="startEdit(data.item)">Edit</b-button>
</template> </template>
<template v-slot:cell(image)="data"> <template v-slot:cell(image)="data">
<b-img :src="data.item.url" rounded block fluid /> <b-img :src="data.item.url" rounded block fluid />
@ -81,10 +126,11 @@ var memeIndex = `
data: { data: {
err: '', err: '',
nav: [], nav: [],
name: "", name: '',
url: "", url: '',
config: "", config: '',
results: [], results: [],
editConfig: null,
fields: [ fields: [
{ key: 'name', sortable: true }, { key: 'name', sortable: true },
{ key: 'url', sortable: true }, { key: 'url', sortable: true },
@ -123,6 +169,36 @@ var memeIndex = `
this.refresh(); this.refresh();
}) })
.catch(err => (this.err = err)); .catch(err => (this.err = err));
},
startEdit: function(item) {
this.editConfig = item;
},
saveConfig: function(evt) {
if (evt) {
evt.preventDefault();
evt.stopPropagation();
}
if (this.editConfig && this.editConfig.name && this.editConfig.url) {
axios.post('/meme/add', this.editConfig)
.then(resp => {
this.results = resp.data;
this.editConfig = null;
this.refresh();
})
.catch(err => this.err = err);
}
},
rm: function(evt) {
if (evt) {
evt.preventDefault();
evt.stopPropagation();
}
axios.delete('/meme/rm', { data: this.editConfig })
.then(resp => {
this.editConfig = null;
this.refresh();
})
.catch(err => this.err = err);
} }
} }
}) })