Irka
12 years ago
parent
e923b71022
commit
fb891ee0ed
@ -0,0 +1,28 @@
|
|||||||
|
package NGCP::Panel::View::SVG;
|
||||||
|
|
||||||
|
use Sipwise::Base;
|
||||||
|
use NGCP::Panel::Utils::I18N;
|
||||||
|
|
||||||
|
use strict;
|
||||||
|
extends 'Catalyst::View::TT';
|
||||||
|
|
||||||
|
|
||||||
|
__PACKAGE__->config(
|
||||||
|
TEMPLATE_EXTENSION => '.tt',
|
||||||
|
render_die => 1,
|
||||||
|
ENCODING => 'UTF-8',
|
||||||
|
WRAPPER => '',
|
||||||
|
FILTERS => {},
|
||||||
|
ABSOLUTE => 0,
|
||||||
|
expose_methods => [],
|
||||||
|
);
|
||||||
|
|
||||||
|
sub process
|
||||||
|
{
|
||||||
|
my ( $self, $c ) = @_;
|
||||||
|
$c->res->content_type("image/svg+xml");
|
||||||
|
$self->SUPER::process($c);
|
||||||
|
return 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
1;
|
||||||
@ -0,0 +1,195 @@
|
|||||||
|
[% IF c.user.roles == "subscriber" || c.user.roles == "subscriberadmin" -%]
|
||||||
|
[% site_config.title = c.loc('Customer Calls') -%]
|
||||||
|
[% ELSE -%]
|
||||||
|
[% site_config.title = c.loc('Customer Calls for #[_1] ([_2])',contract.id, product.name) -%]
|
||||||
|
[% END -%]
|
||||||
|
|
||||||
|
[% BLOCK accordion_group_internal %]
|
||||||
|
<div class="accordion-inner">
|
||||||
|
<table class="table table-bordered table-striped table-highlight table-hover">
|
||||||
|
[% content %]
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
[%END%]
|
||||||
|
|
||||||
|
[% USE Dumper %]
|
||||||
|
[% WRAPPER accordion_group_internal id="collapse_calls" title='Balance details' %]
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>[% c.loc('Zone') %]</th>
|
||||||
|
<th>[% c.loc('Calls amount') %]</th>
|
||||||
|
<th>[% c.loc('Duration') %]</th>
|
||||||
|
<th>[% c.loc('Free time') %]</th>
|
||||||
|
<th>[% c.loc('Cash') %]</th>
|
||||||
|
<th class="ngcp-actions-column"></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
[%# Dumper.dump_html(zonecalls_rs.as_query)%]
|
||||||
|
[% FOR call IN zonecalls_rs.all -%]
|
||||||
|
[% total_number = total_number + call.get_column('number') %]
|
||||||
|
[% total_duration = total_duration + call.get_column('duration') %]
|
||||||
|
[% total_free_time = total_free_time + call.get_column('free_time') %]
|
||||||
|
[% total_cost = total_cost + call.get_column('cost') %]
|
||||||
|
<tr class="sw_action_row">
|
||||||
|
<td>[% call.get_column('zone') %]</td>
|
||||||
|
<td><div class="pull-right">[% call.get_column('number') %]</div></td>
|
||||||
|
<td><div class="pull-right">[% call.get_column('duration')|format('%.3f') %]</div></td>
|
||||||
|
<td><div class="pull-right">[% call.get_column('free_time')|format('%d') %]</div></td>
|
||||||
|
<td><div class="pull-right">[% money_format( call.get_column('cost') / 100 ) %]</div></td>
|
||||||
|
<td class="ngcp-actions-column">
|
||||||
|
<div class="sw_actions pull-right">
|
||||||
|
<a class="btn btn-small btn-primary"
|
||||||
|
href="[% c.uri_for_action("/customer/calls", [contract.id]) %]">
|
||||||
|
<i class="icon-edit"></i> [% c.loc('Edit') %]
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
[%END%]
|
||||||
|
<tr>
|
||||||
|
<td>[% c.loc('Total') %]</td>
|
||||||
|
<td><div class="pull-right">[% total_number %]</td>
|
||||||
|
<td><div class="pull-right">[% total_duration | format('%.3f') %]</div</td>
|
||||||
|
<td><div class="pull-right">[% total_free_time | format('%d')%]</div</td>
|
||||||
|
<td><div class="pull-right">[% money_format( total_cost / 100 ) %]</div></td>
|
||||||
|
<td class="ngcp-actions-column">
|
||||||
|
<div class="sw_actions pull-right">
|
||||||
|
<a class="btn btn-small btn-primary"
|
||||||
|
href="[% c.uri_for_action("/customer/calls", [contract.id]) %]">
|
||||||
|
<i class="icon-edit"></i> [% c.loc('Edit') %]
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
[%END%]
|
||||||
|
|
||||||
|
<script type="text/javascript" src="/js/libs/svg-edit/embedapi.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var svgCanvas = null;
|
||||||
|
|
||||||
|
function init_embed() {
|
||||||
|
var frame = document.getElementById('svgedit');
|
||||||
|
svgCanvas = new embedded_svg_edit(frame);
|
||||||
|
|
||||||
|
// Hide main button, as we will be controlling new/load/save etc from the host document
|
||||||
|
var doc;
|
||||||
|
doc = frame.contentDocument;
|
||||||
|
if (!doc)
|
||||||
|
{
|
||||||
|
doc = frame.contentWindow.document;
|
||||||
|
}
|
||||||
|
|
||||||
|
var mainButton = doc.getElementById('main_button');
|
||||||
|
mainButton.style.display = 'none';
|
||||||
|
loadSvg();
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleSvgData(data, error) {
|
||||||
|
if (error)
|
||||||
|
{
|
||||||
|
alert('error ' + error);
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
//alert('Congratulations. Your SVG string is back in the host page, do with it what you will\n\n' + data);
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function showSvgData(data, error) {
|
||||||
|
if (error)
|
||||||
|
{
|
||||||
|
alert('error ' + error);
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
alert('Congratulations. Your SVG string is back in the host page, do with it what you will\n\n' + data);
|
||||||
|
var img = document.getElementById('svgpreview'); //new Image();
|
||||||
|
img.src = "data:image/svg+xml," + encodeURIComponent(data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadSvg() {
|
||||||
|
background( '[%- c.uri_for_action("/customer/calls_svg", [contract.id]) -%]','', function(httpResponse){
|
||||||
|
// alert(httpResponse);
|
||||||
|
svgCanvas.setSvgString(httpResponse);});
|
||||||
|
//'/customer/[%contract.id%]/calls/svg'
|
||||||
|
//var svgexample = '<svg width="640" height="480" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><g><title>Layer 1</title><rect stroke-width="5" stroke="#000000" fill="#FF0000" id="svg_1" height="35" width="51" y="35" x="32"/><ellipse ry="15" rx="24" stroke-width="5" stroke="#000000" fill="#0000ff" id="svg_2" cy="60" cx="66"/></g></svg>';
|
||||||
|
//svgCanvas.setSvgString(svgexample);
|
||||||
|
}
|
||||||
|
|
||||||
|
function saveSvg() {
|
||||||
|
svgCanvas.getSvgString()(handleSvgData);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Background fetches a page into the specified element
|
||||||
|
function fetch_into(div, uri, q, callback) {
|
||||||
|
var xmlHttpReq = false;
|
||||||
|
// alert(q);
|
||||||
|
// Mozilla/Safari
|
||||||
|
if (window.XMLHttpRequest) {
|
||||||
|
xmlHttpReq = new XMLHttpRequest();
|
||||||
|
if (typeof xmlHttpReq.overrideMimeType != 'undefined') {
|
||||||
|
xmlHttpReq.overrideMimeType('text/xml');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// IE
|
||||||
|
else if (window.ActiveXObject) {
|
||||||
|
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
|
||||||
|
}
|
||||||
|
xmlHttpReq.open('POST', uri, true);
|
||||||
|
// xmlHttpReq.open('GET', uri, true);
|
||||||
|
xmlHttpReq.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
|
||||||
|
xmlHttpReq.onreadystatechange = function() {
|
||||||
|
if (xmlHttpReq.readyState == 4) {
|
||||||
|
document.getElementById(div).innerHTML=xmlHttpReq.responseText;
|
||||||
|
if(typeof callback == 'function'){
|
||||||
|
callback.call();
|
||||||
|
}else{
|
||||||
|
eval(callback);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// alert(q);
|
||||||
|
xmlHttpReq.send(q);
|
||||||
|
}
|
||||||
|
function background(uri,q,callback) {
|
||||||
|
var xmlHttpReq = false;
|
||||||
|
if (window.XMLHttpRequest) {
|
||||||
|
xmlHttpReq = new XMLHttpRequest();
|
||||||
|
// xmlHttpReq.overrideMimeType('text/xml');
|
||||||
|
} else if (window.ActiveXObject) {
|
||||||
|
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
|
||||||
|
}
|
||||||
|
|
||||||
|
xmlHttpReq.open('POST', uri, true);
|
||||||
|
xmlHttpReq.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
|
||||||
|
if(callback)
|
||||||
|
xmlHttpReq.onreadystatechange = function(){
|
||||||
|
if (xmlHttpReq.readyState == 4) {
|
||||||
|
if(typeof callback == 'function'){
|
||||||
|
// alert(xmlHttpReq.responseText);
|
||||||
|
callback(xmlHttpReq.responseText);
|
||||||
|
}else{
|
||||||
|
eval(callback);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
xmlHttpReq.send(q);
|
||||||
|
}
|
||||||
|
|
||||||
|
function showSvg(){
|
||||||
|
svgCanvas.getSvgString()(showSvgData);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<button onclick="loadSvg();">Reload invoice template</button>
|
||||||
|
<button onclick="showSvg();">Refresh Preview</button>
|
||||||
|
<button onclick="saveSvg();">Save template</button>
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
<iframe type="text/html" src="/js/libs/svg-edit/svg-editor.htm" width="700px" height="600px" left="50px" id="svgedit" onload="init_embed();loadSvg();"></iframe><iframe src="[%- c.uri_for_action('/customer/calls_svg', [contract.id]) -%]" width="700px" height="600px" id="svgpreview"><canvas id="svgpreview_canvas" width="200" height="200"></canvas>
|
||||||
|
|
||||||
|
After Width: | Height: | Size: 3.4 KiB |
Loading…
Reference in new issue