sipwise
/
ngcp-panel
mirror of https://github.com/sipwise/ngcp-panel.git
1
0
Fork 0
Code Issues Releases Wiki Activity

MT#5879 Now Preview works correct. Time to implement saving passed template.

Browse Source
ipeshinskaya/InvoiceTemplate5
Irka 12 years ago committed by Victor Seva
parent 0622c959eb
commit 792b6a5328
5 changed files with 149 additions and 116 deletions
Show Stats Download Patch File Download Diff File

27
lib/NGCP/Panel/Controller/Customer.pm
Unescape View File

@ -871,22 +871,23 @@ sub calls_svg :Chained('base') :PathPart('calls/template') :Args {
#sub candidate, preSaveCustomTemplate
#if it is presaving, making it for default isn't necessary, default should contain it
#but while let it be here
$c->log->debug("3.invoicetemplate is empty=".($invoicetemplate?0:1).";viewbox=".($invoicetemplate !~/^<svg.*?viewbox.*?>/is).";\n");
if( $invoicetemplate !~/^<svg.*?viewbox.*?>/is ){
(my ($width)) = ($invoicetemplate =~/^<svg.*?width.*?(\d+).*?>/is );
$c->log->debug("width=$width;\n");
(my ($height)) = ($invoicetemplate =~/^<svg.*?height.*?(\d+).*?>/is );
my($replaced) = $invoicetemplate =~s/^<svg(.*?(?:width.*?height|height.*width).*?\d+.*? )/<svg $1 viewBox="0 0 $width $height" /i;
$c->log->debug("replaced=$replaced;\n");
#storeToDB
}
##moved to correct place - to js, generating svg
##### $c->log->debug("3.invoicetemplate is empty=".($invoicetemplate?0:1).";viewbox=".($invoicetemplate !~/^<svg.*?viewbox.*?>/is).";\n");
##### if( $invoicetemplate !~/^<svg.*?viewbox.*?>/is ){
##### (my ($width)) = ($invoicetemplate =~/^<svg.*?width.*?(\d+).*?>/is );
##### $c->log->debug("width=$width;\n");
##### (my ($height)) = ($invoicetemplate =~/^<svg.*?height.*?(\d+).*?>/is );
##### my($replaced) = $invoicetemplate =~s/^<svg(.*?(?:width.*?height|height.*width).*?\d+.*? )/<svg $1 viewBox="0 0 $width $height" /i;
##### $c->log->debug("replaced=$replaced;\n");
##### #storeToDB
##### }
#}
#prepare response
$c->response->content_type('image/svg+xml');
$c->log->debug("tt_viewmode=$tt_viewmode;\n");
if($tt_viewmode eq 'raw'){
$c->stash->{VIEW_NO_TT_PROCESS} = 1;
#$c->stash->{VIEW_NO_TT_PROCESS} = 1;
$c->response->body($invoicetemplate);
return;
}else{
@ -896,12 +897,12 @@ sub calls_svg :Chained('base') :PathPart('calls/template') :Args {
#preShowCustomTemplate prerpocessing
{
#preShowInvoice
$invoicetemplate =~s/{?<!--{|}-->}?//g;
$invoicetemplate =~s/(?:{\s*)?<!--{|}-->(?:\s*})?//gs;
}
$c->stash( provider => $contacts->first );
use irka;
irka::loglong(\$invoicetemplate);
#use irka;
#irka::loglong(\$invoicetemplate);
$c->stash( template => \$invoicetemplate );
$c->log->debug("before_detach;\n");
$c->detach($c->view('SVG'));

57
share/static/js/background.js
Unescape View File

@ -1,7 +1,37 @@
function background(uri,q,callback) {
var xmlHttpReq = false;
alert(uri);
alert(q);
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);
}
// Background fetches a page into the specified element
function fetch_into(div, uri, q, callback) {
var xmlHttpReq = false;
// alert(q);
//alert(uri);
//alert(q);
// Mozilla/Safari
if (window.XMLHttpRequest) {
xmlHttpReq = new XMLHttpRequest();
@ -30,28 +60,3 @@ function fetch_into(div, uri, q, 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);
}

2
share/static/js/libs/svg-edit/svg-editor.js
Unescape View File

@ -174,7 +174,7 @@ TO-DOS
retrieving: 'Retrieving \'%s\' ...'
}
};
alert('QQ');
//alert('QQ');
function loadSvgString (str, callback) {
var success = svgCanvas.setSvgString(str) !== false;
callback = callback || $.noop;

146
share/static/js/libs/svg-edit/svgcanvas.js
Unescape View File

@ -4116,72 +4116,87 @@ this.svgToString = function(elem, indent) {
childs = elem.childNodes;
for (i = 0; i < indent; i++) {out.push(' ');}
out.push("<"); out.push(elem.nodeName);
if (elem.id === 'svgcontent') {
// Process root element separately
var res = getResolution();
var vb = "";
// TODO: Allow this by dividing all values by current baseVal
// Note that this also means we should properly deal with this on import
// if (curConfig.baseUnit !== "px") {
// var unit = curConfig.baseUnit;
// var unit_m = svgedit.units.getTypeMap()[unit];
// res.w = svgedit.units.shortFloat(res.w / unit_m)
// res.h = svgedit.units.shortFloat(res.h / unit_m)
// vb = ' viewBox="' + [0, 0, res.w, res.h].join(' ') + '"';
// res.w += unit;
// res.h += unit;
// }
if (unit !== "px") {
res.w = svgedit.units.convertUnit(res.w, unit) + unit;
res.h = svgedit.units.convertUnit(res.h, unit) + unit;
}
out.push(' width="' + res.w + '" height="' + res.h + '"' + vb + ' xmlns="'+NS.SVG+'"');
var nsuris = {};
// Check elements for namespaces, add if found
$(elem).find('*').andSelf().each(function() {
var el = this;
// for some elements have no attribute
var uri = this.namespaceURI;
if(uri && !nsuris[uri] && nsMap[uri] && nsMap[uri] !== 'xmlns' && nsMap[uri] !== 'xml' ) {
nsuris[uri] = true;
out.push(" xmlns:" + nsMap[uri] + '="' + uri +'"');
}
$.each(this.attributes, function(i, attr) {
var uri = attr.namespaceURI;
if (uri && !nsuris[uri] && nsMap[uri] !== 'xmlns' && nsMap[uri] !== 'xml' ) {
nsuris[uri] = true;
out.push(" xmlns:" + nsMap[uri] + '="' + uri +'"');
}
});
});
i = attrs.length;
var attr_names = ['width', 'height', 'xmlns', 'x', 'y', 'viewBox', 'id', 'overflow'];
while (i--) {
attr = attrs.item(i);
var attrVal = toXml(attr.nodeValue);
// Namespaces have already been dealt with, so skip
if (attr.nodeName.indexOf('xmlns:') === 0) {continue;}
//alert('QQQQQ');
//alert(svgroot.outerSvgTag);
if( svgroot.outerSvgTag )
{
out.push(svgroot.outerSvgTag);
}else{
out.push("<"); out.push(elem.nodeName);
// Process root element separately
var res = getResolution();
var vb = "";
// TODO: Allow this by dividing all values by current baseVal
// Note that this also means we should properly deal with this on import
// if (curConfig.baseUnit !== "px") {
// var unit = curConfig.baseUnit;
// var unit_m = svgedit.units.getTypeMap()[unit];
// res.w = svgedit.units.shortFloat(res.w / unit_m)
// res.h = svgedit.units.shortFloat(res.h / unit_m)
// vb = ' viewBox="' + [0, 0, res.w, res.h].join(' ') + '"';
// res.w += unit;
// res.h += unit;
// }
if (unit !== "px") {
res.w = svgedit.units.convertUnit(res.w, unit) + unit;
res.h = svgedit.units.convertUnit(res.h, unit) + unit;
}
out.push(' width="' + res.w + '" height="' + res.h + '"' + vb + ' xmlns="'+NS.SVG+'"');
var nsuris = {};
// Check elements for namespaces, add if found
$(elem).find('*').andSelf().each(function() {
var el = this;
// for some elements have no attribute
var uri = this.namespaceURI;
if(uri && !nsuris[uri] && nsMap[uri] && nsMap[uri] !== 'xmlns' && nsMap[uri] !== 'xml' ) {
nsuris[uri] = true;
out.push(" xmlns:" + nsMap[uri] + '="' + uri +'"');
}
$.each(this.attributes, function(i, attr) {
var uri = attr.namespaceURI;
if (uri && !nsuris[uri] && nsMap[uri] !== 'xmlns' && nsMap[uri] !== 'xml' ) {
nsuris[uri] = true;
out.push(" xmlns:" + nsMap[uri] + '="' + uri +'"');
}
});
});
i = attrs.length;
var attr_names = ['width', 'height', 'xmlns', 'x', 'y', 'viewBox', 'id', 'overflow'];
while (i--) {
attr = attrs.item(i);
var attrVal = toXml(attr.nodeValue);
// Namespaces have already been dealt with, so skip
if (attr.nodeName.indexOf('xmlns:') === 0) {continue;}
// only serialize attributes we don't use internally
if (attrVal != "" && attr_names.indexOf(attr.localName) == -1) {
if (!attr.namespaceURI || nsMap[attr.namespaceURI]) {
out.push(' ');
out.push(attr.nodeName); out.push("=\"");
out.push(attrVal); out.push("\"");
}
}
}
}
// only serialize attributes we don't use internally
if (attrVal != "" && attr_names.indexOf(attr.localName) == -1) {
if (!attr.namespaceURI || nsMap[attr.namespaceURI]) {
out.push(' ');
out.push(attr.nodeName); out.push("=\"");
out.push(attrVal); out.push("\"");
}
}
}
} else {
out.push("<"); out.push(elem.nodeName);
// Skip empty defs
if (elem.nodeName === 'defs' && !elem.firstChild) {return;}
@ -4743,6 +4758,13 @@ this.setSvgString = function(xmlString) {
}
svgroot.appendChild(svgcontent);
//var startre=;
//svgroot.outerSvgTag = outerSvgTag;
svgroot.outerSvgTag = xmlString.match(/^\<svg[^\>]*\>/);
//console.log(outerSvgTag[0]);
//alert(outerSvgTag[0]);
//alert('svgroot.innerHTML='+svgroot.outerHTML);
//alert('svgroot.textContent='+svgroot.parentNode.textContent);
var content = $(svgcontent);
canvas.current_drawing_ = new svgedit.draw.Drawing(svgcontent, idprefix);

33
share/templates/customer/calls.tt
Unescape View File

@ -81,10 +81,8 @@ function init_embed() {
{
doc = frame.contentWindow.document;
}
var mainButton = doc.getElementById('main_button');
mainButton.style.display = 'none';
loadSvg();
}
function handleSvgData(data, error) {
@ -99,7 +97,7 @@ function handleSvgData(data, error) {
}
}
function showSvgData(data, error) {
function showSvgDataParsed(data, error) {
if (error)
{
alert('error ' + error);
@ -108,16 +106,23 @@ function showSvgData(data, error) {
{
//alert('Congratulations. Your SVG string is back in the host page, do with it what you will\n\n' + data);
//alert(encodeURIComponent(data));//works in ie
background('[%- c.uri_for_action("/customer/calls_svg", [contract.id]) -%]','template='+encodeURIComponent(data));
var img = document.getElementById('svgpreview'); //new Image();
img.src = "data:image/svg+xml," + encodeURIComponent(data);
background('[%- c.uri_for_action("/customer/calls_svg", [contract.id]) -%]'+'/svg','template='+encodeURIComponent(data),
function(httpResponse){
//alert(httpResponse);
var img = document.getElementById('svgpreview'); //new Image();
img.src = "data:image/svg+xml," + encodeURIComponent(httpResponse);
});
}
}
function loadSvg(params) {
background( '[%- c.uri_for_action("/customer/calls_svg", [contract.id]) -%]'+params,'', function(httpResponse){
// alert(httpResponse);
svgCanvas.setSvgString(httpResponse);});
//alert('[%- c.uri_for_action("/customer/calls_svg", [contract.id]) -%]'+params);
background( '[%- c.uri_for_action("/customer/calls_svg", [contract.id]) -%]'+params,'',
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);
@ -127,16 +132,16 @@ function saveSvg() {
svgCanvas.getSvgString()(handleSvgData);
}
function showSvg(){
svgCanvas.getSvgString()(showSvgData);
function showSvgParsed(){
svgCanvas.getSvgString()(showSvgDataParsed);
}
</script>
<button onclick="loadSvg('/raw');">Reload invoice template</button>
<button onclick="showSvg();">Refresh Preview</button>
<button onclick="loadSvg('/svg/raw');">Reload invoice template</button>
<button onclick="showSvgParsed();">Refresh Preview</button>
<button onclick="saveSvg();">Save template</button>
<br/>
<iframe type="text/html" src="/js/libs/svg-edit/svg-editor.htm" width="550px" height="600px" left="50px" id="svgedit" onload="init_embed();loadSvg('/raw');" class="display:inline;"></iframe><iframe src="[%- c.uri_for_action('/customer/calls_svg', [contract.id]) -%]" width="550px" height="600px" id="svgpreview" class="display:inline;"><canvas id="svgpreview_canvas" width="200" height="200"></canvas>
<iframe type="text/html" src="/js/libs/svg-edit/svg-editor.htm" width="550px" height="600px" left="50px" id="svgedit" onload="init_embed();loadSvg('/svg/raw');" class="display:inline;"></iframe><iframe src="[%- c.uri_for_action('/customer/calls_svg', [contract.id]) -%]" width="550px" height="600px" id="svgpreview" class="display:inline;"><canvas id="svgpreview_canvas" width="200" height="200"></canvas>

Write Preview
Loading…
Cancel
Save