mirror of
https://github.com/RaspAP/raspap-webgui.git
synced 2024-11-25 09:00:25 +00:00
use template for data usage page
This commit is contained in:
glaszig
parent
7fcdd5e89c
commit
c1f75a696a
2 changed files with 82 additions and 93 deletions
|
|
@ -6,98 +6,7 @@
|
||||||
function DisplayDataUsage(&$extraFooterScripts)
|
function DisplayDataUsage(&$extraFooterScripts)
|
||||||
{
|
{
|
||||||
exec("ip -o link show | awk -F ': ' '{print $2}' | grep -v lo ", $interfacesWlo);
|
exec("ip -o link show | awk -F ': ' '{print $2}' | grep -v lo ", $interfacesWlo);
|
||||||
?>
|
echo renderTemplate("data_usage", [ "interfaces" => $interfacesWlo ]);
|
||||||
<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 _("Data usage monitoring"); ?></div>
|
|
||||||
<div class="panel-body">
|
|
||||||
|
|
||||||
<ul id="tabbarBandwidth" class="nav nav-tabs" role="tablist">
|
|
||||||
<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="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
|
|
||||||
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 id="divChartBandwidthdaily"></div>
|
|
||||||
<div id="divTableBandwidthdaily"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div><!-- /.tab-pane -->
|
|
||||||
<div role="tabpanel" class="tab-pane fade" id="monthly">
|
|
||||||
<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="interfacemonthly">
|
|
||||||
<?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="divLoaderBandwidthmonthly">
|
|
||||||
<?php echo sprintf(_("Loading %s bandwidth chart"), _('monthly')); ?>
|
|
||||||
</div>
|
|
||||||
<div id="divChartBandwidthmonthly"></div>
|
|
||||||
<div id="divTableBandwidthmonthly"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div><!-- /.tab-pane -->
|
|
||||||
</div><!-- /.tabsBandwidth -->
|
|
||||||
|
|
||||||
</div><!-- /.panel-body -->
|
|
||||||
<div class="panel-footer"><?php echo _("Information provided by vnstat"); ?></div>
|
|
||||||
</div><!-- /.panel-primary -->
|
|
||||||
</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',
|
$extraFooterScripts[] = array('src'=>'vendor/raphael/raphael.min.js',
|
||||||
'defer'=>false);
|
'defer'=>false);
|
||||||
|
|
@ -105,4 +14,3 @@ t['receive'] = '<?php echo addslashes(_('Receive')); ?>';
|
||||||
$extraFooterScripts[] = array('src'=>'vendor/datatables/js/jquery.dataTables.min.js', 'defer'=>false);
|
$extraFooterScripts[] = array('src'=>'vendor/datatables/js/jquery.dataTables.min.js', 'defer'=>false);
|
||||||
$extraFooterScripts[] = array('src'=>'js/bandwidthcharts.js', 'defer'=>false);
|
$extraFooterScripts[] = array('src'=>'js/bandwidthcharts.js', 'defer'=>false);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
81
templates/data_usage.php
Normal file
81
templates/data_usage.php
Normal file
|
|
@ -0,0 +1,81 @@
|
||||||
|
<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 _("Data usage monitoring"); ?></div>
|
||||||
|
<div class="panel-body">
|
||||||
|
|
||||||
|
<ul id="tabbarBandwidth" class="nav nav-tabs" role="tablist">
|
||||||
|
<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="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 ($interfaces as $iface): ?>
|
||||||
|
<option value="<?php echo htmlentities($iface, ENT_QUOTES) ?>"><?php echo htmlentities($iface, ENT_QUOTES) ?></option>
|
||||||
|
<?php endforeach ?>
|
||||||
|
</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 foreach ($interfaces as $iface): ?>
|
||||||
|
<option value="<?php echo htmlentities($iface, ENT_QUOTES) ?>"><?php echo htmlentities($iface, ENT_QUOTES) ?></option>
|
||||||
|
<?php endforeach ?>
|
||||||
|
</select>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div><!-- /.tab-pane -->
|
||||||
|
<div role="tabpanel" class="tab-pane fade" id="monthly">
|
||||||
|
<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="interfacemonthly">
|
||||||
|
<?php foreach ($interfaces as $iface): ?>
|
||||||
|
<option value="<?php echo htmlentities($iface, ENT_QUOTES) ?>"><?php echo htmlentities($iface, ENT_QUOTES) ?></option>
|
||||||
|
<?php endforeach ?>
|
||||||
|
</select>
|
||||||
|
<div class="hidden alert alert-info" id="divLoaderBandwidthmonthly">
|
||||||
|
<?php echo sprintf(_("Loading %s bandwidth chart"), _('monthly')); ?>
|
||||||
|
</div>
|
||||||
|
<div id="divChartBandwidthmonthly"></div>
|
||||||
|
<div id="divTableBandwidthmonthly"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div><!-- /.tab-pane -->
|
||||||
|
</div><!-- /.tabsBandwidth -->
|
||||||
|
|
||||||
|
</div><!-- /.panel-body -->
|
||||||
|
<div class="panel-footer"><?php echo _("Information provided by vnstat"); ?></div>
|
||||||
|
</div><!-- /.panel-primary -->
|
||||||
|
</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>
|
||||||
Loading…
Reference in a new issue