From 22658949a87105db14d066b89c9025622420132d Mon Sep 17 00:00:00 2001
From: Chris Sexton <3216719+chrissexton@users.noreply.github.com>
Date: Fri, 22 Jul 2022 10:04:56 -0400
Subject: [PATCH] emojy: update web UI a bit

- cards on list
- add text name to stats
---
 plugins/emojy/list.html   | 22 +++++++++-------------
 plugins/emojy/stats.html  | 10 ++--------
 plugins/emojy/upload.html | 12 +++---------
 plugins/emojy/web.go      |  2 +-
 4 files changed, 15 insertions(+), 31 deletions(-)

diff --git a/plugins/emojy/list.html b/plugins/emojy/list.html
index e8f5db4..5d7904e 100644
--- a/plugins/emojy/list.html
+++ b/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>
-        <li v-for="(path, name) in fileList" key="name">
-            {{name}}:
-            <img :src="path" :alt="name" class="img-thumbnail" style="max-width: 64px; max-height: 64px"/>
-        </li>
-    </ul>
+    <div class="row row-cols-5">
+        <div class="card text-center" v-for="(path, name) in fileList" key="name">
+            <img :src="path" class="card-img-top mx-auto d-block" :alt="name" style="max-width: 100px">
+            <div class="card-body">
+                <h5 class="card-title">{{name}}</h5>
+            </div>
+        </div>
+    </div>
 </div>
 
 <script>
-    var router = new VueRouter({
-        mode: 'history',
-        routes: []
-    });
     var app = new Vue({
         el: '#app',
-        router,
         data: function () {
             return {
                 err: '',
diff --git a/plugins/emojy/stats.html b/plugins/emojy/stats.html
index 4e71cfc..18a8187 100644
--- a/plugins/emojy/stats.html
+++ b/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: '',
diff --git a/plugins/emojy/upload.html b/plugins/emojy/upload.html
index 5fd7dd9..5c87b5e 100644
--- a/plugins/emojy/upload.html
+++ b/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="https://unpkg.com/axios/dist/axios.min.js"></script>
+    <script src="//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);
diff --git a/plugins/emojy/web.go b/plugins/emojy/web.go
index 3ece8a6..b3cc94b 100644
--- a/plugins/emojy/web.go
+++ b/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")
 }