<!DOCTYPE html>
<html  lang="en">
<head>
<title>Asterisk Call Status</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script> 

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">

<script> 
var auto_refresh = setInterval(
function()
{
var queue = $("#queue").val();
$('#queuestatus').load('queuestatus.php', {queue:queue});
$('#cdr').load('cdr.php');
$('#agents_on_call').load('agents_on_call.php', {queue:queue});
$('#agents_available').load('agents_available.php', {queue:queue});
$('#agents_unavailable').load('agents_unavailable.php', {queue:queue});
$('#call_queue').load('call_queue.php', {queue:queue});
}, 3000);
</script>

<script>
$(document).ready(function () {
$('#queuestatus').load('queuestatus.php');
$('#cdr').load('cdr.php');
$('#agents_on_call').load('agents_on_call.php');
$('#agents_available').load('agents_available.php');
$('#agents_unavailable').load('agents_unavailable.php');
$('#call_queue').load('call_queue.php');
});
</script>

<style type="text/css">
td.large {
color:red;
text-align:center;
font-size:18pt;
}
</style>

<style type="text/css">
tr.heading {
color:blue;
text-align:center;
font-size:12pt;
}
</style>

<style type="text/css">
p.total {
color:blue;
text-align:center;
font-size:30pt;
}
</style>

</head>
<body>

<div class="container">

<!-- show the queues available as a drop down list -->
<!-- the value is stored in the id queue and used in the jquery code above -->
<div class="row">
<div class="span12">
Queue : 
<select id=queue>
<option value=''>all</option>

<?php
$myfile = '/etc/asterisk/queues_additional.conf';
$lines = file($myfile);
foreach($lines as $queues){
 if (preg_match("/]/i", $queues)) {
 echo "<option>".substr($queues, 1, -2)."</option>";
 }
}
?>

</select><br />

</div>
</div>

<div class="row">
<div class="span1"></div>
<div class="span10" id="queuestatus"></div>
<div class="span1"></div>
</div>

<hr />

<div class="row">
<div class="span3" id="call_queue"></div>
<div class="span3" id="agents_on_call"></div>
<div class="span3" id="agents_available"></div>
<div class="span3" id="agents_unavailable"></div>
</div>

<hr />

<!-- show the current calls and recent calls from the Asterisk CDR -->
<div class="row">
<div class="span12" id="cdr"></div>
</div>

<hr />

</div>

</body>
</html>
