use hint instead of select

luci/luci-app-qmodem/luasrc/view/qmodem/modem_debug.htm

@@ -11,6 +11,9 @@
 
 		update(){
 			console.log("update");
+			if (this.cb_update) {
+				this.cb_update();
+			}
 		}
 
 		pause(){
@@ -109,6 +112,32 @@
 			return select;
 		}
 
+		createInputWithDatalist(name,hint,dict) {
+			// 创建输入框
+			var input = document.createElement('input');
+			input.setAttribute('list', name); // 设置 list 属性以关联 datalist
+			input.name = name;
+			input.placeholder = hint;
+
+			// 创建 datalist
+			var datalist = document.createElement('datalist');
+			datalist.id = name;
+
+			// 添加选项到 datalist
+			for (let key in dict) {
+				var option = document.createElement('option');
+				option.value = key;
+				datalist.appendChild(option);
+			}
+
+			// 返回包含输入框和 datalist 的文档片段
+			var fragment = document.createDocumentFragment();
+			fragment.appendChild(input);
+			fragment.appendChild(datalist);
+
+			return { input, datalist }; // 返回包含输入框和 datalist 的对象
+		}
+		
 		createTD(innerHTML){
 			var td = document.createElement('td');
 			td.classList.add("cbi-section-table-cell");
@@ -158,6 +187,7 @@
 		
 		show(){
 			this.fieldset.style.display = "block";
+			console.log("show");
 			this.update();
 		}
 	}
@@ -879,39 +909,58 @@
 		}
 
 		render(){
-			this.at_input = this.createInput("at",this.config);
 			this.textarea = document.createElement('textarea');
 			this.textarea.style.width = "100%";
 			this.textarea.style.height = "600px";
 			this.textarea.readOnly = true;
-			this.at_btn = this.createBTN("<%:Submit%>",() => {
+			this.at_btn = this.createBTN("<%:Send%>",() => {
 				let payload = {
-					"at": this.at_input.value,
+					"at": this.at_input,
 					"port": this.at_port
 				}
 				this.set_config(JSON.stringify(payload));
 				//append input to textarea
-				this.textarea.value += "INPUT>> " + this.at_input.value + "\n";
+				this.textarea.value += "INPUT>> " + this.at_input + "\n";
 			});
-			this.at_port_selector = this.createDroplist();
+			this.clear_btn = this.createBTN("<%:Clear%>",() => {
-			this.cmd_prompt = this.createDroplist();
+				this.textarea.value = "";
+			});
+			this.clear_input_btn = this.createBTN("<%:Clear%>",() => {
+				this.cmd_prompt.value = "";
+				this.at_port_selector.value = "";
+			});
+			//this.at_port_selector = this.createDroplist();
+			var { input, datalist } = this.createInputWithDatalist("select_port","<%:Select Port%>" );
+			this.at_port_selector=input;
+			this.at_port_selector_datalist = datalist;
+			var { input, datalist } = this.createInputWithDatalist("cmd_prompt","<%:Input AT Command%>" );
+			//this.cmd_prompt = this.createDroplist();
+			this.cmd_prompt = input;
+			this.cmd_prompt_datalist = datalist;
 			this.fieldset.appendChild(this.at_port_selector);
+			this.fieldset.appendChild(this.at_port_selector_datalist);
+			//add br
+			this.fieldset.appendChild(document.createElement("br"));
+			
 			this.fieldset.appendChild(this.cmd_prompt);
-			this.fieldset.appendChild(this.at_input);
+			this.fieldset.appendChild(this.cmd_prompt_datalist);
+			this.fieldset.appendChild(document.createElement("br"));
 			this.fieldset.appendChild(this.at_btn);
+			this.fieldset.appendChild(this.clear_input_btn);
 			this.fieldset.appendChild(this.textarea);
+			this.fieldset.appendChild(this.clear_btn);
 			this.at_port_selector.addEventListener('change',(event) => {
 				this.at_port = event.target.value;
 			});
 			this.cmd_prompt.addEventListener('change',(event) => {
-				this.at_input.value = event.target.value;
+				this.at_input = event.target.value;
 			});
 		}
 
 		cb_get(){
 			//clear ports
-			while (this.at_port_selector.firstChild) {
+			while (this.at_port_selector_datalist.firstChild) {
-				this.at_port_selector.removeChild(this.at_port_selector.firstChild);
+				this.at_port_selector_datalist.removeChild(this.at_port_selector_datalist.firstChild);
 			}
 			var ports=this.config.ports;
 			var valid_ports=this.config.valid_ports;
@@ -938,47 +987,34 @@
 					option.selected = true;
 					this.at_port = port;
 				}
-				this.at_port_selector.appendChild(option);
+				this.at_port_selector_datalist.appendChild(option);
 			}
 			//clear cmds
-			while (this.cmd_prompt.firstChild) {
+			while (this.cmd_prompt_datalist.firstChild) {
-				this.cmd_prompt.removeChild(this.cmd_prompt.firstChild);
+				this.cmd_prompt_datalist.removeChild(this.cmd_prompt_datalist.firstChild);
 			}
 			for (let cmd of cmds) {
-				let select;
-				let name = cmd.name;
-				let value = cmd.value;
-				if (this.last_choice_cmd == cmd.value) {
-					select = true;
-				}
-				
-				if (this.last_choice_cmd == null) {
-					select = true;
-				}
-				
 				var option = document.createElement('option');
-				option.value = value;
+				option.value = cmd.value;
-				option.innerHTML = name;
+				option.innerHTML = cmd.name;
-				if (select) {
+				this.cmd_prompt_datalist.appendChild(option);
-					option.selected = true;
-					this.last_choice_cmd = value;
-					this.at_input.value = value;
-				}
-				this.cmd_prompt.appendChild(option);
 			}
 			
 		}
 		
+		cb_update(){
+			//clear 2 input
+			this.at_port_selector.value = "";
+			this.cmd_prompt.value = "";
+			this.get_config();
+		}
+
 		cb_set(){
 			//append response to textarea
 			this.textarea.value += this.config.res + "<<END\n";
 
 		}
 		
-		update(){
-			this.get_config();
-		}
-		
 	}
 	
 	class Select_Modem {

luci/luci-app-qmodem/po/zh-cn/qmodem.po

@@ -516,3 +516,15 @@ msgstr "有效"
 
 msgid "invalid"
 msgstr "无效"
+
+msgid "Send"
+msgstr "发送"
+
+msgid "Clear"
+msgstr "清除"
+
+msgid "Select Port"
+msgstr "选择端口"
+
+msgid "Input AT Command"
+msgstr "输入AT命令"

luci/luci-app-qmodem/po/zh_Hans/qmodem.po

@@ -516,3 +516,15 @@ msgstr "有效"
 
 msgid "invalid"
 msgstr "无效"
+
+msgid "Send"
+msgstr "发送"
+
+msgid "Clear"
+msgstr "清除"
+
+msgid "Select Port"
+msgstr "选择端口"
+
+msgid "Input AT Command"
+msgstr "输入AT命令"