<script type="text/javascript">//<![CDATA[
	
	class LuciField {
		constructor(classList,title){
			this.classList=classList;
			this.newLuciField();
			this.title=title;
		}

		newLuciField(){
			var field=document.createElement("fieldset");
			for (var class_name of this.classList)
			{
				field.classList.add(class_name);
			}
			var h3title = document.createElement("h3")
			field.appendChild(h3title);
			this.h3title=h3title;
			this.field=field;
		
		}

		set title(t){
			this.h3title.innerHTML=t;
			if (t != "")
			{
				this.h3title.style.display="";
			}
			else
			{
				this.h3title.style.display="none";
			}
		}
	}

	class LuciBtn {
		constructor(classList,value,callback){
			var btn=document.createElement("input");
			var base_classList = ["cbi-button","btn"];
			this.classList=base_classList.concat(classList);
			for (var class_name of this.classList)
			{
				btn.classList.add(class_name);
			}
			btn.setAttribute('type','button');
			btn.setAttribute('value',value);
			btn.addEventListener('click',callback);
			this.btn=btn;
		}
	}

	class ModemState
	{
		constructor(){
			this.modem_state_div = document.createElement('div');
			this.modem_state_div.classList.add("modem_status_box");
			this.connect_state = -1;
		}

		update(modem_datas){
			var entrys = [];
			this.connect_state = -1;
			for (var entry of modem_datas)
			{
				//handle special entry
				if (entry.key=="connect_status")
				{
					var state = '';
					var css = '';
					switch (entry.value)
					{
						case 'Yes':
							entry.value = '<%:Connected%>';
							this.connect_state = 1;
							break;
						case 'No':
							entry.value = '<%:Disconnected%>';
							this.connect_state = 0;
							break;
						default:
							entry.value = '<%:Unknown%>';
							this.connect_state = -1;
							break;
					}
				}
				entrys.push(entry);
			}
			this.render(entrys);
		}


		render(entrys){
			this.modem_state_div.innerHTML = "";
			switch (this.connect_state)
			{
				case 1:
					this.modem_state_div.classList.add("alert-message","success");
					break;
				case 0:
					this.modem_state_div.classList.add("alert-message","danger");
					break;
				default:
					this.modem_state_div.classList.add("alert-message","warning");
					break;
			}
			for (var entry of entrys)
			{
				var key,value,full_name;
				key=entry.key;
				value=entry.value;
				full_name=entry.full_name;
				if (key == "connect_status" || key == "name" )
				{
					var div = document.createElement('div');
					var strong = document.createElement('strong');
					strong.innerHTML = value.toUpperCase();
					div.appendChild(strong);
				}
				else
				{
					var div = document.createElement('div');
					var strong = document.createElement('strong');
					var span = document.createElement('span');
					strong.innerHTML = full_name + ": ";
					span.innerHTML = value;
					div.appendChild(strong);
					div.appendChild(span);
				}
				this.modem_state_div.appendChild(div);
			}
		
		}

	}


	class ModemLog {
		constructor(section_name){
			this.modem_log_div = document.createElement('div');
			this.modem_log_div.style.display = "none";
			this.modem_logmsg_textarea = document.createElement('textarea');
			this.modem_logmsg_textarea.setAttribute('readonly','readonly');
			this.modem_logmsg_textarea.setAttribute('rows','20');
			this.modem_logmsg_textarea.setAttribute('maxlength','160');
			var download_btn = new LuciBtn(["cbi-button-link"],"<%:Download%>",() => {
				this.download();
			}).btn;
			var clear_btn = new LuciBtn(["cbi-button-reset"],"<%:Clear%>",() => {
				this.clear();
			}).btn;
			var btns_div = document.createElement('div');
			btns_div.appendChild(download_btn);
			btns_div.appendChild(clear_btn);
			this.btns_div = btns_div;
			this.modem_log_div.appendChild(this.modem_logmsg_textarea);
			this.modem_log_div.appendChild(this.btns_div);
			this.section_name = section_name;
			this.scroll_top = -1;
		}

		download(){
			var file_name = this.section_name+"_dial_log.txt";
			var file_content = this.log_msg;
			var blob = new Blob([file_content], {type: "text/plain;charset=utf-8"});
			var url = URL.createObjectURL(blob);
			var a = document.createElement('a');
			a.href = url;
			a.download = file_name;
			a.click();
		}

		clear(){
			XHR.get('<%=luci.dispatcher.build_url("admin", "network", "qmodem", "modem_ctrl")%>', {"action":"clear_dial_log","cfg":this.section_name},
			function(x, data)
			{
				var state = data.result.state;
				if (state == "1")
				{
					this.log_msg = "";
					this.render();
				}
			}
		);
		}

		update(log_msg){
			this.scroll_top = this.modem_logmsg_textarea.scrollTop;
			this.log_msg = log_msg;
			this.render();
			this.modem_logmsg_textarea.scrollTop = this.scroll_top;
		}

		render(){
			this.modem_logmsg_textarea.innerHTML=this.log_msg;
		}
	
	}

	class ModemDialOverview {
		constructor(){
			this.modem_state_field=new LuciField(["cbi-section","cbi-section-modem-state"],"<%:Modem Status%>").field;
			this.modem_log_tab_data_field = document.createElement('div');
			this.modem_log_tab_menu_field = document.createElement('ul');
			this.modem_log_tab_menu_field.classList.add("tabs")
			this.modem_log_field=new LuciField(["cbi-section","cbi-section-modem-log"],"<%:Modem Log%>").field;
			this.modems_state = [];
			this.modems_logs = {};
			this.modems_logs_menu = {};
			this.activated_section = "";
			this.modem_log_field.appendChild(this.modem_log_tab_menu_field);
			this.modem_log_field.appendChild(this.modem_log_tab_data_field);

			this.maincontent = document.getElementById("maincontent");
			this.maincontent.appendChild(this.modem_state_field);
			this.maincontent.appendChild(this.modem_log_field);
			this.poll();
		}

		activate()
		{
			for (var section_name in this.modems_logs)
			{
				if (section_name == this.activated_section)
				{
					this.modems_logs[section_name].modem_log_div.style.display = "";
					this.modems_logs_menu[section_name].classList.add("active");
				}
				else
				{
					this.modems_logs[section_name].modem_log_div.style.display = "none";
					this.modems_logs_menu[section_name].classList.remove("active");
				}
			}
		}

		poll()
		{
			XHR.poll(5,'<%=luci.dispatcher.build_url("admin", "network", "qmodem", "modems_dial_overview")%>',{},
		(x,data)=>{
			this.update_modems_state(data.modems);
			this.update_modems_log(data.logs);
        	});
		}

		update_modems_state(modems){
			for (var i in modems)
			{
				var modem_info = modems[i];
				if (this.modems_state[i]==null)
				{
					this.modems_state[i]=new ModemState();
					this.modem_state_field.appendChild(this.modems_state[i].modem_state_div);
					
				}
				this.modems_state[i].update(modem_info);
			}
			if (this.modems_state.length> modems.length)
				{
					for (var i = modems.length; i < this.modems_state.length; i++)
					{
						this.modem_state_field.removeChild(this.modems_state[i].modem_state_div);
						delete this.modems_state[i];
					}
				}
		}

		update_modems_log(logs){
			var menus = [];
			for (var log of logs)
			{
				var section_name,modem_name,log_msg;
				section_name = log.section_name;
				modem_name = log.name;
				log_msg = log.log_msg;
				menus.push(section_name);
				if ( this.modems_logs[section_name]==null )
				{
					this.modems_logs[section_name]=new ModemLog(section_name);
					let a = document.createElement('a');
					let li = document.createElement('li');
					let s = section_name;
					li.appendChild(a);
					a.href = "#";
					a.innerHTML = modem_name.toUpperCase();
					a.addEventListener('click',() => {
						this.activate_tab = s;
					});
					this.modems_logs_menu[section_name]=li;
					this.modem_log_tab_menu_field.appendChild(li);
					this.modem_log_tab_data_field.appendChild(this.modems_logs[section_name].modem_log_div);
				}
				this.modems_logs[section_name].update(log_msg);
			}
			this.update_modems_log_menu();
			//remove the log that not exist
			for (var section_name in this.modems_logs)
			{
				if (menus.indexOf(section_name)==-1)
				{
					this.modem_log_tab_menu_field.removeChild(this.modems_logs_menu[section_name]);
					this.modem_log_tab_data_field.removeChild(this.modems_logs[section_name].modem_log_div);
					delete this.modems_logs[section_name];
					delete this.modems_logs_menu[section_name];
				}
			}
		}

		update_modems_log_menu(){
			if (this.activated_section == "")
			{
				this.activate_tab = Object.keys(this.modems_logs)[0];
			}

		}

		set activate_tab(section_name){
			this.activated_section = section_name;
			this.activate();
		}

	}

	window.onload = function(){
		var modem_dial_overview = new ModemDialOverview();
	}
</script>
<style type="text/css">
	/* AT命令响应 */
	textarea {
		background:#373737;
		border:none;
		color:#FFF;
		width: 100%;
		border-top-width: 2px;
		padding-top: 12px;
	}
	
	/* 加载中样式 */
	#modem_status_view img {
		vertical-align: middle;
	}

	.modem_status_box {
		display: inline-block;
		margin: 1rem;
		padding: 1rem;
		width: 16rem;
		float: left;
		line-height: 125%;
	}
</style>
