1 files changed, 50 insertions, 9 deletions

diff --git a/Pages/ViewMedia.cshtml b/Pages/ViewMedia.cshtml
index 0bf58cd..e37bbf1 100644
--- a/Pages/ViewMedia.cshtml
+++ b/Pages/ViewMedia.cshtml
@@ -7,8 +7,9 @@
 <link rel="stylesheet" type="text/css" href="@(nameof(HyperBooru)).styles.css"/>
 
 <script>
+    var mediaId = new URL(window.location.href).searchParams.get('m');
+
     async function deleteMedia() {
-        var mediaId = new URL(window.location.href).searchParams.get('m');
         var resp = await fetch('/media/' + mediaId, { method: 'delete' });
         if(resp.ok) {
             window.location.href = '/';
@@ -17,12 +18,42 @@
         }
     }
 
+    async function applyTags() {
+        var checkboxes = Array.from(document
+            .getElementById('tag-definitions')
+            .getElementsByTagName('input'));
+
+        var tagDefIds = checkboxes
+            .filter(cb => cb.checked)
+            .map(cb => cb.id.replace(/^tagdef-/, ''));
+
+        var pendingRequests = tagDefIds
+            .map(id => fetch(`/api/tag/${mediaId}/${id}`, { method: 'POST' }));
+
+        var responses = await Promise.all(pendingRequests);
+
+        if(responses.some(r => !r.ok && r.status != 400)) {
+            alert('Error setting tags!');
+        }
+        showTagDialog(false);
+    }
+
+    async function removeTag(e, tagDefId) {
+        var resp = await fetch(`/api/tag/${mediaId}/${tagDefId}`, { method: 'DELETE' });
+        if(!resp.ok && resp.status != 400) {
+            alert('Error removing tag!');
+        } else {
+            e.closest('tr').remove();
+        }
+    }
+
     function showDeleteDialog(visible) {
         document.getElementById('delete-dialog').classList.toggle('visible', visible);
     }
 
     function showTagDialog(visible) {
         document.getElementById('tag-dialog').classList.toggle('visible', visible);
+        document.querySelector('div#tag-dialog input').focus();
     }
 
     function selectPane(tab) {
@@ -90,8 +121,19 @@
         <div id="metadata-tags">
             <table class="data-table">
                 <tr>
+                    <th>Source</th>
+                    <th>Namespace</th>
                     <th>Tag Name</th>
+                    <th></th>
                 </tr>
+                @foreach(var tag in Model.Media.Tags.Select(t => t.TagDefinition)) {
+                    <tr>
+                        <td>@tag.Source</td>
+                        <td>@tag.Namespace</td>
+                        <td>@tag.Name</td>
+                        <td><a href="javascript:;" onclick="removeTag(this, '@tag.Guid')">Delete</a></td>
+                    </tr>
+                }
             </table>
             <div class="button-container">
                 <button onclick="showTagDialog(true)">Add Tag</button>
@@ -109,19 +151,18 @@
     </div>
 </div>
 
-<div id="tag-dialog" class="dialog visible">
+<div id="tag-dialog" class="dialog">
     <p>Select one or more tag(s) to add</p>
     <hr/>
     <input type="text" placeholder="Search"/>
-    <table>
-        @for(int i = 0; i < 7; i++) {
-            <tr>
-                <td>@i</td>
-            </tr>
+    <div id="tag-definitions">
+        @foreach(var tagdef in Model.TagDefinitions) {
+            <input type="checkbox" id="tagdef-@tagdef.Guid"/>
+            <label for="tagdef-@tagdef.Guid">@tagdef.Name</label>
         }
-    </table>
+    </div>
     <div class="button-container">
         <button onclick="showTagDialog(false)" class="secondary">Cancel</button>
-        <button>Accept</button>
+        <button onclick="applyTags()">Accept</button>
     </div>
 </div>