routes.html

<div class="contents">
	<div class="main-column ui-layout-west">
		<form action="#">
			<div class="search messageParam">
				<Label>Source</Label><br>
				<select id="ddsource" name="SourceOID"><option value="">Any</option></select><br>
				<Label>Destination</Label><br>
				<select id="dddestination" name="Destination"><option value="">Any</option></select><br>
				
				<Label>Result Type (Ctr + click)</Label><br>
				<select id="resultTypeInput" name="ResultType" multiple size='7'>
					<option value="">Any</option>
					<option value="LAB">LAB</option>
					<option value="LAB-MB">LAB-MB</option>
					<option value="LAB-BB">LAB-BB</option>
					<option value="LAB-PATH">LAB-PATH</option>
					<option value="RAD">RAD</option>
					<option value="TRANS">TRANS</option>
				</select><br>
				<Label>EMR</Label><br>
				<select id="ddemr" name="">
					<option value="">Any</option>
				</select><br>
				<button type="button" id="refreshRoutes" class="settings button-primary">Refresh</button>
			</div>
		</form>
	</div>
	<div class="main-column ui-layout-center">
		<div id="resize_wrapper">
			<table id="dataTable" class="display compact wrap" cellspacing="0" width="100%">
			     
			</table>
		</div>
	</div>
	<div class="detailColumn" id="detailColumnPopupRoute">
		<div class="detailsContents">
			<h3 class="button-primary maximize">Drag to Move</h3>
			<button class="button-primary closeDetail">Close</button>
			<br>
			<h2>Organization Information</h2>
			<br>
			<table class="detailTable">
				<tr id="conDetailsBlock">
					<th>
						<label>Route Details</label>
					</th>
					<td>
						<table id="breakoutDetailsTable">
							<tr>
								<td>Name: </td>
								<td id="OrgInfoName"></td>
							</tr>
							<tr>
								<td>Type: </td>
								<td id="OrgInfoType"></td>
							</tr>
							<tr>
								<td>Contact: </td>
								<td id="OrgInfoContact"></td>
							</tr>
							<tr>
								<td>Email: </td>
								<td id="OrgInfoEmail"></td>
							</tr>
							<tr>
								<td>Phone: </td>
								<td id="OrgInfoPhone"></td>
							</tr>
							<tr>
								<td>EMR: </td>
								<td id="OrgInfoEMR"></td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
			<h2 class="miniDataTableHeader">Providers</h2>
			<table id="providerTable" class="miniDataTable display compact wrap" cellspacing="0" width="100%">
			    <thead>
			        <tr>
			        	<th>NPI</th>
			        	<th>Last Name</th>
			        	<th>First Name</th>
			        </tr>
			    </thead>
			    <tbody>
			        <tr>
			        	<td></td>
			        	<td></td>
			            <td></td>
			        </tr>
			    </tbody>
			</table>
		</div>
	</div>
</div>
<script>
var table;
var footers = [];
var dynamicColumns = {
	"Active":0,        
	"OrganizationName":[0,"Organization Name"], 
	"SourceOID":[0,"Source OID"],      
	"ResultType":[0,"Result Type"],     
	"PatientClass":[0,"Patient Class"],   
	"ResultStatus":[0,"Result Status"],   
	"ProviderRole":[0,"Provider Role"],   
	"EMR":0,           
	"SendTo":[0,"Delivery Operation"],                     
	"MSH3":[1],          
	"MSH4":[1],          
	"MSH5":[1],          
	"MSH6":[1],          
	"Aggregate":[1],     
	"CreateTS":[1,"Create TS"],       
	"Delay":[1],      
	"PV13Location":[1,"PV13 Location"],  
	"PreserveProviders":[1,"Preserve Providers"], 
	"sourceorganization":[1,"Source Organization"], 
	"Transformations":[1],
	"Username":[1]
}
/* Formatting function for row details - modify as you need */
function format ( d ) {
    // `d` is the original data object for the row
    return '<div class="slider">' +
    	'<table cellpadding="5" cellspacing="0" border="0" style="float:left;padding-left:5px;">'+
			'<tr>'+
			    '<td>MSH-3:</td>'+
			    '<td>'+d.MSH3+'</td>'+
		    '</tr>'+
			'<tr>'+
		        '<td>MSH-4:</td>'+
		        '<td>'+d.MSH4+'</td>'+
			'</tr>'+
			'<tr>'+
			    '<td>MSH-5:</td>'+
			    '<td>'+d.MSH5+'</td>'+
			'</tr>'+
			'<tr>'+
				'<td>MSH-6:</td>'+
				'<td>'+d.MSH6+'</td>'+
			'</tr>'+
			'<tr>'+
				'<td>Aggregate:</td>'+
				'<td>'+d.Aggregate+'</td>'+
			'</tr>'+
			'<tr>'+
				'<td>Create TS:</td>'+
				'<td>'+d.CreateTS+'</td>'+
			'</tr>'+
			'<tr>'+
				'<td>Delay:</td>'+
				'<td>'+d.Delay+'</td>'+
			'</tr>'+
			'<tr>'+
				'<td>PV13 Location:</td>'+
				'<td>'+d.PV13Location+'</td>'+
			'</tr>'+
			'<tr>'+
				'<td>Preserve Providers:</td>'+
				'<td>'+d.PreserveProviders+'</td>'+
			'</tr>'+
			'<tr>'+
				'<td>Source Organization:</td>'+
				'<td>'+d.sourceorganization+'</td>'+
			'</tr>'+
			'<tr>'+
				'<td>Transformations:</td>'+
				'<td>'+d.Transformations+'</td>'+
			'</tr>'+
			/*
			'<tr>'+
				'<td>Username:</td>'+
				'<td>'+d.Username+'</td>'+
			'</tr>'+
			*/
	    '</table>' +
    '</div>';
}
	
// Highlights all the appropriate cells in a given row
function highlightSelected(td) {
	td.parent('tr').find('td:not(.details-control)').each (function() {
   		$(this).addClass('selected_row')
   	});
}
	
function populateProviderTable(destination) {
	// Attempt to destroy table so that if you're reloading instead of initially instantiating, it won't error
	try {
		table.destroy();
		table, columns, a, b, result = "";
	// We don't care if it fails
	} catch (e){}
	
	$('#resize_wrapper_search').show("normal");
	var data = {}
	var payload = {
		"destination":destination,
  		};
	data.token = {"token":getCookie("token")};
	data.payload = payload;
	
	data = JSON.stringify(data);
	// Datatable definition
	table = $('#providerTable').DataTable( {
		paging: false,
		orderCellsTop: true,
        "oLanguage": {
        	"sSearch": "",
        	"sEmptyTable": "No Data found based on parameters"
        },
        "sDom": 'ift',
        //"sDom": '<"top"lpif>t<"bottom"><"clear">',
		"ajax": {
			"url":serverURL+"providers/" + data,
			"dataSrc": ""
		},
		"columns": [
            { data: "NPI" },
            { data: "LastName" },
            { data: "FirstName" },
		],
		//"order": [[0, 'dec']],
		"order": [[1, 'asc'],[2, 'asc']],
		//"aDataSort": [ 1, 2 ],
		"initComplete": function( settings, json ) {
			$('#OrgInfoName').text(json[0].OrganizationName)
			$('#OrgInfoType').text(json[0].Type)
			$('#OrgInfoContact').text(json[0].Contact)
			$('#OrgInfoEmail').text(json[0].Email)
			$('#OrgInfoPhone').text(json[0].Phone)
			$('#OrgInfoEMR').text(json[0].EMR)
		}
	});
	$('.dataTables_wrapper .dataTables_filter input').attr("placeholder", '\uD83D\uDD0E Search All Columns');
}
	
// When the page loads we populate the table with the routes data
(function ($) {
	// Removes duplicate wrappers
	$('#detailColumnPopupRoute').each(function (i) {
	    $('[id="' + this.id + '"]').slice(1).remove();
	});
	// Details popup init
	$("#detailColumnPopupRoute").iziModal({
			width: "25%",
			top: 55,
			transitionIn: "fadeInUp",
			transitionOut: "fadeOutUp",
			overlay: false,
			openFullscreen: false,
	});
	
	$("#detailColumnPopupRoute").draggable({
		grid: [10,57],
		handle: 'h3',
	});
	
	$('.closeDetail').click(function() {
		$('#detailColumnPopupRoute').iziModal('close');
		$('tr td').removeClass('selected_row')
	});
	
	$("#ddsource").change(function () {
        getDestinations($(this).val())
    });
	
	// Column sorting, stops footer from triggering as well
	var asc = true
	$('#dataTable').on("click", 'th:not(tfoot tr th)', function(event) {
		var parent = $(event.target).parent()
	    var myIndex = $(parent).prevAll().length;
		if(asc) table.order([myIndex, "asc"]).draw()
		else table.order([myIndex, "dec"]).draw()
		asc = !asc
	})
	
	$('#dataTable').on('click', 'td:not(.details-control)', function (e) {
		e.preventDefault();
        e.stopPropagation();
        var destination = $(this).parent().find('td').eq(2).html()

        // Check the css if it's selected, if it is then the user is deselecting, and we close the dialog and end the function
        if ( $(this).hasClass('selected_row')) {
        	$('tr td').removeClass('selected_row')
        	// Close dialog
        	$('#detailColumnPopupRoute').iziModal('close');
        	return;
        }
        // Otherwise remove styling from whatever is selected and make this the new selection, and continue with the query
        else {
            $('tr td').removeClass('selected_row')
            highlightSelected($(this))
            // Open dialog
            //$('#detailColumnPopupRoute').iziModal('open');
        }
		$('#detailColumnPopupRoute').iziModal('open');
		populateProviderTable(destination);
	});
	
	$("#refreshRoutes").on("click",function() {
		location.reload();	
	});
	
	var data = {}
	var payload = {
  		};
	data.payload = payload;
	data = JSON.stringify(data);
	
	function getDestinations(source) {
		var data = {}
		if(source == "Any") {
			data.source = ""
		} else { data.source = source }
		
		data = JSON.stringify(data);
		// Destination
   		$.ajax({
   			url:serverURL+"destinationroute/" + data,
   			type: "GET",
   		    contentType: "application/json",
   		    dataType: "text",
   			error: function(response) { 
   		        console.log(response);
   		    },
   			success: function(response) {
   				$('#dddestination').empty()
				$('#dddestination').append('<option>Any</option>')
   				response = JSON.parse(response);
   				response.forEach(function(value) {
					var option=$('<option></option>').text(value.OrganizationName);
					$('#dddestination').append(option);
				})
   			}
   		});
	}
	// Source
  		$.ajax({
  			url:serverURL+"source/" + data,
  			type: "GET",
  		    contentType: "application/json",
  		    dataType: "text",
  			error: function(response) { 
  		        console.log(response);
  		    },
   		success: function(response) {
  			$('#ddsource').empty()
			$('#ddsource').append('<option>Any</option>')
			response = JSON.parse(response);
			response.forEach(function(value) {
				var option=$('<option></option>').text(value.sourceorganization);
				$('#ddsource').append(option);
			})
			getDestinations($('#ddsource').val())
		}
  		});
  		// EMR
  		$.ajax({
  			url:serverURL+"emr/" + data,
  			type: "GET",
  		    contentType: "application/json",
  		    dataType: "text",
  			error: function(response) { 
  		        console.log(response);
  		    },
  			success: function(response) {
  				response = JSON.parse(response);
  				response.forEach(function(value) {
				var option=$('<option></option>').text(value.EMR);
				$('#ddemr').append(option);
			})
  			}
  		});
	$('#resize_wrapper').show("normal");
	var data = {}
	data = JSON.stringify(data);
	
	columns = $('.contents').layout({
	  	west: {
	       resizable: false,
	       slidable: false,
	       togglerLength_closed: 200, //toggler height (length)
	       togglerLength_open: 200,
	       spacing_closed: 10, //toggler width
	       spacing_open: 5,
	  	},
	  	center: {
	    },
	  });
	
	var pageLength =  localStorage.getItem('dataTable_length') || 10;
	
    var table = $('#dataTable').DataTable( {
    	paging: true,
		orderCellsTop: true,
		pageLength:parseInt(pageLength),
        "oLanguage": {
        	"sSearch": "",
        	"sEmptyTable": "No Data found based on parameters"
        },
        "sDom": '<"top"lpif>t<"bottom"><"clear">',
    	"ajax": {
			"url":serverURL+"routes/"+data,
			"dataSrc": "" },
		// This section defines what data is being grabbed. The first element is the hidden section that is activated onclick.
        "columns": buildDynamicDataTable($('#dataTable'), dynamicColumns),
        "order": [[2, 'asc']],
     	// Conditional formatting for inactive routes to look grayed out
		rowCallback: function(row, data, index) {
		    if (data['Active'] == '0') {
		    	$(row).find('td:not(.details-control)').each (function() {
		    		$(this).addClass('inactive')
		    	}); 
		    }
		}
    });
    
    hideColumns(table, dynamicColumns)
    
    // Individual column search DOM definition. We add the headers to an array for future use. This is because when the
	// datatable is refreshed, the header values are undefined for some reason. My hotfix is saving their values in an unmutable array
	$('#dataTable tfoot th').each( function (i) {
		var headerTitle;
		var title = "&#x1F50E;"
		// Check if the array is full
		if (footers.length != 11) {
			headerTitle = $(this).closest('tr').find('th').eq(i).text();
			footers.push(headerTitle)
		}
		// If not then keep adding to it
		else {
			headerTitle = footers[i]
		}
		// Format for each search box
        $(this).html( '<input type="text" placeholder="'+title+' '+headerTitle+'" data-index="'+i+'" />' );
    });
	// Disallow future changes to the array
	Object.freeze(footers);
	// Event handling for search columns
	$( table.table().container() ).on( 'keyup', 'tfoot input', function () {
        table
            .column( $(this).data('index') )
            .search( this.value )
            .draw();
    });
	
    $.fn.dataTable.ext.errMode = function ( settings, helpPage, message ) { 
		alert("Search timed out, please try again.")
	};

 	// Save the page length on change
	$('#dataTable_length').on("change", 'select', function(){
        // for persistant data
        localStorage.setItem('dataTable_length',$(this).val());
        // just for the session
        sessionStorage.setItem('dataTable_length',$(this).val());
    });
 
    $('.dataTables_wrapper .dataTables_filter input').attr("placeholder", '\uD83D\uDD0E Search All Columns');
 	
    // Left column search filtering
    $('#resultTypeInput').on('change', function(){
    	var search = [];
        $.each($('#resultTypeInput option:selected'), function(){
              search.push($(this).val());
        });
        search = search.join('|');
        table.column(4).search(search, true, false).draw(); 
	})
	$('#ddsource').on('change', function(){
        table.column(3).search($(this).val(), true, false).draw(); 
	})
	$('#dddestination').on('change', function(){
        table.column(2).search($(this).val(), true, false).draw(); 
	})
	$('#ddemr').on('change', function(){
        table.column(8).search($(this).val(), true, false).draw(); 
	})
    
    $('.dataTables_scrollBody').css('height', ($(window).height() - 229));
    
    // Add event listener for opening and closing details
    $('#dataTable').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );
        var $hamburger = tr.find('.hamburger');
       
        if ( row.child.isShown() ) {
        	$hamburger.toggleClass("is-active");
        	$('div.slider', row.child()).slideUp( "fast", function () {
	            // This row is already open - close it
	            row.child.hide();
	            tr.removeClass('shown');
        	});
        }
        else {
            // Open this row
            row.child( format(row.data()) ).show();
            $('div.slider', row.child()).slideDown("fast");
            tr.addClass('shown');
            $hamburger.toggleClass("is-active");
        }
    });
})(jQuery);
</script>

<style>
#providerTable_info {
	color: black !important;
	margin: 0 0 0 5px;
}
</style>