选择打印机增加关键字搜索 (#2376)

Co-authored-by: ZdDroid <601865048@qq.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

@@ -1,7 +1,7 @@
-function OnInit()
+function OnInit() {
-{
+
 	//let strInput=JSON.stringify(cData);
-	//HandleStudio(strInput);
+	//HandleModelList(cData);
 
 	TranslatePage();
 
@@ -10,8 +10,7 @@ function OnInit()
 
 
 
-function RequestProfile()
+function RequestProfile() {
-{
 	var tSend = {};
 	tSend['sequence_id'] = Math.round(new Date() / 1000);
 	tSend['command'] = "request_userguide_profile";
@@ -19,8 +18,7 @@ function RequestProfile()
 	SendWXMessage(JSON.stringify(tSend));
 }
 
-function HandleStudio( pVal )
+function HandleStudio(pVal) {
-{
 	//	alert(strInput);
 	//	alert(JSON.stringify(strInput));
 	//	
@@ -34,36 +32,31 @@ function HandleStudio( pVal )
 	let strCmd = pVal['command'];
 	//alert(strCmd);
 
-	if(strCmd=='response_userguide_profile')
+	if (strCmd == 'response_userguide_profile') {
-	{
 		HandleModelList(pVal['response']);
 	}
 }
 
-function ShowPrinterThumb(pItem, strImg)
+function ShowPrinterThumb(pItem, strImg) {
-{
 	$(pItem).attr('src', strImg);
 	$(pItem).attr('onerror', null);
 }
 
-function HandleModelList( pVal )
+function HandleModelList(pVal) {
-{
 	if (!pVal.hasOwnProperty("model"))
 		return;
 
-    let pModel=pVal['model'];
+	pModel = pVal['model'];
 
 	let nTotal = pModel.length;
 	let ModelHtml = {};
-	for(let n=0;n<nTotal;n++)
+	for (let n = 0; n < nTotal; n++) {
-	{
 		let OneModel = pModel[n];
 
 		let strVendor = OneModel['vendor'];
 
 		//Add Vendor Html Node
-		if($(".OneVendorBlock[vendor='"+strVendor+"']").length==0)
+		if ($(".OneVendorBlock[vendor='" + strVendor + "']").length == 0) {
-		{
 			let sVV = strVendor;
 			if (sVV == "BBL")
 				sVV = "Bambu Lab";
@@ -95,8 +88,7 @@ function HandleModelList( pVal )
 
 		let NozzleArray = OneModel['nozzle_diameter'].split(';');
 		let HtmlNozzel = '';
-		for(let m=0;m<NozzleArray.length;m++)
+		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>';
 		}
@@ -108,32 +100,120 @@ function HandleModelList( pVal )
 	}
 
 	//Update Nozzel Html Append
-	for( let key in ModelHtml )
+	for (let key in ModelHtml) {
-	{
 		$(".OneVendorBlock[vendor='" + key + "'] .PrinterArea").append(ModelHtml[key]);
 	}
 
 
 	//Update Checkbox
 	$('input').prop("checked", false);
-	for(let m=0;m<nTotal;m++)
+	for (let m = 0; m < nTotal; m++) {
-	{
 		let OneModel = pModel[m];
 
 		let SelectList = OneModel['nozzle_selected'];
-		if(SelectList!='')
+		if (SelectList != '') {
-		{
 			SelectList = OneModel['nozzle_selected'].split(';');
 			let nLen = SelectList.length;
 
-		    for(let a=0;a<nLen;a++)
+			for (let a = 0; a < nLen; a++) {
-		    {
 				let nNozzel = SelectList[a];
 				$("input[vendor='" + OneModel['vendor'] + "'][model='" + OneModel['model'] + "'][nozzel='" + nNozzel + "']").prop("checked", true);
 			}
 		}
-		else
+		else {
-		{
+			$("input[vendor='" + OneModel['vendor'] + "'][model='" + OneModel['model'] + "']").prop("checked", false);
+		}
+	}
+
+	// let AlreadySelect=$("input:checked");
+	// let nSelect=AlreadySelect.length;
+	// if(nSelect==0)
+	// {
+	// 	$("input[nozzel='0.4'][vendor='Custom']").prop("checked", true);
+	// }
+
+	TranslatePage();
+}
+
+function FilterModelList(keyword) {
+	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 + '" /><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
+	$('input').prop("checked", false);
+	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);
+			}
+		}
+		else {
 			$("input[vendor='" + OneModel['vendor'] + "'][model='" + OneModel['model'] + "']").prop("checked", false);
 		}
 	}
@@ -149,35 +229,30 @@ function HandleModelList( pVal )
 }
 
 
-function SelectPrinterAll( sVendor )
+function SelectPrinterAll(sVendor) {
-{
 	$("input[vendor='" + sVendor + "']").prop("checked", true);
 }
 
 
-function SelectPrinterNone( sVendor )
+function SelectPrinterNone(sVendor) {
-{
 	$("input[vendor='" + sVendor + "']").prop("checked", false);
 }
 
 
 //
-function OnExit()
+function OnExit() {
-{	
 	let ModelAll = {};
 
 	let ModelSelect = $("input:checked");
 	let nTotal = ModelSelect.length;
 
-	if( nTotal==0 )
+	if (nTotal == 0) {
-	{
 		ShowNotice(1);
 
 		return 0;
 	}
 
-	for(let n=0;n<nTotal;n++)
+	for (let n = 0; n < nTotal; n++) {
-	{
 		let OneItem = ModelSelect[n];
 
 		let strModel = OneItem.getAttribute("model");
@@ -186,8 +261,7 @@ function OnExit()
 
 		//alert(strModel+strVendor+strNozzel);
 
-		if(!ModelAll.hasOwnProperty(strModel))
+		if (!ModelAll.hasOwnProperty(strModel)) {
-		{
 			//alert("ADD: "+strModel);
 
 			ModelAll[strModel] = {};
@@ -211,22 +285,18 @@ function OnExit()
 }
 
 
-function ShowNotice( nShow )
+function ShowNotice(nShow) {
-{
+	if (nShow == 0) {
-	if(nShow==0)
-	{
 		$("#NoticeMask").hide();
 		$("#NoticeBody").hide();
 	}
-	else
+	else {
-	{
 		$("#NoticeMask").show();
 		$("#NoticeBody").show();
 	}
 }
 
-function CancelSelect()
+function CancelSelect() {
-{
 	var tSend = {};
 	tSend['sequence_id'] = Math.round(new Date() / 1000);
 	tSend['command'] = "user_guide_cancel";
@@ -236,12 +306,10 @@ function CancelSelect()
 }
 
 
-function ConfirmSelect()
+function ConfirmSelect() {
-{
 	let nChoose = OnExit();
 
-	if(nChoose>0)
+	if (nChoose > 0) {
-    {
 		var tSend = {};
 		tSend['sequence_id'] = Math.round(new Date() / 1000);
 		tSend['command'] = "user_guide_finish";

resources/web/guide/24/index.html

@@ -1,5 +1,6 @@
 <!doctype html>
 <html>
+
 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="Cache-Control" content="max-age=7200" />
@@ -7,18 +8,24 @@
 	<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">	
@@ -101,16 +108,10 @@
 
 </body>
 <script>
-	document.onkeydown = function (event) {
+	let pModel;
-		var e = event || window.event || arguments.callee.caller.arguments[0];
+	function textInput(obj) {
-
+		FilterModelList(obj.value);
-		if (e.keyCode == 27)
-			ClosePage();
-
-		if (window.event) {
-			try { e.keyCode = 0; } catch (e) { }
-			e.returnValue = false;
 	}
-	};
 </script>
+
 </html>