retronetworking
/
freeswitch
13
0
Fork 0
Code Pull Requests Releases Activity
freeswitch/htdocs/portal/index.html

715 lines
17 KiB
HTML
Raw Normal View History

add portal, a nice GUI with pure html and javascript
2013-03-24 17:33:26 +00:00
<!DOCTYPE html>
<!--
/*
* The FreeSWITCH Portal Project
* Copyright (C) 2013-2013, Seven Du <dujinfang@gmail.com>
*
* Version: MPL 1.1
*
* The contents of this file are subject to the Mozilla Public License Version
* 1.1 (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
* http://www.mozilla.org/MPL/
*
* Software distributed under the License is distributed on an "AS IS" basis,
* WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
* for the specific language governing rights and limitations under the
* License.
*
* The Original Code is The FreeSWITCH Portal Project Software/Application
*
* The Initial Developer of the Original Code is
* Seven Du <dujinfang@gmail.com>
* Portions created by the Initial Developer are Copyright (C)
* the Initial Developer. All Rights Reserved.
*
* Contributor(s):
*
* Seven Du <dujinfang@gmail.com>
*
*
* index.html -- The FreeSWITCH Portal Project
*
*/
-->
<html lang="en">
<head>
<meta charset="utf-8">
Oops, how can I forget the title?
2013-04-22 15:18:49 +00:00
<title>FreeSWITCH Portal</title>
add portal, a nice GUI with pure html and javascript
2013-03-24 17:33:26 +00:00
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="assets/bootstrap/css/bootstrap.css" rel="stylesheet">
<style>
add copyright
2013-04-22 12:07:27 +00:00
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
#container {
min-height: 500px;
}
#footer {
text-align: center;
}
add portal, a nice GUI with pure html and javascript
2013-03-24 17:33:26 +00:00
</style>
<link href="assets/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="assets/js/html5shiv.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">FreeSWITCH Portal</a>
<div class="pull-right" id='ws-status' style="padding-top:5px"></div>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a id="menu-users" href="#users">Users</a></li>
<li><a id="menu-calls" href="#calls">Calls</a></li>
<li><a id="menu-channels" href="#channels">Channels</a></li>
<li><a href="#show">Show</a></li>
<li><a href="#about">About</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container" id="container">
add copyright
2013-04-22 12:07:27 +00:00
<div id="main">
<div id="calls" style="display:none"></div>
<div id="channels" style="display:none"></div>
</div>
add portal, a nice GUI with pure html and javascript
2013-03-24 17:33:26 +00:00
</div> <!-- /container -->
add copyright
2013-04-22 12:07:27 +00:00
<div class="container" id="footer">
&copy; <a href="http://www.freeswitch.org">FreeSWITCH.org</a>
Join us on <a href="http://www.cluecon.com">ClueCon</a>!
</div>
add portal, a nice GUI with pure html and javascript
2013-03-24 17:33:26 +00:00
<script type="text/x-handlebars" data-template-name="index">
add status on main page and add showFiles
2013-04-22 13:01:27 +00:00
<h1>Welcome to FreeSWITCH !</h1>
---- The World's First Cross-Platform Scalable FREE Multi-Protocol Soft Switch
<br>
<br>
<br>
<br>
<div id="serverStatus"></div>
add portal, a nice GUI with pure html and javascript
2013-03-24 17:33:26 +00:00
</script>
add show registrations
2013-04-22 14:33:14 +00:00
<script type="text/x-handlebars" data-template-name="showRegistrations">
<h1>Registrations</h1>
<div>
<table class="table">
<tr>
<th>Reg User</th>
<th>Realm</th>
<th>Expires</th>
<th>Network IP</th>
<th>Network Port</th>
<th>Network Proto</th>
<th>Hostname</th>
<th>Metadata</th>
<th>Token / Url</th>
</tr>
{{#each App.registrationsController.content}}
<tr>
<td>{{ reg_user }}</td>
<td>{{ realm }}</td>
<td>{{ expires }}</td>
<td>{{ network_ip }}</td>
<td>{{ network_port }}</td>
<td>{{ network_proto }}</td>
<td>{{ hostname }}</td>
<td>{{ metadata }}</td>
<td>{{ token }}<br>{{ url }}</td>
</tr>
{{/each}}
</table>
</div>
</script>
implement show modules
2013-04-22 15:11:34 +00:00
<script type="text/x-handlebars" data-template-name="showModules">
<h1>Modules</h1>
<div>
<table class="table">
<tr>
<th>Type</th>
<th>Name</th>
<th>iKey</th>
<th>Fileame</th>
</tr>
{{#each App.showModulesController.content}}
<tr>
<td>{{ type }}</td>
<td>{{ name }}</td>
<td>{{ ikey }}</td>
<td>{{ filename }}</td>
</tr>
{{/each}}
</table>
</div>
</script>
add portal, a nice GUI with pure html and javascript
2013-03-24 17:33:26 +00:00
<script type="text/x-handlebars" data-template-name="showApplications">
<h1>Applications</h1>
<div>
<table class="table">
<tr>
<th>Name</th>
<th>Description</th>
<th>Syntax</th>
<th>iKey</th>
</tr>
{{#each App.applicationsController.content}}
<tr>
<td>{{ name }}</td>
<td>{{ description }}</td>
<td>{{ syntax }}</td>
<td>{{ ikey }}</td>
</tr>
{{/each}}
</table>
</div>
</script>
<script type="text/x-handlebars" data-template-name="showEndpoints">
<h1>Endpoints</h1>
<div>
<table class="table">
<tr>
<th>Type</th>
<th>Name</th>
<th>iKey</th>
</tr>
{{#each App.showEndpointsController.content}}
<tr>
<td>{{ type }}</td>
<td>{{ name }}</td>
<td>{{ ikey }}</td>
</tr>
{{/each}}
</table>
</div>
</script>
<script type="text/x-handlebars" data-template-name="showCodecs">
<h1>Codecs</h1>
<div>
<table class="table">
<tr>
<th>Type</th>
<th>Name</th>
<th>iKey</th>
</tr>
{{#each App.showCodecsController.content}}
<tr>
<td>{{ type }}</td>
<td>{{ name }}</td>
<td>{{ ikey }}</td>
</tr>
{{/each}}
</table>
</div>
</script>
<script type="text/x-handlebars" data-template-name="showFiles">
add status on main page and add showFiles
2013-04-22 13:01:27 +00:00
<h1>Files</h1>
<div>
<table class="table">
<tr>
<th>Type</th>
<th>Name</th>
<th>iKey</th>
</tr>
fix the last commit and implement show APIs
2013-04-22 13:55:23 +00:00
{{#each App.showFilesController.content}}
add status on main page and add showFiles
2013-04-22 13:01:27 +00:00
<tr>
<td>{{ type }}</td>
<td>{{ name }}</td>
<td>{{ ikey }}</td>
</tr>
{{/each}}
</table>
</div>
add portal, a nice GUI with pure html and javascript
2013-03-24 17:33:26 +00:00
</script>
<script type="text/x-handlebars" data-template-name="showAPIs">
fix the last commit and implement show APIs
2013-04-22 13:55:23 +00:00
<h1>APIs</h1>
<div>
<table class="table">
<tr>
<th>Name /<br>Description</th>
<th>Syntax</th>
<th>iKey</th>
</tr>
{{#each App.showAPIsController.content}}
<tr>
<td>
<strong>{{ name }}</strong><br>
{{ description }}
</td>
<td><pre>{{ syntax }}</pre></td>
<td>{{ ikey }}</td>
</tr>
{{/each}}
</table>
</div>
add portal, a nice GUI with pure html and javascript
2013-03-24 17:33:26 +00:00
</script>
add show aliases, management, interface_types
2013-06-04 01:47:45 +00:00
<script type="text/x-handlebars" data-template-name="showAliases">
<h1>Aliases</h1>
<div>
<table class="table">
<tr>
<th>Sticky</th>
<th>Alias</th>
<th>Command</th>
<th>Hostname</th>
</tr>
{{#each App.showAliasesController.content}}
<tr>
<td>{{ sticky }}</td>
<td>{{ alias }}</td>
<td>{{ command }}</td>
<td>{{ hostname }}</td>
</tr>
{{/each}}
</table>
</div>
</script>
add show complete
2013-06-04 01:52:14 +00:00
<script type="text/x-handlebars" data-template-name="showCompletes">
<h1>Aliases</h1>
<div>
<table class="table">
<tr>
<th>Sticky</th>
<th>A1</th>
<th>A2</th>
<th>A3</th>
<th>A4</th>
<th>A5</th>
<th>A6</th>
<th>A7</th>
<th>A8</th>
<th>A9</th>
<th>A10</th>
<th>Hostname</th>
</tr>
{{#each App.showCompletesController.content}}
<tr>
<td>{{ sticky }}</td>
<td>{{ a1 }}</td>
<td>{{ a2 }}</td>
<td>{{ a3 }}</td>
<td>{{ a4 }}</td>
<td>{{ a5 }}</td>
<td>{{ a6 }}</td>
<td>{{ a7 }}</td>
<td>{{ a8 }}</td>
<td>{{ a9 }}</td>
<td>{{ a10 }}</td>
<td>{{ hostname }}</td>
</tr>
{{/each}}
</table>
</div>
</script>
add show aliases, management, interface_types
2013-06-04 01:47:45 +00:00
<script type="text/x-handlebars" data-template-name="showManagements">
<h1>Say</h1>
<div>
<table class="table">
<tr>
<th>Type</th>
<th>Name</th>
<th>iKey</th>
</tr>
{{#each App.showManagementsController.content}}
<tr>
<td>{{ type }}</td>
<td>{{ name }}</td>
<td>{{ ikey }}</td>
</tr>
{{/each}}
</table>
</div>
</script>
show say, chat, interfaces, limits
2013-06-04 01:25:19 +00:00
<script type="text/x-handlebars" data-template-name="showSays">
fix copy&paste typo
2013-06-04 01:34:35 +00:00
<h1>Say</h1>
show say, chat, interfaces, limits
2013-06-04 01:25:19 +00:00
<div>
<table class="table">
<tr>
<th>Type</th>
<th>Name</th>
<th>iKey</th>
</tr>
{{#each App.showSaysController.content}}
<tr>
<td>{{ type }}</td>
<td>{{ name }}</td>
<td>{{ ikey }}</td>
</tr>
{{/each}}
</table>
</div>
</script>
add show aliases, management, interface_types
2013-06-04 01:47:45 +00:00
<script type="text/x-handlebars" data-template-name="showChats">
fix copy&paste typo
2013-06-04 01:34:35 +00:00
<h1>Chat</h1>
show say, chat, interfaces, limits
2013-06-04 01:25:19 +00:00
<div>
<table class="table">
<tr>
<th>Type</th>
<th>Name</th>
<th>iKey</th>
</tr>
{{#each App.showChatsController.content}}
<tr>
<td>{{ type }}</td>
<td>{{ name }}</td>
<td>{{ ikey }}</td>
</tr>
{{/each}}
</table>
</div>
</script>
<script type="text/x-handlebars" data-template-name="showInterfaces">
fix copy&paste typo
2013-06-04 01:34:35 +00:00
<h1>Interfaces</h1>
show say, chat, interfaces, limits
2013-06-04 01:25:19 +00:00
<div>
<table class="table">
<tr>
<th>Type</th>
<th>Name</th>
<th>iKey</th>
</tr>
{{#each App.showInterfacesController.content}}
<tr>
<td>{{ type }}</td>
<td>{{ name }}</td>
<td>{{ ikey }}</td>
</tr>
{{/each}}
</table>
</div>
</script>
add show aliases, management, interface_types
2013-06-04 01:47:45 +00:00
<script type="text/x-handlebars" data-template-name="showInterfaceTypes">
<h1>Interface Types</h1>
<div>
<table class="table">
<tr>
<th>Type</th>
<th>Total</th>
</tr>
{{#each App.showInterfaceTypesController.content}}
<tr>
<td>{{ type }}</td>
<td>{{ total }}</td>
</tr>
{{/each}}
</table>
</div>
</script>
show tasks
2013-06-04 01:32:38 +00:00
<script type="text/x-handlebars" data-template-name="showTasks">
<h1>Tasks</h1>
<div>
<table class="table">
<tr>
<th>ID</th>
<th>Description</th>
<th>Group</th>
<th>SQL Manager</th>
<th>Hostname</th>
</tr>
{{#each App.showTasksController.content}}
<tr>
<td>{{ task_id }}</td>
<td>{{ task_desc }}</td>
<td>{{ task_group }}</td>
<td>{{ task_sql_manager }}</td>
<td>{{ hostname }}</td>
</tr>
{{/each}}
</table>
</div>
</script>
show say, chat, interfaces, limits
2013-06-04 01:25:19 +00:00
<script type="text/x-handlebars" data-template-name="showLimits">
<h1>Limits</h1>
<div>
<table class="table">
<tr>
<th>Type</th>
<th>Name</th>
<th>iKey</th>
</tr>
{{#each App.showLimitsController.content}}
<tr>
<td>{{ type }}</td>
<td>{{ name }}</td>
<td>{{ ikey }}</td>
</tr>
{{/each}}
</table>
</div>
</script>
add portal, a nice GUI with pure html and javascript
2013-03-24 17:33:26 +00:00
<script type="text/x-handlebars" data-template-name="show">
<h1>Show</h1>
add show registrations
2013-04-22 14:33:14 +00:00
{{#linkTo "showRegistrations"}} Registrations {{/linkTo}} |
implement show modules
2013-04-22 15:11:34 +00:00
{{#linkTo "showModules"}} Modules {{/linkTo}} |
add portal, a nice GUI with pure html and javascript
2013-03-24 17:33:26 +00:00
{{#linkTo "showApplications"}} Applications {{/linkTo}} |
{{#linkTo "showEndpoints"}} Endpoints {{/linkTo}} |
{{#linkTo "showCodecs"}} Codecs {{/linkTo}} |
{{#linkTo "showFiles"}} Files {{/linkTo}} |
fix the last commit and implement show APIs
2013-04-22 13:55:23 +00:00
{{#linkTo "showAPIs"}} APIs {{/linkTo}} |
add show aliases, management, interface_types
2013-06-04 01:47:45 +00:00
{{#linkTo "showAliases"}} Aliases {{/linkTo}} |
add show complete
2013-06-04 01:52:14 +00:00
{{#linkTo "showCompletes"}} Complete {{/linkTo}} |
show say, chat, interfaces, limits
2013-06-04 01:25:19 +00:00
{{#linkTo "showChats"}} Chat {{/linkTo}} |
add show aliases, management, interface_types
2013-06-04 01:47:45 +00:00
{{#linkTo "showManagements"}} Management {{/linkTo}} |
fix the last commit and implement show APIs
2013-04-22 13:55:23 +00:00
Nat_map |
show say, chat, interfaces, limits
2013-06-04 01:25:19 +00:00
{{#linkTo "showSays"}} Say {{/linkTo}} |
{{#linkTo "showInterfaces"}} Interfaces {{/linkTo}} |
add show aliases, management, interface_types
2013-06-04 01:47:45 +00:00
{{#linkTo "showInterfaceTypes"}} InterfaceTypes {{/linkTo}} |
fix copy&paste typo
2013-06-04 01:34:35 +00:00
{{#linkTo "showTasks"}} Tasks {{/linkTo}} |
show say, chat, interfaces, limits
2013-06-04 01:25:19 +00:00
{{#linkTo "showLimits"}} Limits {{/linkTo}}
add status on main page and add showFiles
2013-04-22 13:01:27 +00:00
add portal, a nice GUI with pure html and javascript
2013-03-24 17:33:26 +00:00
</script>
<script type="text/x-handlebars" data-template-name="about">
<h1>About FreeSWITCH Portal</h1>
<p>
The FreeSWITCH Portal Project is Created by <a href="http://www.dujinfang.com">Seven Du</a>.
Available with MPL1.1 licence - Same as FreeSWITCH.
</p>
</script>
<script type="text/x-handlebars" data-template-name="users">
<h1>Users</h1>
<div>
<table class="table">
<tr>
<th>ID</th>
<th>Context</th>
<th>Domain</th>
<th>Group</th>
<th>Contact</th>
<th>Callgroup</th>
<th>Caller ID Name</th>
<th>Caller ID Number</th>
</tr>
{{#each App.usersController.content}}
<tr>
<td>{{ id }}</td>
<td>{{ context }}</td>
<td>{{ domain }}</td>
<td>{{ group }}</td>
<td>{{ contact }}</td>
<td>{{ callgroup }}</td>
<td>{{ cid_name }}</td>
<td>{{ cid_number }}</td>
</tr>
{{/each}}
</table>
</div>
</script>
<script type="text/x-handlebars" data-template-name="calls">
<div class="pull-right">
<label><input type="checkbox" id="auto_update_calls" value="1" onclick="auto_update_calls();">Auto Update</label>
</div>
<h1>Calls</h1>
<div>
<table class="table">
<tr>
<th>Call UUID</th>
<th>CID</th>
<th>Dest</th>
<th>Call State</th>
<th>Direction / Created</th>
</tr>
{{#each App.callsController.content}}
<tr>
<td>{{uuid}} <br>{{ b_uuid }}</td>
<td>{{ cid_num }}<br>{{ b_cid_num }}</td>
<td>{{ dest }}<br>{{ b_dest }}</td>
<td>{{ callstate }}<br>{{ b_callstate }}</td>
<td>{{ direction }} / {{ b_direction }}<br>
<a href='#' {{action "dump" uuid target="App.callsController"}}>{{created}}</a>
<!--<a href='#' {{action "raw" uuid target="App.callsController"}}>Raw</a>-->
</td>
</tr>
{{/each}}
</table>
</div>
</script>
<script type="text/x-handlebars" data-template-name="channels">
<h1>Channels</h1>
<div>
<table class="table">
<tr>
<th>Call UUID</th>
<th>CID</th>
<th>Dest</th>
<th>Call State</th>
<th>Direction / Created</th>
</tr>
{{#each App.channelsController.content}}
<tr>
<td>{{uuid}}</td>
<td>{{ cid_num }}</td>
<td>{{ dest }}<br></td>
<td>{{ callstate }}</td>
<td>{{ direction }}<br>
<a href='#' {{action "dump" uuid target="App.channelsController"}}>{{created}}</a>
</td>
</tr>
{{/each}}
</table>
</div>
</script>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="assets/js/jquery-1.9.1.min.js"></script>
<script src="assets/js/handlebars.js"></script>
<script src="assets/js/ember-1.0.0-rc.1.js"></script>
<script src="assets/js/ember-data.js"></script>
<script src="assets/js/fsportal.js"></script>
<!--
<script src="assets/js/bootstrap-transition.js"></script>
<script src="assets/js/bootstrap-alert.js"></script>
<script src="assets/js/bootstrap-modal.js"></script>
<script src="assets/js/bootstrap-dropdown.js"></script>
<script src="assets/js/bootstrap-scrollspy.js"></script>
<script src="assets/js/bootstrap-tab.js"></script>
<script src="assets/js/bootstrap-tooltip.js"></script>
<script src="assets/js/bootstrap-popover.js"></script>
<script src="assets/js/bootstrap-button.js"></script>
<script src="assets/js/bootstrap-collapse.js"></script>
<script src="assets/js/bootstrap-carousel.js"></script>
<script src="assets/js/bootstrap-typeahead.js"></script>
-->
<script type="text/javascript">
close websocket before unload
2013-06-04 02:23:23 +00:00
$(window).on('beforeunload', function() {
if (socket) {
socket.close();
}
});
add portal, a nice GUI with pure html and javascript
2013-03-24 17:33:26 +00:00
function auto_update_calls() {
var x = $('#auto_update_calls')[0];
if (typeof x != "undefined" && x.checked) {
console.log("tick")
App.callsController.load();
setTimeout(auto_update_calls, 2000);
}
}
// $("#menu-channels").click(function(e){
// e.preventDefault();
// App.channelsController.load();
// $('#calls').hide();
// $('#channels').show();
// });
// $("#menu-calls").click(function(e){
// e.preventDefault();
// App.callsController.load();
// $('#channels').hide();
// $('#calls').show();
// });
// var callsView = Ember.View.create({
// templateName: 'calls',
// name: "callsView"
// });
// // $('#container').html('');
// callsView.appendTo('#calls');
// var channelsView = Ember.View.create({
// templateName: 'channels',
// name: "channelsView"
// });
// channelsView.appendTo('#channels');
function dump_call(uuid) {
obj = App.callsController.content.findProperty("uuid", uuid);
console.log(obj);
}
</script>
<script type="text/javascript">
fix hardcoded host and port
2013-06-04 00:21:34 +00:00
var port = document.location.port;
// var port = 8081; // for test
var socket = new WebSocket("ws://" + document.location.hostname + ":" + port + "/socket", "websocket");
add portal, a nice GUI with pure html and javascript
2013-03-24 17:33:26 +00:00
try {
socket.onopen = function() {
$('#ws-status').html('Socket Connected').css("color", "green");
// socket.send("event json all");
socket.send("event json CHANNEL_CREATE");
socket.send("event json CHANNEL_HANGUP_COMPLETE");
socket.send("event json CHANNEL_CALLSTATE");
}
socket.onmessage =function(msg) {
// console.log(msg.data);
var data = JSON.parse(msg.data);
console.log(data["Event-Name"]);
eventCallback(data);
}
socket.onclose = function(){
$('#ws-status').html('Socket Disconnected!').css("color", "red");
console.log("socket disconnected, fallback to event_sink");
// setInterval("App.channelsController.checkEvent()", 2000);
setInterval("App.channelsController.checkXMLEvent()", 2000);
}
} catch(exception) {
alert('Error' + exception);
}
</script>
</body>
</html>