mirror of
https://github.com/billz/raspap-webgui.git
synced 2025-12-26 23:26:47 +01:00
Merge pull request #1798 from RaspAP/feat/tabbed-dashboard
Feature: Tabbed dashboard
This commit is contained in:
Bill Zimmerman
@@ -169,7 +169,7 @@ th {
|
||||
}
|
||||
|
||||
canvas#divDBChartBandwidthhourly {
|
||||
height: 350px!important;
|
||||
height: 509px!important;
|
||||
}
|
||||
|
||||
.dbChart {
|
||||
|
||||
@@ -7,7 +7,7 @@ require_once 'includes/functions.php';
|
||||
/**
|
||||
* Displays the dashboard
|
||||
*/
|
||||
function DisplayDashboard(): void
|
||||
function DisplayDashboard(&$extraFooterScripts): void
|
||||
{
|
||||
// instantiate RaspAP objects
|
||||
$system = new \RaspAP\System\Sysinfo;
|
||||
@@ -123,6 +123,7 @@ function DisplayDashboard(): void
|
||||
"status"
|
||||
)
|
||||
);
|
||||
$extraFooterScripts[] = array('src'=>'app/js/dashboardchart.js', 'defer'=>false);
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<?php ob_start() ?>
|
||||
<?php if (!RASPI_MONITOR_ENABLED) : ?>
|
||||
<?php if ($state === "down") : ?>
|
||||
<input type="submit" class="btn btn-success" value="<?php echo _("Start").' '.$interface ?>" name="ifup_wlan0" />
|
||||
<?php else : ?>
|
||||
<input type="submit" class="btn btn-warning" value="<?php echo _("Stop").' '.$interface ?>" name="ifdown_wlan0" />
|
||||
<?php endif ?>
|
||||
<?php if (!RASPI_MONITOR_ENABLED) : ?>
|
||||
<?php if ($state === "down") : ?>
|
||||
<input type="submit" class="btn btn-success mt-2" value="<?php echo _("Start").' '.$interface ?>" name="ifup_wlan0" />
|
||||
<?php else : ?>
|
||||
<input type="submit" class="btn btn-warning mt-2" value="<?php echo _("Stop").' '.$interface ?>" name="ifdown_wlan0" />
|
||||
<?php endif ?>
|
||||
<button type="button" onClick="window.location.reload();" class="btn btn-outline btn-primary"><i class="fas fa-sync-alt"></i> <?php echo _("Refresh") ?></a>
|
||||
<?php endif ?>
|
||||
<button type="button" onClick="window.location.reload();" class="btn btn-outline btn-primary mt-2"><i class="fas fa-sync-alt"></i> <?php echo _("Refresh") ?></a>
|
||||
<?php $buttons = ob_get_clean(); ob_end_clean() ?>
|
||||
|
||||
<div class="row">
|
||||
@@ -21,150 +21,35 @@
|
||||
<div class="col">
|
||||
<button class="btn btn-light btn-icon-split btn-sm service-status float-end">
|
||||
<span class="icon"><i class="fas fa-circle service-status-<?php echo $state ?>"></i></span>
|
||||
<span class="text service-status">
|
||||
<?php echo strtolower($interface) .' '. _($state) ?>
|
||||
</span>
|
||||
<span class="text service-status"><?php echo strtolower($interface) .' '. _($state) ?></span>
|
||||
</button>
|
||||
</div>
|
||||
</div><!-- /.row -->
|
||||
</div><!-- /.card-header -->
|
||||
<div class="card-wrapper">
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<?php $status->showMessages(); ?>
|
||||
<h4 class="card-title">
|
||||
<?php echo _("Current status"); ?>
|
||||
</h4>
|
||||
<div class="dashboard-container row">
|
||||
<div class="connections-left col-lg-4">
|
||||
<div class="connection-item">
|
||||
<a href="/network_conf" class="<?php echo $ethernetActive; ?>"><span><?php echo _("Ethernet"); ?></span></a>
|
||||
<a href="/network_conf" class="<?php echo $ethernetActive; ?>"><i class="fas fa-ethernet fa-2xl"></i></a>
|
||||
</div>
|
||||
<div class="connection-item">
|
||||
<a href="/network_conf" class="<?php echo $wirelessActive; ?>"><span><?php echo _("Repeater"); ?></span>
|
||||
<a href="/network_conf" class="<?php echo $wirelessActive; ?>"><i class="fas fa-wifi fa-2xl"></i></a>
|
||||
</div>
|
||||
<div class="connection-item">
|
||||
<a href="/network_conf" class="<?php echo $tetheringActive; ?>"><span><?php echo _("Tethering"); ?></span></a>
|
||||
<a href="/network_conf" class="<?php echo $tetheringActive; ?>"><i class="fas fa-mobile-alt fa-2xl"></i></a>
|
||||
</div>
|
||||
<div class="connection-item">
|
||||
<a href="/network_conf" class="<?php echo $cellularActive; ?>"><span><?php echo _("Cellular"); ?></span></a>
|
||||
<a href="/network_conf" class="<?php echo $cellularActive; ?>"><i class="fas fa-broadcast-tower fa-2xl"></i></a>
|
||||
</div>
|
||||
<img src="app/img/dashed.svg" class="dashed-lines" alt="">
|
||||
<img src="<?php echo htmlspecialchars(renderConnection($connectionType)); ?>" class="solid-lines" alt="Network connection">
|
||||
</div>
|
||||
<div class="center-device col-12 col-lg-4">
|
||||
<div class="center-device-top">
|
||||
<a href="/system_info"><img class="device-illustration" src="app/img/device.php" alt="<?php echo htmlspecialchars($revision, ENT_QUOTES); ?>"></a>
|
||||
<div class="device-label"><a href="/system_info"><?php echo htmlspecialchars($revision, ENT_QUOTES); ?></a></div>
|
||||
<div class="mt-1 small"><?php echo _("IP Address"); ?>: <a href="/dhcpd_conf"><?php echo htmlspecialchars($ipv4Address, ENT_QUOTES); ?></a></div>
|
||||
<div class="small"><?php echo _("Netmask"); ?>: <a href="/dhcpd_conf"><?php echo htmlspecialchars($ipv4Netmask, ENT_QUOTES); ?></a></div>
|
||||
<div class="small"><?php echo _("MAC Address"); ?>: <a href="/dhcpd_conf"><?php echo htmlspecialchars($macAddress, ENT_QUOTES); ?></a></div>
|
||||
<div class="small"><?php echo _("SSID"); ?>: <a href="/hostapd_conf"><?php echo htmlspecialchars($ssid, ENT_QUOTES); ?></a></div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<?php $status->showMessages(); ?>
|
||||
<form action="wlan0_info" method="POST">
|
||||
<?php echo CSRFTokenFieldTag() ?>
|
||||
|
||||
<div class="bottom">
|
||||
<div class="device-status">
|
||||
<a href="/hostapd_conf">
|
||||
<div class="status-item <?php echo $hostapdStatus; ?>">
|
||||
<i class="fas fa-bullseye fa-2xl"></i>
|
||||
<span><?php echo _('AP'); ?></span>
|
||||
</div>
|
||||
</a>
|
||||
<a href="/hostapd_conf?tab=advanced">
|
||||
<div class="status-item <?php echo $bridgedStatus; ?>">
|
||||
<i class="fas fa-bridge fa-2xl"></i>
|
||||
<span><?php echo _('Bridged'); ?></span>
|
||||
</div>
|
||||
</a>
|
||||
<a href="/adblock_conf">
|
||||
<div class="status-item <?php echo $adblockStatus; ?>">
|
||||
<i class="far fa-hand-paper fa-2xl"></i>
|
||||
<span><?php echo _('Adblock'); ?></span>
|
||||
</div>
|
||||
</a>
|
||||
<a href="<?php echo $vpnManaged; ?>">
|
||||
<div class="status-item <?php echo $vpnStatus; ?>">
|
||||
<i class="fas fa-shield-alt fa-2xl"></i>
|
||||
<span><?php echo _('VPN'); ?></span>
|
||||
</div>
|
||||
</a>
|
||||
<?php echo $firewallManaged; ?>
|
||||
<div class="status-item <?php echo $firewallStatus; ?>">
|
||||
<span class="fa-stack fa-2xl" style="line-height: 0!important;height: 100%!important;">
|
||||
<i class="fas fa-fire-flame-curved fa-stack-1x"></i>
|
||||
<?php echo $firewallUnavailable; ?>
|
||||
</span>
|
||||
<span><?php echo _('Firewall'); ?></span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Nav tabs -->
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="nav-item"><a class="nav-link active" id="statustab" href="#status" aria-controls="status" data-bs-toggle="tab"><?php echo _("Status"); ?></a></li>
|
||||
<li class="nav-item"><a class="nav-link" id="datatab" href="#data" data-bs-toggle="tab"><?php echo _("Data usage"); ?></a></li>
|
||||
</ul>
|
||||
|
||||
<div class="wifi-bands">
|
||||
<a href="/hostapd_conf"><span class="band <?php echo $freq5active; ?>"><?php echo _("5G"); ?></span></a>
|
||||
<a href="/hostapd_conf"><span class="band <?php echo $freq24active; ?>"><?php echo _("2.4G"); ?></span></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tab panes -->
|
||||
<div class="tab-content">
|
||||
<?php echo renderTemplate("dashboard/status", $__template_data) ?>
|
||||
<?php echo renderTemplate("dashboard/data", $__template_data) ?>
|
||||
</div><!-- /.tab-content -->
|
||||
|
||||
<div class="clients-mobile">
|
||||
<div class="client-type">
|
||||
<a href="/network_conf">
|
||||
<i class="fas fa-globe"></i>
|
||||
<div class="client-count">
|
||||
<i class="fas <?php echo $connectionIcon; ?> badge-icon"></i>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="client-type">
|
||||
<a href="/dhcpd_conf">
|
||||
<i class="fas fa-laptop <?php echo $totalClientsActive; ?>"></i>
|
||||
<span class="client-count"><?php echo $totalClients; ?></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php echo $buttons ?>
|
||||
</form>
|
||||
</div><!-- /.card-body -->
|
||||
|
||||
<div class="connections-right col-lg-4">
|
||||
<div class="d-flex flex-column justify-content-around h-100">
|
||||
<div class="connection-item connection-right">
|
||||
<a href="/dhcpd_conf?tab=client-list" class="<?php echo $wirelessClientActive; ?>">
|
||||
<span class="fa-stack">
|
||||
<i class="fas fa-laptop fa-stack-1x fa-2xl"></i>
|
||||
<i class="fas fa-wifi fa-stack-1x fa-xs"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a href="/dhcpd_conf?tab=client-list"><span class="text-nowrap <?php echo $wirelessClientActive; ?>"><?php echo $wirelessClientLabel; ?></span></a>
|
||||
</div>
|
||||
<div class="connection-item connection-right">
|
||||
<a href="/dhcpd_conf?tab=client-list" class="<?php echo $ethernetClientActive; ?>">
|
||||
<span class="fa-stack">
|
||||
<i class="fas fa-laptop fa-stack-1x fa-2xl"></i>
|
||||
<i class="fas fa-ethernet fa-stack-1x fa-xs"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a href="/dhcpd_conf?tab=client-list"><span class="text-nowrap <?php echo $ethernetClientActive; ?>"><?php echo $ethernetClientLabel; ?></span></a>
|
||||
</div>
|
||||
</div>
|
||||
<?php echo renderClientConnections($wirelessClients, $ethernetClients); ?>
|
||||
<img src="app/img/right-dashed.svg" class="dashed-lines dashed-lines-right" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-12 mt-3">
|
||||
</div>
|
||||
<div class="row">
|
||||
<form action="wlan0_info" method="POST">
|
||||
<?php echo CSRFTokenFieldTag() ?>
|
||||
<?php echo $buttons ?>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer"><?php echo _("Information provided by raspap.sysinfo"); ?></div>
|
||||
|
||||
</div><!-- /.card -->
|
||||
</div><!-- /.col-lg-12 -->
|
||||
</div><!-- /.row -->
|
||||
|
||||
19
templates/dashboard/data.php
Normal file
19
templates/dashboard/data.php
Normal file
@@ -0,0 +1,19 @@
|
||||
<div class="tab-pane" id="data">
|
||||
<h4 class="card-title mt-3">
|
||||
<?php echo _("Hourly traffic"); ?>
|
||||
</h4>
|
||||
|
||||
<div class="col-md-12">
|
||||
<div class="col dbChart">
|
||||
<canvas id="divDBChartBandwidthhourly"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /.tab-pane | data tab -->
|
||||
|
||||
<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>
|
||||
123
templates/dashboard/status.php
Normal file
123
templates/dashboard/status.php
Normal file
@@ -0,0 +1,123 @@
|
||||
<div class="tab-pane active" id="status">
|
||||
<h4 class="card-title mt-3">
|
||||
<?php echo _("Current status"); ?>
|
||||
</h4>
|
||||
<div class="dashboard-container row">
|
||||
<div class="connections-left col-lg-4">
|
||||
<div class="connection-item">
|
||||
<a href="/network_conf" class="<?php echo $ethernetActive; ?>"><span><?php echo _("Ethernet"); ?></span></a>
|
||||
<a href="/network_conf" class="<?php echo $ethernetActive; ?>"><i class="fas fa-ethernet fa-2xl"></i></a>
|
||||
</div>
|
||||
<div class="connection-item">
|
||||
<a href="/network_conf" class="<?php echo $wirelessActive; ?>"><span><?php echo _("Repeater"); ?></span>
|
||||
<a href="/network_conf" class="<?php echo $wirelessActive; ?>"><i class="fas fa-wifi fa-2xl"></i></a>
|
||||
</div>
|
||||
<div class="connection-item">
|
||||
<a href="/network_conf" class="<?php echo $tetheringActive; ?>"><span><?php echo _("Tethering"); ?></span></a>
|
||||
<a href="/network_conf" class="<?php echo $tetheringActive; ?>"><i class="fas fa-mobile-alt fa-2xl"></i></a>
|
||||
</div>
|
||||
<div class="connection-item">
|
||||
<a href="/network_conf" class="<?php echo $cellularActive; ?>"><span><?php echo _("Cellular"); ?></span></a>
|
||||
<a href="/network_conf" class="<?php echo $cellularActive; ?>"><i class="fas fa-broadcast-tower fa-2xl"></i></a>
|
||||
</div>
|
||||
<img src="app/img/dashed.svg" class="dashed-lines" alt="">
|
||||
<img src="<?php echo htmlspecialchars(renderConnection($connectionType)); ?>" class="solid-lines" alt="Network connection">
|
||||
</div>
|
||||
<div class="center-device col-12 col-lg-4">
|
||||
<div class="center-device-top">
|
||||
<a href="/system_info"><img class="device-illustration" src="app/img/device.php" alt="<?php echo htmlspecialchars($revision, ENT_QUOTES); ?>"></a>
|
||||
<div class="device-label"><a href="/system_info"><?php echo htmlspecialchars($revision, ENT_QUOTES); ?></a></div>
|
||||
<div class="mt-1 small"><?php echo _("IP Address"); ?>: <a href="/dhcpd_conf"><?php echo htmlspecialchars($ipv4Address, ENT_QUOTES); ?></a></div>
|
||||
<div class="small"><?php echo _("Netmask"); ?>: <a href="/dhcpd_conf"><?php echo htmlspecialchars($ipv4Netmask, ENT_QUOTES); ?></a></div>
|
||||
<div class="small"><?php echo _("MAC Address"); ?>: <a href="/dhcpd_conf"><?php echo htmlspecialchars($macAddress, ENT_QUOTES); ?></a></div>
|
||||
<div class="small"><?php echo _("SSID"); ?>: <a href="/hostapd_conf"><?php echo htmlspecialchars($ssid, ENT_QUOTES); ?></a></div>
|
||||
</div>
|
||||
|
||||
<div class="bottom">
|
||||
<div class="device-status">
|
||||
<a href="/hostapd_conf">
|
||||
<div class="status-item <?php echo $hostapdStatus; ?>">
|
||||
<i class="fas fa-bullseye fa-2xl"></i>
|
||||
<span><?php echo _('AP'); ?></span>
|
||||
</div>
|
||||
</a>
|
||||
<a href="/hostapd_conf?tab=advanced">
|
||||
<div class="status-item <?php echo $bridgedStatus; ?>">
|
||||
<i class="fas fa-bridge fa-2xl"></i>
|
||||
<span><?php echo _('Bridged'); ?></span>
|
||||
</div>
|
||||
</a>
|
||||
<a href="/adblock_conf">
|
||||
<div class="status-item <?php echo $adblockStatus; ?>">
|
||||
<i class="far fa-hand-paper fa-2xl"></i>
|
||||
<span><?php echo _('Adblock'); ?></span>
|
||||
</div>
|
||||
</a>
|
||||
<a href="<?php echo $vpnManaged; ?>">
|
||||
<div class="status-item <?php echo $vpnStatus; ?>">
|
||||
<i class="fas fa-shield-alt fa-2xl"></i>
|
||||
<span><?php echo _('VPN'); ?></span>
|
||||
</div>
|
||||
</a>
|
||||
<?php echo $firewallManaged; ?>
|
||||
<div class="status-item <?php echo $firewallStatus; ?>">
|
||||
<span class="fa-stack fa-2xl" style="line-height: 0!important;height: 100%!important;">
|
||||
<i class="fas fa-fire-flame-curved fa-stack-1x"></i>
|
||||
<?php echo $firewallUnavailable; ?>
|
||||
</span>
|
||||
<span><?php echo _('Firewall'); ?></span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="wifi-bands">
|
||||
<a href="/hostapd_conf"><span class="band <?php echo $freq5active; ?>"><?php echo _("5G"); ?></span></a>
|
||||
<a href="/hostapd_conf"><span class="band <?php echo $freq24active; ?>"><?php echo _("2.4G"); ?></span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clients-mobile">
|
||||
<div class="client-type">
|
||||
<a href="/network_conf">
|
||||
<i class="fas fa-globe"></i>
|
||||
<div class="client-count">
|
||||
<i class="fas <?php echo $connectionIcon; ?> badge-icon"></i>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="client-type">
|
||||
<a href="/dhcpd_conf">
|
||||
<i class="fas fa-laptop <?php echo $totalClientsActive; ?>"></i>
|
||||
<span class="client-count"><?php echo $totalClients; ?></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="connections-right col-lg-4">
|
||||
<div class="d-flex flex-column justify-content-around h-100">
|
||||
<div class="connection-item connection-right">
|
||||
<a href="/dhcpd_conf?tab=client-list" class="<?php echo $wirelessClientActive; ?>">
|
||||
<span class="fa-stack">
|
||||
<i class="fas fa-laptop fa-stack-1x fa-2xl"></i>
|
||||
<i class="fas fa-wifi fa-stack-1x fa-xs"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a href="/dhcpd_conf?tab=client-list"><span class="text-nowrap <?php echo $wirelessClientActive; ?>"><?php echo $wirelessClientLabel; ?></span></a>
|
||||
</div>
|
||||
<div class="connection-item connection-right">
|
||||
<a href="/dhcpd_conf?tab=client-list" class="<?php echo $ethernetClientActive; ?>">
|
||||
<span class="fa-stack">
|
||||
<i class="fas fa-laptop fa-stack-1x fa-2xl"></i>
|
||||
<i class="fas fa-ethernet fa-stack-1x fa-xs"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a href="/dhcpd_conf?tab=client-list"><span class="text-nowrap <?php echo $ethernetClientActive; ?>"><?php echo $ethernetClientLabel; ?></span></a>
|
||||
</div>
|
||||
</div>
|
||||
<?php echo renderClientConnections($wirelessClients, $ethernetClients); ?>
|
||||
<img src="app/img/right-dashed.svg" class="dashed-lines dashed-lines-right" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /.tab-pane | status tab -->
|
||||
|
||||
Reference in New Issue
Block a user