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

133 lines
3.8 KiB
Go
Raw Normal View History

meme: add web interface
2020-05-01 16:27:47 +00:00
package meme
var memeIndex = `
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Load required Bootstrap and BootstrapVue CSS -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<!-- Load polyfills to support older browsers -->
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CMutationObserver"></script>
<!-- Load Vue followed by BootstrapVue -->
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<script src="https://unpkg.com/vue-router"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<meta charset="UTF-8">
<title>Memes</title>
</head>
<body>
<div id="app">
<b-navbar>
<b-navbar-brand>Memes</b-navbar-brand>
<b-navbar-nav>
web: remove go template dependency All vue pages now request `/nav` to get a JSON array of navigation instead of relying on the Go template to have the nav built in. This cleans up all of the crufty `{{ "{{ thing }}" }}` that was making it hard to wriet vue. This also paves the way to using the new Go resource embedding so that the pages don't need to be wrapped in Go files.
2021-01-09 18:46:28 +00:00
<b-nav-item v-for="item in nav" :href="item.url" :active="item.name === 'Meme'">{{ item.name }}</b-nav-item>
meme: add web interface
2020-05-01 16:27:47 +00:00
</b-navbar-nav>
</b-navbar>
<b-alert
dismissable
variant="error"
v-if="err"
@dismissed="err = ''">
web: remove go template dependency All vue pages now request `/nav` to get a JSON array of navigation instead of relying on the Go template to have the nav built in. This cleans up all of the crufty `{{ "{{ thing }}" }}` that was making it hard to wriet vue. This also paves the way to using the new Go resource embedding so that the pages don't need to be wrapped in Go files.
2021-01-09 18:46:28 +00:00
{{ err }}
meme: add web interface
2020-05-01 16:27:47 +00:00
</b-alert>
<b-form @submit="addMeme">
<b-container>
<b-row>
meme: add web config
2020-10-21 19:55:28 +00:00
<b-col cols="3">
meme: add placeholder text in web form
2020-05-04 17:38:28 +00:00
<b-input placeholder="Name..." v-model="name"></b-input>
meme: add web interface
2020-05-01 16:27:47 +00:00
</b-col>
meme: add web config
2020-10-21 19:55:28 +00:00
<b-col cols="3">
meme: add placeholder text in web form
2020-05-04 17:38:28 +00:00
<b-input placeholder="URL..." v-model="url"></b-input>
meme: add web interface
2020-05-01 16:27:47 +00:00
</b-col>
meme: add web config
2020-10-21 19:55:28 +00:00
<b-col cols="3">
<b-input placeholder="Config..." v-model="config"></b-input>
</b-col>
<b-col cols="3">
meme: add web interface
2020-05-01 16:27:47 +00:00
<b-button type="submit">Add Meme</b-button>
</b-col>
</b-row>
<b-row>
<b-col>
<b-table
fixed
:items="results"
:fields="fields">
meme: add web config
2020-10-21 19:55:28 +00:00
<template v-slot:cell(config)="data">
web: remove go template dependency All vue pages now request `/nav` to get a JSON array of navigation instead of relying on the Go template to have the nav built in. This cleans up all of the crufty `{{ "{{ thing }}" }}` that was making it hard to wriet vue. This also paves the way to using the new Go resource embedding so that the pages don't need to be wrapped in Go files.
2021-01-09 18:46:28 +00:00
<pre>{{data.item.config}}</pre>
meme: add web config
2020-10-21 19:55:28 +00:00
</template>
meme: add web interface
2020-05-01 16:27:47 +00:00
<template v-slot:cell(image)="data">
<b-img :src="data.item.url" rounded block fluid />
</template>
</b-table>
</b-col>
</b-row>
</b-container>
</b-form>
</div>
<script>
var router = new VueRouter({
mode: 'history',
routes: []
});
var app = new Vue({
el: '#app',
router,
data: {
err: '',
web: remove go template dependency All vue pages now request `/nav` to get a JSON array of navigation instead of relying on the Go template to have the nav built in. This cleans up all of the crufty `{{ "{{ thing }}" }}` that was making it hard to wriet vue. This also paves the way to using the new Go resource embedding so that the pages don't need to be wrapped in Go files.
2021-01-09 18:46:28 +00:00
nav: [],
meme: add web interface
2020-05-01 16:27:47 +00:00
name: "",
url: "",
meme: add web config
2020-10-21 19:55:28 +00:00
config: "",
meme: add web interface
2020-05-01 16:27:47 +00:00
results: [],
fields: [
{ key: 'name', sortable: true },
{ key: 'url', sortable: true },
meme: add web config
2020-10-21 19:55:28 +00:00
{ key: 'config' },
meme: add web interface
2020-05-01 16:27:47 +00:00
{ key: 'image' }
]
},
mounted() {
web: remove go template dependency All vue pages now request `/nav` to get a JSON array of navigation instead of relying on the Go template to have the nav built in. This cleans up all of the crufty `{{ "{{ thing }}" }}` that was making it hard to wriet vue. This also paves the way to using the new Go resource embedding so that the pages don't need to be wrapped in Go files.
2021-01-09 18:46:28 +00:00
axios.get('/nav')
.then(resp => {
this.nav = resp.data;
})
.catch(err => console.log(err))
meme: add web interface
2020-05-01 16:27:47 +00:00
this.refresh();
},
methods: {
refresh: function() {
axios.get('/meme/all')
.catch(err => (this.err = err))
.then(resp => {
this.results = resp.data
})
},
addMeme: function(evt) {
if (evt) {
evt.preventDefault();
evt.stopPropagation()
}
if (this.name && this.url)
meme: add web config
2020-10-21 19:55:28 +00:00
axios.post('/meme/add', {name: this.name, url: this.url, config: this.config})
meme: add web interface
2020-05-01 16:27:47 +00:00
.then(resp => {
this.results = resp.data;
this.name = "";
this.url = "";
meme: add web config
2020-10-21 19:55:28 +00:00
this.config = "";
meme: add web interface
2020-05-01 16:27:47 +00:00
this.refresh();
})
.catch(err => (this.err = err));
}
}
})
</script>
</body>
</html>
`