Renamed bandwidth.php to data_usage.php.

Removed unused status_messages.php include in data_usage.php.
Use single quote style in bandwidthcharts.js.

Signed-off-by: D9ping <D9ping@users.noreply.github.com>

includes/data_usage.php

@@ -1,18 +1,15 @@
 <?php
-include_once( 'includes/status_messages.php' );
-
 
 /**
- * Generate html output for tab with charts and datatables
- * with vnstat bandwidth use information.
+ * Generate html for displaying data usage.
  */
-function DisplayBandwidth(&$extraFooterScripts)
+function DisplayDataUsage(&$extraFooterScripts)
 {
 ?>
   <div class="row">
     <div class="col-lg-12">
       <div class="panel panel-primary">
-        <div class="panel-heading"><i class="fa fa-bar-chart fa-fw"></i> <?php echo _("Bandwidth monitoring"); ?></div>
+        <div class="panel-heading"><i class="fa fa-bar-chart fa-fw"></i> <?php echo _("Data usage monitoring"); ?></div>
           <div class="panel-body">
             <div class="row">
               <div class="col-md-12">

index.php

@@ -33,7 +33,7 @@ include_once( 'includes/system.php' );
 include_once( 'includes/configure_client.php' );
 include_once( 'includes/networking.php' );
 include_once( 'includes/themes.php' );
-include_once( 'includes/bandwidth.php' );
+include_once( 'includes/data_usage.php' );
 
 $output = $return = 0;
 $page = $_GET['page'];
@@ -158,7 +158,7 @@ $theme_url = 'dist/css/'.htmlspecialchars($theme, ENT_QUOTES);
               <?php endif; ?>
               <?php if ( RASPI_VNSTAT_ENABLED ) : ?>
               <li>
-                <a href="index.php?page=bandwidth"><i class="fa fa-bar-chart fa-fw"></i> <?php echo _("Bandwidth"); ?></a>
+                <a href="index.php?page=data_use"><i class="fa fa-bar-chart fa-fw"></i> <?php echo _("Data usage"); ?></a>
               </li>
               <?php endif; ?>
               <li>
@@ -214,8 +214,8 @@ $extraFooterScripts = array();
           case "theme_conf":
             DisplayThemeConfig();
             break;
-          case "bandwidth":
-            DisplayBandwidth($extraFooterScripts);
+          case "data_use":
+            DisplayDataUsage($extraFooterScripts);
             break;
           case "system_info":
             DisplaySystem();

js/bandwidthcharts.js

@@ -17,7 +17,7 @@
     }
 
     /**
-     * Create a bootstrap data table.
+     * Create a jquery bootstrap datatable.
      */
     function CreateDataTable(placeholder, timeunits) {
         $("#"+placeholder).append('<table id="tableBandwidth'+timeunits+
@@ -31,16 +31,16 @@
      */
     function ShowBandwidthChartHandler(e) {
         // Remove all morrisjs charts
-        $("#divChartBandwidthdaily").empty();
-        $("#divChartBandwidthmonthly").empty();
+        $('#divChartBandwidthdaily').empty();
+        $('#divChartBandwidthmonthly').empty();
         // Remove all datatables
-        $("#divTableBandwidthdaily").empty();
-        $("#divTableBandwidthmonthly").empty();
+        $('#divTableBandwidthdaily').empty();
+        $('#divTableBandwidthmonthly').empty();
         // Construct ajax uri for getting the proper data.
-        var timeunit = $("ul#tabbarBandwidth li.active a").attr("href").substr(1);
+        var timeunit = $('ul#tabbarBandwidth li.active a').attr('href').substr(1);
         var uri = 'ajax/bandwidth/get_bandwidth.php?';
         uri += 'inet=';
-        uri += encodeURIComponent($("#cbxInterface"+timeunit+" option:selected").text());
+        uri += encodeURIComponent($('#cbxInterface'+timeunit+' option:selected').text());
         uri += '&tu=';
         uri += encodeURIComponent(timeunit.substr(0, 1));
         var datasizeunits = 'mb';
@@ -54,23 +54,24 @@
             url: uri,
             dataType: 'json',
             beforeSend: function() {
-                $("#divLoaderBandwidth"+timeunit).removeClass("hidden");
+                $('#divLoaderBandwidth'+timeunit).removeClass('hidden');
             }
         }).done(function(jsondata) {
-            $("#divLoaderBandwidth"+timeunit).addClass("hidden");
+            $('#divLoaderBandwidth'+timeunit).addClass('hidden');
             barchart.setData(jsondata);
             $('#tableBandwidth'+timeunit).DataTable({
-                searching: false,
-                paging: false,
-                data: jsondata,
-                columns: [
-                    { "data": "date" },
-                    { "data": "rx", "title": _t['send']+' '+datasizeunits.toUpperCase() },
-                    { "data": "tx", "title": _t['receive']+' '+datasizeunits.toUpperCase() }]
+                'searching': false,
+                'paging': false,
+                'data': jsondata,
+                'order': [[ 0, 'ASC' ]],
+                'columns': [
+                    { 'data': 'date' },
+                    { 'data': 'rx', "title": _t['send']+' '+datasizeunits.toUpperCase() },
+                    { 'data': 'tx', "title": _t['receive']+' '+datasizeunits.toUpperCase() }]
             });
         }).fail(function(xhr, textStatus) {
             if (window.console) {
-                console.error("server error");
+                console.error('server error');
             } else {
                 alert("server error");
             }