Making A Page

Creating The Call Log

The example page that we’ll be creating for the quickstart is a call log for your OpenVBX instalation. With this page, you will be able to see what calls were made, when they were made, how long they lasted, and what the Status of the call is. This is both a helpful tool to have on your install of OpenVBX as well as a neat way to get started with creating pages.

The page starts by setting up a few local variables. First off an API Resource of your Twilio Account is assigned to $account. Next a limit is set to 50 to avoid returning every call in your history as that would get very time consuming as the list gets longer. Lastly the call is made to Twilio to get a page of the call history and assigns the resulting iterator to the $calls variable.

<?php

// We're making a call using the Services_Twilio library and 
// using the twilio credentials for this VBX instalation
$account = OpenVBX::getAccount();

// Set a limit of items per page
$limit = 50;
	
// Get the page of calls from Twilio
$calls = $account->calls->getPage(0, $limit, array())->getItems();

Next the page needs a few helper functions for the output. humanize() helps display computer friendly content in a human friendly manner. number_text() looks at the number given and determines wether its a phone number or a client id. If it is a client id then it pulls the appropriate user object and outputs the user information instead of the number. Lastly format_date() outputs a human friendly date represntation. These functions will be called when iterating over the returned calls list.

<?php

/**
 * Humanize strings
 *
 * @param string $status 
 * @param string $sep 
 * @return string
 */
function humanize($status, $sep = '-') 
{
	return ucwords(str_replace($sep, ' ', $status));
}

/**
 * Format a dialed object based on its type
 * $number will start with 'client:' if it was
 * a call made/answered with the browser phone
 *
 * @param string $number 
 * @return string
 */
function number_text($number) 
{
	if (preg_match('|^client:|', $number))
	{
		$user_id = str_replace('client:', '', $number);
		$user = VBX_User::get(array('id' => $user_id));
		$ret = $user->first_name.' '.$user->last_name.' (client)';
	}
	else
	{
		$ret = format_phone($number);
	}
	return $ret;
}

/**
 * Output a human readable date
 *
 * @param string $date 
 * @return string
 */
function format_date($date)
{
	$timestamp = strtotime($date);
	$date_string = date('M j, Y', $timestamp).'<br />'
					.date('H:i:s T', $timestamp);
	return $date_string;
}

To begin constructing the actual content of the page we will use a div with the class vbx-plugin. This will give the page a nice look that will match the rest of OpenVBX. If you’d like you can change the styles for this later. For headers in the page use the <h3> tag. For best organization we’ll use a table.

<div class="vbx-plugin">
	<h3>Call Log</h3>
	<p>Showing the last <?php echo $limit; ?> calls.</p>
	
	<table>
		<thead>
			<tr>
				<th>Number</th>
				<th>Start Time</th>
				<th>End Time</th>
				<th>Duration</th>
				<th>Called</th>
				<th>Status</th>
			</tr>
		</thead>
		<tbody>
		<?php foreach($calls as $call): ?>
			<tr>
				<td><?php echo number_text($call->from); ?></td>
				<td><?php echo format_date($call->start_time); ?></td>
				<td><?php echo format_date($call->end_time); ?></td>
				<td><?php echo $call->duration; ?> sec</td>
				<td><?php echo number_text($call->to); ?></td>
				<td><?php echo humanize($call->status); ?></td>
			</tr>
		<?php endforeach ?>
		</tbody>
	</table>
</div>

Getting Started