{include file="header.html"}

{title value=$layout.pagetitle link=$layout.pagelink}

{box}
    <form method="GET" action="?m=netdevlist" name="filter">
    <input type="submit" class="hiddenbtn">
    <input type="hidden" name="m" value="netdevlist">
    <input type="hidden" name="page" value="1">
	<div class="row">
	    
	    <div class="col-xs-4 col-sm-2 col-md-1 col-lg-1" style="text-align:right;margin-top:6px;">Status</div>
	    <div class="col-xs-8 col-sm-4 col-md-2 col-lg-2" style="margin-top:2px;">
		<select name="status" style="width:160px;" onchange="document.filter.submit();" class="form-control widthfull{if $listdata.status != '-1'} actives{/if}">
		<option value="-1"{if $listdata.status == '-1'} selected{/if}>{trans('-- all --')}</option>
		{foreach $_NSTATUS as $item => $key}
		<option value="{$item}" {if $item == $listdata.status} selected{/if}>{$key}</option>
		{/foreach}
		</select>
	    </div>
	    
	    <div class="col-xs-4 col-sm-2 col-md-1 col-lg-1" style="text-align:right;margin-top:6px;">Projekt</div>
	    <div class="col-xs-8 col-sm-4 col-md-2 col-lg-2" style="margin-top:2px;">
		<select name="project" style="width:160px;" onchange="document.filter.submit();" class="form-control widthfull{if $listdata.project != '-1'} actives{/if}">
		<option value="-1">{trans('-- all --')}</option>
		<option value="1"{if $listdata.project == '1'} selected{/if}>{trans('From root device')}</option>
		{section name='projectlist' loop=$projectlist}
		    <option value="{$projectlist[projectlist].id}"{if $projectlist[projectlist].id == $listdata.project} selected{/if}>{$projectlist[projectlist].name}</option>
		{/section}
		</select>
	    </div>
	    
	    <div class="col-xs-4 col-sm-2 col-md-1 col-lg-1" style="text-align:right;margin-top:6px;">Producent</div>
	    <div class="col-xs-8 col-sm-4 col-md-2 col-lg-2" style="margin-top:2px;">
		<select name="producer" style="width:160px;" onchange="document.getElementById('id_model').value='-1';document.filter.submit();" class="form-control widthfull{if $listdata.producer != '-1'} actives{/if}">
		<option value="-1">{trans('-- all --')}</option>
		{section name=producerlist loop=$producerlist}
		<option value="{$producerlist[producerlist].producer}"{if $listdata.producer == ($producerlist[producerlist].producer)} selected{/if}>{if empty($producerlist[producerlist].producer)}- bez producenta -{else}{$producerlist[producerlist].producer}{/if}</option>
		{/section}
		</select>
	    </div>
	    
	    <div class="col-xs-4 col-sm-2 col-md-1 col-lg-1" style="text-align:right;margin-top:6px;">Model</div>
	    <div class="col-xs-8 col-sm-4 col-md-2 col-lg-2" style="margin-top:2px;">
		<select name="model" id="id_model" style="width:160px;" onchange="document.filter.submit();" class="form-control widthfull{if $listdata.model != '-1'} actives{/if}">
		<option value="-1">{trans('-- all --')}</option>
		{section name=modellist loop=$modellist}
		<option value="{$modellist[modellist].model|upper}"{if $listdata.model == ($modellist[modellist].model|upper)} selected{/if}>{if empty($modellist[modellist].model)}- bez modelu -{else}{$modellist[modellist].model}{/if}</option>
		{/section}
		</select>
	    </div>
	    
	</div>
	
	<div class="row">
	    
	    <div class="col-xs-4 col-sm-2 col-md-1 col-lg-1" style="text-align:right;margin-top:6px;">Grupa</div>
	    <div class="col-xs-8 col-sm-4 col-md-2 col-lg-2" style="margin-top:2px;">
		<select name="group" style="width:160px;" onchange="document.filter.submit();" class="form-control widthfull{if $listdata.group != '-1'} actives{/if}" {tip text="Wybierz grupę dla interfejsów sieciowych"}>
		<option value="-1">{trans('-- all --')}</option>
		{section name=grouplist loop=$grouplist}
		<option value="{$grouplist[grouplist].id}"{if $listdata.group == ($grouplist[grouplist].id)} selected{/if}>{$grouplist[grouplist].name}</option>
		{/section}
		</select>
	    </div>
	    
	    <div class="col-xs-4 col-sm-2 col-md-1 col-lg-1" style="text-align:right;margin-top:6px;">Węzeł</div>
	    <div class="col-xs-8 col-sm-4 col-md-2 col-lg-2" style="margin-top:2px;">
	    <select name="networknode" style="width:160px;" onchange="document.filter.submit();" class="form-control widthfull{if $listdata.networknode != '-1'} actives{/if}">
			<option value="-1">{trans('-- all --')}</option>
			<option value="0"{if !$listdata.networknode} selected{/if}>-- BEZ WĘZŁA --</option>
			{section name=networknodelist loop=$networknodelist}
			<option value="{$networknodelist[networknodelist].id}"{if $listdata.networknode == $networknodelist[networknodelist].id} selected{/if}>{$networknodelist[networknodelist].name}</option>
			{/section}
			</select>
	    </div>
	    
	    <div class="col-xs-4 col-sm-2 col-md-1 col-lg-1" style="text-align:right;margin-top:6px;">Grupa węzła</div>
	    <div class="col-xs-8 col-sm-4 col-md-2 col-lg-2" style="margin-top:2px;">
	    <select name="groupw" style="width:160px;" onchange="document.filter.submit();" class="form-control widthfull{if $listdata.groupw != '-1'} actives{/if}" {tip text="Wybierz grupę dla węzłów sieciowych"}>
			<option value="-1">{trans('-- all --')}</option>
			{section name=groupwlist loop=$groupwlist}
			<option value="{$groupwlist[groupwlist].id}"{if $listdata.groupw == ($groupwlist[groupwlist].id)} selected{/if}>{$groupwlist[groupwlist].name}</option>
			{/section}
			</select>
	    </div>
	
	</div>


    </form>
    
    <div style="padding-right:2px;margin-top:15px;">
	<table style="width:100%;" cellpadding="0" cellspacing="0" class="table table-hover table-bordered table-striped" id="netdevlist">
	    <thead>
		<tr>
		    <th>LP</th>
		    <th>ID</th>
		    <th>Nazwa</th>
		    <th>Adres</th>
		    <th>Węzeł</th>
		    <th>Producent&nbsp;<br>Model</th>
		    <th>Porty&nbsp;<br>free/used/max</th>
		    <th class="not-export-col">&nbsp;</th>
		</tr>
	    </thead>
	</table>
    </div>
    
    {literal}
    <script type="text/javascript" language="JavaScript">
    <!--
	$(document).ready(function(){
	
	
	
	    var dt = $("#netdevlist").dataTable({
	    
		'serverSide' : true,
		'ajax' : {
		    'url' : "?m=netdevlist_ajax&popup=1&ajax=1",
		    'type' : 'POST',
		},
		'columns' : [
		    {
			'data'		: "lp",
			'name' 		: "lp",
			'sClass' 	: "textright column_lp netdev-card",
			'width'		: "1%",
			'orderable'	: false,
			'searchable'	: false,
		    },{
			'data' 		: "id",
			'name' 		: "id",
			'sClass' 	: "textright column_id nedev-card",
			'width' 	: "1%",
		    },{
			'data'		: "name",
			'name'		: "name",
			'sClass'	: "textleft column_name netdev-card",
			'width'		: "auto",
		    },{
			'data'		: "location",
			'name'		: "location",
			'sClass'	: "textleft column_location netdev-card",
			'width'		: "auto",
		    },{
			'data'		: "networknodename",
			'name'		: "networknodename",
			'sClass'	: "textleft column_networknodename networknode-card",
			'width'		: "auto",
		    },{
			'data'		: "producer",
			'name'		: "producer",
			'sClass'	: "textleft column_producer netdev-card",
			'width'		: "1%",
		    
		    },{
			'data'		: "ports",
			'name'		: "ports",
			'sClass'	: "textright column_ports netdev-card",
			'width'		: "1%",
		    },{
			'data'		: null,
			'name'		: "link",
			'defaultContent': "",
			'orderable'	: false,
			'searchable'	: false,
			'sClass'	: "textright nowrap quicklink column_links",
			'width'		: "1%",
		    }
		],
		"language" : 
			{
				buttons: {
				    colvis : "Widok"
				},
				"url" : "img/Polish.json"
			},
		'lengthMenu' : [[10,25,50,100,200],[10,25,50,100,200]],
		'order' : [[{/literal}{if get_profile('netdevlist_order')}{get_profile('netdevlist_order')}{else}2{/if}{literal},"{/literal}{if get_profile('netdevlist_direction')}{get_profile('netdevlist_direction')}{else}asc{/if}{literal}"]],
		'sDom' : '<"row"<"col-md-2"l><"col-md-6"B><"col-md-4"f>><"row"<"col-md-6"i><"col-md-6"p>>rtip',
		
		buttons : [
		    {
			extend : 'copyHtml5',
			exportOptions : {
			    columns : ':visible:not(.not-export-col)'
			}
		    },
		    {
			extend : 'csvHtml5',
			exportOptions : {
			    columns : ':visible:not(.not-export-col)',
			    format : {
				body : function(data,column,row) {
//				    if (column != 0 ) {
//					data = data.replace(/<br\s*\/?>/ig, "");
					data = data.replace(/&nbsp;/ig, "");
					data = data.replace(/(?:\r\n|\r|\n)/ig, " ");
//					data = data.replace(/\r\s*\/?>/ig, "");
				    data = data.replace(/<.*?>/ig, "");
//				    }
				    return data;
				}
			    }
			}
		    },
		    {
			extend : 'excelHtml5',
			exportOptions : {
			    columns : ':visible:not(.not-export-col)'
			}
		    },
		    {
			extend : 'pdfHtml5',
			exportOptions : {
			    columns : ':visible:not(.not-export-col)'
			},
			header : true,
			customize : function(config) {
			    config.pageSize = 'A4';
			    config.defaultStyle.fontSize = 7;
			    config.styles.tableHeader.width = '100%';
			    config.styles.tableHeader.fontSize = 7;
			    config.styles.tableHeader.bold = true;
			    config.styles.tableHeader.color = '#000000';
			    config.styles.tableHeader.fillColor = '#CCCCCC';
			    config.styles.title.alignment = 'left';
			    config.styles.title.bold = true;
			    config.styles.title.fontSize = 10;
			}
		    },
		    {
			extend : 'colvis',
			columns : [1,2,3,4,5,6],
			columnDefs:[
			    {
				className :'select-checkbox',
				targets : 0
			    }
			]
		    },
		],
		initComplete : function() {
		},
		stateSave : true,
		'pageLength' : {/literal}{if get_profile('pagelimit')}{get_profile('pagelimit')}{else}50{/if}{literal},
		
		'fnRowCallback' : function(nRow, aData, iDisplayIndex,iDisplayIndexFull) {
		    
		    var column_count = $("#netdevlist thead th").length -1;
//		    var column_name = -1;
//		    var column_ports = -1;
//		    for (i=0; i<column_count; i++) {
//			if ($('td',nRow).eq(i).hasClass('column_name')) {
//			    column_name = i;
//			}
//			if ($('td',nRow).eq(i).hasClass('column_ports')) {
//			    column_ports = i;
//			}
//			
//		    }
//		    
		    
		    
		    if (aData.networknodeid == 0)
			$('td',nRow).eq(column_count).append("<a href='?m=networknodeadd&create&int=" + aData.id +"' title=\"Utwórz węzeł na podstawie interfejsu\"><i class='fa fa-cubes'></i></a>");
		    
		    if (aData.takenports == 0)
			$('td',nRow).eq(column_count).append("<a href='?m=netdevdel&id=" + aData.id + "' onclick='return confirmLink(this,\"Potwierdź usunięcie interfejsu\");' title=\"usuń\"><i class='fa fa-fw fa-trash'></i></a>");
		    
		    $('td',nRow).eq(column_count).append("<a href='?m=netdevedit&id=" + aData.id + "'><i class='fa fa-fw fa-edit'></i></a>");
		    
		    $('td',nRow).eq(column_count).append("<a href='?m=netdevinfo&id=" + aData.id + "' target='_blank'><i class='fa fa-info-circle'></i></a>");
		},
	    
	    }); // end dataTable
	    
//	    dt.api().column(7).visible(false);
	    
	    setTimeout(function(){ 
		$("div.dataTables_filter").append("<select id='cloperator' class='form-control input-sm' onchange='change_operator(this);' style='margin-left:2px;' title='Operator wyszukiwania'><option value='or'>OR</option><option value='and'>AND</option></select>");
		$("#cloperator").val('{/literal}{$listdata.operator}{literal}');
		
	    }, 500);
	    
	    $("#netdevlist tbody").on('click','tr td.netdev-card',function() { 
		var tr = $(this).closest('tr');
		var row = dt.api().row( tr );
		self.location.href='?m=netdevinfo&id=' + row.data().id;
		
	    });
	    
	    $("#netdevlist tbody").on('click','tr td.networknode-card',function() { 
		var tr = $(this).closest('tr');
		var row = dt.api().row( tr );
		var idn = row.data().networknodeid;
		if (idn != 0)
		self.location.href='?m=networknodeinfo&idn=' + idn;
	    });
	
	
	}); // end ready
    
    //-->
    </script>
    {/literal}
{/box}

{include file="footer.html"}