From b3d7c06c60002a473bb3289acd283276542cabb7 Mon Sep 17 00:00:00 2001
From: D9ping <D9ping@users.noreply.github.com>
Date: Tue, 11 Sep 2018 21:00:23 +0200
Subject: [PATCH] Translatable strings in bandwidthcharts.js.

Signed-off-by: D9ping <D9ping@users.noreply.github.com>
---
 includes/bandwidth.php | 18 +++++++++++++-----
 js/bandwidthcharts.js  | 17 ++++++++++-------
 2 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/includes/bandwidth.php b/includes/bandwidth.php
index 11bdd5a..175642b 100644
--- a/includes/bandwidth.php
+++ b/includes/bandwidth.php
@@ -27,7 +27,8 @@ function DisplayBandwidth(&$extraFooterScripts)
                         <div class="row">
                           <div class="col-lg-12">
                             <h4><?php echo _('Daily traffic amount'); ?></h4>
-                            <label for="cbxInterfacedaily"><?php echo _('interface'); ?></label> <select id="cbxInterfacedaily" class="form-control" name="interface">
+                            <label for="cbxInterfacedaily"><?php echo _('interface'); ?></label> 
+                            <select id="cbxInterfacedaily" class="form-control" name="interfacedaily">
 <?php
 exec("ip -o link show | awk -F ': ' '{print $2}' | grep -v lo ", $interfacesWlo);
 foreach ($interfacesWlo as $interface) {
@@ -37,9 +38,8 @@ foreach ($interfacesWlo as $interface) {
 
 ?>
                             </select>
-                            <div class="hidden alert alert-info" id="divLoaderBandwidthdaily">
-                            <?php echo sprintf(_("Loading %s bandwidth chart"), _('daily')); ?>
-                            </div>
+                            <div class="hidden alert alert-info" id="divLoaderBandwidthdaily"><?php
+                            echo sprintf(_("Loading %s bandwidth chart"), _('daily')); ?></div>
                             <div id="divChartBandwidthdaily"></div>
                             <div id="divTableBandwidthdaily"></div>
                           </div>
@@ -49,7 +49,8 @@ foreach ($interfacesWlo as $interface) {
                         <div class="row">
                           <div class="col-lg-12">
                             <h4><?php echo _("Monthly traffic amount"); ?></h4>
-                            <label for="cbxInterfacemonthly"><?php echo _('interface'); ?></label> <select id="cbxInterfacemonthly" class="form-control" name="interface">
+                            <label for="cbxInterfacemonthly"><?php echo _('interface'); ?></label> 
+                            <select id="cbxInterfacemonthly" class="form-control" name="interfacemonthly">
 <?php
 foreach ($interfacesWlo as $interface) {
     echo '                            <option value="' , htmlentities($interface, ENT_QUOTES) , '">' ,
@@ -76,7 +77,14 @@ foreach ($interfacesWlo as $interface) {
       </div><!-- /.panel-primary -->
     </div><!-- /.col-lg-12 -->
   </div><!-- /.row -->
+<script type="text/javascript"<?php //echo ' nonce="'.$csp_page_nonce.'"'; ?>>
+// js translations:
+var t = new Array();
+t['send'] = '<?php echo addslashes(_('Send')); ?>';
+t['receive'] = '<?php echo addslashes(_('Receive')); ?>';
+</script>
 <?php
+
     $extraFooterScripts[] = array('src'=>'vendor/raphael/raphael.min.js',
                                   'defer'=>false);
     $extraFooterScripts[] = array('src'=>'vendor/morrisjs/morris.min.js', 'defer'=>false);
diff --git a/js/bandwidthcharts.js b/js/bandwidthcharts.js
index 55c6c51..ac2ecaf 100644
--- a/js/bandwidthcharts.js
+++ b/js/bandwidthcharts.js
@@ -1,4 +1,4 @@
-(function($) {
+(function($, _t) {
     "use strict";
 
     /**
@@ -9,7 +9,8 @@
             element: placeholder,
             xkey: 'date',
             ykeys: ['rx', 'tx'],
-            labels: ['Received '+datasizeunits, 'Send '+datasizeunits]  // NOI18N
+            labels: [_t['send']+' '+datasizeunits.toUpperCase(), 
+                     _t['receive']+' '+datasizeunits.toUpperCase()]
         });
 
       return barchart;
@@ -19,7 +20,9 @@
      * Create a bootstrap data table.
      */
     function CreateDataTable(placeholder, timeunits) {
-        $("#"+placeholder).append('<table id="tableBandwidth'+timeunits+'" class="table table-striped container-fluid"><thead><tr><th>date</th><th>rx</th><th>tx</th></tr></thead><tbody></tbody></table>');
+        $("#"+placeholder).append('<table id="tableBandwidth'+timeunits+
+            '" class="table table-responsive table-striped container-fluid"><thead>'+
+            '<tr><th>date</th><th>rx</th><th>tx</th></tr></thead><tbody></tbody></table>');
     }
 
     /**
@@ -62,8 +65,8 @@
                 data: jsondata,
                 columns: [
                     { "data": "date" },
-                    { "data": "rx", "title": "received "+datasizeunits },
-                    { "data": "tx", "title": "send "+datasizeunits }]
+                    { "data": "rx", "title": _t['send']+' '+datasizeunits.toUpperCase() },
+                    { "data": "tx", "title": _t['receive']+' '+datasizeunits.toUpperCase() }]
             });
         }).fail(function(xhr, textStatus) {
             if (window.console) {
@@ -74,7 +77,7 @@
         });
     }
 
-    $( document ).ready(function() {
+    $(document).ready(function() {
         $('#tabbarBandwidth a[data-toggle="tab"]').on('shown.bs.tab', ShowBandwidthChartHandler);
         $('#cbxInterfacedaily').on('change', ShowBandwidthChartHandler);
         $('#cbxInterfaceweekly').on('change', ShowBandwidthChartHandler);
@@ -82,5 +85,5 @@
         ShowBandwidthChartHandler();
     });
 
-})(jQuery);
+})(jQuery, t);