Filament Selection dialog Fixes / Improvements (#12325)

* Update 22.js

* fix printer list empty

* switch to vertical scrolling on custom filaments

* Update 23.css

* add stats

* fix uncommon filament types

* fix setup wizerd styling

---------

Co-authored-by: SoftFever <softfeverever@gmail.com>

resources/profiles/Eryone/filament/Eryone Silk PLA.json

@@ -19,7 +19,7 @@
         "12"
     ],
     "filament_type": [
-        "Silk"
+        "PLA Silk"
     ],
     "filament_settings_id": [
         "Eryone Silk PLA"

resources/profiles/OrcaFilamentLibrary/filament/Bambu/Bambu ASA-Aero @base.json

@@ -31,7 +31,7 @@
         "1.5"
     ],
     "filament_type": [
-        "ASA-Aero"
+        "ASA-AERO"
     ],
     "filament_vendor": [
         "Bambu Lab"

resources/profiles/Qidi/filament/Q2/QIDI ASA-Aero @Q2.json

@@ -49,7 +49,7 @@
         "0"
     ],
     "filament_type": [
-        "ASA-Aero"
+        "ASA-AERO"
     ],
     "filament_wipe": [
         "0"

resources/profiles/Qidi/filament/Qidi ASA-Aero.json

@@ -7,7 +7,7 @@
     "filament_id": "GFB99",
     "instantiation": "true",
     "filament_type": [
-        "ASA-Aero"
+        "ASA-AERO"
     ],
     "filament_max_volumetric_speed": [
         "16"

resources/web/guide/22/22.css

@@ -179,6 +179,11 @@
 	margin: 3px;
 }
 
+.list-item-count {
+	color:var(--fg-color-label);
+	margin-left:10px
+}
+
 .cbr-filter-btns {
 	display: flex;
 	margin: 5px 5px 5px auto;

resources/web/guide/22/22.js

@@ -66,22 +66,35 @@ function SortUI()
 	
 	$('#MachineList .CValues').append(HtmlMode);	
 	$('#MachineList .CValues input').prop("checked",true);
-	if(nMode<=1)
+	//if(nMode<=1)
-	{
+	//{
-		$('#MachineList').hide();
+	//	$('#MachineList').hide();
-	}
+	//}
+	
+	//Filament - Create sorted array with generic vendor first
+	let FilamentArray=new Array();
+	let GenericFilamentArray=new Array();
+	for( let key in m_ProfileItem['filament'] )
+	{
+		let OneFila=m_ProfileItem['filament'][key];
+		if(OneFila['vendor'].toLowerCase() === 'generic')
+			GenericFilamentArray.push({key: key, data: OneFila});
+		else
+			FilamentArray.push({key: key, data: OneFila});
+	}
+	// Combine arrays with generic filaments first
+	let SortedFilamentArray = GenericFilamentArray.concat(FilamentArray);
 	
-	//Filament
 	let HtmlFilament='';
 	let SelectNumber=0;
 
 	var TypeHtmlArray={};
     var VendorHtmlArray={};
-	var GenericFilamentHtmlArray={};
+	for( let n=0; n<SortedFilamentArray.length; n++ )
-	var NonGenericFilamentHtmlArray={};
-	for( let key in m_ProfileItem['filament'] )
 	{
-		let OneFila=m_ProfileItem['filament'][key];
+		let filamentItem = SortedFilamentArray[n];
+		let key = filamentItem.key;
+		let OneFila = filamentItem.data;
 		
 		//alert(JSON.stringify(OneFila));
 		
@@ -152,14 +165,9 @@ function SortUI()
 	        if(pFila.length==0)
 		    {
 				/* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
-			    let HtmlFila='<label class="MItem"><input type="checkbox" vendor="'+fVendor+'"  filatype="'+fType+'" filalist="'+fWholeName+';'+'"  model="'+fModel+'" name="'+fShortName+'" /><span>'+fShortName+'</span></label>';
+			    let HtmlFila='<label class="MItem"><input type="checkbox" onChange="UpdateStats()" vendor="'+fVendor+'"  filatype="'+fType+'" filalist="'+fWholeName+';'+'"  model="'+fModel+'" name="'+fShortName+'" /><span>'+fShortName+'</span></label>';
 			
-			    // Separate generic and non-generic filaments
+			    $("#ItemBlockArea").append(HtmlFila);
-			    if(fVendor.toLowerCase() === 'generic') {
-				    GenericFilamentHtmlArray[fShortName] = HtmlFila;
-			    } else {
-				    NonGenericFilamentHtmlArray[fShortName] = HtmlFila;
-			    }
 		    } 
 			else
 			{
@@ -185,14 +193,6 @@ function SortUI()
 //				$("#ItemBlockArea input[vendor='"+fVendor+"'][model='"+fModel+"'][filatype='"+fType+"'][name='"+key+"']").prop("checked",false);			
 		}
 	} 
-	
-	// Append filaments in order: generic first, then non-generic
-	for(let key in GenericFilamentHtmlArray) {
-		$("#ItemBlockArea").append(GenericFilamentHtmlArray[key]);
-	}
-	for(let key in NonGenericFilamentHtmlArray) {
-		$("#ItemBlockArea").append(NonGenericFilamentHtmlArray[key]);
-	}
 
 	//Sort TypeArray
 	let TypeAdvNum=FilamentPriority.length;
@@ -240,6 +240,8 @@ function SortUI()
 		$("#AcceptBtn").hide();
 		$("#GotoNetPluginBtn").show();
 	}
+
+	UpdateStats();
 }
 
 
@@ -405,9 +407,28 @@ function SortFilament()
 			else
 				$(OneNode).hide();
 		}
-		else
+		else{
 			$(OneNode).hide();
+			//alert(fName) //debug non common filament type
+		}
 	}
+
+	UpdateStats();
+}
+
+function UpdateStats()
+{
+	let $i             = $("#ItemBlockArea");
+	let $allItems      = $i.find(".MItem");
+	let $visibleItems  = $i.find(".MItem:visible");
+	let $filteredItems = $visibleItems.filter(function() { return $(this).css('position') !== 'absolute'});
+	let visibleCount   = Math.min($filteredItems.length, $visibleItems.length);
+	
+	$(".list-item-count").text(
+		$i.find("input:checked").length + " / " + 
+		$allItems.length +
+		($allItems.length > visibleCount ? (" [" + visibleCount + "]") : "") // filtered items
+	);
 }
 
 function ChooseDefaultFilament()
@@ -471,6 +492,8 @@ function ChooseDefaultFilament()
 	}
 	
 	ShowNotice(0);
+
+	UpdateStats();
 }
 
 function SelectAllFilament( nShow )

resources/web/guide/22/index.html

@@ -84,6 +84,7 @@
 					<option value="2">Unchecked</option>
 				</select>
 			</div>
+			<div class="list-item-count"></div>
 			<div class="cbr-filter-btns">
 				<span class="cbr-filter-mode-filter  trans">Select filtered</span>
 				<span class="cbr-filter-mode-visible trans">Select visible</span>
@@ -208,6 +209,8 @@
 		}
 	
         list.querySelector('.cbr-no-items').style.display = (hidden === items.length) ? "block" : "none";
+
+		UpdateStats();
 	});
 	addClearBtnEvents(filterBar);
 

resources/web/guide/23/23.css

@@ -143,14 +143,12 @@
 #CFilament_List
 {
 	display:flex;
-	overflow-x:auto;
+	overflow-y:auto;
 	flex-wrap:wrap;
-	flex-direction: column;
 	justify-content:flex-start;
 	align-items: flex-start;
 	align-content:flex-start;
 	line-height: 32px;
-
 	height: 100%;
 }
 
@@ -158,12 +156,17 @@
 {
 	display: flex;
 	align-items: center;
-	margin-right: 30px;
+	margin-right: 10%;
+	width: 44%;
+}
+
+.CFilament_Item:nth-of-type(2n) {
+	margin-right: 2%;
 }
 
 .CFilament_Name
 {
-	width: 220px;
+	width: 100%;
 	overflow: hidden;
     white-space: nowrap; /* ?????? */
     text-overflow: ellipsis; /* ????????? */
@@ -270,6 +273,11 @@ body:has(#SystemFilamentBtn.TitleSelected) #Content { /* :has selector browser s
 	margin: 3px;
 }
 
+.list-item-count {
+	color:var(--fg-color-label);
+	margin-left:10px
+}
+
 .cbr-filter-btns {
 	display: flex;
 	margin: 5px 5px 5px auto;

resources/web/guide/23/23.js

@@ -74,10 +74,10 @@ function SortUI()
 	
 	$('#MachineList .CValues').append(HtmlMode);	
 	$('#MachineList .CValues input').prop("checked",true);
-	if(nMode<=1)
+	//if(nMode<=1)
-	{
+	//{
-		$('#MachineList').hide();
+	//	$('#MachineList').hide();
-	}
+	//}
 	
 	//Filament - Create sorted array with generic vendor first
 	let FilamentArray=new Array();
@@ -171,7 +171,7 @@ function SortUI()
 	        if(pFila.length==0)
 		    {
 				/* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
-			    let HtmlFila='<label class="MItem"><input type="checkbox" vendor="'+fVendor+'"  filatype="'+fType+'" filalist="'+fWholeName+';'+'"  model="'+fModel+'" name="'+fShortName+'" /><span>'+fShortName+'</span></label>';
+			    let HtmlFila='<label class="MItem"><input type="checkbox" onChange="UpdateStats()" vendor="'+fVendor+'"  filatype="'+fType+'" filalist="'+fWholeName+';'+'"  model="'+fModel+'" name="'+fShortName+'" /><span>'+fShortName+'</span></label>';
 			
 			    $("#ItemBlockArea").append(HtmlFila);
 		    } 
@@ -238,6 +238,8 @@ function SortUI()
 	//------
 	if(SelectNumber==0)
 		ChooseDefaultFilament();
+
+	UpdateStats();
 }
 
 
@@ -403,9 +405,29 @@ function SortFilament()
 			else
 				$(OneNode).hide();
 		}
-		else
+		else{
 			$(OneNode).hide();
+			//alert(fName) //debug non common filament type
+		}
+			
 	}
+
+	UpdateStats();
+}
+
+function UpdateStats()
+{
+	let $i             = $("#ItemBlockArea");
+	let $allItems      = $i.find(".MItem");
+	let $visibleItems  = $i.find(".MItem:visible");
+	let $filteredItems = $visibleItems.filter(function() { return $(this).css('position') !== 'absolute'});
+	let visibleCount   = Math.min($filteredItems.length, $visibleItems.length);
+	
+	$(".list-item-count").text(
+		$i.find("input:checked").length + " / " + 
+		$allItems.length +
+		($allItems.length > visibleCount ? (" [" + visibleCount + "]") : "") // filtered items
+	);
 }
 
 function ChooseDefaultFilament()
@@ -461,6 +483,8 @@ function SelectAllFilament( nShow )
 	else {
 		$('#ItemBlockArea .MItem:visible input').prop("checked",nShow!=0);
 	}
+
+	UpdateStats();
 }
 
 function ShowNotice( nShow )

resources/web/guide/23/index.html

@@ -87,6 +87,7 @@
 					<option value="2">Unchecked</option>
 				</select>
 			</div>
+			<div class="list-item-count"></div>
 			<div class="cbr-filter-btns">
 				<span class="cbr-filter-mode-filter  trans">Select filtered</span>
 				<span class="cbr-filter-mode-visible trans">Select visible</span>
@@ -107,7 +108,7 @@
 	<div id="CFilament_Btn_Area">
 		<div class="ButtonStyleConfirm ButtonTypeWindow trans" tid="t111" onClick="OnClickCustomFilamentAdd()">Create New</div>
 	</div>
-    <div id="CFilament_List" class="ZScrol">
+    <div id="CFilament_List" class="thin-scroll">
 	</div>
 </div>
 	
@@ -228,6 +229,8 @@
 		}
 	
         list.querySelector('.cbr-no-items').style.display = (hidden === items.length) ? "block" : "none";
+
+		UpdateStats();
 	});
 	addClearBtnEvents(filterBar);