Search printer model in add/remove printer dialog 选择打印机增加关键字搜索#3 (#2464)

* 选择打印机增加关键字搜索#3

* allow dismiss window by pressing ESC key

---------

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

resources/web/guide/24/24.css

@@ -147,3 +147,31 @@
 	display: flex;
 	justify-content:space-around;
 }
+
+.search {
+	width: 100%;
+	position: relative;
+	display: flex;
+  }
+  
+  .searchTerm {
+	width: 100%;
+	border: 3px solid #009688;
+	/*border-right: none;*/
+	padding: 5px;
+	height: 20px;
+	border-radius: 5px 5px 5px 5px;
+	outline: none;
+	color: #9DBFAF;
+  }
+  
+  .searchTerm:focus{
+	color: #009688;
+  }
+  
+  /*Resize the wrap to see the search bar change!*/
+  .wrap{
+	width: 30%;
+	padding-bottom: 5px;
+	padding-left: 42px;
+  }

resources/web/guide/24/24.js

@@ -51,7 +51,7 @@ function HandleModelList( pVal )
 	if( !pVal.hasOwnProperty("model") )
 		return;
 
-    let pModel=pVal['model'];
+    pModel=pVal['model'];
 	
 	let nTotal=pModel.length;
 	let ModelHtml={};
@@ -98,7 +98,7 @@ function HandleModelList( pVal )
 		for(let m=0;m<NozzleArray.length;m++)
 		{
 			let nNozzel=NozzleArray[m];
-			HtmlNozzel+='<div class="pNozzel TextS2"><input type="checkbox" model="'+OneModel['model']+'" nozzel="'+nNozzel+'" vendor="'+strVendor+'" /><span>'+nNozzel+'</span><span class="trans" tid="t13">mm nozzle</span></div>';
+			HtmlNozzel += '<div class="pNozzel TextS2"><input type="checkbox" model="' + OneModel['model'] + '" nozzel="' + nNozzel + '" vendor="' + strVendor +'" onclick="CheckBoxOnclick(this)" /><span>'+nNozzel+'</span><span class="trans" tid="t13">mm nozzle</span></div>';
 		}
 		
 		let CoverImage=OneModel['cover'];
@@ -119,18 +119,20 @@ function HandleModelList( pVal )
 	for(let m=0;m<nTotal;m++)
 	{
 		let OneModel=pModel[m];
-	
+
 		let SelectList=OneModel['nozzle_selected'];
 		if(SelectList!='')
 		{
 			SelectList=OneModel['nozzle_selected'].split(';');
     		let nLen=SelectList.length;
-		
+
 		    for(let a=0;a<nLen;a++)
-		    {
+			{
 			    let nNozzel=SelectList[a];
-			    $("input[vendor='"+OneModel['vendor']+"'][model='"+OneModel['model']+"'][nozzel='"+nNozzel+"']").prop("checked", true);
+				$("input[vendor='" + OneModel['vendor'] + "'][model='" + OneModel['model'] + "'][nozzel='" + nNozzel + "']").prop("checked", true);
-		    }
+
+				SetModelSelect(OneModel['vendor'], OneModel['model'], nNozzel, true);
+			}
 		}
 		else
 		{
@@ -148,6 +150,155 @@ function HandleModelList( pVal )
 	TranslatePage();
 }
 
+function CheckBoxOnclick(obj) {
+
+	let strModel = obj.getAttribute("model");
+
+	let strVendor = obj.getAttribute("vendor");
+	let strNozzel = obj.getAttribute("nozzel");
+
+	SetModelSelect(strVendor, strModel, strNozzel, obj.checked);
+
+}
+
+function SetModelSelect(vendor, model, nozzel, checked) {
+	if (!ModelNozzleSelected.hasOwnProperty(vendor) && !checked) {
+		return;
+	}
+
+	if (!ModelNozzleSelected.hasOwnProperty(vendor) && checked) {
+		ModelNozzleSelected[vendor] = {};
+	}
+
+	let oVendor = ModelNozzleSelected[vendor];
+	if (!oVendor.hasOwnProperty(model)) {
+		oVendor[model] = {};
+	}
+
+	let oModel = oVendor[model];
+	if (oModel.hasOwnProperty(nozzel) || checked) {
+		oVendor[model][nozzel] = checked;
+	}
+}
+
+function GetModelSelect(vendor, model, nozzel) {
+	if (!ModelNozzleSelected.hasOwnProperty(vendor)) {
+		return false;
+	}
+
+	let oVendor = ModelNozzleSelected[vendor];
+	if (!oVendor.hasOwnProperty(model)) {
+		return false;
+	}
+
+	let oModel = oVendor[model];
+	if (!oModel.hasOwnProperty(nozzel)) {
+		return false;
+	}
+
+	return oVendor[model][nozzel];
+}
+
+function FilterModelList(keyword) {
+
+	//Save checkbox state
+	let ModelSelect = $('input[type=checkbox]');
+	for (let n = 0; n < ModelSelect.length; n++) {
+		let OneItem = ModelSelect[n];
+
+		let strModel = OneItem.getAttribute("model");
+
+		let strVendor = OneItem.getAttribute("vendor");
+		let strNozzel = OneItem.getAttribute("nozzel");
+
+		SetModelSelect(strVendor, strModel, strNozzel, OneItem.checked);
+	}
+
+	let nTotal = pModel.length;
+	let ModelHtml = {};
+
+	$('#Content').empty();
+	for (let n = 0; n < nTotal; n++) {
+		let OneModel = pModel[n];
+
+		let strVendor = OneModel['vendor'];
+		let ModelName = OneModel['model'];
+		if (ModelName.toLowerCase().indexOf(keyword.toLowerCase()) == -1)
+			continue;
+
+		//Add Vendor Html Node
+		if ($(".OneVendorBlock[vendor='" + strVendor + "']").length == 0) {
+			let sVV = strVendor;
+			if (sVV == "BBL")
+				sVV = "Bambu Lab";
+			if (sVV == "Custom")
+				sVV = "Custom Printer";
+			if (sVV == "Other")
+				sVV = "Orca colosseum";
+
+			let HtmlNewVendor = '<div class="OneVendorBlock" Vendor="' + strVendor + '">' +
+				'<div class="BlockBanner">' +
+				'	<div class="BannerBtns">' +
+				'		<div class="SmallBtn_Green trans" tid="t11" onClick="SelectPrinterAll(' + "\'" + strVendor + "\'" + ')">all</div>' +
+				'		<div class="SmallBtn trans" tid="t12" onClick="SelectPrinterNone(' + "\'" + strVendor + "\'" + ')">none</div>' +
+				'	</div>' +
+				'	<a>' + sVV + '</a>' +
+				'</div>' +
+				'<div class="PrinterArea">	' +
+				'</div>' +
+				'</div>';
+
+			$('#Content').append(HtmlNewVendor);
+		}
+
+		//Collect Html Node Nozzel Html
+		if (!ModelHtml.hasOwnProperty(strVendor))
+			ModelHtml[strVendor] = '';
+
+		let NozzleArray = OneModel['nozzle_diameter'].split(';');
+		let HtmlNozzel = '';
+		for (let m = 0; m < NozzleArray.length; m++) {
+			let nNozzel = NozzleArray[m];
+			HtmlNozzel += '<div class="pNozzel TextS2"><input type="checkbox" model="' + OneModel['model'] + '" nozzel="' + nNozzel + '" vendor="' + strVendor + '" onclick="CheckBoxOnclick(this)" /><span>' + nNozzel + '</span><span class="trans" tid="t13">mm nozzle</span></div>';
+		}
+
+		let CoverImage = OneModel['cover'];
+		ModelHtml[strVendor] += '<div class="PrinterBlock">' +
+			'	<div class="PImg"><img src="' + CoverImage + '"  /></div>' +
+			'    <div class="PName">' + OneModel['model'] + '</div>' + HtmlNozzel + '</div>';
+	}
+
+	//Update Nozzel Html Append
+	for (let key in ModelHtml) {
+		let obj = $(".OneVendorBlock[vendor='" + key + "'] .PrinterArea");
+		obj.empty();
+		obj.append(ModelHtml[key]);
+	}
+
+
+	//Update Checkbox
+	ModelSelect = $('input[type=checkbox]');
+	for (let n = 0; n < ModelSelect.length; n++) {
+		let OneItem = ModelSelect[n];
+
+		let strModel = OneItem.getAttribute("model");
+		let strVendor = OneItem.getAttribute("vendor");
+		let strNozzel = OneItem.getAttribute("nozzel");
+
+		let checked = GetModelSelect(strVendor, strModel, strNozzel);
+
+		OneItem.checked = checked;
+	}
+
+	// let AlreadySelect=$("input:checked");
+	// let nSelect=AlreadySelect.length;
+	// if(nSelect==0)
+	// {
+	// 	$("input[nozzel='0.4'][vendor='Custom']").prop("checked", true);
+	// }
+
+	TranslatePage();
+}
 
 function SelectPrinterAll( sVendor )
 {
@@ -160,6 +311,44 @@ function SelectPrinterNone( sVendor )
 	$("input[vendor='"+sVendor+"']").prop("checked", false);
 }
 
+function OnExitFilter() {
+
+	let nTotal = 0;
+	let ModelAll = {};
+	for (vendor in ModelNozzleSelected) {
+		for (model in ModelNozzleSelected[vendor]) {
+			for (nozzel in ModelNozzleSelected[vendor][model]) {
+				if (!ModelNozzleSelected[vendor][model][nozzel])
+					continue;
+
+				if (!ModelAll.hasOwnProperty(model)) {
+					//alert("ADD: "+strModel);
+
+					ModelAll[model] = {};
+
+					ModelAll[model]["model"] = model;
+					ModelAll[model]["nozzle_diameter"] = '';
+					ModelAll[model]["vendor"] = vendor;
+				}
+
+				ModelAll[model]["nozzle_diameter"] += ModelAll[model]["nozzle_diameter"] == '' ? nozzel : ';' + nozzel;
+
+				nTotal++;
+			}
+
+		}
+	}
+
+	var tSend = {};
+	tSend['sequence_id'] = Math.round(new Date() / 1000);
+	tSend['command'] = "save_userguide_models";
+	tSend['data'] = ModelAll;
+
+	SendWXMessage(JSON.stringify(tSend));
+
+	return nTotal;
+
+}
 
 //
 function OnExit()
@@ -238,7 +427,7 @@ function CancelSelect()
 
 function ConfirmSelect()
 {
-	let nChoose=OnExit();
+	let nChoose=OnExitFilter();
 	
 	if(nChoose>0)
     {

resources/web/guide/24/index.html

@@ -7,18 +7,23 @@
 <link rel="stylesheet" type="text/css" href="../css/common.css" />	
 <link rel="stylesheet" type="text/css" href="24.css" />
 <link rel="stylesheet" type="text/css" href="../css/dark.css" />	
-<script type="text/javascript" src="test.js"></script>	
+<!-- <script type="text/javascript" src="test.js"></script> -->
 <script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
 <script type="text/javascript" src="../js/json2.js"></script>	
 <script type="text/javascript" src="../../data/text.js"></script>	
 <script type="text/javascript" src="../js/globalapi.js"></script>	
-<script type="text/javascript" src="../js/common.js"></script>
+<!-- <script type="text/javascript" src="../js/common.js"></script> -->
 <script type="text/javascript" src="24.js"></script>		
 </head>
 <body onLoad="OnInit()">
 <div id="Title">
 	<div class="trans" tid="t10">Printer Selection</div>
 </div>
+<div class="wrap">
+	<div class="search">
+		<input type="text" class="searchTerm" placeholder="Device keyword" oninput="textInput(this)">
+	</div>
+</div>
 <div id="Content"  class="ZScrol"s>
 
 <!--<div class="OneVendorBlock" Vendor="BBL">	
@@ -109,8 +114,13 @@
 
 		if (window.event) {
 			try { e.keyCode = 0; } catch (e) { }
-			e.returnValue = false;
+			e.returnValue = true;
 		}
 	};
+	let pModel = {};
+	let ModelNozzleSelected = {};
+	function textInput(obj) {
+		FilterModelList(obj.value);
+	}
 </script>
 </html>