added treeView

hashsearch.js

@@ -5,6 +5,9 @@ function searchhashlist(index) {
     let resourcetype_select = document.getElementById("resourcetype");
     let resource_type = resourcetype_select[resourcetype_select.selectedIndex].value;
     let headerArrows = document.getElementById("headerarrows")
+    let view_type_select = document.getElementById("viewtype");
+    let view_type = view_type_select[view_type_select.selectedIndex].value;
+
     reqJson = {
         "search_term": search_string,
         "number_of_results": parseInt(results_per_page),
@@ -18,15 +21,17 @@ function searchhashlist(index) {
             contentType: "application/json",
             data: JSON.stringify(reqJson),
             dataType: "json",
-            error: function() {
+            error: function () {
                 ajaxlert("Error occurred during search.");
             },
-            success: function(res) {
+            success: function (res) {
                 let mainTableBody = document.getElementById("main_table_body");
                 while (mainTableBody.firstChild) {
                     mainTableBody.firstChild.remove()
                     headerArrows.innerHTML = ""
                 }
+
+                $("#js-tree").jstree("delete_node",($("#js-tree").jstree("get_node", "#").children));
 
                 let results = res["results"]
 
@@ -38,47 +43,65 @@ function searchhashlist(index) {
                     let hash = results[i].hash
                     let type = results[i].type
                     let string = results[i].string
-                    if (hash != null && type !== null && string != null) {
-                        let tableRow = document.createElement('tr');
-                        let listItem1 = document.createElement('td');
-                        listItem1.innerHTML = hash
-                        tableRow.appendChild(listItem1)
 
-                        let listItem2 = document.createElement('td');
-                        listItem2.innerHTML = type
-                        tableRow.appendChild(listItem2)
+                    if (view_type == 'list') {
+                        document.getElementById("main_table").style.visibility='visible';
+                        document.getElementById("tree_node_selected").style.visibility="hidden";
+                        document.getElementById("js-tree").style.visibility="hidden";
+
+                        if (hash != null && type !== null && string != null) {
+                            let tableRow = document.createElement('tr');
+                            let listItem1 = document.createElement('td');
+                            listItem1.innerHTML = hash
+                            tableRow.appendChild(listItem1)
 
-                        let listItem3 = document.createElement('td');
-                        listItem3.innerHTML = string
-                        tableRow.appendChild(listItem3)
+                            let listItem2 = document.createElement('td');
+                            listItem2.innerHTML = type
+                            tableRow.appendChild(listItem2)
 
-                        mainTableBody.appendChild(tableRow)
+                            let listItem3 = document.createElement('td');
+                            listItem3.innerHTML = string
+                            tableRow.appendChild(listItem3)
 
-                        if (i == results.length - 1) {
-                            let results_per_page_num = res.number_of_results
-                            let results_per_page_index_num = res.page_number
-                            if (!isNaN(results_per_page_num) && !isNaN(results_per_page_index_num)) {
-                                let tableRow = document.createElement('tr');
-                                let listItem1 = document.createElement('td');
-                                if (results_per_page_index_num == 0 && i + 1 == results_per_page_num) {
-                                    listItem1.innerHTML = "<a href=\"javascript:void(0)\" onclick=\"searchhashlist(" + (results_per_page_index_num + 1).toString() + ")\">>></a>";
-                                    headerArrows.innerHTML = "<a href=\"javascript:void(0)\" onclick=\"searchhashlist(" + (results_per_page_index_num + 1).toString() + ")\">>></a>";
-                                } else if (results_per_page_index_num == 0) {} else if (i + 1 < results_per_page_num) {
-                                    listItem1.innerHTML = "<a href=\"javascript:void(0)\" onclick=\"searchhashlist(" + (results_per_page_index_num - 1).toString() + ")\"><<</a>";
-                                    headerArrows.innerHTML = "<a href=\"javascript:void(0)\" onclick=\"searchhashlist(" + (results_per_page_index_num - 1).toString() + ")\"><<</a>";
-                                } else if (results_per_page_index_num >= 0) {
-                                    listItem1.innerHTML = "<a href=\"javascript:void(0)\" onclick=\"searchhashlist(" + (results_per_page_index_num - 1).toString() + ")\"><<</a>&nbsp;&nbsp;";
-                                    listItem1.innerHTML += "<a href=\"javascript:void(0)\" onclick=\"searchhashlist(" + (results_per_page_index_num + 1).toString() + ")\">>></a>";
-                                    headerArrows.innerHTML = "<a href=\"javascript:void(0)\" onclick=\"searchhashlist(" + (results_per_page_index_num - 1).toString() + ")\"><<</a>&nbsp;&nbsp;";
-                                    headerArrows.innerHTML += "<a href=\"javascript:void(0)\" onclick=\"searchhashlist(" + (results_per_page_index_num + 1).toString() + ")\">>></a>";
+                            mainTableBody.appendChild(tableRow)
+
+                            if (i == results.length - 1) {
+                                let results_per_page_num = res.number_of_results
+                                let results_per_page_index_num = res.page_number
+                                if (!isNaN(results_per_page_num) && !isNaN(results_per_page_index_num)) {
+                                    let tableRow = document.createElement('tr');
+                                    let listItem1 = document.createElement('td');
+                                    if (results_per_page_index_num == 0 && i + 1 == results_per_page_num) {
+                                        listItem1.innerHTML = "<a href=\"javascript:void(0)\" onclick=\"searchhashlist(" + (results_per_page_index_num + 1).toString() + ")\">>></a>";
+                                        headerArrows.innerHTML = "<a href=\"javascript:void(0)\" onclick=\"searchhashlist(" + (results_per_page_index_num + 1).toString() + ")\">>></a>";
+                                    } else if (results_per_page_index_num == 0) { } else if (i + 1 < results_per_page_num) {
+                                        listItem1.innerHTML = "<a href=\"javascript:void(0)\" onclick=\"searchhashlist(" + (results_per_page_index_num - 1).toString() + ")\"><<</a>";
+                                        headerArrows.innerHTML = "<a href=\"javascript:void(0)\" onclick=\"searchhashlist(" + (results_per_page_index_num - 1).toString() + ")\"><<</a>";
+                                    } else if (results_per_page_index_num >= 0) {
+                                        listItem1.innerHTML = "<a href=\"javascript:void(0)\" onclick=\"searchhashlist(" + (results_per_page_index_num - 1).toString() + ")\"><<</a>&nbsp;&nbsp;";
+                                        listItem1.innerHTML += "<a href=\"javascript:void(0)\" onclick=\"searchhashlist(" + (results_per_page_index_num + 1).toString() + ")\">>></a>";
+                                        headerArrows.innerHTML = "<a href=\"javascript:void(0)\" onclick=\"searchhashlist(" + (results_per_page_index_num - 1).toString() + ")\"><<</a>&nbsp;&nbsp;";
+                                        headerArrows.innerHTML += "<a href=\"javascript:void(0)\" onclick=\"searchhashlist(" + (results_per_page_index_num + 1).toString() + ")\">>></a>";
+                                    }
+                                    listItem1.align = "center";
+                                    listItem1.colSpan = 3;
+                                    tableRow.appendChild(listItem1);
+                                    mainTableBody.appendChild(tableRow);
                                 }
-                                listItem1.align = "center";
-                                listItem1.colSpan = 3;
-                                tableRow.appendChild(listItem1);
-                                mainTableBody.appendChild(tableRow);
                             }
                         }
                     }
+
+                    if(view_type == 'tree'){
+                        document.getElementById("main_table").style.visibility='hidden';
+                        document.getElementById("tree_node_selected").style.visibility="visible";
+                        document.getElementById("js-tree").style.visibility="visible";
+
+                        if (string != "" && !string.includes("*") && string.includes("[")) {
+                            let newPath = string.split("]")[0].replaceAll("[", "") + " (" + type.toLowerCase() + ")";
+                            addToTree(newPath, string);
+                        }
+                    }
                 }
             }
         });
@@ -88,5 +111,6 @@ function searchhashlist(index) {
             mainTableBody.firstChild.remove()
             headerArrows.innerHTML = ""
         }
+        $("#js-tree").delete_node($("#js-tree").get_node("#").children);
     }
 };

index.html

@@ -3,19 +3,29 @@
 <head>
 	<meta http-equiv="content-type" content="text/html; charset=windows-1252">
 	<link rel='shortcut icon' href='/favicon.ico' />
-	<link rel="stylesheet" href="main.css">
-	<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js">
-	</script>
-	<script type="text/javascript" src="hashsearch.js">
-	</script>
+	<link rel="stylesheet" href="main.css" />
+	<link rel="stylesheet" href="3rd party/jstree/themes/notex-app/style.min.css" />
+
+	<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
+	<script type="text/javascript" src="3rd party/jstree/jstree.min.js"></script>
+
+	<script type="text/javascript" src="hashsearch.js"></script>
+	<script type="text/javascript" src="tree_utils.js"></script>
+
 	<title>HitmanDB</title>
 </head>
 
+
 <body>
 	<div class="header">
 		<p>
 			<label>Search:</label>
 			<input type="text" id="search_input" size="20" onkeyup="searchhashlist('0')" autofocus>
+			<label>view:</label>
+			<select id="viewtype" onchange="searchhashlist('0')">
+				<option value="list">List</option>
+				<option value="tree">Tree</option>
+			</select>
 			<label>Resource Type:</label>
 			<select id="resourcetype" onchange="searchhashlist('0')">
 				<option value="any" selected="selected">ANY</option>
@@ -96,6 +106,7 @@
 				<option value="100">100</option>
 				<option value="150">150</option>
 				<option value="200">200</option>
+				<option value="500">500</option>
 			</select>
 			<label id="headerarrows"></label>
 			<a id="apidocs" href="https://wiki.notex.app/hitmandb/api">API Documentation</a>
@@ -106,9 +117,11 @@
 			</thead>
 		</table>
 		</p>
+		<span id="underline"></span>
 	</div>
+
 	<div>
-		<table id="main_table" width="100%">
+		<table id="main_table" width="100%" style="visibility: hidden;">
 			<thead>
 				<tr>
 					<th width="146px" align="left">Hash </th>
@@ -119,6 +132,42 @@
 			<tbody id="main_table_body"> </tbody>
 		</table>
 	</div>
+
+	<div id="tree_node_selected" style="visibility: hidden;">
+		<div><label>selected node:</label></div>
+		<div id="copy_text_box">
+			<p id="tree_node_selected_input">_</p>
+			<button id="tree_copy_button" onclick="copy_selected();">copy</button>
+		</div>
+	</div>
+
+	<div id="js-tree"></div> <!-- js-tree div to potentially be filled during runtime -->
+
+	<script>
+		//init empty tree
+		$('#js-tree').jstree({
+			'core': {
+				'data': [],
+				check_callback: true
+			}
+		});
+
+		//tree node onclick
+		$('#js-tree').on("changed.jstree", function (e, data) {
+			var selectedPath = $("#js-tree").jstree("get_node", data.selected).data;
+			document.getElementById("tree_node_selected_input").innerHTML = selectedPath;
+		});
+
+		//copy button onclick function
+		function copy_selected(){
+			var text = document.getElementById("tree_node_selected_input").innerHTML;
+			navigator.clipboard.writeText(text).then(function () {
+			}, function (err) {
+				console.error('Async: Could not copy text: ', err);
+			});
+		};
+	</script>
+
 </body>
 
 </html>

main.css

@@ -38,6 +38,15 @@ a:visited {
     text-decoration: none
 }
 
+.header{
+    background-color: #232425;
+    padding-top: 0.5%;
+    top: 0;
+    position: -webkit-sticky;
+    position: sticky;
+    z-index:  990;
+}
+
 #apidocs {
     text-decoration: none;
     text-transform: uppercase;
@@ -61,4 +70,59 @@ a:visited {
 
 #latesthashes:hover {
     background-color: #525252;
+}
+
+#copy_text_box { 
+    position: relative;
+    padding-bottom: 100px;
+    z-index: index -10;
+  }
+
+#tree_node_selected{
+    z-index:-10;
+}
+
+#tree_node_selected_input{
+    color: white;
+    width: 99%;
+    font-family: 'Inter', sans-serif;
+    font-weight: 450;
+    font-size: medium;
+    border:  1px solid gray;
+    position: absolute;
+    padding: 5px;
+    border-radius: 5px;
+    background-color: transparent;
+    z-index:index -10;
+}
+
+#tree_copy_button{
+    top: 15;
+    right: 1;
+    padding: 5px;
+    width: 5%;
+    position: absolute;
+    color: black;
+    font-family: 'Inter', sans-serif;
+    background-color: #05be99;
+    border-color: transparent;
+    font-size: medium;
+    border-radius: 5px;
+    z-index: index +10;
+}
+
+#tree_copy_button:hover{
+    background-color: #09e6b9;
+}
+
+#underline{
+    padding-top: 1%;
+    border-bottom: 2px solid #05be99;
+    display:block;
+}
+
+#js-tree{
+    visibility: hidden;
+    background-color: rgba(25, 26, 27, 0.596);
+    padding: 15px;
 }

tree_utils.js

@@ -0,0 +1,71 @@
+function addToTree(path, fullPath) {
+
+    var pathSegments = path.split("/");
+    var currentNode = $("#js-tree").jstree("get_node", "#");
+
+    for (var i = 0; i < pathSegments.length; i++) {
+
+        //try to find node and use that if found
+        let node = findNode(currentNode, pathSegments[i])
+        if (node != null) {
+            currentNode = node;
+        }
+        else {
+            //set properties for node
+            var node_data = "_";
+            var icon_path = "icons/opened-folder-24.png";
+            if(endsWith(pathSegments[i], "?")) icon_path = "icons/block-chain-24.png";
+            if(i == pathSegments.length - 1){
+                icon_path = "icons/document-24.png";
+                node_data = fullPath;
+            } 
+
+            //define and add node
+            var newNode = {
+                id: CreateGuid(),
+                data: node_data,
+                text: pathSegments[i],
+                type: "file",
+                state: "open",
+                icon: icon_path
+            };
+            $("#js-tree").jstree('create_node', currentNode.id, newNode);
+            currentNode = newNode;
+        }
+    };
+};
+
+function findNode(root, search_string) {
+
+    if (root != null) {
+        let children = root.children;
+
+        if (children) {
+            for (let i = 0; i < children.length; i++) {
+                let node = $("#js-tree").jstree("get_node", children[i]);
+                if (node.text == search_string) {
+                    return node;
+                }
+                else {
+                    let nextNode = $("#js-tree").jstree("get_node", node.id);
+                    findNode(nextNode, search_string);
+                }
+            }
+        }
+    }
+    return null;
+}
+
+//checks if string endsWith a given substring
+function endsWith(str, suffix) {
+    return str.indexOf(suffix, str.length - suffix.length) !== -1;
+}
+
+//creates a random Guid string
+function CreateGuid() {
+    function _p8(s) {
+        var p = (Math.random().toString(16) + "000000000").substr(2, 8);
+        return s ? "-" + p.substr(0, 4) + "-" + p.substr(4, 4) : p;
+    }
+    return _p8() + _p8(true) + _p8(true) + _p8();
+}