Added the ability to delete media items

1 files changed, 24 insertions, 6 deletions

diff --git a/Pages/ViewMedia.cshtml b/Pages/ViewMedia.cshtml
index 967759b..3d0ce4a 100644
--- a/Pages/ViewMedia.cshtml
+++ b/Pages/ViewMedia.cshtml
@@ -17,6 +17,10 @@
         }
     }
 
+    function showDeleteDialog(visible) {
+        document.getElementById('delete-dialog').classList.toggle('visible', visible);
+    }
+
     function selectPane(tab) {
         var tabs = Array.from(document.querySelectorAll('div#metadata-header > a'));
 
@@ -44,8 +48,8 @@
     <img src="/media/@(Model.Media.Guid)"/>
     <div id="metadata">
         <div id="metadata-header">
-            <a href="javascript:;" onclick="selectPane(this);" data-pane="metadata-fileinfo">File Info</a>
-            <a href="javascript:;" onclick="selectPane(this);" data-pane="metadata-tags" class="selected">Tags</a>
+            <a href="javascript:;" onclick="selectPane(this);" data-pane="metadata-fileinfo" class="selected">File Info</a>
+            <a href="javascript:;" onclick="selectPane(this);" data-pane="metadata-tags">Tags</a>
         </div>
 @*        <form method="post">
             <label for="shortDescription">Short Description</label>
@@ -54,7 +58,7 @@
             <input type="text" name="longDescription" placeholder="@Model.Media.LongDescription"/>
             <input type="submit" value="Update"/>
         </form>*@
-        <div id="metadata-fileinfo">
+        <div id="metadata-fileinfo" class="selected">
             <p>Upload history</p>
             <hr />
             <table class="data-table">
@@ -75,14 +79,28 @@
                     </tr>
                 }
             </table>
+            <div class="button-container">
+                <button onclick="showDeleteDialog(true)">Delete</button>
+            </div>
         </div>
-        <div id="metadata-tags" class="selected">
+        <div id="metadata-tags">
             <table class="data-table">
                 <tr>
                     <th>Tag Name</th>
                 </tr>
             </table>
-            <button>Add Tag</button>
+            <div class="button-container">
+                <button>Add Tag</button>
+            </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
+
+<div id="delete-dialog" class="dialog">
+    <p>Delete this media?</p>
+    <hr/>
+    <div class="button-container">
+        <button class="secondary" onclick="showDeleteDialog(false)">Cancel</button>
+        <button onclick="deleteMedia()">Confirm</button>
+    </div>
+</div>