lisa-api
Version:
Lisa Javascript XMPP Library =============
138 lines (109 loc) • 4.07 kB
HTML
<html>
<head>
<title>A demonstration of the Compass XMPP API</title>
<script src='../lib/jquery.min.js'></script>
<script src='lib/jquery-ui.min.js'></script>
<script src='../lib/underscore.js'></script>
<script src='../lib/backbone.js'></script>
<script src='../lib/strophe.min.js'></script>
<script src='../lib/strophe.pubsub.js'></script>
<script src="../../LisaApi.js"></script>
<script src="client.js"></script>
<!-- Use this file to test the dashboard UI without making an XMPP connection -->
<!-- <script src="static.js"></script> -->
<!-- jqPlot for graphs -->
<!--[if lt IE 9]>
<script language="javascript" type="text/javascript" src="jqplot/excanvas.js"></script>
<![endif]-->
<script language="javascript" type="text/javascript" src="jqplot/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script>
<link href="client.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="jqplot/jquery.jqplot.min.css" />
</head>
<body>
<div id='log' style='display: none'></div>
<div id="login">
<div id="loginheader" class="clearthisgroup">
<div class="identity_name">
<h1>Compass API Demonstration</h1>
</div>
</div>
<div id="quadrants">
<div class="login">
<div class="title">Log in</div>
<div id="login_error" style="display: none"></div>
<div>
<form id="login_form" action="">
<ul>
<li><label>Username:</label><input type="text" id="login_username" size="50" /></li>
<li><label>Password:</label><input type="password" id="login_password" size="50" /></li>
<li><label>Server:</label><input type="text" id="login_server" size="50" /></li>
<li><input type="submit" id="login_submit" value="Log in" /></li>
</ul>
</form>
<ul>
<li><input type="submit" id="static" onclick="add_static_content()" value="Add static content" /></li>
</ul>
</div>
</div>
</div>
</div>
<div id='loading' style='display: none'>
<image src='img/loading.gif' />
<div id='status'></div>
</div>
<div id='container' style='display: none'>
<div id="header" class="clearthisgroup">
<div class="identity_name">
<h1 id="myuser"></h1>
</div>
<div class="dialanumber">
<form id="dial_form" action="">
<input type="text" size="20" name="dial_number" placeholder="enter a number to call" id="dial_number" />
<input type="submit" value="Dial" id="dial_submit" />
</form>
</div>
</div>
<div id="quadrants">
<div class="lefttop">
<div class="title">Current Calls</div>
<div id="current-calls"></div>
</div>
<div class="righttop">
<div class="title">Queues</div>
<div id="queue-list"></div>
</div>
<div class="leftbottom">
<div class="title">Call History</div>
<div id="call-history"></div>
</div>
<div class="rightbottom">
<div class="title">Queue graph</div>
<div id="chartdiv" style="height: 400px;"></div>
</div>
</div> <!-- end quadrants -->
</div>
<div id='templates' style='display: none'>
<div id='tpl_own_user' class='user_block contact_block block'>
<div class='user_name'></div>
<img src='img/user.png' class='avatar' />
<div class='user_status'></div>
</div>
<div id='tpl_user' class='user_block contact_block block'>
<div class='user_name'></div>
<img src='img/user.png' class='avatar' />
<div class='user_status'></div>
<a href='' class='call_button'>Dial at <span class='user_ext'></span></a>
</div>
<div id='tpl_queue' class='queue_block contact_block block'>
<div class='queue_name'></div>
<img src='img/queue.png' class='avatar' />
<div class='queue_agents'></div>
<div class='queue_calls'></div>
<div class='queue_waiting'></div>
</div>
<div id='tpl_call' class='call'></div>
</div>
</body>
</html>