<!--// $Id$ //-->

{css}

<form method="GET" action="?m=netdevedit" name="connect" id="connect-form">
</form>

{tab_container id="netdevconnbox"}

	{tab_header content_id="devicedevices"}
		{tab_header_cell icon="lms-ui-icon-netdev"}
			<strong>{if empty($netdevlist)}{$netdevlist=array()}{/if}{t a=$netdevlist|@count}Connected devices ($a):{/t}</strong>
		{/tab_header_cell}
	{/tab_header}

	{tab_contents id="devicedevices"}

		{tab_table}

			{if $netdevlist}
			<div class="lms-ui-tab-table-row header">
				<div class="lms-ui-tab-table-wrapper col-8">
					<div class="lms-ui-tab-table-wrapper name-netnode-location-link col-5">
						<div class="lms-ui-tab-table-wrapper name-netnode-location col-3">
							<div class="lms-ui-tab-table-column name">
								{icon name="netdev" class="fa-fw"}
								<strong>
									{trans("Name")} / {trans("Producer")}
								</strong>
							</div>
							<div class="lms-ui-tab-table-column netnode">
								{icon name="netnode" class="fa-fw"}
								{trans("Network node")}
							</div>
							<div class="lms-ui-tab-table-column location">
								{icon name="location" class="fa-fw"}
								{trans("Location:")}
							</div>
						</div>
						<div class="lms-ui-tab-table-wrapper link col-2">
							<div class="lms-ui-tab-table-column link-tech">
								{trans("Link technology:")}
							</div>
							<div class="lms-ui-tab-table-column link-speed">
								{trans("Link speed:")}
							</div>
						</div>
					</div>
					<div class="lms-ui-tab-table-wrapper id-port-taken-ports-used-ports col-4">
						<div class="lms-ui-tab-table-wrapper id-port col-2">
							<div class="lms-ui-tab-table-column id">
								{trans("ID:")}
							</div>
							<div class="lms-ui-tab-table-column port">
								{trans("Port")}:
							</div>
						</div>
						<div class="lms-ui-tab-table-wrapper taken-ports-used-ports col-2">
							<div class="lms-ui-tab-table-column taken-ports">
								{trans("Dest. port")}:
							</div>
							<div class="lms-ui-tab-table-column used-ports">
								<i class="lms-ui-icon-plug"></i> {trans("Ports (used):")}
							</div>
						</div>
					</div>
				</div>

				<div class="lms-ui-tab-table-column buttons">
					&nbsp;
				</div>
			</div>
			{/if}

			{foreach $netdevlist as $netdevice}
			<div class="lms-ui-tab-table-row">
				<div class="lms-ui-tab-table-wrapper col-8">
					<div class="lms-ui-tab-table-wrapper name-netnode-location-link col-5">
						<div class="lms-ui-tab-table-wrapper name-netnode-location col-3">
							<div class="lms-ui-tab-table-column name" data-target-url="?m=netdevinfo&id={$netdevice.id}">
								{icon name="netdev" class="fa-fw"}
								<a name="{$netdevice.id}">
									<strong>
										{$netdevice.name}
										{if $netdevice.producer}
											/ {$netdevice.producer}
											{if !empty($netdevice.model)}
												/ {$netdevice.model}
											{/if}
										{/if}
									</strong>
									<br>
									{icon name="empty" class="fa-fw"}
									{if !empty($netdevice.devtypename)}{strip}
										(
										{trans($netdevice.devtypename)}
										&nbsp;-&nbsp;
										{if empty($netdevice.devtypepassive)}{trans("<!netdevmodeltype>active")}{else}{trans("<!netdevmodeltype>passive")}{/if}
										)
									{/strip}{/if}
								</a>
							</div>
							<div class="lms-ui-tab-table-column netnode" data-target-url="?m=netnodeinfo&id={$netdevice.netnodeid}">
								{if strlen($netdevice.netnodename)}
									{icon name="netnode" class="fa-fw"}
									<a name="{$netdevice.netnodeid}">
										<strong>
											{$netdevice.netnodename}
										</strong>
									</a>
								{/if}
							</div>
							<div class="lms-ui-tab-table-column location" data-target-url="?m=netdevinfo&id={$netdevice.id}">
								{if $netdevice.location}
									{$netdevice.location}
									{icon name="location" class="fa-fw"}
									{if $netdevice.borough_name}
										({$netdevice.state_name} / {$netdevice.district_name} / {$_BOROUGHTYPES[$netdevice.borough_type]} {$netdevice.borough_name})
									{/if}
								{else}
									-
								{/if}
							</div>
						</div>
						<div class="lms-ui-tab-table-wrapper link col-2">
							<div class="lms-ui-tab-table-column link-tech" id="dev-link-tech-{$netdevice.id}" data-target-url="?m=netdevinfo&id={$netdevice.id}">
								{if $netdevice.linktechnology}{$_LINKTECHNOLOGIES[$netdevice.linktype][$netdevice.linktechnology]}{else}-{/if}
								{if $netdevice.linktype == $smarty.const.LINKTYPE_WIRELESS && ($netdevice.srcradiosector || $netdevice.dstradiosector)} ({if $netdevice.srcradiosector}{$netdevice.srcradiosector}{else}-{/if}/{if $netdevice.dstradiosector}{$netdevice.dstradiosector}{/if}){/if}
							</div>
							<div class="lms-ui-tab-table-column link-speed" id="dev-link-speed-{$netdevice.id}" data-target-url="?m=netdevinfo&id={$netdevice.id}">
								{if $netdevice.linkspeed}{$_LINKSPEEDS[$netdevice.linkspeed]}{else}-{/if}
							</div>
						</div>
					</div>
					<div class="lms-ui-tab-table-wrapper id-port-taken-ports-used-ports col-4">
						<div class="lms-ui-tab-table-wrapper id-port col-2">
							<div class="lms-ui-tab-table-column id" data-target-url="?m=netdevinfo&id={$netdevice.id}">
								({$netdevice.id|string_format:"%04d"})
							</div>
							<div class="lms-ui-tab-table-column port" data-target-url="?m=netdevinfo&id={$netdevice.id}" id="dev-link-srcport-{$netdevice.id}">
								[{if $netdevice.srcport}{$netdevice.srcport}{else}-{/if}]
							</div>
						</div>
						<div class="lms-ui-tab-table-wrapper taken-ports-used-ports col-2">
							<div class="lms-ui-tab-table-column taken-ports">
								<span id="dev-link-port-{$netdevice.id}" class="dev-link-port" data-src-netdev="{$netdev.id}" data-dst-netdev="{$netdevice.id}">
									{capture assign="netlinkhint"}{strip}
										<span>
											{trans("Link type:")} {$_LINKTYPES[$netdevice.linktype]}
											<br>
											{if $netdevice.linktype == $smarty.const.LINKTYPE_FIBER && strlen($netdevice.linecount)}
												{trans("Fiber/line count:")} {$netdevice.linecount}
												<br>
											{/if}
											{if $netdevice.linktype == $smarty.const.LINKTYPE_FIBER && strlen($netdevice.usedlines)}
												{trans("Used fibers/lines:")} {$netdevice.usedlines}
												<br>
											{/if}
											{if $netdevice.linktype == $smarty.const.LINKTYPE_FIBER && strlen($netdevice.availablelines)}
												{trans("Available fibers/lines:")} {$netdevice.availablelines}
												<br>
											{/if}
											{if $netdevice.linktype == $smarty.const.LINKETYPE_WIRELESS}
												{if $netdevice.srcradiosector}
													{trans("Radio sector:")} {$netdevice.srcradiosector}
													<br>
												{/if}
												{if $netdevice.dstradiosector}
													{trans("Destination radio sector:")} {$netdevice.dstradiosector}
													<br>
												{/if}
											{/if}
											{if $netdevice.linktechnology}
												{trans("Link technology:")} {$_LINKTECHNOLOGIES[$netdevice.linktype][$netdevice.linktechnology]}
												<br>
											{/if}
											{trans("Link speed:")} {$_LINKSPEEDS[$netdevice.linkspeed]}
											{if !empty($netdevice.routetype)}
												<p class="lms-ui-route-type">
													{trans("Duct type:")} {$_NETWORK_DUCT_TYPES[$netdevice.routetype]}
												</p>
											{/if}
											{if !empty($netdevice.foreignentity)}
												<p class="lms-ui-foreign-entity">
													{trans("Foreign entity:")} {$netdevice.foreignentity}
												</p>
											{/if}
									{/strip}{/capture}
									<i class="{if $netdevice.linktype == $smarty.const.LINKTYPE_WIRELESS}lms-ui-icon-wireless{elseif $netdevice.linktype == $smarty.const.LINKTYPE_FIBER}lms-ui-icon-fiber{else}lms-ui-icon-wired{/if}"
										{tip trigger="dev-link-port-{$netdevice.id}" text=$netlinkhint}>
									</i>
								</span>
								<span id="dev-link-dstport-{$netdevice.id}">
									[{if $netdevice.dstport}{$netdevice.dstport}{else}-{/if}]
								</span>
							</div>
							<div class="lms-ui-tab-table-column used-ports" data-target-url="?m=netdevinfo&id={$netdevice.id}">
								<i class="lms-ui-icon-plug"></i> {$netdevice.ports} ({$netdevice.takenports})
							</div>
						</div>
					</div>
				</div>
				<div class="lms-ui-tab-table-column buttons">
					{button type="link" class="disconnectbox" href="?m=netdevedit&action=disconnect&id={$netdev.id}&devid={$netdevice.id}" icon="delete" tip="Delete connection"}
				</div>
			</div>
			{foreachelse}

			<div class="lms-ui-tab-empty-table">
				{trans("No such connected devices.")}
			</div>
			{/foreach}

		{/tab_table}

		{tab_button_panel}
			{tab_buttons}
				{if $netdev.ports == $netdev.takenports}
					<span class="lms-ui-tab-buttons message">
						<strong>{trans("All ports in that device are in use.")}</strong>
					</span>
				{elseif $restnetdevlist == NULL}
						<strong>{trans("No such devices for connection.")}</strong>
					</span>
				{else}
					<INPUT TYPE="HIDDEN" NAME="m" VALUE="netdevedit" form="connect-form">
					<INPUT TYPE="HIDDEN" NAME="id" VALUE="{$netdev.id}" form="connect-form">
					<INPUT TYPE="HIDDEN" NAME="action" VALUE="connect" form="connect-form">

					<div class="new-link">
						<div>
							<strong>{trans("New link")}</strong>
						</div>
						<div>
							<div>
								<label>
									{trans("Device")}
									<SELECT NAME="netdev" id="srcnetdev" {tip class="lms-ui-advanced-select-test" trigger="link" text="Select from list device for connection"}
										onchange="get_radio_sectors_for_netdev()" form="connect-form">
										{foreach $restnetdevlist as $dev}
											{capture assign="netdevname"}{strip}
												{$dev.name}
												{if $dev.producer}
													&nbsp;(
													{$dev.producer}
													{if $dev.model}
														&nbsp;{$dev.model}
													{/if}
													)
												{/if}
												{if $dev.location}
													/ {$dev.location}
												{/if}
											{/strip}{/capture}
											<option value="{$dev.id}"{if $connect.id == $dev.id} selected{/if}>{strip}
												{if !empty($dev.netnodeid)}
													[{$dev.netnodename|escape}]
													&nbsp;
												{/if}
												{$netdevname|trunescape:120}
											{/strip}</option>
										{/foreach}
									</SELECT>
									<a href="javascript: void(0);" onclick="return netDevChooseWin(document.connect.elements['netdev'], {$netdev.id});" {tip trigger="netdev" text="Search device"}>&raquo;&raquo;&raquo;</A>
								</label>

								<label>
									{trans("Port")}
									<INPUT type="text" name="srcport" value="{if $connect.srcport}{$connect.srcport}{/if}" size="2"
										{tip text="Enter port number in device for connection (optional)" trigger="srcport"}
										form="connect-form">
								</label>

								<SELECT NAME="srcradiosector" id="connboxsrcradiosector" {tip trigger="connboxsrcradiosector" text="Select radio sector"}
									{if $devlinktype != $smarty.const.LINKTYPE_WIRELESS} style="display: none;"{/if}
									form="connect-form">
									<OPTION value="0">{trans("— none —")}</OPTION>
								</SELECT>

								<label>
									{trans("Dest. port")}
									<INPUT type="text" name="dstport" value="{if $connect.dstport}{$connect.dstport}{/if}" size="2"
										{tip text="Enter port number in device to which device will be connected (optional)" trigger="dstport"}
										form="connect-form">
								</label>

								<SELECT NAME="dstradiosector" id="connboxdstradiosector" {tip trigger="connboxdstradiosector" text="Select radio sector"}
									{if $devlinktype != $smarty.const.LINKTYPE_WIRELESS} style="display: none;"{/if}
									form="connect-form">
									<OPTION value="0">{trans("— none —")}</OPTION>
									{foreach $netdev.radiosectors as $radiosector}
										<OPTION value="{$radiosector.id}"{if $radiosector.id == $netlinkdstradiosector} selected{/if}>{$radiosector.name}</OPTION>
									{/foreach}
								</SELECT>

								<select name="linktype" id="connboxlinktype" {tip trigger="linktype" text="Select link type"}
									onchange="change_devlinktype(this.options[this.selectedIndex].value)"
									form="connect-form">
									{foreach $_LINKTECHNOLOGIES as $linktype => $linktech}
										<option value="{$linktype}"{if $linktype == $devlinktype} selected{/if}>{$_LINKTYPES[$linktype]}</option>
									{/foreach}
								</select>

								<SELECT NAME="linktechnology" id="connboxlinktechnology" {tip trigger="connboxlinktechnology" text="Select link technology"}
									onchange="change_devlinktechnology(this.options[this.selectedIndex].value)"
									form="connect-form">
									<OPTION value="0">{trans("— unknown —")}</OPTION>
									{if !$devlinktype}{$devlinktype = 0}{/if}
										{foreach $_LINKTECHNOLOGIES[$devlinktype] as $linktechnologyidx => $linktechnology}
											<OPTION value="{$linktechnologyidx}"{if $linktechnologyidx == $devlinktechnology} selected{/if}>{$linktechnology}</OPTION>
										{/foreach}
								</SELECT>

								<SELECT name="linkspeed" id="connboxlinkspeed" {tip trigger="linkspeed" text="Select link speed"}
									form="connect-form">
									{foreach $_LINKSPEEDS as $key => $item}
										<OPTION VALUE="{$key}"{if $key==$devlinkspeed || (!$devlinkspeed && $key==100000)} selected{/if}>{$item}</OPTION>
									{/foreach}
								</SELECT>
							</div>

							<div>
								<select name="routetype" id="routetype" form="connect-form"
									{tip trigger="routetype" text="Select duct type"}>
									<option value="">{trans("— other —")}</option>
									{foreach Localisation::arraySort($_NETWORK_DUCT_TYPES) as $ducttypeid => $ducttypelabel}
										<option value="{$ducttypeid}"{if $ducttypeid == $devlinkroutetype} selected{/if}>{$ducttypelabel}</option>
									{/foreach}
								</select>
							</div>

							<div>
								<label>
									<span class="lms-ui-label line-fiber-property{if $devlinktype != $smarty.const.LINKTYPE_FIBER} lms-ui-disabled{/if}">
										{trans("Fiber/line count")}
									</span>
									<input type="text" name="linecount" form="connect-form" size="8"
										class="line-fiber-property"
										value="{if $devlinklinecount}{$devlinklinecount}{/if}"{if $devlinktype != $smarty.const.LINKTYPE_FIBER} disabled{/if}>
								</label>
								<label>
									<span class="lms-ui-label line-fiber-property{if $devlinktype != $smarty.const.LINKTYPE_FIBER} lms-ui-disabled{/if}">
										{trans("Used fibers/lines")}
									</span>
									<input type="text" name="usedlines" form="connect-form" size="8"
										class="line-fiber-property"
										value="{if $devlinkusedlines}{$devlinkusedlines}{/if}"{if $devlinktype != $smarty.const.LINKTYPE_FIBER} disabled{/if}>
								</label>
								<label>
									<span class="lms-ui-label line-fiber-property{if $devlinktype != $smarty.const.LINKTYPE_FIBER} lms-ui-disabled{/if}">
										{trans("Available fibers/lines")}
									</span>
									<input type="text" name="availablelines" form="connect-form" size="8"
										class="line-fiber-property"
										value="{if $devlinkavailablelines}{$devlinkavailablelines}{/if}"{if $devlinktype != $smarty.const.LINKTYPE_FIBER} disabled{/if}>
								</label>
							</div>

							<div>
								<label>
									<span class="lms-ui-label">
										{trans("Foreign entity")}
									</span>
									<select name="foreignentity" id="devlink-foreignentity" class="lms-ui-combobox"
										form="connect-form"
										data-value="{if $devlinkforeignentity}{$devlinkforeignentity}{/if}">
										{foreach $foreign_entities as $foreign_entity}
											<option value="{$foreign_entity.id|escape}"
												{if $foreign_entity.name == $devlinkforeignentity} selected{/if}
												>{$foreign_entity.name}{if !empty($foreign_entity.type)} ({trans("TEN")} {$foreign_entity.id}){/if}</option>
										{/foreach}
									</select>
								</label>
							</div>
						</div>
						<div>
							{button icon="save" onclick="javascript:document.connect.submit();" label="Connect"}
						</div>
					</div>
				{/if}
			{/tab_buttons}
		{/tab_button_panel}

	{/tab_contents}

{/tab_container}

<script>

	function change_devlinktype(linktype) {
		linktype = parseInt(linktype);
		var options = xjx.$('connboxlinktechnology').options;
		while (options.length)
			options.remove(0);
		options.add(new Option('{trans("— unknown —")}', 0));
		switch (linktype) {
			case 0:
				{foreach $_LINKTECHNOLOGIES[0] as $linktechnologyidx => $linktechnology}
				options.add(new Option('{$linktechnology}', {$linktechnologyidx}));
				{/foreach}
				break;
			case 1:
				{foreach $_LINKTECHNOLOGIES[1] as $linktechnologyidx => $linktechnology}
				options.add(new Option('{$linktechnology}', {$linktechnologyidx}));
				{/foreach}
				break;
			case 2:
				{foreach $_LINKTECHNOLOGIES[2] as $linktechnologyidx => $linktechnology}
				options.add(new Option('{$linktechnology}', {$linktechnologyidx}));
				{/foreach}
				break;
		}
		xjx.$('connboxsrcradiosector').style.display = (linktype == 1 ? '' : 'none');
		xjx.$('connboxdstradiosector').style.display = (linktype == 1 ? '' : 'none');

		$('input.line-fiber-property').prop('disabled', linktype != {$smarty.const.LINKTYPE_FIBER});
		$('.lms-ui-label.line-fiber-property').toggleClass('lms-ui-disabled', linktype != {$smarty.const.LINKTYPE_FIBER});
		$('[name="routetype"]').prop('disabled', linktype == {$smarty.const.LINKTYPE_WIRELESS});

		if (linktype == {$smarty.const.LINKTYPE_WIRELESS}) {
			var selected = xjx.$('srcnetdev').selectedIndex;
			if (selected) {
				netdev = xjx.$('srcnetdev').options[selected].value;
				xajax_getRadioSectorsForNetdev('radio_sectors_received_for_srcnetdev', netdev);
			}
		}
	}

	function change_devlinktechnology(linktechnology) {
		linktechnology = parseInt(linktechnology);
		var linktype = xjx.$('connboxlinktype').options[xjx.$('connboxlinktype').selectedIndex].value;
		if (linktype != 1)
			return;
		var netdev = xjx.$('srcnetdev').options[xjx.$('srcnetdev').selectedIndex].value;
		if (netdev !== undefined) {
			xjx.$('connboxsrcradiosector').disabled = true;
			xjx.$('connboxdstradiosector').disabled = true;
			xajax_getRadioSectorsForNetdev('radio_sectors_received_for_srcnetdev', netdev, linktechnology);
			xajax_getRadioSectorsForNetdev('radio_sectors_received_for_dstnetdev', {$netdev.id}, linktechnology);
		}
	}

	function get_radio_sectors_for_self_netdev() {
		xjx.$('connboxdstradiosector').disabled = true;
		xajax_getRadioSectorsForNetdev('radio_sectors_received_for_dstnetdev', {$netdev.id});
	}

	function get_radio_sectors_for_netdev() {
		xjx.$('connboxsrcradiosector').disabled = true;
		xajax_getRadioSectorsForNetdev('radio_sectors_received_for_srcnetdev', xjx.$('srcnetdev').options[xjx.$('srcnetdev').selectedIndex].value);
	}

	function radio_sectors_received_for_srcnetdev(radiosectors) {
		var options = xjx.$('connboxsrcradiosector').options;
		var oldvalue = options[xjx.$('connboxsrcradiosector').selectedIndex].value;
		while (options.length)
			options.remove(0);
		options.add(new Option('{trans("none")}', 0));
		if (radiosectors !== null) {
			radiosectors.forEach(function(elem) {
				var option = new Option(elem.name, elem.id);
				if (elem.id == oldvalue)
					option.selected = true;
				options.add(option);
			});
		}
		xjx.$('connboxsrcradiosector').disabled = false;
	}

	function radio_sectors_received_for_dstnetdev(radiosectors) {
		var options = xjx.$('connboxdstradiosector').options;
		var oldvalue = options[xjx.$('connboxdstradiosector').selectedIndex].value;
		while (options.length)
			options.remove(0);
		options.add(new Option('{trans("none")}', 0));
		if (radiosectors !== null) {
			radiosectors.forEach(function(elem) {
				var option = new Option(elem.name, elem.id);
				if (elem.id == oldvalue)
					option.selected = true;
				options.add(option);
			});
		}
		xjx.$('connboxdstradiosector').disabled = false;
	}

	{if $restnetdevlist[0]}
	xajax_getRadioSectorsForNetdev('radio_sectors_received_for_srcnetdev', {$restnetdevlist[0].id});
	{/if}

	$(function() {
		$('.disconnectbox').click(function() {
			confirmDialog($t("Are you sure, you want to delete that connection?"), this).done(function() {
				location.href = $(this).attr('href');
			});
			return false;
		});

		{if empty($devlinkforeignentity)}
			var foreignEntitySelection = $('[name="foreignentity"][form="connect-form"]');
			if (foreignEntitySelection.length) {
				foreignEntitySelection.scombobox('val', '');
			}
		{/if}
	});

</script>
