From 3c3e23b8df2f8989297fc95559d5043fb13f6dba Mon Sep 17 00:00:00 2001 From: Xavier Berger Date: Fri, 19 Jul 2013 00:15:37 +0200 Subject: [PATCH] Add HTML5 cache for json data to speedup page display and offload RPi --- rpimonitor/rpimonitord | 5 + rpimonitor/web/index.html | 2 + rpimonitor/web/js/rpimonitor.index.js | 4 +- rpimonitor/web/js/rpimonitor.js | 108 +++++++++++++-------- rpimonitor/web/js/rpimonitor.statistics.js | 44 +++------ rpimonitor/web/js/rpimonitor.status.js | 42 +++----- rpimonitor/web/shellinabox.html | 1 + rpimonitor/web/statistics.html | 1 + rpimonitor/web/status.html | 1 + 9 files changed, 107 insertions(+), 101 deletions(-) diff --git a/rpimonitor/rpimonitord b/rpimonitor/rpimonitord index 678f20f..43207ba 100755 --- a/rpimonitor/rpimonitord +++ b/rpimonitor/rpimonitord @@ -76,6 +76,9 @@ sub Load $this->LoadFile($_); } + # Set version (used by web pagescache mechanism) + $this->{'version'} = localtime(); + # Load default values is not defined yet defined $this->{'daemon'}->{'user'} ||= "pi"; $this->{'daemon'}->{'group'} ||= "pi"; @@ -230,6 +233,7 @@ sub new "/statistics.json", "/menu.json", "/friends.json", + "/version.json", "/favicon.ico", "/index.html", @@ -408,6 +412,7 @@ sub Run $this->{'friends'} = encode_json(\@{$configuration->{'web'}->{'friends'}}); $this->{'static'} = encode_json(\%{$monitor->{'static'}}); $this->{'menu'} = encode_json(\%{$configuration->{'menu'}}); + $this->{'version'} = "{\"version\":\"$configuration->{'version'}\"}"; #print Data::Dumper->Dump([$this->{'paths'}]); # Create the server diff --git a/rpimonitor/web/index.html b/rpimonitor/web/index.html index 2433463..21e5310 100644 --- a/rpimonitor/web/index.html +++ b/rpimonitor/web/index.html @@ -23,6 +23,8 @@ + + diff --git a/rpimonitor/web/js/rpimonitor.index.js b/rpimonitor/web/js/rpimonitor.index.js index f9f6a3d..6c0b838 100644 --- a/rpimonitor/web/js/rpimonitor.index.js +++ b/rpimonitor/web/js/rpimonitor.index.js @@ -1,7 +1,5 @@ $(function () { setupqr(); doqr(document.URL); - $.getJSON('friends.json', function(data) { - ShowFriends(data.friends); - }); + ShowFriends(); }); diff --git a/rpimonitor/web/js/rpimonitor.js b/rpimonitor/web/js/rpimonitor.js index d5b6c99..351eea6 100644 --- a/rpimonitor/web/js/rpimonitor.js +++ b/rpimonitor/web/js/rpimonitor.js @@ -66,16 +66,39 @@ function SetShellinaboxMenu(){ } } -function ShowFriends(){ - $.getJSON('friends.json', function(data) { - if ( data.length > 0 ) { - $('#friends').empty(); - for (var i = 0; i < data.length; i++) { - $('#friends').append('
  • '+data[i].name+'
    • '); +function getData( name ){ + if ( localStorage.getItem(name+'Version') == localStorage.getItem('version') ) { + return eval("(" + localStorage.getItem(name) + ')'); + } + else + { + return $.ajax({ + url: name + '.json', + dataType: 'json', + async: false, + success: function(data) { + localStorage.setItem(name, JSON.stringify(data)) + localStorage.setItem(name+'Version', localStorage.getItem('version')) + return data + }, + fail: function () { + $('#message').html("Can not get information ("+name+".json) from RPi-Monitor server."); + $('#message').removeClass('hide'); + return null } - $('#divfriends').removeClass('hide'); + }).responseJSON + } +} + +function ShowFriends(){ + var data = getData('friends') + if ( data.length > 0 ) { + $('#friends').empty(); + for (var i = 0; i < data.length; i++) { + $('#friends').append('
  • '+data[i].name+'
    • '); } - }) + $('#divfriends').removeClass('hide'); + } } function AddFooter(){ @@ -245,41 +268,49 @@ function UpdateMenu(){ return; } - $.getJSON('menu.json', function(data) { - if ( data.status.length > 1 ){ - $('#statusmenu').addClass('dropdown'); - var dropDownMenu=''; - $('#statuslink').html( 'Status ') - $(dropDownMenu).insertAfter('#statuslink'); - $('#statuslink').addClass('dropdown-toggle'); - $('#statuslink').attr('data-toggle','dropdown'); - $('#statuslink').attr('href','#'); + var data = getData('menu'); + if ( data.status.length > 1 ){ + $('#statusmenu').addClass('dropdown'); + var dropDownMenu=''; + $('#statuslink').html( 'Status ') + $(dropDownMenu).insertAfter('#statuslink'); + $('#statuslink').addClass('dropdown-toggle'); + $('#statuslink').attr('data-toggle','dropdown'); + $('#statuslink').attr('href','#'); + } + if ( data.statistics.length > 1 ){ + $('#statisticsmenu').addClass('dropdown'); + var dropDownMenu=''; + $('#statisticslink').html( 'Statistics ') + $(dropDownMenu).insertAfter('#statisticslink'); + $('#statisticslink').addClass('dropdown-toggle'); + $('#statisticslink').attr('data-toggle','dropdown'); + $('#statisticslink').attr('href','#'); + } } +function getVersion(){ + $.ajax({ + url: 'version.json', + dataType: 'json', + async: false, + success: function(data) { + localStorage.setItem('version', data.version); + } + }) +} + $(function () { // Load data from local storage @@ -290,6 +321,7 @@ $(function () { statusautorefresh=(localStorage.getItem('statusautorefresh') === 'true'); // Construct the page template + getVersion(); AddTopmenu(); UpdateMenu(); AddDialogs(); diff --git a/rpimonitor/web/js/rpimonitor.statistics.js b/rpimonitor/web/js/rpimonitor.statistics.js index cfdf53c..f99188a 100644 --- a/rpimonitor/web/js/rpimonitor.statistics.js +++ b/rpimonitor/web/js/rpimonitor.statistics.js @@ -20,39 +20,23 @@ var activePage; var static; function Start() { - $.getJSON('static.json', function (data) { - try { - static = data; - } - catch(e){ - static = null; - } - }) .fail(function () { - $('#message').html("Can not get information (static.json) from RPi-Monitor server."); - $('#message').removeClass('hide'); - }); - - $.getJSON('statistics.json', function (data) { - localStorage.setItem('graphconf', JSON.stringify(data)); - graphconf = eval('(' + localStorage.getItem('graphconf') + ')'); - activestat = localStorage.getItem('activestat') || 0; - activePage = GetURLParameter('activePage'); - if ( typeof activePage == 'undefined') { - activePage=localStorage.getItem('activePage', activePage); - if ( activePage == null ) { activePage = 0 } - } - localStorage.setItem('activePage', activePage); - if ( data.length > 1 ) { - $('

    '+data[activePage].name+'

    ').insertBefore("#insertionPoint"); - } + static = getData('static') + + graphconf = getData('statistics') + + activestat = localStorage.getItem('activestat') || 0; + activePage = GetURLParameter('activePage'); + if ( typeof activePage == 'undefined') { + activePage=localStorage.getItem('activePage', activePage); + if ( activePage == null ) { activePage = 0 } + } + localStorage.setItem('activePage', activePage); + if ( graphconf.length > 1 ) { + $('

    '+graphconf[activePage].name+'

    ').insertBefore("#insertionPoint"); + } localStorage.setItem('activePage', activePage);localStorage.setItem('activePage', activePage); FetchGraph(); - }) - .fail(function () { - $('#message').html("Can not get information (statistics.json) from RPi-Monitor server."); - $('#message').removeClass('hide'); - }); } function SetGraphlist() { diff --git a/rpimonitor/web/js/rpimonitor.status.js b/rpimonitor/web/js/rpimonitor.status.js index b22a0fb..6d250ae 100644 --- a/rpimonitor/web/js/rpimonitor.status.js +++ b/rpimonitor/web/js/rpimonitor.status.js @@ -136,11 +136,6 @@ function UpdateStatus () { SetProgressBarAnimate(); ActivatePopover(); - if ( firstload == true ){ - firstload=false; - ShowFriends(data.friends); - } - }) .fail(function() { $('#message').html("Can not get information (dynamic.json) from RPi-Monitor server."); @@ -158,22 +153,15 @@ function ConstructPage() if ( activePage ==null ) { activePage = 0 } }; localStorage.setItem('activePage', activePage); - $.getJSON('status.json', function(data) { - localStorage.setItem('status', JSON.stringify(data)); - if ( data.length > 1 ) { - $('

    '+data[activePage].name+'

    ').insertBefore("#insertionPoint"); - } - for ( var iloop=0; iloop < data[activePage].content.length; iloop++) { - $(RowTemplate(iloop,"img/"+data[activePage].content[iloop].icon,data[activePage].content[iloop].name)).insertBefore("#insertionPoint"); - strips=data[activePage].content; - } - UpdateStatus(); - }) - .fail(function() { - $('#message').html("Can not get information (status.json) from RPi-Monitor server."); - $('#message').removeClass('hide'); - }); - + data = getData('status'); + if ( data.length > 1 ) { + $('

    '+data[activePage].name+'

    ').insertBefore("#insertionPoint"); + } + for ( var iloop=0; iloop < data[activePage].content.length; iloop++) { + $(RowTemplate(iloop,"img/"+data[activePage].content[iloop].icon,data[activePage].content[iloop].name)).insertBefore("#insertionPoint"); + strips=data[activePage].content; + } + UpdateStatus(); } $(function () { @@ -184,15 +172,9 @@ $(function () { ShowFriends(); /* Get static values once */ - $.getJSON('static.json', function(data) { - localStorage.setItem('static', JSON.stringify(data)); - ConstructPage(); - - }) - .fail(function() { - $('#message').html("Can not get information (static.json) from RPi-Monitor server."); - $('#message').removeClass('hide'); - }); + data = getData('static'); + localStorage.setItem('static', JSON.stringify(data)); + ConstructPage(); if ( statusautorefresh ) { refreshTimerId = setInterval( UpdateStatus , 10000 ) diff --git a/rpimonitor/web/shellinabox.html b/rpimonitor/web/shellinabox.html index 0df0169..09040bc 100644 --- a/rpimonitor/web/shellinabox.html +++ b/rpimonitor/web/shellinabox.html @@ -23,6 +23,7 @@ + diff --git a/rpimonitor/web/statistics.html b/rpimonitor/web/statistics.html index 5dc0bf9..0c122ba 100644 --- a/rpimonitor/web/statistics.html +++ b/rpimonitor/web/statistics.html @@ -23,6 +23,7 @@ + diff --git a/rpimonitor/web/status.html b/rpimonitor/web/status.html index dbbd9d3..c7036aa 100644 --- a/rpimonitor/web/status.html +++ b/rpimonitor/web/status.html @@ -23,6 +23,7 @@ +