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/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
|
||||
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
||||
<title>Counters</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ package fact
|
|||
|
||||
import (
|
||||
"database/sql"
|
||||
"encoding/json"
|
||||
"fmt"
|
||||
"html/template"
|
||||
"math/rand"
|
||||
|
|
@ -759,6 +760,7 @@ func (p *FactoidPlugin) factTimer(c bot.Connector, channel string) {
|
|||
|
||||
// Register any web URLs desired
|
||||
func (p *FactoidPlugin) registerWeb() {
|
||||
http.HandleFunc("/factoid/api", p.serveAPI)
|
||||
http.HandleFunc("/factoid/req", p.serveQuery)
|
||||
http.HandleFunc("/factoid", p.serveQuery)
|
||||
p.Bot.RegisterWeb("/factoid", "Factoid")
|
||||
|
|
@ -773,8 +775,43 @@ func linkify(text string) template.HTML {
|
|||
}
|
||||
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) {
|
||||
fmt.Fprint(w, factoidIndex)
|
||||
}
|
||||
|
||||
func (p *FactoidPlugin) serveQueryOld(w http.ResponseWriter, r *http.Request) {
|
||||
context := make(map[string]interface{})
|
||||
funcMap := template.FuncMap{
|
||||
// The name "title" is what the function will be called in the template text.
|
||||
|
|
|
|||
|
|
@ -9,106 +9,101 @@ package fact
|
|||
|
||||
var factoidIndex = `
|
||||
<!DOCTYPE html>
|
||||
<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>
|
||||
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
|
||||
|
||||
<!-- DataTables CSS -->
|
||||
<link rel="stylesheet" type="text/css" href="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
|
||||
|
||||
<!-- 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>
|
||||
|
||||
</head>
|
||||
<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 id="app">
|
||||
<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>
|
||||
|
||||
<div>
|
||||
<style scoped>
|
||||
|
||||
.pure-button-success,
|
||||
.pure-button-error,
|
||||
.pure-button-warning,
|
||||
.pure-button-secondary {
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.pure-button-success {
|
||||
background: rgb(76, 201, 71); /* this is a green */
|
||||
}
|
||||
|
||||
.pure-button-error {
|
||||
background: rgb(202, 60, 60); /* this is a maroon */
|
||||
}
|
||||
|
||||
.pure-button-warning {
|
||||
background: orange;
|
||||
}
|
||||
|
||||
.pure-button-secondary {
|
||||
background: rgb(95, 198, 218); /* this is a light blue */
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
{{if .Error}}
|
||||
<span id="error" class="pure-button-error">{{.Error}}</span>
|
||||
{{end}}
|
||||
|
||||
{{if .Count}}
|
||||
<span id="count" class="pure-button-success">Found {{.Count}} entries.</span>
|
||||
{{end}}
|
||||
</div>
|
||||
|
||||
{{if .Entries}}
|
||||
<div style="padding-top: 1em;">
|
||||
<table class="pure-table" id="factTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Trigger</th>
|
||||
<th>Full Text</th>
|
||||
<th>Author</th>
|
||||
<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
|
||||
});
|
||||
var router = new VueRouter({
|
||||
mode: 'history',
|
||||
routes: []
|
||||
});
|
||||
var app = new Vue({
|
||||
el: '#app',
|
||||
router,
|
||||
data: {
|
||||
err: '',
|
||||
query: '',
|
||||
results: [],
|
||||
fields: [
|
||||
{ key: 'Fact', sortable: true },
|
||||
{ key: 'Tidbit', sortable: true },
|
||||
{ key: 'Owner', sortable: true },
|
||||
{ key: 'Count' }
|
||||
]
|
||||
},
|
||||
mounted() {
|
||||
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>
|
||||
`
|
||||
|
|
|
|||
Loading…
Reference in New Issue