Implementing a WYSIWYG report builder using HTML / CSS / JQuery?
I am developing a dashboard that fetches statistics using API from various platforms like Google Analytics, Google AdWords, etc.
After the user has pulled out all the necessary data and saved it in the database, the user can conveniently get statistics and display them on one screen in the dashboard, as well as graphs and other graphical widgets to show trends.
The end result I would like to achieve is to create a WYSIWYG report builder if possible, so the user can design CSS / HTML pages and save their report templates and eventually export them to a PDF file. I have some CSS elements that I would like to render already created. However, I would like to let the user choose how to select and scale these CSS elements. However, I'm not sure how complicated such an implementation is, and how to approach the implementation of such a function.
I researched and found out that there are jQuery plugins that allow you to drag / resize CSS elements as such:
$(function() {
var $foo = $('#foo').resizable().draggable();
$('#transform').on('click', function() {
$foo.css({
'-moz-transform': 'rotate(60deg)',
'-webkit-transform': 'rotate(60deg)',
'-ms-transform': 'rotate(60deg)'
});
});
});
Can a managed page be saved as a template? I am guessing that I will need to use a different plugin to export the HTML page to PDF.
Are there any existing tools out there that do something like this? In a nutshell, I'm looking to implement a reporting tool that saves custom templates and exports to PDF. I've tried looking around but came up with nothing, so I'm wondering if the communities know of any tools or combination of tools that can achieve this.
Apologies for any confusion regarding my question. Thank you in advance!
source to share
Updated script http://jsfiddle.net/Ja4dY/260/ Follow the console after clicking Save, you can post this data easily. If the code vanishes, here's a backup:
The HTML part:
<button id="rotate_left">Rotate left</button>
<button id="rotate_right">Rotate right</button>
<button id="save">Save</button>
<div class="template_area">
<div id="foo" class="template_box">Hello</div>
<div id="other" class="template_box">What this?</div>
</div>
Styles
.template_area {
position: relative;
margin-top: 30px;
background: none #efefef;
height: 300px;
}
#foo {
border: 2px solid red;
width: 200px;
height: 150px;
position: absolute;
top: 150px;
left: 50px;
}
#other {
border: 2px solid blue;
width: 150px;
height: 50px;
position: absolute;
top: 100px;
left: 50px;
}
.selected_box {
border: 1px solid green !important;
}
Script:
var selectedBox = false;
$(function() {
$('.template_box').resizable().draggable();
$('.template_box').on('click', function(e) {
var thisElement = $(this);
$('.template_box').removeClass('selected_box');
thisElement.addClass('selected_box');
selectedBox = thisElement;
});
function rotateElement( degree ) {
if ( !selectedBox.data('rotate') ) {
selectedBox.data('rotate', 0);
};
selectedBox.data('rotate', selectedBox.data('rotate')+degree);
selectedBox.css({
'-moz-transform': 'rotate(' + selectedBox.data('rotate') + 'deg)',
'-webkit-transform': 'rotate(' + selectedBox.data('rotate') + 'deg)',
'-ms-transform': 'rotate(' + selectedBox.data('rotate') + 'deg)'
});
};
$('#rotate_left').on('click', function(e) {
if ( selectedBox ) {
rotateElement( -30 );
};
});
$('#rotate_right').on('click', function(e) {
if ( selectedBox ) {
rotateElement( 30 );
};
});
$('#save').on('click', function() {
var toPost = [];
$('.template_box').each(function(i) {
var thisBox = $(this);
var id = thisBox.attr('id');
var left = thisBox.position().left;
var top = thisBox.position().top;
var rotate = thisBox.data('rotate') || 0;
var data = {
'id': id,
'left': left,
'top': top,
'rotate': rotate
};
toPost.push( data );
});
console.log( toPost );
});
});
This is just an idea, the JS code is not perfect.
source to share