Added the ability to delete media items

author: Jake Mannens <jake@asger.xyz> 2023-08-09 09:21:36 +1000
committer: Jake Mannens <jake@asger.xyz> 2025-08-18 10:59:32 +1000
commit: 5247aa5a136fcf48d80c8e75625ae773a14fbd26 (patch)
tree: c598c38420f2c996d5233931822fd7f797a1d8db /Pages
parent: 6c53f3dc43f072dce4ffe4a1bd306074dd20ff39 (diff)
6 files changed, 166 insertions, 7 deletions
diff --git a/Pages/Shared/_Layout.cshtml b/Pages/Shared/_Layout.cshtml
index be445cc..9cdb952 100644
--- a/Pages/Shared/_Layout.cshtml
+++ b/Pages/Shared/_Layout.cshtml
@@ -16,7 +16,7 @@
     <body>
         <div id="navbar">
             <a href="/">Home</a>
-            <a href="/tags">Tags</a>
+            <a href="/TagDefinitions">Tags</a>
         </div>
         <div id="content" style="overflow:@(ViewBag.ContentScroll ? "auto" : "hidden");margin:@(ViewBag.ContentMargin ?? "0");">
             @RenderBody()
diff --git a/Pages/TagDefinitions.cshtml b/Pages/TagDefinitions.cshtml
new file mode 100644
index 0000000..a05f5d5
--- /dev/null
+++ b/Pages/TagDefinitions.cshtml
@@ -0,0 +1,104 @@
+@page
+@model HyperBooru.Pages.TagDefinitionsModel
+@{
+    ViewBag.Title = "Tag Definitions";
+}
+
+<script type="text/javascript">
+    async function createDefinition(e) {
+        var form = new FormData();
+
+        form.append('name', e.querySelector('#name').value);
+        form.append('namespace', e.querySelector('#namespace').value);
+
+        var resp = await fetch('/api/tag/def', {
+            method: 'post',
+            body: form
+        });
+
+        if(!resp.ok) {
+            alert('Error creating tag definition!');
+            showCreateDialog(false);
+        } else {
+            window.location.reload();
+        }
+    }
+
+    async function deleteTagDefinition() {
+        var dialog = document.getElementById('delete-dialog');
+
+        var resp = await fetch(`/api/tag/def/${dialog.dataset.guid}`, {
+            method: 'delete'
+        });
+
+        if(!resp.ok) {
+            alert('Error deleting tag definition!');
+            showDeleteDialog(false);
+        } else {
+            window.location.reload()
+        }
+    }
+
+    function showCreateDialog(visible) {
+        document.getElementById('create-dialog').classList.toggle('visible', visible);
+    }
+
+    function showDeleteDialog(visible) {
+        var dialog = document.getElementById('delete-dialog');
+        if(visible == false) {
+            dialog.classList.toggle('visible', false);
+        } else {
+            dialog.classList.toggle('visible', true);
+            dialog.dataset.guid = visible;
+        }
+    }
+</script>
+
+<link rel="stylesheet" type="text/css" href="@(nameof(HyperBooru)).styles.css"/>
+
+<table id="tag-definitions" class="data-table">
+    <tr>
+        <th>Guid</th>
+        <th>Source</th>
+        <th>Namespace</th>
+        <th>Name</th>
+        <th></th>
+    </tr>
+    @foreach(var tagDef in Model.TagDefinitions) {
+        <tr>
+            <td>@tagDef.Guid</td>
+            <td>@tagDef.Source</td>
+            <td>@tagDef.Namespace</td>
+            <td>@tagDef.Name</td>
+            <td><button onclick="showDeleteDialog('@tagDef.Guid')">Delete</button></td>
+        </tr>
+    }
+</table>
+
+<div class="button-container">
+    <button onclick="showCreateDialog(true)">Create</button>
+</div>
+
+<div id="create-dialog" class="dialog">
+    <p>Create a new tag definition</p>
+    <hr/>
+    <form onsubmit="createDefinition(this)">
+        <label>Name</label>
+        <input id="name" type="text" required/>
+        <label>Namespace</label>
+        <input id="namespace" type="text"/>
+        <div class="button-container">
+            <button class="secondary" onclick="showCreateDialog(false)">Cancel</button>
+            <button type="submit">Create</button>
+        </div>
+    </form>
+</div>
+
+<div id="delete-dialog" class="dialog">
+    <p>Are you sure you want to delete this tag definition?</p>
+    <hr/>
+    <div class="button-container">
+        <button onclick="showDeleteDialog(false)" class="secondary">Cancel</button>
+        <button onclick="deleteTagDefinition()">Confirm</button>
+    </div>
+</div>
diff --git a/Pages/TagDefinitions.cshtml.cs b/Pages/TagDefinitions.cshtml.cs
new file mode 100644
index 0000000..e2253d6
--- /dev/null
+++ b/Pages/TagDefinitions.cshtml.cs
@@ -0,0 +1,16 @@
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.RazorPages;
+
+namespace HyperBooru.Pages;
+
+public class TagDefinitionsModel : PageModel {
+    public IEnumerable<DbTagDefinition> TagDefinitions =>
+        db.TagDefinitions;
+
+    private HyperBooruDbContext db;
+
+    public TagDefinitionsModel(HyperBooruDbContext db) =>
+        this.db = db;
+
+    public void OnGet() {}
+}
diff --git a/Pages/TagDefinitions.cshtml.css b/Pages/TagDefinitions.cshtml.css
new file mode 100644
index 0000000..0a9e226
--- /dev/null
+++ b/Pages/TagDefinitions.cshtml.css
@@ -0,0 +1,16 @@
+form > input {
+    width: 100%;
+}
+
+div.button-container {
+    display:         flex;
+    justify-content: flex-end;
+}
+
+table#tag-definitions td:first-child {
+    font-family: 'Lucida Console';
+}
+
+table#tag-definitions td > button {
+    margin-top: 0;
+}
+\ No newline at end of file
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>
diff --git a/Pages/ViewMedia.cshtml.css b/Pages/ViewMedia.cshtml.css
index ff8a1cd..4041fa8 100644
--- a/Pages/ViewMedia.cshtml.css
+++ b/Pages/ViewMedia.cshtml.css
@@ -49,4 +49,9 @@ div#metadata-fileinfo > table th {
 div#metadata-fileinfo > table td {
     font-family: 'Lucida Console';
     font-size:   8pt;
+}
+
+div.button-container {
+    display:         flex;
+    justify-content: flex-end;
 }
 \ No newline at end of file
author	Jake Mannens <jake@asger.xyz>	2023-08-09 09:21:36 +1000
committer	Jake Mannens <jake@asger.xyz>	2025-08-18 10:59:32 +1000
commit	5247aa5a136fcf48d80c8e75625ae773a14fbd26 (patch)
tree	c598c38420f2c996d5233931822fd7f797a1d8db /Pages
parent	6c53f3dc43f072dce4ffe4a1bd306074dd20ff39 (diff)