emojy: update web UI a bit

- cards on list
- add text name to stats

plugins/emojy/list.html

@@ -11,7 +11,6 @@
     <!-- Load Vue followed by BootstrapVue -->
     <script src="//unpkg.com/vue@^2/dist/vue.min.js"></script>
     <script src="//unpkg.com/bootstrap-vue@^2/dist/bootstrap-vue.min.js"></script>
-    <script src="https://unpkg.com/vue-router@^2"></script>
     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
     <meta charset="UTF-8">
     <title>Memes</title>
@@ -32,7 +31,7 @@
         <b-navbar-nav>
             <b-nav-item href="/emojy/stats">Stats</b-nav-item>
             <b-nav-item active href="/emojy/list">List</b-nav-item>
-            <b-nav-item href="/emojy/upload">Upload</b-nav-item>
+            <b-nav-item href="/emojy/new">Upload</b-nav-item>
         </b-navbar-nav>
     </b-navbar>
 
@@ -44,22 +43,19 @@
         {{ err }}
     </div>
 
-    <ul>
+    <div class="row row-cols-5">
-        <li v-for="(path, name) in fileList" key="name">
+        <div class="card text-center" v-for="(path, name) in fileList" key="name">
-            {{name}}:
+            <img :src="path" class="card-img-top mx-auto d-block" :alt="name" style="max-width: 100px">
-            <img :src="path" :alt="name" class="img-thumbnail" style="max-width: 64px; max-height: 64px"/>
+            <div class="card-body">
-        </li>
+                <h5 class="card-title">{{name}}</h5>
-    </ul>
+            </div>
+        </div>
+    </div>
 </div>
 
 <script>
-    var router = new VueRouter({
-        mode: 'history',
-        routes: []
-    });
     var app = new Vue({
         el: '#app',
-        router,
         data: function () {
             return {
                 err: '',

plugins/emojy/stats.html

@@ -11,7 +11,6 @@
     <!-- Load Vue followed by BootstrapVue -->
     <script src="//unpkg.com/vue@^2/dist/vue.min.js"></script>
     <script src="//unpkg.com/bootstrap-vue@^2/dist/bootstrap-vue.min.js"></script>
-    <script src="https://unpkg.com/vue-router@^2"></script>
     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
     <meta charset="UTF-8">
     <title>Memes</title>
@@ -32,7 +31,7 @@
         <b-navbar-nav>
             <b-nav-item active href="/emojy/stats">Stats</b-nav-item>
             <b-nav-item href="/emojy/list">List</b-nav-item>
-            <b-nav-item href="/emojy/upload">Upload</b-nav-item>
+            <b-nav-item href="/emojy/new">Upload</b-nav-item>
         </b-navbar-nav>
     </b-navbar>
 
@@ -56,7 +55,7 @@
                         -
                     </span>
                     <img v-if="emojy.url" :src="emojy.url" :alt="emojy.name" class="img-thumbnail"
-                         style="max-width: 64px; max-height: 64px"/>
+                         style="max-width: 64px; max-height: 64px"/> {{emojy.name}}
                     <span v-else>{{emojy.emojy}}</span>
                 </li>
             </ul>
@@ -65,13 +64,8 @@
 </div>
 
 <script>
-    var router = new VueRouter({
-        mode: 'history',
-        routes: []
-    });
     var app = new Vue({
         el: '#app',
-        router,
         data: function () {
             return {
                 err: '',

plugins/emojy/upload.html

@@ -11,8 +11,7 @@
     <!-- Load Vue followed by BootstrapVue -->
     <script src="//unpkg.com/vue@^2/dist/vue.min.js"></script>
     <script src="//unpkg.com/bootstrap-vue@^2/dist/bootstrap-vue.min.js"></script>
-    <script src="https://unpkg.com/vue-router@^2"></script>
+    <script src="//unpkg.com/axios/dist/axios.min.js"></script>
-    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
     <meta charset="UTF-8">
     <title>Memes</title>
 </head>
@@ -32,7 +31,7 @@
         <b-navbar-nav>
             <b-nav-item href="/emojy/stats">Stats</b-nav-item>
             <b-nav-item href="/emojy/list">List</b-nav-item>
-            <b-nav-item active href="/emojy/upload">Upload</b-nav-item>
+            <b-nav-item active href="/emojy/new">Upload</b-nav-item>
         </b-navbar-nav>
     </b-navbar>
 
@@ -56,13 +55,8 @@
 </div>
 
 <script>
-    var router = new VueRouter({
-        mode: 'history',
-        routes: []
-    });
     var app = new Vue({
         el: '#app',
-        router,
         data: function () {
             return {
                 err: '',
@@ -118,7 +112,7 @@
                     })
                     .then(() => {
                         console.log('SUCCESS!!');
-                        this.view = 'list';
+                        window.location.href = '/emojy/list';
                     })
                     .catch(e => {
                         console.log('FAILURE!!' + e);

plugins/emojy/web.go

@@ -27,7 +27,7 @@ func (p *EmojyPlugin) registerWeb() {
 	r.HandleFunc("/file/{name}", p.handleEmojy)
 	r.HandleFunc("/stats", p.handlePage("stats.html"))
 	r.HandleFunc("/list", p.handlePage("list.html"))
-	r.HandleFunc("/upload", p.handlePage("upload.html"))
+	r.HandleFunc("/new", p.handlePage("upload.html"))
 	r.HandleFunc("/", p.handleIndex)
 	p.b.RegisterWebName(r, "/emojy", "Emojys")
 }