Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Revamped the UI layout so that content and scripts are in different b…

…locks to speed up page loads
  • Loading branch information...
commit 1201863734dc41b82525d5128bbefe3c308d715f 1 parent c7f15d8
@safwank authored
View
1  app.js
@@ -11,6 +11,7 @@ var routes = require('./routes');
app.configure(function(){
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
+ app.set('view options', { layout: false });
app.use(express.cookieParser());
app.use(express.session({secret: "string" }));
app.use(express.methodOverride());
View
80 views/batchimportstatus.jade
@@ -1,43 +1,47 @@
-p Step 1 - Download zip file
-progress#downloadZipFileProgress(min='0', max='100', value='0')
+extends layout
-p Step 2 - Unzip file
-progress#unzipFileProgress(min='0', max='100', value='0')
+block content
+ section.box
+ p Step 1 - Download zip file
+ progress#downloadZipFileProgress(min='0', max='100', value='0')
-p Step 3 - Import CSV files
-progress#importCSVProgress(max='100', value='0')
+ p Step 2 - Unzip file
+ progress#unzipFileProgress(min='0', max='100', value='0')
-p Step 4 - Create relationships
-progress#createRelationshipsProgress(min='0', max='100', value='0')
+ p Step 3 - Import CSV files
+ progress#importCSVProgress(max='100', value='0')
-script(src='http://code.jquery.com/jquery-1.6.2.min.js')
-script(src='/socket.io/socket.io.js')
-script(type='text/javascript')
- var socket = io.connect(window.location.hostname);
- var downloadZipFileProgress = $('#downloadZipFileProgress');
- var unzipFileProgress = $('#unzipFileProgress');
- var importCSVProgress = $('#importCSVProgress');
- var createRelationshipsProgress = $('#createRelationshipsProgress');
+ p Step 4 - Create relationships
+ progress#createRelationshipsProgress(min='0', max='100', value='0')
- socket.on('downloadZipFileProgress', function (data) {
- downloadZipFileProgress.attr('value', data.progress);
- });
-
- socket.on('unzipFileProgress', function (data) {
- unzipFileProgress.attr('value', data.progress);
- });
-
- socket.on('importCSVProgress', function (data) {
- var numberOfNodesLeftToImport = data.progress;
- if (numberOfNodesLeftToImport == 0)
- importCSVProgress.attr('value', 100);
- else
- importCSVProgress.removeAttr('value');
- });
-
- socket.on('createRelationshipsProgress', function (data) {
- if (data.progress == 100)
- createRelationshipsProgress.attr('value', 100);
- else
- createRelationshipsProgress.removeAttr('value');
- });
+block append scripts
+ script(src='/socket.io/socket.io.js')
+ script(type='text/javascript')
+ var socket = io.connect(window.location.hostname);
+ var downloadZipFileProgress = $('#downloadZipFileProgress');
+ var unzipFileProgress = $('#unzipFileProgress');
+ var importCSVProgress = $('#importCSVProgress');
+ var createRelationshipsProgress = $('#createRelationshipsProgress');
+
+ socket.on('downloadZipFileProgress', function (data) {
+ downloadZipFileProgress.attr('value', data.progress);
+ });
+
+ socket.on('unzipFileProgress', function (data) {
+ unzipFileProgress.attr('value', data.progress);
+ });
+
+ socket.on('importCSVProgress', function (data) {
+ var numberOfNodesLeftToImport = data.progress;
+ if (numberOfNodesLeftToImport == 0)
+ importCSVProgress.attr('value', 100);
+ else
+ importCSVProgress.removeAttr('value');
+ });
+
+ socket.on('createRelationshipsProgress', function (data) {
+ if (data.progress == 100)
+ createRelationshipsProgress.attr('value', 100);
+ else
+ createRelationshipsProgress.removeAttr('value');
+ });
View
83 views/index.jade
@@ -1,40 +1,43 @@
-section.box
- #obsah.content.box
- .in
- h2 Lorem ipsum dolor!
- p
- | Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- h3 Dolor sit amet:
- ul
- li
- a(href='#') Dolor in reprehenderit
- li
- a(href='#') In reprehenderit
- li
- a(href='#') Molot in reprehenderit in volupta
- li
- a(href='#') Rure dolor in reprehenderit in volupta
- h3 Lorem ipsum dolor
- p
- | Lorem ipsum dolor sit amet, consectetur adipisicing elit, im veniam, quis n ullamco laboris nisi ut aliquip
- | im veniam, quis n ullamco laboris nisi ut aliquip sed do eiusmod tempor incididunt ut labore et dolore magna
- | aliquaim veniam
- p
- | Quis n ullamco laboris nisi ut aliquip. Ut enim ad minim veniam, quis n ullamco laboris nisi ut aliquip ex ea commodo consequat.
- p
- | Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- p
- | Lorem ipsum dolor sit amet, consectetur adipisicing elit, im veniam, quis n ullamco laboris nisi ut aliquip
- | im veniam, quis n ullamco laboris nisi ut aliquip.
- #panel-left.box.panel
- .in
- p
- span 03/07/2008
- br
- | Duis aute irure dolor in repreh in voluptate velit esse cill dolore
- | eu.
- p
- span 03/07/2008
- br
- | Duis aute irure dolor in repreh in voluptate velit esse cill dolore
- | eu.
+extends layout
+
+block content
+ section.box
+ #obsah.content.box
+ .in
+ h2 Lorem ipsum dolor!
+ p
+ | Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ h3 Dolor sit amet:
+ ul
+ li
+ a(href='#') Dolor in reprehenderit
+ li
+ a(href='#') In reprehenderit
+ li
+ a(href='#') Molot in reprehenderit in volupta
+ li
+ a(href='#') Rure dolor in reprehenderit in volupta
+ h3 Lorem ipsum dolor
+ p
+ | Lorem ipsum dolor sit amet, consectetur adipisicing elit, im veniam, quis n ullamco laboris nisi ut aliquip
+ | im veniam, quis n ullamco laboris nisi ut aliquip sed do eiusmod tempor incididunt ut labore et dolore magna
+ | aliquaim veniam
+ p
+ | Quis n ullamco laboris nisi ut aliquip. Ut enim ad minim veniam, quis n ullamco laboris nisi ut aliquip ex ea commodo consequat.
+ p
+ | Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ p
+ | Lorem ipsum dolor sit amet, consectetur adipisicing elit, im veniam, quis n ullamco laboris nisi ut aliquip
+ | im veniam, quis n ullamco laboris nisi ut aliquip.
+ #panel-left.box.panel
+ .in
+ p
+ span 03/07/2008
+ br
+ | Duis aute irure dolor in repreh in voluptate velit esse cill dolore
+ | eu.
+ p
+ span 03/07/2008
+ br
+ | Duis aute irure dolor in repreh in voluptate velit esse cill dolore
+ | eu.
View
5 views/layout.jade
@@ -28,8 +28,11 @@ html
hr.noscreen
- section!= body
+ block content
footer
span.f-left
| © 2012 Safwan Kamarrudin
+
+ block scripts
+ script(src='http://code.jquery.com/jquery-1.6.2.min.js')
View
231 views/reports.jade
@@ -1,130 +1,133 @@
-section.box
- #obsah.content.box
- .in
- #chart
-
- #panel-left.box.panel
- .in
- p
- span.report.clickable(data-name='referrals', data-type='pie') Distribution of referrals
- p
- span.report.clickable(data-name='partners', data-type='pie') Distribution of partners
- p
- span.report.clickable(data-name='businesses', data-type='bar') Top businesses by revenue
- p
- span.report.clickable(data-name='individuals', data-type='bar') Top individuals by income
- p
- span.report.clickable(data-name='states', data-type='geo') Top states by businesses
+extends layout
-script(type='text/javascript', src='https://www.google.com/jsapi')
-script(src='http://code.jquery.com/jquery-1.6.2.min.js')
-script(type='text/javascript')
- google.load('visualization', '1', {packages:['corechart', 'geochart']});
- google.setOnLoadCallback(drawChart);
- var chartArea = document.getElementById('chart');
-
- function drawChart(event, options) {
- defaultOptions = {
- chartName: 'referrals',
- chartTitle: 'Distribution of referrals',
- chartType: 'pie'
- };
+block content
+ section.box
+ #obsah.content.box
+ .in
+ #chart
+
+ #panel-left.box.panel
+ .in
+ p
+ span.report.clickable(data-name='referrals', data-type='pie') Distribution of referrals
+ p
+ span.report.clickable(data-name='partners', data-type='pie') Distribution of partners
+ p
+ span.report.clickable(data-name='businesses', data-type='bar') Top businesses by revenue
+ p
+ span.report.clickable(data-name='individuals', data-type='bar') Top individuals by income
+ p
+ span.report.clickable(data-name='states', data-type='geo') Top states by businesses
- if (typeof options == 'object') {
- options = $.extend(defaultOptions, options);
- } else {
- options = defaultOptions;
- }
+block append scripts
+ script(type='text/javascript', src='https://www.google.com/jsapi')
+ script(type='text/javascript')
+ google.load('visualization', '1', {packages:['corechart', 'geochart']});
+ google.setOnLoadCallback(drawChart);
+ var chartArea = document.getElementById('chart');
- var reportUrl = '/reports/' + options.chartName;
- var responseData = $.ajax({
- url: reportUrl,
- dataType: 'json',
- async: false
- }).responseText;
- var reportData = JSON.parse(responseData);
- var data = google.visualization.arrayToDataTable(reportData);
+ function drawChart(event, options) {
+ defaultOptions = {
+ chartName: 'referrals',
+ chartTitle: 'Distribution of referrals',
+ chartType: 'pie'
+ };
+
+ if (typeof options == 'object') {
+ options = $.extend(defaultOptions, options);
+ } else {
+ options = defaultOptions;
+ }
+
+ var reportUrl = '/reports/' + options.chartName;
+ var responseData = $.ajax({
+ url: reportUrl,
+ dataType: 'json',
+ async: false
+ }).responseText;
+ var reportData = JSON.parse(responseData);
+ var data = google.visualization.arrayToDataTable(reportData);
- switch (options.chartType) {
- case 'pie':
- var googleOptions = getGoogleOptions(options);
- var chart = new google.visualization.PieChart(chartArea);
- chart.draw(data, googleOptions);
- break;
- case 'bar':
- var googleOptions = getGoogleOptions(options);
- googleOptions.legend.position = 'none';
- var chart = new google.visualization.BarChart(chartArea);
- chart.draw(data, googleOptions);
- break;
- case 'geo':
- var geoOptions = {
- region: 'AU',
- resolution: 'provinces',
- displayMode: 'markers',
- backgroundColor: 'transparent'
- };
- var chart = new google.visualization.GeoChart(chartArea);
- chart.draw(data, geoOptions);
+ switch (options.chartType) {
+ case 'pie':
+ var googleOptions = getGoogleOptions(options);
+ var chart = new google.visualization.PieChart(chartArea);
+ chart.draw(data, googleOptions);
+ break;
+ case 'bar':
+ var googleOptions = getGoogleOptions(options);
+ googleOptions.legend.position = 'none';
+ var chart = new google.visualization.BarChart(chartArea);
+ chart.draw(data, googleOptions);
+ break;
+ case 'geo':
+ var geoOptions = {
+ region: 'AU',
+ resolution: 'provinces',
+ displayMode: 'markers',
+ backgroundColor: 'transparent'
+ };
+ var chart = new google.visualization.GeoChart(chartArea);
+ chart.draw(data, geoOptions);
+ }
}
- }
- function getGoogleOptions(options) {
- var googleOptions = {
- title: options.chartTitle,
- titleTextStyle: {
- color: 'white'
- },
- legend: {
- textStyle: {
- color: 'white'
- }
- },
- backgroundColor: 'transparent',
- vAxis: {
+ function getGoogleOptions(options) {
+ var googleOptions = {
+ title: options.chartTitle,
titleTextStyle: {
color: 'white'
},
- textStyle: {
- color: 'white'
+ legend: {
+ textStyle: {
+ color: 'white'
+ }
},
- textPosition: 'in'
- },
- hAxis: {
- titleTextStyle: {
- color: 'white'
+ backgroundColor: 'transparent',
+ vAxis: {
+ titleTextStyle: {
+ color: 'white'
+ },
+ textStyle: {
+ color: 'white'
+ },
+ textPosition: 'in'
},
- textStyle: {
- color: 'white'
- }
- },
- chartArea: {
- width: '100%',
- height: '80%'
- },
- animation: {
- duration: 1000,
- easing: 'out',
- },
- };
- return googleOptions;
- }
+ hAxis: {
+ titleTextStyle: {
+ color: 'white'
+ },
+ textStyle: {
+ color: 'white'
+ }
+ },
+ chartArea: {
+ width: '100%',
+ height: '80%'
+ },
+ animation: {
+ duration: 1000,
+ easing: 'out',
+ },
+ };
+ return googleOptions;
+ }
- $('.report').click(function() {
- $('#chart').fadeOut('fast');
+ $('.report').click(function() {
+ $('#chart').fadeOut('fast');
- $('.report').css('text-decoration', '');
- $(this).css('text-decoration', 'underline');
+ $('.report').css('text-decoration', '');
+ $(this).css('text-decoration', 'underline');
- var chartName = $(this).data('name');
- var chartTitle = $(this).text();
- var chartType = $(this).data('type');
+ var chartName = $(this).data('name');
+ var chartTitle = $(this).text();
+ var chartType = $(this).data('type');
- drawChart(null, {
- chartName: chartName,
- chartTitle: chartTitle,
- chartType: chartType
- });
+ drawChart(null, {
+ chartName: chartName,
+ chartTitle: chartTitle,
+ chartType: chartType
+ });
- $('#chart').fadeIn('fast');
- });
+ $('#chart').fadeIn('fast');
+ });
Please sign in to comment.
Something went wrong with that request. Please try again.