cws
/
catbase
mirror of https://github.com/velour/catbase.git
1
0
Fork 0
Code Issues Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

188
plugins/meme/web.go
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">
@ -58,7 +102,8 @@ var memeIndex = `
:items="results" :items="results"
: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 />
@ -71,61 +116,92 @@ var memeIndex = `
</div> </div>
<script> <script>
var router = new VueRouter({ var router = new VueRouter({
mode: 'history', mode: 'history',
routes: [] routes: []
}); });
var app = new Vue({ var app = new Vue({
el: '#app', el: '#app',
router, router,
data: { data: {
err: '', err: '',
nav: [], nav: [],
name: "", name: '',
url: "", url: '',
config: "", config: '',
results: [], results: [],
fields: [ editConfig: null,
{ key: 'name', sortable: true }, fields: [
{ key: 'url', sortable: true }, { key: 'name', sortable: true },
{ key: 'config' }, { key: 'url', sortable: true },
{ key: 'image' } { key: 'config' },
] { key: 'image' }
}, ]
mounted() { },
axios.get('/nav') mounted() {
.then(resp => { axios.get('/nav')
this.nav = resp.data; .then(resp => {
}) this.nav = resp.data;
.catch(err => console.log(err)) })
this.refresh(); .catch(err => console.log(err))
}, this.refresh();
methods: { },
refresh: function() { methods: {
axios.get('/meme/all') refresh: function() {
.catch(err => (this.err = err)) axios.get('/meme/all')
.then(resp => { .catch(err => (this.err = err))
this.results = resp.data .then(resp => {
}) this.results = resp.data
}, })
addMeme: function(evt) { },
if (evt) { addMeme: function(evt) {
evt.preventDefault(); if (evt) {
evt.stopPropagation() evt.preventDefault();
evt.stopPropagation()
}
if (this.name && this.url)
axios.post('/meme/add', {name: this.name, url: this.url, config: this.config})
.then(resp => {
this.results = resp.data;
this.name = "";
this.url = "";
this.config = "";
this.refresh();
})
.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);
}
} }
if (this.name && this.url) })
axios.post('/meme/add', {name: this.name, url: this.url, config: this.config})
.then(resp => {
this.results = resp.data;
this.name = "";
this.url = "";
this.config = "";
this.refresh();
})
.catch(err => (this.err = err));
}
}
})
</script> </script>
</body> </body>
</html> </html>