mirror of
https://github.com/velour/catbase.git
synced 2025-04-04 20:21:42 +00:00
Chris Sexton
bbf5b27790
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.
121 lines
3.4 KiB
Go
121 lines
3.4 KiB
Go
// © 2013 the CatBase Authors under the WTFPL. See AUTHORS for the list of authors.
|
|
|
|
package fact
|
|
|
|
// I hate this, but I'm creating strings of the templates to avoid having to
|
|
// track where templates reside.
|
|
|
|
// 2016-01-15 Later note, why are these in plugins and the server is in bot?
|
|
|
|
var factoidIndex = `
|
|
<!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>Factoids</title>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="app">
|
|
<b-navbar>
|
|
<b-navbar-brand>Factoids</b-navbar-brand>
|
|
<b-navbar-nav>
|
|
<b-nav-item v-for="item in nav" :href="item.url" :active="item.name === 'Factoid'">{{ item.name }}</b-nav-item>
|
|
</b-navbar-nav>
|
|
</b-navbar>
|
|
<b-alert
|
|
dismissable
|
|
variant="error"
|
|
v-if="err"
|
|
@dismissed="err = ''">
|
|
{{ err }}
|
|
</b-alert>
|
|
<b-form @submit="runQuery">
|
|
<b-container>
|
|
<b-row>
|
|
<b-col cols="10">
|
|
<b-input v-model="query"></b-input>
|
|
</b-col>
|
|
<b-col cols="2">
|
|
<b-button>Search</b-button>
|
|
</b-col>
|
|
</b-row>
|
|
<b-row>
|
|
<b-col>
|
|
<b-table
|
|
fixed
|
|
:items="results"
|
|
:fields="fields"></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: '',
|
|
nav: [],
|
|
query: '',
|
|
results: [],
|
|
fields: [
|
|
{ key: 'Fact', sortable: true },
|
|
{ key: 'Tidbit', sortable: true },
|
|
{ key: 'Owner', sortable: true },
|
|
{ key: 'Count' }
|
|
]
|
|
},
|
|
mounted() {
|
|
axios.get('/nav')
|
|
.then(resp => {
|
|
this.nav = resp.data;
|
|
})
|
|
.catch(err => console.log(err))
|
|
if (this.$route.query.query) {
|
|
this.query = this.$route.query.query;
|
|
this.runQuery()
|
|
}
|
|
},
|
|
computed: {
|
|
result0: function() {
|
|
return this.results[0] || "";
|
|
}
|
|
},
|
|
methods: {
|
|
runQuery: function(evt) {
|
|
if (evt) {
|
|
evt.preventDefault();
|
|
evt.stopPropagation()
|
|
}
|
|
axios.post('/factoid/api', {query: this.query})
|
|
.then(resp => {
|
|
this.results = resp.data;
|
|
})
|
|
.catch(err => (this.err = err));
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|
|
`
|