Location: PHPKode > projects > Volunteer Management OpenSource Software > vmoss_alpha02/mod/vm/templates/volunteer/report.tpl
<a id="vmToggleDisplayLink" name="graphical" onClick="vmToggleDisplay();" style="cursor: pointer;">View Printer Friendly Version</a>
<br />
<br />

{php}
	$report_total_hours = 0;
	$report_total_payment = 0;
	$javascript = "";
	$next_row = 0;
{/php}

<center>
<div id="vmReportTitle">
	<b>Viewing Report For</b><br />
	{if $reportingSpecificVolunteers}
		<b>Specific Volunteers</b>
	{else}
		{if !is_null($reportProjName) && !is_null($reportOrgName)}
			<b>All Volunteers Part of Organization: </b>
			<b style="color: #C00;">{$reportOrgName}</b><br />
			<b>Restricting Results by Project:</b>
			<b style="color: #C00;">{$reportProjName}</b>
		{else if !is_null($reportProjName)}
			<b>Project: </b>
			<b style="color: #C00;">{$reportProjName}</b>
		{else if !is_null($reportOrgName)}
			<b>Organization: </b>
			<b style="color: #C00;">{$reportOrgName}</b>
		{else}
			<b>All Volunteers that Ever Worked on any Projects</b>
		{/if}
	{/if}
</div>
</center>
<br />

{if count($volunteers) > 0}
	<table align=center>
	    <thead>
	        <tr id="vmReportHeadings">
	            <td>Name</td>
		        <td>Status</td>
		        <td>Affiliation</td>
				<td>Total Positions Held</td>
				<td>Total Hours</td>
				<td>Total Monetary Value</td>
	        </tr>
	    </thead>
	    <tbody id="vmReportInfo">
	    {foreach $volunteers as $p_uuid => $vol}
	        <tr style="text-align: center; background-color: white; height: 20px;" id="volRow{$next_row}"
	        	{php}$next_row++;{/php}
	        	onMouseOver="this.style.backgroundColor = '#FFA';"
	        	onMouseOut="this.style.backgroundColor = 'white';">

	{* Volunteer's name *}
	            <td><a href='?mod=vm&act=default&vm_action=display_single&p_uuid={$p_uuid}'>{$vol.full_name}</a></td>

	{* Volunteer's status *}
	            <td>
	            	{if $vol['status'] == 'active'}
	            		<b style="color: green">Active</b>
	            	{else}
	            		<b style="color: #D00">Retired</b>
	            	{/if}
	            </td>

	{* Volunteer's affiliation *}
	            <td>{$vol.affiliation}</td>

	{* Reporting information *}
					{php}
						$vol_total_hours = 0;
						$vol_total_payment = 0;
						$vol_positions = 0;
						$this_row_num = $next_row - 1;

						$javascript .= "
								var temp_window = document.createElement('td');
								temp_window.style.border = '2px solid black';
								temp_window.style.backgroundColor = '#AFCAE4';
								temp_window.style.position = 'absolute';
								temp_window.style.display = 'none';
								temp_window.style.zIndex = '10';
								temp_window.style.padding = '5px 5px 5px 5px';
								temp_window.style.textAlign = 'left';
								temp_window.name = 'infoBubble';
								temp_window.innerHTML += '<br /><b name=\"vmBubbleFullName\" style=\"text-decoration: underline; color: white\">".str_replace("'", "\'", $vol['full_name'])."</b><br />';
							";

						if(!empty($vol['pay_info']))
						{
							foreach($vol['pay_info'] as $proj_id => $positions)
							{
								foreach($positions as $pos_id => $pos_info)
								{
									if($pos_id != 'project_name')
									{
										$vol_total_hours += $pos_info['hours'];
										$vol_total_payment += $pos_info['hours'] * $pos_info['payrate'];
										$vol_positions++;
										$javascript .= "
											temp_window.innerHTML += '<b style=\"margin-left: 40px; color: #008;\">Position: 		</b>".str_replace("'", "\'", $pos_info['title'])."<br />';
											temp_window.innerHTML += '<b style=\"margin-left: 80px; color: #800;\">Position Status: 	</b>".str_replace("'", "\'", $pos_info['status'])."<br />';
											temp_window.innerHTML += '<b style=\"margin-left: 80px; color: #800;\">Hours: 			</b>".number_format(round($pos_info['hours'], 1), 1)."<br />';
											temp_window.innerHTML += '<b style=\"margin-left: 80px; color: #800;\">Hourly Rate: 		</b>$".number_format(round($pos_info['payrate'], 2), 2)."<br />';
											temp_window.innerHTML += '<b style=\"margin-left: 80px; color: #080;\">Monetary Value: 	</b>$".number_format(round($pos_info['payrate'] * $pos_info['hours'], 2), 2)."<br /><br />';
										";
									}
									else
									{
										$javascript .= " temp_window.innerHTML += '<br /><b style=\"color: #D70;\">Project: </b>".str_replace("'", "\'", $pos_info)."<br />'; ";
									}
								}
							}
						}
						else
						{
							$javascript .= "
								temp_window.innerHTML += '<br /><b>(no positions held)</b><br /><br />';
							";
						}

						$report_total_hours += $vol_total_hours;
						$report_total_payment += $vol_total_payment;

						$vol_total_hours = number_format(round($vol_total_hours, 1), 1);
						$vol_total_payment = number_format(round($vol_total_payment, 2), 2);

						$javascript .= "
							var temp_row = document.getElementById('volRow".$this_row_num."');
							temp_row.appendChild(temp_window);
							try
							{
								temp_row.addEventListener('mouseover', vmMoveInfoBubble, false);
								temp_row.addEventListener('mouseout', vmHideInfoBubble, false);
								temp_row.addEventListener('mousemove', vmMoveInfoBubble, false);
							}
							catch(e)
							{
								temp_row.attachEvent('onmouseover', vmMoveInfoBubble);
								temp_row.attachEvent('onmouseout', vmHideInfoBubble);
								temp_row.attachEvent('onmousemove', vmMoveInfoBubble);
							}
						";
					{/php}
					<td>{$vol_positions}</td>
					<td>{$vol_total_hours}</td>
					<td>${$vol_total_payment}</td>
	        </tr>
	    {/foreach}
	    </tbody>
	</table>
{else}
	<center>(none)</center>
{/if}

<br />
<br />

<script type="text/javascript">

	/**
	 * Moves the info bubble
	 *
	 * @param e 		- the event that was fired to get here
	 * @return void
	 */

	function vmMoveInfoBubble(e)
	{
		var target;
		if(e.target != null)
			target = e.target;
		else
			target = e.srcElement;

		if(target.name == 'infoBubble')
		{
			//if we're here, then the event is happening on the info bubble itself, and not the row,
			//so we have to position it accordingly

			if(e.layerX != null)
			{
				target.style.left = target.offsetLeft + e.layerX + 5 + 'px';
				target.style.top = target.offsetTop + e.layerY + 5 + 'px';
			}
			else
			{
				target.style.left = target.offsetLeft + e.x + 5 + 'px';
				target.style.top = target.offsetTop + e.y + 5 + 'px';
			}
		}
		else
		{
			//get a reference to the actual row

			var row = target;
			while(row.tagName != 'TR')
				row = row.parentNode;

			for(var i = 0; i < row.childNodes.length; i++)
			{
				if(row.childNodes[i].name == 'infoBubble')
				{
					var node = row.childNodes[i];
					if(e.layerX != null)
					{
						node.style.left = e.layerX + 5 + 'px';
						node.style.top = e.layerY + 5 + 'px';
					}
					else
					{
						var newX = e.offsetX + 5;
						var newY = e.offsetY + 5;

						var tempNode = target;
						while(tempNode != null)
						{
							newX += tempNode.offsetLeft;
							newY += tempNode.offsetTop;
							tempNode = tempNode.offsetParent;
						}

						node.style.left = newX + 'px';
						node.style.top = newY + 'px';
					}
					node.style.display = 'block';
					break;
				}
			}
		}
	}

	/**
	 * Hides the info bubble over a volunteer's row
	 *
	 * @param e 		- the event that was fired to get here
	 * @return void
	 */

	function vmHideInfoBubble(e)
	{
		//get a referenece to the actual row

		var row;
		if(e.target != null)
			row = e.target;
		else
			row = e.srcElement;

		while(row.tagName != 'TR')
			row = row.parentNode;

		for(var i = 0; i < row.childNodes.length; i++)
		{
			if(row.childNodes[i].name == 'infoBubble')
			{
				row.childNodes[i].style.display = 'none';
				break;
			}
		}
	}

	/**
	 * A function to set up all of the info bubbles
	 *
	 * @param e 		- the event that was fired to get here
	 * @return void
	 */

	var vmGraphicalHead;
	var vmGraphicalBody;
	var vmPrinterBody;

	function vmSetupInfoBubbles(e)
	{
		//create and attach all of the info bubbles

		{$javascript}

		//store a reference to the entire default document

		vmGraphicalHead = document.getElementsByTagName('head')[0];
		vmGraphicalBody = document.getElementsByTagName('body')[0];

		/*
		 * Create a printer-friendly version of the same page
		 */

		//create and start the new 'head' and 'body' elements

		vmPrinterHead = document.createElement('head');
		vmPrinterBody = document.createElement('body');
		vmPrinterBody.innerHTML = '<h1 id="vmToggleDisplayLink" name="printer" onClick="vmToggleDisplay();" style="cursor: pointer; text-decoration: underline; color: #00F;">Back to Sahana</h1><br /><br /><hr />';
		vmPrinterBody.innerHTML += document.getElementById('vmReportTitle').innerHTML.replace(/color:.*?;/g, '') + '<hr/>';

		//get and store the headings from the report table

		var infoHeadings = document.getElementById('vmReportHeadings');
		var headers = new Array();

		for(var i = 0; i < infoHeadings.childNodes.length; i++)
		{
			if(infoHeadings.childNodes[i].tagName == 'TD')
				headers[headers.length] = infoHeadings.childNodes[i].innerHTML;
		}

		//get and store the actual report information from the report table, using the headings

		var infoBody = document.getElementById('vmReportInfo');
		for(var i = 0; i < infoBody.childNodes.length; i++)
		{
			if(infoBody.childNodes[i].tagName == 'TR')
			{
				var cellIndex = 0;
				vmPrinterBody.innerHTML += '<br /><br />';

				for(var j = 0; j < infoBody.childNodes[i].childNodes.length; j++)
				{
					var cell = infoBody.childNodes[i].childNodes[j];
					if(cell.tagName == 'TD' && cellIndex < headers.length)
					{
						vmPrinterBody.innerHTML += '<b>' + headers[cellIndex] + ': </b>' + cell.innerHTML.replace(/<.*?>/g, '') + '<br />';
						cellIndex++;
					}
					else if(cell.name == 'infoBubble')
					{
						var cellCode = cell.innerHTML;
						cellCode = cellCode.replace(/color.*?\w\w\w/gi, '');
						cellCode = cellCode.replace(/<b.*?name="vmBubbleFullName".*?>.*?<\/b>/gim, '');
						vmPrinterBody.innerHTML += cellCode;
					}
				}

				vmPrinterBody.innerHTML += '<hr />';
			}
		}

		var totalHours = document.getElementById('vmTotalHours').innerHTML;
		var totalPayment = document.getElementById('vmTotalPayment').innerHTML;

		vmPrinterBody.innerHTML += '<b>Total Hours Worked: </b>' + totalHours + '<br />';
		vmPrinterBody.innerHTML += '<b>Total Monetary Value: </b>' + totalPayment + '<br />';
	}

	/**
	 * Toggle between the printer friendly and graphical representation of the data
	 */

	function vmToggleDisplay()
	{
		var toggleLink = document.getElementById('vmToggleDisplayLink');

		if(toggleLink.name == 'graphical')
		{
			vmGraphicalHead.parentNode.replaceChild(vmPrinterHead, vmGraphicalHead);
			vmGraphicalBody.parentNode.replaceChild(vmPrinterBody, vmGraphicalBody);
		}
		else
		{
			vmPrinterHead.parentNode.replaceChild(vmGraphicalHead, vmPrinterHead);
			vmPrinterBody.parentNode.replaceChild(vmGraphicalBody, vmPrinterBody);
		}

	}

	//set up the info bubbles once the page has loaded

	try
	{
		window.addEventListener('load', vmSetupInfoBubbles, false);
	}
	catch(e)
	{
		window.attachEvent('onload', vmSetupInfoBubbles);
	}
</script>

<p>
	{php}
		$report_total_hours = number_format(round($report_total_hours, 1), 1);
		$report_total_payment = number_format(round($report_total_payment, 2), 2);
	{/php}

	<h3>Total Hours</h3>
	<b id="vmTotalHours">{$report_total_hours}</b>

	<br />
	<br />

	<h3>Total Monetary Value</h3>
	<b id="vmTotalPayment">${$report_total_payment}</b>
</p>
Return current item: Volunteer Management OpenSource Software