From 623bedfad07adca159f2154b6b8ac0b375b1aa42 Mon Sep 17 00:00:00 2001
From: Marvin Scholz <epirat07@gmail.com>
Date: Fri, 20 Jan 2017 02:54:55 +0100
Subject: [PATCH 1/3] Implement approve/reject of items in admin UI

---
 socialdragon/assets/js/app.js     | 18 ++++++++++++++++++
 socialdragon/templates/admin.html | 26 ++++++++++++++------------
 2 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/socialdragon/assets/js/app.js b/socialdragon/assets/js/app.js
index 5494ba5..bf1073c 100644
--- a/socialdragon/assets/js/app.js
+++ b/socialdragon/assets/js/app.js
@@ -17,6 +17,24 @@ var app = new Vue({
             // `this` inside methods points to the Vue instance
             this.currentItem = itm;
             this.showModal = true;
+        },
+        approveItem: function (id) {
+            var req = new XMLHttpRequest();
+            req.addEventListener("load", function () {
+                console.log("Approved ID " + id);
+            });
+            req.open("POST", "/admin/approve/" + id);
+            req.send();
+            this.showModal = false;
+        },
+        rejectItem: function (id) {
+            var req = new XMLHttpRequest();
+            req.addEventListener("load", function () {
+                console.log("Rejected ID " + id);
+            });
+            req.open("POST", "/admin/reject/" + id);
+            req.send();
+            this.showModal = false;
         }
     }
 })
diff --git a/socialdragon/templates/admin.html b/socialdragon/templates/admin.html
index 62433ea..1e708ca 100644
--- a/socialdragon/templates/admin.html
+++ b/socialdragon/templates/admin.html
@@ -20,19 +20,10 @@
 
           <div class="modal-footer">
             <slot name="footer">
-                <slot name="actions">
-                    <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored modal-default-button">
-                        <i class="material-icons">check</i> Approve
-                    </button>
-                    <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
-                        <i class="material-icons">cancel</i> Reject
-                    </button>
-                    <button class="mdl-button mdl-js-button mdl-button--icon close" @click="$emit('close')">
-                        <i class="material-icons">close</i>
-                    </button>
-                </slot>
+                <button class="mdl-button mdl-js-button mdl-button--icon close" @click="$emit('close')">
+                    <i class="material-icons">close</i>
+                </button>
             </slot>
-
           </div>
         </div>
       </div>
@@ -64,6 +55,17 @@
                         </video>
                         <img class="sd-res-media-both" alt="" v-bind:src="currentItem.Path" v-if="!currentItem.IsVideo" />
                     </div>
+                    <div slot="footer">
+                        <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored modal-default-button" @click="approveItem(currentItem.ID)">
+                            <i class="material-icons">check</i> Approve
+                        </button>
+                        <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent" @click="rejectItem(currentItem.ID)">
+                            <i class="material-icons">cancel</i> Reject
+                        </button>
+                        <button class="mdl-button mdl-js-button mdl-button--icon close" @click="showModal = false">
+                            <i class="material-icons">close</i>
+                        </button>
+                    </div>
                 </modal>
             </div>
         </main>

From 9e37f644c3455d9c2883dcbc8970bf20e50e5566 Mon Sep 17 00:00:00 2001
From: Marvin Scholz <epirat07@gmail.com>
Date: Fri, 20 Jan 2017 02:55:07 +0100
Subject: [PATCH 2/3] Improve loading and prevent flicker on load

---
 socialdragon/templates/admin.html  | 2 +-
 socialdragon/templates/footer.html | 3 +--
 socialdragon/templates/header.html | 4 ++++
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/socialdragon/templates/admin.html b/socialdragon/templates/admin.html
index 1e708ca..25f9ddd 100644
--- a/socialdragon/templates/admin.html
+++ b/socialdragon/templates/admin.html
@@ -34,7 +34,7 @@
 <body>
     <div class="mdl-layout mdl-js-layout mdl-layout--no-desktop-drawer-button mdl-layout--fixed-header">
         {{ template "menu.html" . }}
-        <main class="mdl-layout__content" id="app">
+        <main class="mdl-layout__content" id="app" v-cloak="v-cloak">
             <div class="mdl-grid">
                 <div class="mdl-cell mdl-cell--3-col" v-for="item in items">
                     <a v-on:click="detailPopup(item)">
diff --git a/socialdragon/templates/footer.html b/socialdragon/templates/footer.html
index 9775deb..95a9b92 100644
--- a/socialdragon/templates/footer.html
+++ b/socialdragon/templates/footer.html
@@ -1,6 +1,5 @@
             </main>
         </div>
-    <script src="/static/js/vendor/vue.min.js"></script>
-    <script src="/static/js/app.js"></script>
+        <script src="/static/js/app.js"></script>
     </body>
 </html>
diff --git a/socialdragon/templates/header.html b/socialdragon/templates/header.html
index ce07ac0..edf87bd 100644
--- a/socialdragon/templates/header.html
+++ b/socialdragon/templates/header.html
@@ -10,7 +10,11 @@
         <link rel="stylesheet" href="/static/css/vendor/material.min.css">
         <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
         <link rel="stylesheet" href="/static/css/app.css">
+        <style media="screen">
+            [v-cloak] { display: none; }
+        </style>
 
         <!-- Scripts -->
         <script src="/static/js/vendor/material.min.js"></script>
+        <script src="/static/js/vendor/vue.min.js"></script>
     </head>

From 7bf1cd408620e90084c6915066729a9b13a98704 Mon Sep 17 00:00:00 2001
From: Marvin Scholz <epirat07@gmail.com>
Date: Fri, 20 Jan 2017 03:07:28 +0100
Subject: [PATCH 3/3] Remove item from page if state changed by user

---
 socialdragon/assets/js/app.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/socialdragon/assets/js/app.js b/socialdragon/assets/js/app.js
index bf1073c..f5240c7 100644
--- a/socialdragon/assets/js/app.js
+++ b/socialdragon/assets/js/app.js
@@ -26,6 +26,10 @@ var app = new Vue({
             req.open("POST", "/admin/approve/" + id);
             req.send();
             this.showModal = false;
+            var index = this.items.indexOf(this.currentItem);
+            if (index > -1) {
+                this.items.splice(index, 1);
+            }
         },
         rejectItem: function (id) {
             var req = new XMLHttpRequest();
@@ -35,6 +39,10 @@ var app = new Vue({
             req.open("POST", "/admin/reject/" + id);
             req.send();
             this.showModal = false;
+            var index = this.items.indexOf(this.currentItem);
+            if (index > -1) {
+                this.items.splice(index, 1);
+            }
         }
     }
 })