openwrt-routing/luci-app-bmx6/files/usr/lib/lua/luci/view/bmx6/neighbours_j.htm

<%+header%>
<script type="text/javascript">//<![CDATA[

	var displayExtraInfo = function ( id ) {

		document.getElementById('extra-info').innerHTML = document.getElementById(id).innerHTML;
	}
	XHR.poll(5, '/cgi-bin/bmx6-info', { '$neighbours': '' },
		function(x, st)
		{
			var originators = st.neighbours[0].originators;
			var descriptions = st.neighbours[1].descriptions;

			var tb = document.getElementById('descriptions_table');

			if ( originators.length != descriptions.length )
			{
				var tr = tb.insertRow(-1);
				tr.className = 'cbi-section-table-row';
				var td = tr.insertCell(-1);
				td.colSpan = 7;
				td.innerHTML = '<em><br /><%:Some problem with JSON: lenght of originators and descriptions different. %></em>';
				td.innerHTML += '<em><%: Please perform a manually cache flush from a terminal: bmx6 -c --flushAll %></em>'
				return 1;
			}

			if ( originators && descriptions && tb)
			{
				/* clear all rows */
				while( tb.rows.length > 1 )
					tb.deleteRow(1);

				for( var i = 0; i < descriptions.length; i++ )
				{
					var tr = tb.insertRow(-1);
					var nodename =  descriptions[i].DESC_ADV.globalId.replace(/\.[^\.]+$/,"");
					tr.className = 'cbi-section-table-row cbi-rowstyle-' + ((i % 2) + 1);
					tr.insertCell(-1).innerHTML = '<a onclick="displayExtraInfo(\'ip-'+i+'\')"><img src=\"<%=resource%>/cbi/help.gif\" /></a>';
					tr.insertCell(-1).innerHTML = nodename;

					var extensions = descriptions[i].DESC_ADV.extensions;

					//Looking for the extensions
					var hna6 = [];
					var tun4in6 = [];
					var tun6 = [];
					for( var e = 0; e < extensions.length; e++)
					{
						if( extensions[e].HNA6_EXTENSION )
						{
							hna6 = extensions[e].HNA6_EXTENSION;
						}
						if ( extensions[e].TUN4IN6_NET_EXTENSION )
						{
							tun4in6 = extensions[e].TUN4IN6_NET_EXTENSION;
						}
					}

					var gateways = '<ul>';
					for ( var t = 0; t < tun4in6.length; t++)
					{
						if ( tun4in6[t].networklen == "32" )
							gateways += '<li><a href="http://' + tun4in6[t].network + '">' + tun4in6[t].network + '</a></li>';
						else
							gateways += "<li>"+tun4in6[t].network+'/'+tun4in6[t].networklen + ' | ' + tun4in6[t].bandwidth+'</li>';
					}
					gateways += '</ul>';

					//Adding HNAs with prefix=128 as main address
					var ipstxt = '';
					var address;
					var first = 1;
					var ipstxt_hidden = '<ul>';
					var hna6list = '<ul>';

					for( var e = 0; e < hna6.length; e++ )
					{
						address = hna6[e].address;
						prefix = hna6[e].prefixlen;
						if ( prefix == '128' )
							{
							if (first)
								{
								ipstxt += address;
								ipstxt_hidden += '<li><a href="http://['+address+']" >'+address+"</a></li>";
								first = 0;
								}
							else 	{
								ipstxt_hidden += '<li><a href="http://['+address+']" >'+address+"</a></li>";
								}
							}
						else	{
							hna6list += '<li>'+address+'/'+prefix+'</li>';
							}
					}
					hna6list += '</ul>';
					ipstxt_hidden += '</ul>';

					tr.insertCell(-1).innerHTML = ipstxt;

					tr.insertCell(-1).innerHTML = originators[i].viaDev;
					tr.insertCell(-1).innerHTML = originators[i].metric;
					tr.insertCell(-1).innerHTML = originators[i].lastDesc;
					tr.insertCell(-1).innerHTML = originators[i].lastRef;
					tr.insertCell(-1).innerHTML = originators[i].blocked;
					//tr.onclick = displayExtraInfo("ip-"+i);

					extrainfo = '<div id="ip-'+ i +'" class="hideme">' + "<div class='inforow'><br /><br /><h4>" + nodename + '</h4></div>\n' + "<div class='inforow'><h5>Available IPs</h5>\n<p>" + ipstxt_hidden + "</p></div>\n" + "<div class='inforow'><h5>Gateways announced</h5>\n<p>" + gateways + "</p></div>\n" + "<div class='inforow'><h5>Networks announced</h5>\n<p>" + hna6list + "</p></div>\n";

					extrainfo += "\n</div>";

					tr.insertCell(-1).innerHTML = extrainfo;

				}

				if( tb.rows.length == 1 )
				{
					var tr = tb.insertRow(-1);
						tr.className = 'cbi-section-table-row';

					var td = tr.insertCell(-1);
						td.colSpan = 7;
						td.innerHTML = '<em><br /><%:There are no nodes available.%></em>';
				}
			}
		}
	);
//]]></script>

<style>

	div.hideme{
		display: none;
	}

	div.info{
		background: #FFF;
		border: solid 1px;
		height: 80px;
		display: block;
		overflow: auto;
		text-align: center;
	}

	div.inforow{
		text-align:center;
		display:inline-block;
		width:20%;
		margin:5px;
		vertical-align:top;
	}

#extra-info ul { list-style: none outside none; margin-left: 0em; }

</style>
<div class="cbi-map">

<h2>Originators</h2>
<div class="cbi-map-descr"></div>
<div id="extra-info" class="info">
	<br />
	Click to the icon <img src="<%=resource%>/cbi/help.gif" /> to see individual node information
</div>
<fieldset class="cbi-section">
	<legend><%:Mesh nodes%></legend>
	<table class="cbi-section-table" id="descriptions_table">
		<tr class="cbi-section-table-titles">
			<th class="cbi-section-table-cell"></th>
			<th class="cbi-section-table-cell"><%:Hostname%></th>
			<th class="cbi-section-table-cell"><%:Primary IP%></th>
			<th class="cbi-section-table-cell"><%:Via Device%></th>
			<th class="cbi-section-table-cell"><%:Metric%></th>
			<th class="cbi-section-table-cell"><%:Last Desc%></th>
			<th class="cbi-section-table-cell"><%:Last Ref%></th>
			<th class="cbi-section-table-cell"><%:Blocked%></th>
		</tr>
		<tr class="cbi-section-table-row">
			<td colspan="8"><em><br /><%:Collecting data...%></em></td>
		</tr>
	</table>
</fieldset>

</div>
<a href="<%=link_non_js%>">Go to non JavaScript view</a>


<%+footer%>