Last part of subscriber-base call-flow handling. TBD: filtering call-id in subscriber master data.agranig/1_0_subfix
Andreas Granig
13 years ago
parent
688ed5871e
commit
e43fc4b1c5
@ -0,0 +1,222 @@
|
||||
function modalPopup(align, top, width, padding, disableColor, disableOpacity, backgroundColor, borderColor, borderWeight, borderRadius, fadeOutTime, url, loadingImage){
|
||||
|
||||
var containerid = "innerModalPopupDiv";
|
||||
|
||||
var popupDiv = document.createElement('div');
|
||||
var popupMessage = document.createElement('div');
|
||||
var blockDiv = document.createElement('div');
|
||||
|
||||
popupDiv.setAttribute('id', 'outerModalPopupDiv');
|
||||
popupDiv.setAttribute('class', 'outerModalPopupDiv');
|
||||
|
||||
popupMessage.setAttribute('id', 'innerModalPopupDiv');
|
||||
popupMessage.setAttribute('class', 'innerModalPopupDiv');
|
||||
|
||||
blockDiv.setAttribute('id', 'blockModalPopupDiv');
|
||||
blockDiv.setAttribute('class', 'blockModalPopupDiv');
|
||||
blockDiv.setAttribute('onClick', 'closePopup(' + fadeOutTime + ')');
|
||||
|
||||
document.body.appendChild(popupDiv);
|
||||
popupDiv.appendChild(popupMessage);
|
||||
document.body.appendChild(blockDiv);
|
||||
|
||||
if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){ //test for MSIE x.x;
|
||||
var ieversion=new Number(RegExp.$1) // capture x.x portion and store as a number
|
||||
if(ieversion>6) {
|
||||
getScrollHeight(top);
|
||||
}
|
||||
} else {
|
||||
getScrollHeight(top);
|
||||
}
|
||||
|
||||
document.getElementById('outerModalPopupDiv').style.display='block';
|
||||
document.getElementById('outerModalPopupDiv').style.width = width + 'px';
|
||||
document.getElementById('outerModalPopupDiv').style.padding = borderWeight + 'px';
|
||||
document.getElementById('outerModalPopupDiv').style.background = borderColor;
|
||||
document.getElementById('outerModalPopupDiv').style.borderRadius = borderRadius + 'px';
|
||||
document.getElementById('outerModalPopupDiv').style.MozBorderRadius = borderRadius + 'px';
|
||||
document.getElementById('outerModalPopupDiv').style.WebkitBorderRadius = borderRadius + 'px';
|
||||
document.getElementById('outerModalPopupDiv').style.borderWidth = 0 + 'px';
|
||||
document.getElementById('outerModalPopupDiv').style.position = 'absolute';
|
||||
document.getElementById('outerModalPopupDiv').style.zIndex = 100;
|
||||
|
||||
document.getElementById('innerModalPopupDiv').style.padding = padding + 'px';
|
||||
document.getElementById('innerModalPopupDiv').style.background = backgroundColor;
|
||||
document.getElementById('innerModalPopupDiv').style.borderRadius = (borderRadius - 3) + 'px';
|
||||
document.getElementById('innerModalPopupDiv').style.MozBorderRadius = (borderRadius - 3) + 'px';
|
||||
document.getElementById('innerModalPopupDiv').style.WebkitBorderRadius = (borderRadius - 3) + 'px';
|
||||
|
||||
document.getElementById('blockModalPopupDiv').style.width = 100 + '%';
|
||||
document.getElementById('blockModalPopupDiv').style.border = 0 + 'px';
|
||||
document.getElementById('blockModalPopupDiv').style.padding = 0 + 'px';
|
||||
document.getElementById('blockModalPopupDiv').style.margin = 0 + 'px';
|
||||
document.getElementById('blockModalPopupDiv').style.background = disableColor;
|
||||
document.getElementById('blockModalPopupDiv').style.opacity = (disableOpacity / 100);
|
||||
document.getElementById('blockModalPopupDiv').style.filter = 'alpha(Opacity=' + disableOpacity + ')';
|
||||
document.getElementById('blockModalPopupDiv').style.zIndex = 99;
|
||||
document.getElementById('blockModalPopupDiv').style.position = 'fixed';
|
||||
document.getElementById('blockModalPopupDiv').style.top = 0 + 'px';
|
||||
document.getElementById('blockModalPopupDiv').style.left = 0 + 'px';
|
||||
|
||||
if(align=="center") {
|
||||
document.getElementById('outerModalPopupDiv').style.marginLeft = (-1 * (width / 2)) + 'px';
|
||||
document.getElementById('outerModalPopupDiv').style.left = 50 + '%';
|
||||
} else if(align=="left") {
|
||||
document.getElementById('outerModalPopupDiv').style.marginLeft = 0 + 'px';
|
||||
document.getElementById('outerModalPopupDiv').style.left = 10 + 'px';
|
||||
} else if(align=="right") {
|
||||
document.getElementById('outerModalPopupDiv').style.marginRight = 0 + 'px';
|
||||
document.getElementById('outerModalPopupDiv').style.right = 10 + 'px';
|
||||
} else {
|
||||
document.getElementById('outerModalPopupDiv').style.marginLeft = (-1 * (width / 2)) + 'px';
|
||||
document.getElementById('outerModalPopupDiv').style.left = 50 + '%';
|
||||
}
|
||||
|
||||
blockPage();
|
||||
|
||||
var page_request = false;
|
||||
if (window.XMLHttpRequest) {
|
||||
page_request = new XMLHttpRequest();
|
||||
} else if (window.ActiveXObject) {
|
||||
try {
|
||||
page_request = new ActiveXObject("Msxml2.XMLHTTP");
|
||||
} catch (e) {
|
||||
try {
|
||||
page_request = new ActiveXObject("Microsoft.XMLHTTP");
|
||||
} catch (e) { }
|
||||
}
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
page_request.onreadystatechange=function(){
|
||||
if((url.search(/.jpg/i)==-1) && (url.search(/.jpeg/i)==-1) && (url.search(/.gif/i)==-1) && (url.search(/.png/i)==-1) && (url.search(/.bmp/i)==-1)) {
|
||||
pageloader(page_request, containerid, loadingImage);
|
||||
} else {
|
||||
imageloader(url, containerid, loadingImage);
|
||||
}
|
||||
}
|
||||
|
||||
page_request.open('GET', url, true);
|
||||
page_request.send(null);
|
||||
|
||||
}
|
||||
|
||||
function pageloader(page_request, containerid, loadingImage){
|
||||
|
||||
document.getElementById(containerid).innerHTML = '<div align="center"><img src="' + loadingImage + '" border="0" /></div>';
|
||||
|
||||
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)) {
|
||||
document.getElementById(containerid).innerHTML=page_request.responseText;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function imageloader(url, containerid, loadingImage) {
|
||||
|
||||
document.getElementById(containerid).innerHTML = '<div align="center"><img src="' + loadingImage + '" border="0" /></div>';
|
||||
document.getElementById(containerid).innerHTML='<div align="center"><img src="' + url + '" border="0" /></div>';
|
||||
|
||||
}
|
||||
|
||||
function blockPage() {
|
||||
|
||||
var blockdiv = document.getElementById('blockModalPopupDiv');
|
||||
var height = screen.height;
|
||||
|
||||
blockdiv.style.height = height + 'px';
|
||||
blockdiv.style.display = 'block';
|
||||
|
||||
}
|
||||
|
||||
function getScrollHeight(top) {
|
||||
|
||||
var h = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
|
||||
|
||||
if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) {
|
||||
|
||||
var ieversion=new Number(RegExp.$1);
|
||||
|
||||
if(ieversion>6) {
|
||||
document.getElementById('outerModalPopupDiv').style.top = h + top + 'px';
|
||||
} else {
|
||||
document.getElementById('outerModalPopupDiv').style.top = top + 'px';
|
||||
}
|
||||
|
||||
} else {
|
||||
document.getElementById('outerModalPopupDiv').style.top = h + top + 'px';
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function closePopup(fadeOutTime) {
|
||||
|
||||
fade('outerModalPopupDiv', fadeOutTime);
|
||||
document.getElementById('blockModalPopupDiv').style.display='none';
|
||||
|
||||
}
|
||||
|
||||
function fade(id, fadeOutTime) {
|
||||
|
||||
var el = document.getElementById(id);
|
||||
|
||||
if(el == null) {
|
||||
return;
|
||||
}
|
||||
|
||||
if(el.FadeState == null) {
|
||||
|
||||
if(el.style.opacity == null || el.style.opacity == '' || el.style.opacity == '1') {
|
||||
el.FadeState = 2;
|
||||
} else {
|
||||
el.FadeState = -2;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
if(el.FadeState == 1 || el.FadeState == -1) {
|
||||
|
||||
el.FadeState = el.FadeState == 1 ? -1 : 1;
|
||||
el.fadeTimeLeft = fadeOutTime - el.fadeTimeLeft;
|
||||
|
||||
} else {
|
||||
|
||||
el.FadeState = el.FadeState == 2 ? -1 : 1;
|
||||
el.fadeTimeLeft = fadeOutTime;
|
||||
setTimeout("animateFade(" + new Date().getTime() + ",'" + id + "','" + fadeOutTime + "')", 33);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function animateFade(lastTick, id, fadeOutTime) {
|
||||
|
||||
var currentTick = new Date().getTime();
|
||||
var totalTicks = currentTick - lastTick;
|
||||
|
||||
var el = document.getElementById(id);
|
||||
|
||||
if(el.fadeTimeLeft <= totalTicks) {
|
||||
|
||||
el.style.opacity = el.FadeState == 1 ? '1' : '0';
|
||||
el.style.filter = 'alpha(opacity = ' + (el.FadeState == 1 ? '100' : '0') + ')';
|
||||
el.FadeState = el.FadeState == 1 ? 2 : -2;
|
||||
document.body.removeChild(el);
|
||||
return;
|
||||
|
||||
}
|
||||
|
||||
el.fadeTimeLeft -= totalTicks;
|
||||
var newOpVal = el.fadeTimeLeft / fadeOutTime;
|
||||
|
||||
if(el.FadeState == 1) {
|
||||
newOpVal = 1 - newOpVal;
|
||||
}
|
||||
|
||||
el.style.opacity = newOpVal;
|
||||
el.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')';
|
||||
|
||||
setTimeout("animateFade(" + currentTick + ",'" + id + "','" + fadeOutTime + "')", 33);
|
||||
|
||||
}
|
||||
@ -0,0 +1,37 @@
|
||||
[% site_config.title = 'Call Flow for Call-ID ' _ callid -%]
|
||||
|
||||
<script type="text/javascript" src="/js/libs/jquery.popup.js"></script>
|
||||
<script type="text/javascript">
|
||||
function pkgPopup(pkgid) {
|
||||
// http://www.jquerypopup.com/documentation.php
|
||||
modalPopup("center", 100, 640, 10, "#666666", 40, "#FFFFFF", "#000000", 4, 5, 300,
|
||||
"[% c.uri_for_action('/subscriber/get_packet', c.req.captures) %]/"+pkgid,
|
||||
"/img/loader.gif");
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="row">
|
||||
<span class="pull-left" style="margin:0 5px 0 5px;">
|
||||
<a class="btn btn-primary btn-large" href="[% c.uri_for('/back') %]"><i class="icon-arrow-left"></i> Back</a>
|
||||
<a class="btn btn-primary btn-large" href="[% c.uri_for_action('/subscriber/get_pcap', c.req.captures) %]"><i class="icon-file"></i> Download PCAP</a>
|
||||
</span>
|
||||
</div>
|
||||
[% back_created = 1 -%]
|
||||
|
||||
<div class="row">
|
||||
[% FOREACH m IN messages -%]
|
||||
<div class="alert alert-[% m.type %]">[% m.text %]</div>
|
||||
[% END -%]
|
||||
</div>
|
||||
|
||||
<div class="ngcp-separator"></div>
|
||||
|
||||
<img src="[% c.uri_for_action('/subscriber/get_png', c.req.captures) %]"
|
||||
width="[% canvas.width %]" height="[% canvas.height %]" usemap="#diamap" style="min-width:[% canvas.width %]px !important" />
|
||||
<map name="diamap">
|
||||
[% FOREACH area IN canvas.areas -%]
|
||||
<area shape="rect" coords="[% area.coords %]" href="javascript:pkgPopup([% area.id %])" />
|
||||
[% END -%]
|
||||
</map>
|
||||
|
||||
[% # vim: set tabstop=4 syntax=html expandtab: -%]
|
||||
Loading…
Reference in new issue