Added reasons, probably other fixes (was dirty worktree)

script.js

@@ -131,6 +131,23 @@ var ROUTES = RoutePart([
 ], loadTop);
 */
 
+var ROUTES = RoutePart(
+    [
+        [ match(/^spam_post$/)
+        , new RoutePart(
+            [
+                [ match(/^[0-9]+$/)
+                , new RoutePart([], showSpamPost)
+                ]
+            ]
+            , null
+          )
+        ]
+    ]
+    , handlePageRoot
+);
+
+/*
 var ROUTES = RoutePart(
     [
         [ match(/^static$/)
@@ -146,6 +163,7 @@ var ROUTES = RoutePart(
     ]
     , null
 );
+*/
 
 /**
   * Functions
@@ -346,12 +364,13 @@ function _mkelem(etype, child) {
     return elem;
 }
 
-var div = _mkelem.bind(this, 'div');
+var h3     = _mkelem.bind(this, 'h3');
-var li = _mkelem.bind(this, 'li');
+var div    = _mkelem.bind(this, 'div');
-var span = _mkelem.bind(this, 'span');
+var li     = _mkelem.bind(this, 'li');
+var span   = _mkelem.bind(this, 'span');
 var italic = _mkelem.bind(this, 'i');
-var bold = _mkelem.bind(this, 'b');
+var bold   = _mkelem.bind(this, 'b');
-var ul = document.createElement.bind(document, 'ul');
+var ul     = _mkelem.bind(this, 'ul');
 
 function magnetLinkHash(m) {
     return m.split(':').slice(-1)[0];
@@ -477,11 +496,19 @@ function caught(m, e) {
     alert(new Error(m + e.message));
 };
 
+function renderReasons() {
+    return span(text('This is Why'));
+}
+
 function mkSpamImgElement(img_description) {
-    console.log(img_description);
     var img_elem = document.createElement('img');
     var mime = img_description.mimetype;
-    var thumb_url = `/bin/?path=${img_description.thumbnail}&mimetype=image/jpeg`
+    var thumb_url;
+    if (!img_description.thumbnail) {
+        thumb_url = `/bin/?path=${GlobalVars.settings.audio_mpeg_thumbnail_path}&mimetype=image/jpeg`
+    } else {
+        thumb_url = `/bin/?path=${img_description.thumbnail}&mimetype=image/jpeg`
+    }
     var image_url = `/bin/?path=${img_description.filename}&mimetype=${mime}`
     img_elem.setAttribute('src', thumb_url);
     img_elem.setAttribute('decoding', 'async');
@@ -490,34 +517,93 @@ function mkSpamImgElement(img_description) {
     var a_elem = document.createElement('a');
     a_elem.setAttribute('href', image_url);
     a_elem.appendChild(img_elem);
-    var img_container_elem = document.createElement('div');
+    var img_container_elem = div(a_elem);
-    img_container_elem.appendChild(a_elem);
+    img_container_elem.classList.add('post--image_container');
     return img_container_elem;
 }
 
+function renderPostElem(post) {
+    var postContainer = div();
+    postContainer.className = 'post';
+    var postElem = div();
+    postElem.classList.add('post--body_container');
+    postContainer.appendChild(postElem);
+    var bodyTextElem = div();
+    bodyTextElem.classList.add('post--body');
+    bodyTextElem.innerText = post.body;
+
+    post.known_spam_post_attachment.forEach(function(attachment) {
+      postElem.appendChild(mkSpamImgElement(attachment));
+    });
+
+    postElem.appendChild(bodyTextElem);
+
+    return postContainer;
+}
+
+var REASONS = {
+  RECENTLY_POSTED_ATTACHMENT_ABOVE_RATE: 1 << 0,
+  LEXICAL_ANALYSIS_SHOWS_NONSENSE:       1 << 1,
+  SEGMENTED_AVG_ENTROPY_TOO_HIGH:        1 << 2,
+  TEXT_MATCHES_KNOWN_SPAM:               1 << 3,
+  RECENTLY_POSTED_TEXT_ABOVE_RATE:       1 << 4,
+  TEXT_IS_URL:                           1 << 5,
+  TEXT_IS_ONE_LONG_WORD:                 1 << 6,
+  TEXT_IS_RANDOM_WORDS:                  1 << 7
+};
+
+function reasonsFromBitmap(n) {
+  var reasons = new Set();
+
+  for (const [reason, bit] of Object.entries(REASONS)) {
+    if (n & bit) {
+      reasons.add(reason);
+    }
+  }
+
+  return reasons;
+}
+
+function renderOverviewPost(post) {
+    var postContainer = renderPostElem(post);
+    var reasons = ul();
+    reasonsFromBitmap(post.reason).forEach(function(r) {
+        reasons.appendChild(li(text(r)));
+    });
+    postContainer.appendChild(h3(text('Reasons:')));
+    postContainer.appendChild(div(reasons));
+    return postContainer;
+}
+
 function loadKnownSpamImages() {
-    pageInfoText.innerText = 'Loading known spam images';
+    pageInfoText.innerText = 'Loading known spam post';
     cancelGlobalEvts();
 
-    var url = GlobalVars.settings.postgrest_url + '/known_spam_attachments'
+    //var url = GlobalVars.settings.postgrest_url + '/known_spam_post?select=*,known_spam_attachments(*)'
+    var url = GlobalVars.settings.postgrest_url + '/known_spam_post?select=*,known_spam_post_attachment(*)'
     var headers = {
         'Authorization': 'Bearer ' + GlobalVars.settings.jwt
     };
 
-    return get(url, cancel, headers)
+    get(url, cancel, headers)
         .then(function(response) {
-            console.log("have known spam images:", response);
             var json = JSON.parse(response);
-            console.log("have known spam images:", json);
+            console.log("results for", url, json);
+            //console.log("have known spam images:", json);
+            pageInfoText.innerText = 'Have these known spam posts:';
+            var mainElem = document.querySelector('main');
+            mainElem.innerHTML = '';
+            json.forEach(function (post) {
+                var postElem = renderOverviewPost(post);
 
-            var imgTags = json.map(mkSpamImgElement);
+                postElem.addEventListener('click', function() {
-            imgTags.forEach(function(imgTag) {
+                    changeUrl('/spam_post/' + post.text_post_id, null, true);
-                document.querySelector('main').appendChild(imgTag);
+                });
+
+                mainElem.appendChild(postElem);
             });
-
-            pageInfoText.innerText = 'Have these known spam images:';
         })
-        .catch(caught.bind(this, "Failed to load known spam images. Reason:"));
+        .catch(caught.bind(this, "Failed to load known spam posts. Reason:"));
 }
 
 function loadInfo(info_hash) {
@@ -602,44 +688,79 @@ function loadResults(search_query) {
         .catch(caught.bind(this, "Failed to results: "));
 }
 
-function changeUrl(path, search_query) {
+function changeUrl(path, search_query, push_state) {
     var event = new CustomEvent(
         'urlchange',
         {
           detail: {
               path: path,
-              query: search_query
+              query: search_query,
+              push_state: push_state,
           }
         });
 
     window.dispatchEvent(event);
 }
 
-function searchInputHandler() {
-    var input = document.querySelector("input");
-    var btn = document.querySelector("button");
-
-    btn.addEventListener('click', function() {
-        var search_query = input.value;
-        window.history.pushState(null, "",
-            window.location.origin +
-            '/s?q=' + encodeURIComponent(search_query));
-        changeUrl('/s', { q: search_query });
-    });
-
-    input.addEventListener('keydown', function(e) {
-        if (e.keyCode === 13) {
-            e.preventDefault();
-            btn.click();
-        }
-    });
-}
-
 function handlePageRoot(_, query_params) {
     console.log("handlePageRoot", query_params);
     return loadKnownSpamImages();
 }
 
+function showSpamPost(path_data, _) {
+    console.log(path_data);
+    var post_id = path_data[1];
+    pageInfoText.innerText = 'Loading known spam post ' + post_id;
+
+    var url =
+        GlobalVars.settings.postgrest_url
+        + '/known_spam_post?text_post_id=eq.' + post_id
+        + '&select=*,known_spam_post_attachment(*)';
+    var headers = {
+        'Authorization': 'Bearer ' + GlobalVars.settings.jwt
+    };
+
+    var postSectionElem = document.createElement('section');
+
+    var mainElem = document.querySelector('main');
+    mainElem.innerHTML = '';
+    mainElem.appendChild(postSectionElem);
+
+    var h2 = document.createElement('h2');
+    h2.innerText = 'Known Spam Attachments';
+    mainElem.appendChild(postSectionElem);
+    mainElem.appendChild(h2);
+
+    var knownSpamAttachmentsSectionElem = document.createElement('section');
+    mainElem.append(knownSpamAttachmentsSectionElem);
+
+    get(url, cancel, headers)
+        .then(function(response) {
+            var json = JSON.parse(response);
+            console.log(json);
+            pageInfoText.innerText = 'Known Spam Post';
+
+            json.forEach(function(p) {
+                var postElem = renderPostElem(p);
+                postSectionElem.appendChild(postElem);
+            });
+
+        })
+        .catch(caught.bind(this, "Failed to load known spam post. Reason:"));
+
+    url =
+        GlobalVars.settings.postgrest_url
+        + '/known_spam_attachments?post_id=eq.' + post_id;
+
+    get(url, cancel, headers)
+        .then(function(response) {
+            var json = JSON.parse(response);
+            console.log("known spam attachments:", json);
+        })
+        .catch(caught.bind(this, "Failed to load known spam attachments. Reason:"));
+
+}
+
 function handleSearch(_, query_params) {
     var search_query = query_params.q;
 
@@ -660,6 +781,15 @@ function handleInfo(parts, query_params) {
 function onUrlChange(e) {
     var path = e.detail.path.split('/').filter(function(s){ return s.length; });
     console.log(e, e.detail, path);
+
+    if (e.detail.push_state) {
+        var params = Object.assign({ __path: e.detail.path }, e.detail.query);
+        var search_query = new URLSearchParams(params);
+
+        window.history.pushState(null, "",
+            window.location.origin + window.location.pathname + '?' + search_query.toString());
+    }
+
     resolvePath(ROUTES, path, e.detail.query);
 }
 
@@ -696,8 +826,17 @@ function parseQueryParams(querystring) {
 }
 
 function onRealUrlChange() {
-    var path = window.location.pathname;
+    //var path = window.location.pathname;
+    var path;
     var query_params = parseQueryParams(window.location.search.substring(1));
+
+    if (query_params.__path != null) {
+        path = query_params.__path;
+        console.log("NEW PATH", path);
+    } else {
+        path = '/';
+    }
+
     changeUrl(path, query_params);
 }
 

style.css

@@ -3,12 +3,12 @@ body {
 }
 
 header {
-  margin: 1em 4em;
+  margin: 1em 1em;
 }
 
 .post {
   background-color: white;
-  margin: 1em 4em;
+  margin: 1em 1em;
   box-shadow: .4em .4em .4em grey;
   border: 1px solid grey;
   padding: 1em;
@@ -18,4 +18,11 @@ header {
   background-color: #FFEEEE;
 }
 
+.post--image_container {
+    float: left;
+    margin-right: 1em;
+}
 
+.post--body_container {
+  display: flow-root;
+}