• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<%+header%>
2
3<h2><%:Thread Overview%></h2>
4<br />
5
6<div class="cbi-section-node">
7	<div class="table">
8		<!-- physical device -->
9		<div class="tr cbi-rowstyle-2">
10			<div class="td col-1 center middle">
11				<span class="ifacebadge"><img src="<%=resource .. "/icons/wifi.png"%>" id="wpan0" /> <%:wpan0%></span>
12			</div>
13			<div class="td col-7 left middle">
14				<big><strong><%:Generic MAC 802.15.4 Thread%></strong></big><br />
15			</div>
16			<div class="td middle cbi-section-actions">
17				<div>
18					<div></div>
19					<form action="<%=url('admin/network/thread_scan')%>" method="post">
20						<input type="hidden" name="token" value="<%=token%>" />
21						<input type="submit" class="cbi-button cbi-button-action important" title="<%:Scan and join network%>" value="<%:Scan%>"/>
22					</form>
23					<form action="<%=url('admin/network/thread_create')%>" method="post">
24						<input type="hidden" name="token" value="<%=token%>" />
25						<input type="submit" class="cbi-button cbi-button-add" title="<%:Create new network%>" value="<%:Create%>"/>
26					</form>
27				</div>
28			</div>
29		</div>
30		<!-- /physical device -->
31
32		<!-- network list -->
33		<div class="tr cbi-rowstyle-1">
34			<div class="td col-1 center middle">
35			</div>
36			<div class="td col-7 left middle" id="status">
37				<em><%: Collecting data... %></em>
38			</div>
39			<div class="td middle cbi-section-actions">
40				<div id="action">
41				</div>
42			</div>
43		</div>
44		<!-- /network list -->
45	</div>
46</div>
47
48<br />
49<h2><%:Neighbors%></h2>
50<br />
51
52<div class="table" id="neighbors">
53	<div class="tr table-titles">
54		<div class="th col-2 center"><%:Signal%></div>
55		<div class="th col-1 center"><%:Role%></div>
56		<div class="th col-4 center"><%:RLOC16%></div>
57		<div class="th col-2 center"><%:Age%></div>
58		<div class="th col-2 center"><%:Avg RSSI%></div>
59		<div class="th col-2 center"><%:Last RSSI%></div>
60	</div>
61	<div class="tr placeholder">
62		<div class="td"><em><%:Collecting data...%></em></div>
63	</div>
64</div>
65
66<div class="table" id="parent" style="display:none;">
67	<div class="tr table-titles">
68		<div class="th col-2 center"><%:Signal%></div>
69		<div class="th col-1 center"><%:Role%></div>
70		<div class="th col-4 center"><%:RLOC16%></div>
71		<div class="th col-2 center"><%:Age%></div>
72		<div class="th col-2 center"><%:LinkQualityIn%></div>
73		<div class="th col-2 center"><%:ExtAddress%></div>
74	</div>
75	<div class="tr placeholder">
76		<div class="td"><em><%:Collecting data...%></em></div>
77	</div>
78</div>
79<%+footer%>
80
81<script type="text/javascript" src="/luci-static/resources/handle_error.js"></script>
82<script type="text/javascript">//<![CDATA[
83	handle_error(GetURLParameter('error'));
84
85	XHR.poll(2, '<%=url('admin/network/thread_state')%>', null,
86		function(x, st)
87		{
88			var sheet = document.getElementById('status');
89			var action = document.getElementById('action');
90			if (st && sheet && action)
91			{
92					if(st.state != "disabled")
93					{
94						sheet.innerHTML = String.format(
95							'<strong><%:Network Name: %></strong> %s<%: | %>' +
96							'<strong><%:State: %></strong>%s<br />' +
97							'<strong><%:PAN ID: %></strong>%s<%:   |   %>' +
98							'<strong><%:Channel: %></strong>%d<br />',
99								st.networkname, st.state, st.panid, st.channel
100						);
101						action.innerHTML = String.format(
102							'<form class="inline" action="<%=url('admin/network/thread_stop')%>" method="post">' +
103								'<input type="hidden" name="token" value="<%=token%>" />' +
104								'<input type="submit" class="cbi-button cbi-button-neutral" title="<%:Disable this network%>" value="<%:Disable%>" />' +
105							'</form>' +
106							'<form class="inline" action="<%=url('admin/network/thread_setting')%>" method="post">' +
107								'<input type="hidden" name="token" value="<%=token%>" />' +
108								'<input type="submit" class="cbi-button cbi-button-action important" title="<%:Edit this network%>" value="<%:Edit%>"/>' +
109							'</form>' +
110							'<form class="inline" action="<%=url('admin/network/thread_view')%>" method="post">' +
111								'<input type="hidden" name="token" value="<%=token%>" />' +
112								'<input type="submit" class="cbi-button cbi-button-add" title="<%:View this network%>" value="<%:View%>"/>' +
113							'</form>'
114						);
115					}
116					else
117					{
118						sheet.innerHTML = String.format(
119							'<strong><%:Not connect to any Thread network%></strong><br />' +
120							'<%: Please Join or Create a Thread network.%>'
121						);
122					}
123			}
124		});
125	function percent_thread_signal(info){
126		var linkquality = Number(info.LinkQualityIn);
127
128		if (linkquality == 0)
129			return 0;
130		else if (linkquality == 1)
131			return 30;
132		else if(linkquality == 2)
133			return 60;
134		else
135			return 100;
136	}
137
138	function guess_thread_signal(info) {
139		var icon;
140		var scale = percent_thread_signal(info);
141
142		if (scale == 0)
143			icon = "<%=resource%>/icons/signal-0.png";
144		else if (scale == 30)
145			icon = "<%=resource%>/icons/signal-25-50.png";
146		else if (scale == 50)
147			icon = "<%=resource%>/icons/signal-50-75.png";
148		else
149			icon = "<%=resource%>/icons/signal-75-100.png";
150
151		return icon;
152	}
153
154	XHR.poll(2, '<%=url('admin/network/thread_neighbors')%>', null,
155		function(x, st)
156		{
157			if(st && st.state == 'child')
158			{
159				var tb = document.getElementById('parent');
160				document.getElementById('neighbors').style.display = "none";
161				if (tb)
162				{
163					var rows = [];
164					st.neighbor.forEach(function(bss) {
165						var icon = guess_thread_signal(bss);
166						var signal = percent_thread_signal(bss);
167						rows.push([
168							'<abbr title="LinkQualityIn: %s"><img src="%s" /><br /><small> %s%</small></abbr>'.format(bss.LinkQualityIn, icon, signal),
169							'<div class="col-1 center"> %s </div>'.format(bss.Role),
170							'<div class="col-4 center"> %s </div>'.format(bss.Rloc16),
171							'<div class="col-2 center"> %s </div>'.format(bss.Age),
172							'<div class="col-2 center"> %s </div>'.format(bss.LinkQualityIn),
173							'<div class="col-2 center"> %s </div>'.format(bss.ExtAddress),
174						]);
175					});
176					cbi_update_table(tb, rows, '<center><em><%:No information available%></em></center>');
177					tb.style.display = "table";
178				}
179			}
180			else if(st)
181			{
182				var tb = document.getElementById('neighbors');
183				document.getElementById('parent').style.display = "none";
184				if (tb)
185				{
186					var rows = [];
187					st.neighbor.forEach(function(bss) {
188						var icon = guess_thread_signal(bss);
189						var signal = percent_thread_signal(bss);
190						rows.push([
191							'<abbr title="LinkQualityIn: %s"><img src="%s" /><br /><small> %s%</small></abbr>'.format(bss.LinkQualityIn, icon, signal),
192							'<div class="col-1 center"> %s </div>'.format(bss.Role),
193							'<div class="col-4 center"> %s </div>'.format(bss.Rloc16),
194							'<div class="col-2 center"> %s </div>'.format(bss.Age),
195							'<div class="col-2 center"> %s </div>'.format(bss.AvgRssi),
196							'<div class="col-2 center"> %s </div>'.format(bss.LastRssi),
197						]);
198					});
199					cbi_update_table(tb, rows, '<center><em><%:No information available%></em></center>');
200					tb.style.display = "table";
201				}
202			}
203		});
204//]]></script>
205