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] 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>