Toggle columns detailed view for custom mode

soif · Oct 18, 2024 · 8d13658 · 8d13658
1 parent ef1570a
commit 8d13658
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 11 deletions.
diff --git a/src/www/index.html b/src/www/index.html
@@ -55,7 +55,7 @@ <h1>OpenWrt - Table Of Hardware</h1>
 						<div id="head-view-custom" class="row">
 							<div class="container-fluid">
 								<div class="col-md-12">
-									<div id="custom-content" class="multi-column-text"></div>
+									<div id="custom-content" class="multi-column-text toh-hidden"></div>
 								</div>
 							</div>
 						</div>

diff --git a/src/www/static/css/toh.css b/src/www/static/css/toh.css
@@ -2,7 +2,7 @@
 	http://src.dev.lo.lo/OpenWrtTOH/src/www/static/css/toh.css */
 
 #table-head{
-    margin-bottom: 20px;
+    margin-bottom: 10px;
 }
 
 #head-loading{
@@ -13,7 +13,9 @@
 	position: absolute;
 }
 
-
+.toh-hidden{
+	display: none;
+}
 
 #head-view-custom{
 	padding: 5px;

diff --git a/src/www/static/js/toh_main.js b/src/www/static/js/toh_main.js
@@ -122,11 +122,15 @@ $(document).ready(function () {
 	}
 
 	// ------------------------------------------
-	function makeButton(myclass, data){
-		var name=data;
+	function makeButton(myclass, value){
+		var icon='';
+		if(value=='custom'){
+			icon='<i class="fa-solid fa-caret-right"></i> ';
+		}
+		var name=value;
 		name = name.replace(/_/g,' ');
 		name = name.replace(/(^\w{1})|(\s{1}\w{1})/g, match => match.toUpperCase());
-		return '<a href="#" class="'+myclass+'" data-value="'+data+'">'+name+'</a>'+"";
+		return '<a href="#" class="'+myclass+'" data-value="'+value+'">'+icon+name+'</a>'+"";
 	}
 
 	// handles Image Preview on hover --------------------------------------------------
@@ -312,11 +316,19 @@ $(document).ready(function () {
 
 	// view presets click ----------------------
 	$('#head-views-menu-links').on('click','A',function(e){
-		console.log('apply '+$(this).data('value'));
-		applyView($(this).data('value'));
-		$('#head-views-menu-links A').removeClass('selected');
-		$(this).addClass('selected');
-		groupsUpdateIcon();
+		let view=$(this).data('value');
+		console.log('apply '+view);
+		if(view=='custom'){
+			$('#custom-content').toggle();
+		    $(this).children('I').toggleClass('fa-caret-right fa-caret-down');
+		}
+		else{
+			applyView(view);
+			$('#head-views-menu-links A').removeClass('selected');
+			$(this).addClass('selected');
+			groupsUpdateIcon();
+		}
+
 	});
 
 
@@ -329,6 +341,9 @@ $(document).ready(function () {
 		else{
 			table.hideColumn(field);
 		}
+		$('#head-views-menu-links A').removeClass('selected');
+		$('#head-views-menu-links A[data-value=custom]').addClass('selected');
+
 		groupsUpdateIcon();
 	});