mirror of https://github.com/velour/catbase.git
web: redo factoid page; add title to counter page
This commit is contained in:
parent
20a56a4fcc
commit
ab3dac35ba
|
|
@ -14,6 +14,7 @@ var html = `
|
||||||
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
|
<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="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
|
||||||
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
||||||
|
<title>Counters</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@ package fact
|
||||||
|
|
||||||
import (
|
import (
|
||||||
"database/sql"
|
"database/sql"
|
||||||
|
"encoding/json"
|
||||||
"fmt"
|
"fmt"
|
||||||
"html/template"
|
"html/template"
|
||||||
"math/rand"
|
"math/rand"
|
||||||
|
|
@ -759,6 +760,7 @@ func (p *FactoidPlugin) factTimer(c bot.Connector, channel string) {
|
||||||
|
|
||||||
// Register any web URLs desired
|
// Register any web URLs desired
|
||||||
func (p *FactoidPlugin) registerWeb() {
|
func (p *FactoidPlugin) registerWeb() {
|
||||||
|
http.HandleFunc("/factoid/api", p.serveAPI)
|
||||||
http.HandleFunc("/factoid/req", p.serveQuery)
|
http.HandleFunc("/factoid/req", p.serveQuery)
|
||||||
http.HandleFunc("/factoid", p.serveQuery)
|
http.HandleFunc("/factoid", p.serveQuery)
|
||||||
p.Bot.RegisterWeb("/factoid", "Factoid")
|
p.Bot.RegisterWeb("/factoid", "Factoid")
|
||||||
|
|
@ -773,8 +775,43 @@ func linkify(text string) template.HTML {
|
||||||
}
|
}
|
||||||
return template.HTML(strings.Join(parts, " "))
|
return template.HTML(strings.Join(parts, " "))
|
||||||
}
|
}
|
||||||
|
func (p *FactoidPlugin) serveAPI(w http.ResponseWriter, r *http.Request) {
|
||||||
|
if r.Method != http.MethodPost {
|
||||||
|
fmt.Fprintf(w, "Incorrect HTTP method")
|
||||||
|
return
|
||||||
|
}
|
||||||
|
info := struct {
|
||||||
|
Query string `json:"query"`
|
||||||
|
}{}
|
||||||
|
decoder := json.NewDecoder(r.Body)
|
||||||
|
err := decoder.Decode(&info)
|
||||||
|
if err != nil {
|
||||||
|
w.WriteHeader(500)
|
||||||
|
fmt.Fprint(w, err)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
entries, err := getFacts(p.db, info.Query, "")
|
||||||
|
if err != nil {
|
||||||
|
w.WriteHeader(500)
|
||||||
|
fmt.Fprint(w, err)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
data, err := json.Marshal(entries)
|
||||||
|
if err != nil {
|
||||||
|
w.WriteHeader(500)
|
||||||
|
fmt.Fprint(w, err)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
w.Write(data)
|
||||||
|
}
|
||||||
|
|
||||||
func (p *FactoidPlugin) serveQuery(w http.ResponseWriter, r *http.Request) {
|
func (p *FactoidPlugin) serveQuery(w http.ResponseWriter, r *http.Request) {
|
||||||
|
fmt.Fprint(w, factoidIndex)
|
||||||
|
}
|
||||||
|
|
||||||
|
func (p *FactoidPlugin) serveQueryOld(w http.ResponseWriter, r *http.Request) {
|
||||||
context := make(map[string]interface{})
|
context := make(map[string]interface{})
|
||||||
funcMap := template.FuncMap{
|
funcMap := template.FuncMap{
|
||||||
// The name "title" is what the function will be called in the template text.
|
// The name "title" is what the function will be called in the template text.
|
||||||
|
|
|
||||||
|
|
@ -9,106 +9,101 @@ package fact
|
||||||
|
|
||||||
var factoidIndex = `
|
var factoidIndex = `
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<title>Factoids</title>
|
<!-- Load required Bootstrap and BootstrapVue CSS -->
|
||||||
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
|
<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" />
|
||||||
|
|
||||||
<!-- DataTables CSS -->
|
<!-- Load polyfills to support older browsers -->
|
||||||
<link rel="stylesheet" type="text/css" href="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
|
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CMutationObserver"></script>
|
||||||
|
|
||||||
<!-- jQuery -->
|
|
||||||
<script type="text/javascript" charset="utf8" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
|
|
||||||
|
|
||||||
<!-- DataTables -->
|
|
||||||
<script type="text/javascript" charset="utf8" src="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div>
|
|
||||||
<form action="/factoid" method="GET" class="pure-form">
|
|
||||||
<fieldset>
|
|
||||||
<legend>Search for a factoid</legend>
|
|
||||||
<input type="text" name="entry" placeholder="trigger" value="{{.Search}}" />
|
|
||||||
<button type="submit" class="pure-button notice">Find</button>
|
|
||||||
</fieldset>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
<div id="app">
|
||||||
<style scoped>
|
<h1>Factoids</h1>
|
||||||
|
<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>
|
||||||
|
|
||||||
.pure-button-success,
|
<script>
|
||||||
.pure-button-error,
|
var router = new VueRouter({
|
||||||
.pure-button-warning,
|
mode: 'history',
|
||||||
.pure-button-secondary {
|
routes: []
|
||||||
color: white;
|
});
|
||||||
border-radius: 4px;
|
var app = new Vue({
|
||||||
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
|
el: '#app',
|
||||||
padding: 2px;
|
router,
|
||||||
}
|
data: {
|
||||||
|
err: '',
|
||||||
.pure-button-success {
|
query: '',
|
||||||
background: rgb(76, 201, 71); /* this is a green */
|
results: [],
|
||||||
}
|
fields: [
|
||||||
|
{ key: 'Fact', sortable: true },
|
||||||
.pure-button-error {
|
{ key: 'Tidbit', sortable: true },
|
||||||
background: rgb(202, 60, 60); /* this is a maroon */
|
{ key: 'Owner', sortable: true },
|
||||||
}
|
{ key: 'Count' }
|
||||||
|
]
|
||||||
.pure-button-warning {
|
},
|
||||||
background: orange;
|
mounted() {
|
||||||
}
|
if (this.$route.query.query) {
|
||||||
|
this.query = this.$route.query.query;
|
||||||
.pure-button-secondary {
|
this.runQuery()
|
||||||
background: rgb(95, 198, 218); /* this is a light blue */
|
}
|
||||||
}
|
},
|
||||||
|
computed: {
|
||||||
</style>
|
result0: function() {
|
||||||
|
return this.results[0] || "";
|
||||||
{{if .Error}}
|
}
|
||||||
<span id="error" class="pure-button-error">{{.Error}}</span>
|
},
|
||||||
{{end}}
|
methods: {
|
||||||
|
runQuery: function(evt) {
|
||||||
{{if .Count}}
|
if (evt) {
|
||||||
<span id="count" class="pure-button-success">Found {{.Count}} entries.</span>
|
evt.preventDefault();
|
||||||
{{end}}
|
evt.stopPropagation()
|
||||||
</div>
|
}
|
||||||
|
axios.post('/factoid/api', {query: this.query})
|
||||||
{{if .Entries}}
|
.then(resp => {
|
||||||
<div style="padding-top: 1em;">
|
this.results = resp.data;
|
||||||
<table class="pure-table" id="factTable">
|
})
|
||||||
<thead>
|
.catch(err => (this.err = err));
|
||||||
<tr>
|
}
|
||||||
<th>Trigger</th>
|
}
|
||||||
<th>Full Text</th>
|
})
|
||||||
<th>Author</th>
|
</script>
|
||||||
<th># Hits</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
|
|
||||||
<tbody>
|
|
||||||
{{range .Entries}}
|
|
||||||
<tr>
|
|
||||||
<td>{{linkify .Fact}}</td>
|
|
||||||
<td>{{linkify .Tidbit}}</td>
|
|
||||||
<td>{{linkify .Owner}}</td>
|
|
||||||
<td>{{.Count}}</td>
|
|
||||||
</tr>
|
|
||||||
{{end}}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
{{end}}
|
|
||||||
|
|
||||||
<script>
|
|
||||||
$(document).ready(function(){
|
|
||||||
$('#factTable').dataTable({
|
|
||||||
"bPaginate": false
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
`
|
`
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue