Coolpy5App/node_add.html at master · jacoblai/Coolpy5App · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>node_add</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" href="css/common.css" type="text/css" charset="utf-8" />
		<link href="css/mui.picker.css" rel="stylesheet" />
		<link href="css/mui.poppicker.css" rel="stylesheet" />
		<style>
			h5 {
				margin: 5px 7px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title" id="lb_hubinfotitle">添加节点(Node)</h1>
		</header>
		<div class="mui-content">
			<div class="mui-content-padded" style="margin: 5px;">
				<form class="mui-input-group">
					<div class="mui-input-row">
						<label>枢纽编号</label>
						<input type="text" class="mui-input-clear" id="tb_hubid" disabled>
					</div>
					<div class="mui-input-row">
						<label>节点名称</label>
						<input type="text" class="mui-input-clear" id="tb_nodetitle">
					</div>
					<div class="mui-input-row">
						<label>节点标签</label>
						<input type="text" class="mui-input-clear" id="tb_nodetags">
					</div>

					<div class="mui-input-row mui-plus-visible">
						<label>节点描述</label>
						<input type="text" class="mui-input-clear" id="tb_nodeabout">
					</div>
					<div class="mui-input-row">
						<label>节点类型</label>
						<input type="text" class="mui-input-clear" id="tb_hubtype" disabled>
					</div>
					<br>
					<div class="mui-button-row">
						<button type="button" class="mui-btn mui-btn-warning" onclick="return false;" id='showUserPicker'>选择节点类型</button>&nbsp;&nbsp;
						<button type="button" class="mui-btn mui-btn-primary" onclick="return false;" id="bt_addnode">确认</button>&nbsp;&nbsp;
						<button type="button" class="mui-btn mui-btn-danger" onclick="return false;" id="bt_node_add_cancel">取消</button>
					</div>
				</form>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/mui.picker.js"></script>
		<script src="js/mui.poppicker.js"></script>
		<script src="js/app.js"></script>
		<script>
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});

			var hubid;
			window.addEventListener('sethubid', function(event) {
				var obj = JSON.parse(event.detail.hub);
				hubid = obj.Id;
				document.getElementById('tb_hubid').value = hubid;
			});

			document.getElementById('bt_addnode').addEventListener('tap', function() {
				var obj = Object();
				obj.Title = document.getElementById('tb_nodetitle').value;
				obj.About = document.getElementById('tb_nodeabout').value;
				obj.Tags = document.getElementById('tb_nodetags').value.split(",");
				obj.Type = ndtype.value;
				if(obj.Title.length == 0 || obj.Title.length > 64 ||
					obj.About.length == 0 || obj.About.length > 64 ||
					document.getElementById('tb_nodetags').value.length == 0 || document.getElementById('tb_nodetags').value.length > 64 ||
					obj.Type == undefined) {
					plus.nativeUI.toast('数据不符合规范');
					return;
				}
				var state = app.getState();
				mui.ajax(localStorage.getItem('$svc') + '/api/hub/' + hubid + "/nodes", {
					dataType: 'json',
					type: 'post',
					data: JSON.stringify(obj),
					headers: {
						'Content-Type': 'application/json',
						"Authorization": state.token
					},
					success: function(data) {
						if(data.ok == 1) {
							plus.nativeUI.toast('提交成功');
							document.getElementById('tb_nodetitle').value = "";
							document.getElementById('tb_nodeabout').value = "";
							document.getElementById('tb_nodetags').value = "";
						} else {
							plus.nativeUI.toast(data.err);
						}
					},
					error: function(xhr, type, errorThrown) {
						plus.nativeUI.toast(Error(xhr.responseText));
					}
				});
			})

			document.getElementById('bt_node_add_cancel').addEventListener("tap", function() {
				var goback = plus.webview.getWebviewById('hub_mg.html');
				plus.webview.show(goback, "fade-in", 300);
			})

			var userPicker = new mui.PopPicker();
			userPicker.setData([{
				value: 1,
				text: '控制器-开关'
			}, {
				value: 2,
				text: '控制器-自定义型'
			}, {
				value: 3,
				text: '控制器-约束型'
			}, {
				value: 4,
				text: '传感器-数值型'
			}, {
				value: 5,
				text: '传感器-GPS'
			}, {
				value: 6,
				text: '传感器-自定义型'
			}, {
				value: 7,
				text: '传感器-图片'
			}]);
			var showUserPickerButton = document.getElementById('showUserPicker');
			var tb_hubtype = document.getElementById('tb_hubtype');
			var ndtype;
			showUserPickerButton.addEventListener('tap', function(event) {
				userPicker.show(function(items) {
					ndtype = items[0];
					tb_hubtype.value = ndtype.text;
					//返回 false 可以阻止选择框的关闭
					//return false;
				});
			}, false);
		</script>
	</body>

</html>