Functional delete button

script.js

@@ -324,13 +324,13 @@ function cancelGlobalEvts() {
     }
 }
 
-function get(url, xhr_req_follower, headers) {
+function _http(url, method, xhr_req_follower, headers) {
     return new Promise(function (resolve, reject) {
         var req = new XMLHttpRequest();
         xhr_req_follower(req);
         req.onload = resolveResponse(resolve, reject);
         req.onerror = reject;
-        req.open('GET', url);
+        req.open(method, url);
 
         if (headers) {
             Object.entries(headers)
@@ -343,6 +343,14 @@ function get(url, xhr_req_follower, headers) {
     });
 }
 
+function get(url, xhr_req_follower, headers) {
+    return _http(url, 'GET', xhr_req_follower, headers);
+}
+
+function del(url, xhr_req_follower, headers) {
+    return _http(url, 'DELETE', xhr_req_follower, headers);
+}
+
 function post(url, body, xhr_req_follower, headers) {
     return new Promise(function (resolve, reject) {
         var req = new XMLHttpRequest();
@@ -544,9 +552,7 @@ function onClickMarkIllegal(phashes, e) {
 
     console.log('CLICK', phashes, e.target.hash);
 
-    // Get the whole post div (parent of the anchor tag)
+    const img_elems = document.querySelectorAll('img');
-    const postDiv = e.target.closest('.post');
-    const img_elems = postDiv.querySelectorAll('.post--image_container img');
 
     window.requestAnimationFrame(function() {
         img_elems.forEach(function(elem) {
@@ -578,6 +584,33 @@ function onClickMarkIllegal(phashes, e) {
     });
 }
 
+function onClickPostDelete(post_id, e) {
+    const confirm_value = confirm("Really delete this post?");
+
+    if (!confirm_value) {
+        return;
+    }
+
+    const url = new URL(
+        '/delete_known_spam_post?post_id=' + post_id,
+        window.location.origin);
+
+
+    del(url, cancel)
+        .then(function(){
+            const current_url = new URL(window.location.href);
+            const query_params = current_url.searchParams;
+            const path = query_params.get('__path') || '/';
+
+            if (path.startsWith('/spam_post')) {
+                changeUrl('/', new URLSearchParams(), true);
+            } else {
+                location.reload();
+            }
+        })
+        .catch(caught.bind(this, "Failed to delete known spam post."));
+}
+
 function renderPostElem(post) {
     const postContainer = div();
     postContainer.classList.add('post');
@@ -593,41 +626,28 @@ function renderPostElem(post) {
 
     if (post.website_name != null) {
         const link_url = linkToBoard(post.website_name, post.board_name, post.thread_id);
-        const boardlink = span()
         const boardlink_a = document.createElement('a');
 
         boardlink_a.appendChild(text(post.website_name));
-
         boardlink_a.setAttribute('href', link_url);
         boardlink_a.setAttribute('title', 'Destination this post was originally headed for (thread or board)');
-        boardlink.appendChild(text('['));
-        boardlink.appendChild(boardlink_a);
-        boardlink.appendChild(text(']'));
 
-        postHeader.appendChild(boardlink);
+        postHeader.appendChild(boardlink_a);
     }
 
     postHeader.appendChild(span(text((new Date(post.time_stamp).toUTCString()))));
 
     if (shouldDisplayMarkIllegalButton(post)) {
-        const mark_illegal = span()
+        const mark_illegal = document.createElement('button');
-        mark_illegal.classList.add('post--header_action', 'post--mark_illegal');
+        mark_illegal.appendChild(text('Mark Illegal'));
-        const mark_illegal_a = document.createElement('a');
+        mark_illegal.setAttribute('title', 'Permanently delete associated pictures and thumbnails but keep metadata for future matching');
-
-        mark_illegal_a.appendChild(text('Mark Illegal'));
-
-        mark_illegal_a.setAttribute('href', '#' + identifier);
-        mark_illegal_a.setAttribute('title', 'Permanently delete associated pictures and thumbnails but keep metadata for future matching');
-        mark_illegal.appendChild(text('['));
-        mark_illegal.appendChild(mark_illegal_a);
-        mark_illegal.appendChild(text(']'));
 
         const phashes = (post.known_spam_post_attachment || [])
             .map(function(p) {
                 return bufferToHex(unpackBytes(BigInt(p.phash)));
             });
 
-        mark_illegal_a.addEventListener('click',
+        mark_illegal.addEventListener('click',
             onClickMarkIllegal.bind(this, phashes));
 
         postHeader.appendChild(mark_illegal);
@@ -638,15 +658,12 @@ function renderPostElem(post) {
     }
 
     // Delete post
-    const delete_post = span()
+    const delete_post = document.createElement('button');
     delete_post.classList.add('post--header_action', 'post--delete_post');
-    const delete_post_a = document.createElement('a');
+    delete_post.setAttribute('title', 'Remove post from known spam and related tables. Post content will no longer be matched as illegal. Content can again end up in known spam posts if it keeps getting posted.');
-    delete_post_a.appendChild(text('delete'));
+    delete_post.appendChild(text('delete'));
-    delete_post_a.setAttribute('href', '#' + identifier);
+    delete_post.addEventListener('click',
-    delete_post_a.setAttribute('title', 'Remove post from known spam and related tables. Post content will no longer be matched as illegal. Content can again end up in known spam posts if it keeps getting posted.');
+        onClickPostDelete.bind(this, post.text_post_id));
-    delete_post.appendChild(text('['));
-    delete_post.appendChild(delete_post_a);
-    delete_post.appendChild(text(']'));
     postHeader.appendChild(delete_post);
 
     postContainer.appendChild(postHeader);
@@ -869,7 +886,6 @@ function handlePageRoot(_, query_params) {
 }
 
 function showSpamPost(path_data, _) {
-    console.log(path_data);
     var post_id = path_data[1];
     pageInfoText.innerText = 'Loading known spam post ' + post_id;
 
@@ -902,10 +918,12 @@ function showSpamPost(path_data, _) {
     get(url, cancel, headers)
         .then(function(response) {
             var json = JSON.parse(response.responseText);
-            console.log(json);
+            if (!json || !json.length) {
-            pageInfoText.innerText = 'Known Spam Post';
+                pageInfoText.innerText = `404 - Known Spam Post #${post_id} doesn't exist.`;
+            }
 
             json.forEach(function(p) {
+                pageInfoText.innerText = 'Known Spam Post #' + post_id;
                 var postElem = renderPostElem(p);
                 postSectionElem.appendChild(postElem);
                 reasonsSectionElem.appendChild(renderReasons(p))

style.css

@@ -60,7 +60,8 @@ header {
   color: hsl(300, 100%, 75%)
 }
 
-.post--header span {
+.post--header span,
+.post--header a {
   flex: 1;
 }
 
@@ -69,8 +70,13 @@ span.post--header_action {
     flex-grow: 0;
 }
 
+.post--header_action {
+    margin-left: 0.5em;
+}
+
 span.post--is_illegal {
     color: orange;
+    line-height: 1.8em;
     font-weight: bold;
     font-family: monospace;
     text-transform: uppercase;