Add HTML5 cache for json data to speedup page display and offload RPi

XavierBerger · Jul 19, 2013 · 3c3e23b · 3c3e23b
1 parent e6c566e
commit 3c3e23b
Show file tree

Hide file tree

Showing 9 changed files with 107 additions and 101 deletions.
diff --git 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
@@ -23,6 +23,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="RPi-Monitor">
     <meta name="author" content="RPi-Experiences">
+    <meta http-equiv="Cache-control" content="public" />
+
 
     <!-- CSS -->
     <link href="./css/bootstrap.min.css" rel="stylesheet">

diff --git 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
@@ -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('<li><a href="http://'+data[i].link+'">'+data[i].name+'</a></li>');
+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("<b>Can not get information ("+name+".json) from RPi-Monitor server.</b>");
+        $('#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('<li><a href="http://'+data[i].link+'">'+data[i].name+'</a></li>');
     }
-  })
+    $('#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='<ul class="dropdown-menu">';
-      dropDownMenu+='<li class="nav-header">Status</li>'
-      for ( var iloop=0; iloop < data.status.length; iloop++){
-        dropDownMenu+='<li><a href="status.html?activePage='+iloop+'">'+data.status[iloop]+'</a></li>';
-      }
-      dropDownMenu+='</ul>';
-      $('#statuslink').html( 'Status <b class="caret"></b>')
-      $(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='<ul class="dropdown-menu">';
+    dropDownMenu+='<li class="nav-header">Status</li>'
+    for ( var iloop=0; iloop < data.status.length; iloop++){
+      dropDownMenu+='<li><a href="status.html?activePage='+iloop+'">'+data.status[iloop]+'</a></li>';
     }
-    if ( data.statistics.length > 1 ){
-      $('#statisticsmenu').addClass('dropdown');
-      var dropDownMenu='<ul class="dropdown-menu">';
-      dropDownMenu+='<li class="nav-header">Statistics</li>'
-      for ( var iloop=0; iloop < data.statistics.length; iloop++){
-        dropDownMenu+='<li><a href="statistics.html?activePage='+iloop+'">'+data.statistics[iloop]+'</a></li>';
-      }
-      dropDownMenu+='</ul>';
-      $('#statisticslink').html( 'Statistics <b class="caret"></b>')
-      $(dropDownMenu).insertAfter('#statisticslink');
-      $('#statisticslink').addClass('dropdown-toggle');
-      $('#statisticslink').attr('data-toggle','dropdown');
-      $('#statisticslink').attr('href','#');
+    dropDownMenu+='</ul>';
+    $('#statuslink').html( 'Status <b class="caret"></b>')
+    $(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='<ul class="dropdown-menu">';
+    dropDownMenu+='<li class="nav-header">Statistics</li>'
+    for ( var iloop=0; iloop < data.statistics.length; iloop++){
+      dropDownMenu+='<li><a href="statistics.html?activePage='+iloop+'">'+data.statistics[iloop]+'</a></li>';
     }
-
-
-  });
+    dropDownMenu+='</ul>';
+    $('#statisticslink').html( 'Statistics <b class="caret"></b>')
+    $(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
@@ -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("<b>Can not get information (static.json) from RPi-Monitor server.</b>");
-            $('#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 ) {
-      $('<h2><p class="text-info">'+data[activePage].name+'</p></h2><hr>').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 ) {
+    $('<h2><p class="text-info">'+graphconf[activePage].name+'</p></h2><hr>').insertBefore("#insertionPoint");
+  }
 
     localStorage.setItem('activePage', activePage);localStorage.setItem('activePage', activePage);
     FetchGraph();
-  })
-  .fail(function () {
-    $('#message').html("<b>Can not get information (statistics.json) from RPi-Monitor server.</b>");
-    $('#message').removeClass('hide');
-  });
 }
 
 function SetGraphlist() {

diff --git 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("<b>Can not get information (dynamic.json) from RPi-Monitor server.</b>");
@@ -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 ) {
-      $('<h2><p class="text-info">'+data[activePage].name+'</p></h2><hr>').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("<b>Can not get information (status.json) from RPi-Monitor server.</b>");
-      $('#message').removeClass('hide');
-  });
-
+  data = getData('status');
+  if ( data.length > 1 ) {
+    $('<h2><p class="text-info">'+data[activePage].name+'</p></h2><hr>').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("<b>Can not get information (static.json) from RPi-Monitor server.</b>");
-    $('#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
@@ -23,6 +23,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="RPi-Monitor">
     <meta name="author" content="RPi-Experiences">
+    <meta http-equiv="Cache-control" content="public" />
 
     <!-- CSS -->
     <link href="./css/bootstrap.min.css" rel="stylesheet">

diff --git a/rpimonitor/web/statistics.html b/rpimonitor/web/statistics.html
@@ -23,6 +23,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="RPi-Monitor">
     <meta name="author" content="RPi-Experiences">
+    <meta http-equiv="Cache-control" content="public" />
 
     <!-- CSS -->
     <link href="./css/bootstrap.min.css" rel="stylesheet">

diff --git a/rpimonitor/web/status.html b/rpimonitor/web/status.html
@@ -23,6 +23,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="RPi-Monitor">
     <meta name="author" content="RPi-Experiences">
+    <meta http-equiv="Cache-control" content="public" />
 
     <!-- CSS -->
     <link href="./css/bootstrap.min.css" rel="stylesheet">