meme: add web interface

plugins/admin/admin.go

@@ -14,6 +14,7 @@ import (
 	"github.com/rs/zerolog/log"
 
 	"github.com/jmoiron/sqlx"
+
 	"github.com/velour/catbase/bot"
 	"github.com/velour/catbase/bot/msg"
 	"github.com/velour/catbase/config"
@@ -47,6 +48,7 @@ var forbiddenKeys = map[string]bool{
 	"twitch.clientid":      true,
 	"untappd.token":        true,
 	"slack.token":          true,
+	"meme.memes":           true,
 }
 
 // Message responds to the bot hook on recieving messages.

plugins/meme/meme.go

@@ -2,12 +2,15 @@ package meme
 
 import (
 	"bytes"
+	"encoding/json"
 	"fmt"
+	"html/template"
 	"image"
 	"image/png"
 	"net/http"
 	"net/url"
 	"path"
+	"sort"
 	"strings"
 	"time"
 
@@ -67,18 +70,110 @@ func (p *MemePlugin) message(c bot.Connector, kind bot.Kind, message msg.Message
 }
 
 func (p *MemePlugin) help(c bot.Connector, kind bot.Kind, message msg.Message, args ...interface{}) bool {
+	webRoot := p.c.Get("BaseURL", "https://catbase.velour.ninja")
 	formats := p.c.GetMap("meme.memes", defaultFormats)
 	msg := "Use `/meme [format] [text]` to create a meme.\nI know the following formats:"
 	msg += "\n`[format]` can be a URL"
 	for k := range formats {
 		msg += "\n" + k
 	}
+	msg += fmt.Sprintf("\nHead over to %s/meme to add new meme formats", webRoot)
 	p.bot.Send(c, bot.Message, message.Channel, msg)
 	return true
 }
 
 func (p *MemePlugin) registerWeb(c bot.Connector) {
-	http.HandleFunc("/slash/meme", func(w http.ResponseWriter, r *http.Request) {
+	http.HandleFunc("/slash/meme", p.slashMeme(c))
+	http.HandleFunc("/meme/img/", p.img)
+	http.HandleFunc("/meme/all", p.all)
+	http.HandleFunc("/meme/add", p.addMeme)
+	http.HandleFunc("/meme", p.webRoot)
+	p.bot.RegisterWeb("/meme", "Memes")
+}
+
+type webResp struct {
+	Name string `json:"name"`
+	URL  string `json:"url"`
+}
+
+type webResps []webResp
+
+func (w webResps) Len() int      { return len(w) }
+func (w webResps) Swap(i, j int) { w[i], w[j] = w[j], w[i] }
+
+type ByName struct{ webResps }
+
+func (s ByName) Less(i, j int) bool { return s.webResps[i].Name < s.webResps[j].Name }
+
+func (p *MemePlugin) all(w http.ResponseWriter, r *http.Request) {
+	memes := p.c.GetMap("meme.memes", defaultFormats)
+	values := webResps{}
+	for n, u := range memes {
+
+		realURL, err := url.Parse(u)
+		if err != nil || realURL.Scheme == "" {
+			realURL, _ = url.Parse("https://imgflip.com/s/meme/" + u)
+		}
+		sort.Sort(ByName{values})
+		values = append(values, webResp{n, realURL.String()})
+	}
+
+	out, err := json.Marshal(values)
+	if err != nil {
+		w.WriteHeader(500)
+		log.Error().Err(err).Msgf("could not serve all memes route")
+		return
+	}
+	w.Write(out)
+}
+
+func (p *MemePlugin) addMeme(w http.ResponseWriter, r *http.Request) {
+	if r.Method != http.MethodPost {
+		w.WriteHeader(405)
+		fmt.Fprintf(w, "Incorrect HTTP method")
+		return
+	}
+	checkError := func(err error) bool {
+		if err != nil {
+			log.Error().Err(err).Msgf("addMeme failed")
+			w.WriteHeader(500)
+			e, _ := json.Marshal(err)
+			w.Write(e)
+			return true
+		}
+		return false
+	}
+	decoder := json.NewDecoder(r.Body)
+	values := webResp{}
+	err := decoder.Decode(&values)
+	if checkError(err) {
+		return
+	}
+	formats := p.c.GetMap("meme.memes", defaultFormats)
+	formats[values.Name] = values.URL
+	err = p.c.SetMap("meme.memes", formats)
+	checkError(err)
+}
+
+func (p *MemePlugin) webRoot(w http.ResponseWriter, r *http.Request) {
+	var tpl = template.Must(template.New("factoidIndex").Parse(string(memeIndex)))
+	tpl.Execute(w, struct{ Nav []bot.EndPoint }{p.bot.GetWebNavigation()})
+}
+
+func (p *MemePlugin) img(w http.ResponseWriter, r *http.Request) {
+	_, file := path.Split(r.URL.Path)
+	id := file
+	if img, ok := p.images[id]; ok {
+		w.Write(img.repr)
+	} else {
+		w.WriteHeader(404)
+		w.Write([]byte("not found"))
+	}
+	p.images.cleanup()
+}
+
+func (p *MemePlugin) slashMeme(c bot.Connector) http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
 		r.ParseForm()
 		log.Debug().Msgf("Meme:\n%+v", r.PostForm.Get("text"))
 		channel := r.PostForm.Get("channel_id")
@@ -137,19 +232,7 @@ func (p *MemePlugin) registerWeb(c bot.Connector) {
 
 			p.bot.Receive(c, bot.Message, m)
 		}()
-	})
-
-	http.HandleFunc("/meme/img/", func(w http.ResponseWriter, r *http.Request) {
-		_, file := path.Split(r.URL.Path)
-		id := file
-		if img, ok := p.images[id]; ok {
-			w.Write(img.repr)
-		} else {
-			w.WriteHeader(404)
-			w.Write([]byte("not found"))
 	}
-		p.images.cleanup()
-	})
 }
 
 func DownloadTemplate(u *url.URL) (image.Image, error) {

plugins/meme/web.go

@@ -0,0 +1,120 @@
+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>
+            <b-nav-item v-for="item in nav" :href="item.URL" :active="item.Name === 'Meme'">{{ "{{ 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="addMeme">
+        <b-container>
+            <b-row>
+                <b-col cols="5">
+                    <b-input v-model="name"></b-input>
+                </b-col>
+                <b-col cols="5">
+                    <b-input v-model="url"></b-input>
+                </b-col>
+                <b-col cols="2">
+                    <b-button type="submit">Add Meme</b-button>
+                </b-col>
+            </b-row>
+            <b-row>
+                <b-col>
+                    <b-table
+                            fixed
+                            :items="results"
+                            :fields="fields">
+                        <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: '',
+      nav: {{ .Nav }},
+      name: "",
+      url: "",
+      results: [],
+      fields: [
+        { key: 'name', sortable: true },
+        { key: 'url', sortable: true },
+        { key: 'image' }
+      ]
+    },
+    mounted() {
+        this.refresh();
+    },
+    computed: {
+    },
+    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)
+            axios.post('/meme/add', {Name: this.name, URL: this.url})
+              .then(resp => {
+                this.results = resp.data;
+                this.name = "";
+                this.url = "";
+                this.refresh();
+              })
+              .catch(err => (this.err = err));
+      }
+    }
+  })
+</script>
+</body>
+</html>
+`