mirror of
				https://github.com/billz/raspap-webgui.git
				synced 2025-03-01 10:31:47 +00:00 
			
		
		
		
	new feature data usage hourly
This commit is contained in:
		| @@ -26,6 +26,8 @@ if (strlen($interface) > IFNAMSIZ) { | ||||
|     exit('Invalid interface name.'); | ||||
| } | ||||
|  | ||||
| require_once './get_bandwidth_hourly.php'; | ||||
|  | ||||
| exec(sprintf('vnstat -i %s --json ', escapeshellarg($interface)), $jsonstdoutvnstat, | ||||
|      $exitcodedaily); | ||||
| if ($exitcodedaily !== 0) { | ||||
|   | ||||
							
								
								
									
										63
									
								
								ajax/bandwidth/get_bandwidth_hourly.php
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										63
									
								
								ajax/bandwidth/get_bandwidth_hourly.php
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,63 @@ | ||||
| <?php  | ||||
| if (filter_input(INPUT_GET, 'tu') == 'h') { | ||||
|  | ||||
| 	header('X-Content-Type-Options: nosniff'); | ||||
| 	header('Content-Type: application/json'); | ||||
|  | ||||
| 	$data_template = array( | ||||
| 		0 	=> array('date' => '00:00', 'rx' => 0, 'tx' => 0), | ||||
| 		1 	=> array('date' => '01:00', 'rx' => 0, 'tx' => 0), | ||||
| 		2 	=> array('date' => '02:00', 'rx' => 0, 'tx' => 0), | ||||
| 		3 	=> array('date' => '03:00', 'rx' => 0, 'tx' => 0), | ||||
| 		4 	=> array('date' => '04:00', 'rx' => 0, 'tx' => 0), | ||||
| 		5 	=> array('date' => '05:00', 'rx' => 0, 'tx' => 0), | ||||
| 		6 	=> array('date' => '06:00', 'rx' => 0, 'tx' => 0), | ||||
| 		7 	=> array('date' => '07:00', 'rx' => 0, 'tx' => 0), | ||||
| 		8 	=> array('date' => '08:00', 'rx' => 0, 'tx' => 0), | ||||
| 		9 	=> array('date' => '09:00', 'rx' => 0, 'tx' => 0), | ||||
| 		10 	=> array('date' => '10:00', 'rx' => 0, 'tx' => 0), | ||||
| 		11 	=> array('date' => '11:00', 'rx' => 0, 'tx' => 0), | ||||
| 		12 	=> array('date' => '12:00', 'rx' => 0, 'tx' => 0), | ||||
| 		13 	=> array('date' => '13:00', 'rx' => 0, 'tx' => 0), | ||||
| 		14 	=> array('date' => '14:00', 'rx' => 0, 'tx' => 0), | ||||
| 		15 	=> array('date' => '15:00', 'rx' => 0, 'tx' => 0), | ||||
| 		16 	=> array('date' => '16:00', 'rx' => 0, 'tx' => 0), | ||||
| 		17 	=> array('date' => '17:00', 'rx' => 0, 'tx' => 0), | ||||
| 		18 	=> array('date' => '18:00', 'rx' => 0, 'tx' => 0), | ||||
| 		19 	=> array('date' => '19:00', 'rx' => 0, 'tx' => 0), | ||||
| 		20 	=> array('date' => '20:00', 'rx' => 0, 'tx' => 0), | ||||
| 		21 	=> array('date' => '21:00', 'rx' => 0, 'tx' => 0), | ||||
| 		22 	=> array('date' => '22:00', 'rx' => 0, 'tx' => 0), | ||||
| 		23 	=> array('date' => '23:00', 'rx' => 0, 'tx' => 0) | ||||
| 	); | ||||
|  | ||||
|  | ||||
|  | ||||
|  | ||||
| 	exec(sprintf('vnstat -i %s --json h', escapeshellarg($interface)), $jsonstdoutvnstat, $exitcodedaily); | ||||
| 	if ($exitcodedaily !== 0) { | ||||
| 		exit('vnstat error'); | ||||
| 	} | ||||
|  | ||||
| 	$jsonobj = json_decode($jsonstdoutvnstat[0], true)['interfaces'][0]; | ||||
| 	$jsonData = $jsonobj['traffic']['hours']; | ||||
| 	for ($i = count($jsonData) - 1; $i >= 0; --$i) { | ||||
| 		$data_template[$jsonData[$i]['id']]['rx'] = round($jsonData[$i]['rx'] / 1024, 0); | ||||
| 		$data_template[$jsonData[$i]['id']]['tx'] = round($jsonData[$i]['tx'] / 1024, 0); | ||||
| 	} | ||||
|  | ||||
| 	$data = array(); | ||||
| 	$hour = $jsonobj['updated']['time']['hour']; | ||||
| 	foreach ($data_template as $key => $value) { | ||||
| 		if ($key > $hour) { | ||||
| 			array_push($data, $value); | ||||
| 		} | ||||
| 	} | ||||
| 	foreach ($data_template as $key => $value) { | ||||
| 		if ($key <= $hour) { | ||||
| 			array_push($data, $value); | ||||
| 		} | ||||
| 	} | ||||
| 	echo json_encode($data); | ||||
| 	exit(0); | ||||
| } | ||||
| @@ -5,6 +5,7 @@ | ||||
|  */ | ||||
| function DisplayDataUsage(&$extraFooterScripts) | ||||
| { | ||||
| exec("ip -o link show | awk -F ': ' '{print $2}' | grep -v lo ", $interfacesWlo); | ||||
| ?> | ||||
|   <div class="row"> | ||||
|     <div class="col-lg-12"> | ||||
| @@ -16,27 +17,48 @@ function DisplayDataUsage(&$extraFooterScripts) | ||||
|                 <div class="panel panel-default"> | ||||
|                   <div class="panel-body"> | ||||
|                     <ul id="tabbarBandwidth" class="nav nav-tabs" role="tablist"> | ||||
|                       <li role="presentation" class="active"><a href="#daily" aria-controls="daily" role="tab" data-toggle="tab"><?php echo _("Daily"); ?></a></li> | ||||
|                       <li role="presentation" class="active"><a href="#hourly" aria-controls="hourly" role="tab" data-toggle="tab"><?php echo _("Hourly"); ?></a></li> | ||||
|                       <li role="presentation" class=""><a href="#daily" aria-controls="daily" role="tab" data-toggle="tab"><?php echo _("Daily"); ?></a></li> | ||||
|                       <li role="presentation" class=""><a href="#monthly" aria-controls="monthly" role="tab" data-toggle="tab"><?php echo _("Monthly"); ?></a></li> | ||||
|                     </ul> | ||||
|                     <div id="tabsBandwidth" class="tabcontenttraffic tab-content"> | ||||
|                       <div role="tabpanel" class="tab-pane active fade in" id="daily"> | ||||
|                       <div role="tabpanel" class="tab-pane active fade in" id="hourly"> | ||||
|                         <div class="row"> | ||||
|                           <div class="col-lg-12"> | ||||
|                             <h4><?php echo _('Hourly traffic amount'); ?></h4> | ||||
|                             <label for="cbxInterfacehourly"><?php echo _('interface'); ?></label>  | ||||
|                             <select id="cbxInterfacehourly" class="form-control" name="interfacehourly"> | ||||
| <?php | ||||
| foreach ($interfacesWlo as $interface) { | ||||
|     echo '                              <option value="' , htmlentities($interface, ENT_QUOTES) , '">' , | ||||
|             htmlentities($interface, ENT_QUOTES) , '</option>' , PHP_EOL; | ||||
| } | ||||
| ?> | ||||
|                             </select> | ||||
|                             <div class="hidden alert alert-info" id="divLoaderBandwidthhourly"> | ||||
|                             <?php echo sprintf(_("Loading %s bandwidth chart"), _('hourly')); ?> | ||||
|                             </div> | ||||
|                             <div id="divChartBandwidthhourly"></div> | ||||
|                             <div id="divTableBandwidthhourly"></div> | ||||
|                           </div> | ||||
|                         </div> | ||||
|                       </div><!-- /.tab-pane --> | ||||
|                       <div role="tabpanel" class="tab-pane fade" id="daily"> | ||||
|                         <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="interfacedaily"> | ||||
| <?php | ||||
| exec("ip -o link show | awk -F ': ' '{print $2}' | grep -v lo ", $interfacesWlo); | ||||
| foreach ($interfacesWlo as $interface) { | ||||
|     echo '                              <option value="' , htmlentities($interface, ENT_QUOTES) , '">' , | ||||
|             htmlentities($interface, ENT_QUOTES) , '</option>' , PHP_EOL; | ||||
| } | ||||
|  | ||||
| ?> | ||||
|                             </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> | ||||
| @@ -53,7 +75,6 @@ foreach ($interfacesWlo as $interface) { | ||||
|     echo '                            <option value="' , htmlentities($interface, ENT_QUOTES) , '">' , | ||||
|             htmlentities($interface, ENT_QUOTES) , '</option>' , PHP_EOL; | ||||
| } | ||||
|  | ||||
| ?> | ||||
|                             </select> | ||||
|                             <div class="hidden alert alert-info" id="divLoaderBandwidthmonthly"> | ||||
|   | ||||
| @@ -9,8 +9,8 @@ | ||||
|             element: placeholder, | ||||
|             xkey: 'date', | ||||
|             ykeys: ['rx', 'tx'], | ||||
|             labels: [_t['send']+' '+datasizeunits.toUpperCase(),  | ||||
|                      _t['receive']+' '+datasizeunits.toUpperCase()] | ||||
|             labels: [_t['receive']+' '+datasizeunits.toUpperCase(),  | ||||
|                      _t['send']+' '+datasizeunits.toUpperCase()] | ||||
|         }); | ||||
|  | ||||
|       return barchart; | ||||
| @@ -31,9 +31,11 @@ | ||||
|      */ | ||||
|     function ShowBandwidthChartHandler(e) { | ||||
|         // Remove all morrisjs charts | ||||
|         $('#divChartBandwidthhourly').empty(); | ||||
|         $('#divChartBandwidthdaily').empty(); | ||||
|         $('#divChartBandwidthmonthly').empty(); | ||||
|         // Remove all datatables | ||||
|         $('#divTableBandwidthhourly').empty(); | ||||
|         $('#divTableBandwidthdaily').empty(); | ||||
|         $('#divTableBandwidthmonthly').empty(); | ||||
|         // Construct ajax uri for getting the proper data. | ||||
| @@ -66,8 +68,8 @@ | ||||
|                 'order': [[ 0, 'ASC' ]], | ||||
|                 'columns': [ | ||||
|                     { 'data': 'date' }, | ||||
|                     { 'data': 'rx', "title": _t['send']+' '+datasizeunits.toUpperCase() }, | ||||
|                     { 'data': 'tx', "title": _t['receive']+' '+datasizeunits.toUpperCase() }] | ||||
|                     { 'data': 'rx', "title": _t['receive']+' '+datasizeunits.toUpperCase() }, | ||||
|                     { 'data': 'tx', "title": _t['send']+' '+datasizeunits.toUpperCase() }] | ||||
|             }); | ||||
|         }).fail(function(xhr, textStatus) { | ||||
|             if (window.console) { | ||||
| @@ -80,8 +82,8 @@ | ||||
|  | ||||
|     $(document).ready(function() { | ||||
|         $('#tabbarBandwidth a[data-toggle="tab"]').on('shown.bs.tab', ShowBandwidthChartHandler); | ||||
|         $('#cbxInterfacehourly').on('change', ShowBandwidthChartHandler); | ||||
|         $('#cbxInterfacedaily').on('change', ShowBandwidthChartHandler); | ||||
|         $('#cbxInterfaceweekly').on('change', ShowBandwidthChartHandler); | ||||
|         $('#cbxInterfacemonthly').on('change', ShowBandwidthChartHandler); | ||||
|         ShowBandwidthChartHandler(); | ||||
|     }); | ||||
|   | ||||
		Reference in New Issue
	
	Block a user