
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>命令行</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
	<link rel="stylesheet" href="../css/public.css" media="all">
	<style>
		.rx_win_style{
			min-height:300px;
			background-color: lightgray;
		}
	</style>
</head>
<body>
<div class="layuimini-container">
	<div class="layuimini-main">
		<div class="layui-row layui-col-space1">
			<div class="layui-col-md12">
				<div class="layui-form-item">
					<textarea name="rx_win" id="rx_win" class="layui-textarea rx_win_style" readonly></textarea>
				</div>
			</div>

			<form class="layui-form" action="">
				<div class="layui-col-md12">
					<div class="layui-form-item">
						<textarea name="tx_win" id="tx_win" class="layui-textarea"></textarea>
					</div>
				</div>
				<div class="layui-col-md12">
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">设备ID</label>
							<div class="layui-input-inline">
								<input type="text" name="device_id" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">指令类型</label>
							<div class="layui-input-inline">
								<select name="cmd_type" id="cmd_type" lay-filter="cmd_type">
									<option value="0">GNSS</option>
									<option value="1">DTU</option>
									<option value="2">MPU</option>
									<option value="11">LORA</option>
									<option value="3">DEBUG</option>
								</select>
							</div>
						</div>

						<div class="layui-inline">
							<div class="layui-input-block" style="float:right">
								<button class="layui-btn" lay-submit="" lay-filter="send_btn">立即发送</button>
								<button class="layui-btn" lay-submit="" lay-filter="cache_btn">缓存发送</button>
								<button class="layui-btn" lay-submit="" lay-filter="clear_btn">清屏</button>
								<button class="layui-btn" lay-submit="" lay-filter="frequent_btn">常用指令</button>
								<button class="layui-btn" lay-submit="" lay-filter="q_cache_btn">待发指令</button>
							</div>
						</div>
					</div>
				</div>
			</form>
		</div>

	</div>
</div>
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form'], function () {
        var form = layui.form
            , $ = layui.$;
		var rxWin = $("#rx_win");


		/**
         * 初始化表单，要加上，不然刷新部分组件可能会不加载
         */
        form.render();

        //监听提交
        form.on('submit(send_btn)', function (data) {
			//console.log((data.field));
            $.ajax({
				type:"POST",
				url:"/gnss/config_cmd",
				data: data.field,
				success: function (result) {
					//console.log(result);
					if(result.code == 0){
						rxWin.val(rxWin.val() +result.data+ "\r\n");
						var obj = document.getElementById("rx_win");
						obj.scrollTop = obj.scrollHeight;
					}
					else{
						layer.alert(result.data, {
							title: '错误信息'
						})
					}
					//
				},
				error: function () {
					console.log("ajax error");
				}
			});
            return false;
        });

		form.on('submit(cache_btn)', function (data) {
			$.ajax({
				type:"POST",
				url:"/gnss/cache_cmd",
				data:data.field,
				success: function (result) {
					if(result.code == 0) layer.msg('指令已缓存，收到终端数据时下发');
					else layer.alert(result.msg);
				},
				error: function () {
					console.log("ajax error");
				}
			});
			return false;
		});

		form.on('submit(clear_btn)', function (data) {
			rxWin.val("");
			return false;
		});

		form.on('submit(q_cache_btn)', function (data) {
			var index = layer.open({
				title: '待发送指令',
				type: 2,
				shade: 0.2,
				maxmin:true,
				shadeClose: true,
				offset: 'rb',
				anim: 2,
				area: ['50%', '100%'],
				content: '../page/table/q_cache_cmd',
			});
			return false;
		});

		form.on('submit(frequent_btn)', function (data) {
			var index = layer.open({
				title: '常用指令',
				type: 2,
				shade: 0.2,
				maxmin:true,
				shadeClose: true,
				offset: 'rb',
				anim: 2,
				area: ['70%', '100%'],
				content: '../page/table/frequent_cmd',
			});
			return false;
		});
    });

	function setCmd(type, content){
		var form = layui.form
				, $ = layui.$;
		$('#cmd_type').val(type);
		$('#tx_win').val(content);
		form.render();
	}
</script>

<!-- Web socket operations-->
<script type="text/javascript">
	var intervalId;
	var websocket;
	var rxWin;

	layui.$(function(){
		rxWin = layui.$('#rx_win');
		if(typeof(WebSocket) == "undefined"){
			console.log("WebSocket not support for this WebBrowser!")
		}
		else{
			connectWebSocket();
		}
	})

	//建立WebSocket连接
	function connectWebSocket() {
		//获取当前网址，如： http://localhost:8080/ems/Pages/Basic/Person.jsp
		var curPath = window.document.location.href;
		//获取主机地址之后的目录，如： /ems/Pages/Basic/Person.jsp
		var pathName = window.document.location.pathname;
		var pos = curPath.indexOf(pathName);
		//获取主机地址，如： http://localhost:8080
		var basePath = curPath.substring(0, pos);

		//建立webSocket连接
		var webSocktPath;
		webSocktPath = (basePath+"/websocket").replace("http","ws");
		websocket = new WebSocket(webSocktPath);

		//打开webSokcet连接时，回调该函数
		websocket.onopen = function () {
			console.log("Socket open");
			intervalId = setInterval(function() {
				websocket.send("hello");
			}, 50000); // keepalive

		}
		websocket.onerror = function (){
			console.log("Socket error");
			layui.layer.alert("Open web socket failed!");
		}
		websocket.onclose = function (){
			console.log("Socket close");
			rxWin.val(rxWin.val()+"websocket closed!");
			clearInterval(intervalId);
		}
		//接收信息
		websocket.onmessage = function (event) {
			//console.log(event.data);
			rxWin.val(rxWin.val()+event.data + "\r\n");
			rxWin.scrollTop = rxWin.scrollHeight;
		}
	}
</script>

</body>
</html>