Web-UI: Search for files feature (#268)

biologist79 · Nov 22, 2023 · 2d790d3 · 2d790d3
1 parent 676339c
commit 2d790d3
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 4 deletions.
diff --git a/html/locales/de.json b/html/locales/de.json
@@ -96,6 +96,9 @@
             "title": "Ordner",
             "desc": "Einen Ordner samt Inhalt (und allen Unterordnern) hochladen"
         },
+        "search": {
+            "placeholder": "Dateien suchen.."
+        },
         "upload": {
             "title": "Upload",
             "desc": "Upload starten",

diff --git a/html/locales/en.json b/html/locales/en.json
@@ -96,6 +96,9 @@
             "title": "Directory",
             "desc": "Upload directory with all files and subdirectories"
         },
+        "search": {
+            "placeholder": "Search files.."
+        },
         "upload": {
             "title": "Upload",
             "desc": "Start Upload",

diff --git a/html/management.html b/html/management.html
@@ -7,22 +7,27 @@
 	<link rel="preconnect" href="https://cdnjs.cloudflare.com">
 	<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/css/bootstrap.min.css">
-	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css"/>
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.16/themes/default/style.min.css"/>
 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"/>
 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css"/>
 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/css/bootstrap-slider.min.css" />
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.8/umd/popper.min.js"></script>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/js/bootstrap.min.js"></script>
-	<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.16/jstree.min.js"></script>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/bootstrap-slider.min.js"></script>
 
     <script src="/js/i18next.min.js"></script>
     <script src="/js/i18nextHttpBackend.min.js"></script>
     <script src="/js/loc_i18next.min.js"></script>
 	<style type="text/css">
+		.jstree-default .jstree-search {
+			font-style: italic;
+			color:  #007bff; /* change searchresult theme-color to bootstrap blue */
+			font-weight: bold;
+		}
 		.filetree {
 			border: 1px solid black;
 			height: 200px;
@@ -423,7 +428,15 @@ <h5 class="modal-title" data-i18n="tools.nvserase.title"></h5>
 				<div id="filebrowser">
 					<div class="filetree demo" id="explorerTree"></div>
 				</div>
+				<div class="input-group input-focus">
+					<div class="input-group-prepend">
+					  <span class="input-group-text bg-white"><i class="fas fa-search"></i></span>
+					</div>
+					<input type="search" id="filetreesearch" data-i18n="[placeholder]files.search.placeholder" class="form-control border-left-0" onsearch="searchFiles($(this).val())" onkeyup="searchFiles($(this).val())">
+				</div>
 				<div>
+				<br>
+				<legend id="filesupload" data-i18n="files.upload.title">Files</legend>
 					<form id="explorerUploadForm" method="POST" enctype="multipart/form-data" action="/explorer">
 						<div class="input-group">
 							<span class="form-control" id="uploaded_file_text"></span>&nbsp
@@ -1361,7 +1374,11 @@ <h5 class="modal-title" data-i18n="tools.nvserase.title"></h5>
 							'icon': "fa fa-folder"
 						}
 					},
-				plugins: ["contextmenu", "themes", "types"],
+				plugins: ["contextmenu", "themes", "types", "search"],
+                "search": {
+                    "case_sensitive": false,
+                    "show_only_matches": true
+                },
 				contextmenu: {
 					items: function(nodeId) {
 						var ref = $('#explorerTree').jstree(true);
@@ -2040,6 +2057,10 @@ <h5 class="modal-title" data-i18n="tools.nvserase.title"></h5>
 		await rebuildSSIDList();
 	}
 
+	function searchFiles(searchText) {
+		$('#explorerTree').jstree('search', searchText);
+	}
+
 	function sendControl(cmd) {
 		var myObj = {
 			"controls": {
@@ -2196,7 +2217,6 @@ <h5 class="modal-title" data-i18n="tools.nvserase.title"></h5>
 			shutdownDevice();
 		}); 
 
-		console.log(parseInt(document.getElementById('warningLowVoltage').value));
 		$(function () {
 			$('[data-toggle="tooltip"]').tooltip();
 		});