Work in progress

This commit is contained in:
billz 2019-10-12 23:04:27 +01:00
parent 6880f54178
commit 40e408dd98
11 changed files with 93 additions and 104 deletions

View file

@ -17,8 +17,9 @@ body {
.sidebar-brand-text {
text-transform: none;
color: #212529;
font-size: 1rem;
font-size: 1.8rem;
font-weight: 500;
font-family: Helvetica, Arial, sans-serif;
}
.card .card-header {
@ -134,6 +135,6 @@ pre.unstyled {
width: 100%;
}
.js-wifi-stations .panel-body {
.js-wifi-stations .card-body {
min-height: 256px;
}

View file

@ -8,8 +8,6 @@ function DisplayDataUsage(&$extraFooterScripts)
exec("ip -o link show | awk -F ': ' '{print $2}' | grep -v lo ", $interfacesWlo);
echo renderTemplate("data_usage", [ "interfaces" => $interfacesWlo ]);
$extraFooterScripts[] = array('src'=>'dist/raphael/raphael.min.js', 'defer'=>false);
$extraFooterScripts[] = array('src'=>'dist/morrisjs/morris.min.js', 'defer'=>false);
$extraFooterScripts[] = array('src'=>'dist/datatables/jquery.dataTables.min.js', 'defer'=>false);
$extraFooterScripts[] = array('src'=>'app/js/bandwidthcharts.js', 'defer'=>false);
}

View file

@ -102,7 +102,7 @@ $theme_url = 'app/css/'.htmlspecialchars($theme, ENT_QUOTES);
<div class="sidebar-brand-icon">
<img src="app/img/raspAP-logo64px.png" width="32" height="32">
</div>
<div class="sidebar-brand-text ml-1">RaspAP <?php echo RASPI_VERSION; ?></div>
<div class="sidebar-brand-text ml-1">RaspAP</div>
</a>
<!-- Divider -->
<hr class="sidebar-divider my-0">
@ -148,7 +148,7 @@ $theme_url = 'app/css/'.htmlspecialchars($theme, ENT_QUOTES);
<?php endif; ?>
<?php if (RASPI_CHANGETHEME_ENABLED) : ?>
<li class="nav-item">
<a class="nav-link" href="index.php?page=theme_conf"><i class="fas fa-wrench fa-fw"></i> <?php echo _("Change Theme"); ?></a>
<a class="nav-link" href="index.php?page=theme_conf"><i class="fas fa-paint-brush fa-fw"></i> <?php echo _("Change Theme"); ?></a>
</li>
<?php endif; ?>
<?php if (RASPI_VNSTAT_ENABLED) : ?>

View file

@ -1,8 +1,8 @@
<div class="row">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading"><i class="fa fa-lock fa-fw"></i><?php echo _("Configure Auth"); ?></div>
<div class="panel-body">
<div class="card">
<div class="card-header"><i class="fas fa-lock"></i> <?php echo _("Configure Auth"); ?></div>
<div class="card-body">
<?php $status->showMessages(); ?>
<form role="form" action="?page=auth_conf" method="POST">
<?php echo CSRFTokenFieldTag() ?>
@ -32,7 +32,7 @@
</div>
<input type="submit" class="btn btn-outline btn-primary" name="UpdateAdminPassword" value="<?php echo _("Save settings"); ?>" />
</form>
</div><!-- /.panel-body -->
</div><!-- /.panel-default -->
</div><!-- /.card-body -->
</div><!-- /.card -->
</div><!-- /.col-lg-12 -->
</div><!-- /.row -->

View file

@ -1,23 +1,22 @@
<div class="row">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading"><i class="fa fa-signal fa-fw"></i> <?php echo _("Configure client"); ?></div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="card">
<div class="card-header"><i class="fas fa-signal fa-fw"></i> <?php echo _("Configure client"); ?></div>
<!-- /.card-heading -->
<div class="card-body">
<?php $status->showMessages(); ?>
<h4><?php echo _("Client settings"); ?></h4>
<div class="btn-group btn-block">
<button type="button" style="padding:10px;float: right;display: block;position: relative;margin-top: -55px;" class="col-md-2 btn btn-info js-reload-wifi-stations"><?php echo _("Rescan"); ?></button>
</div>
<form method="POST" action="?page=wpa_conf" name="wpa_conf_form" class="row">
<?php echo CSRFTokenFieldTag() ?>
<input type="hidden" name="client_settings" ?>
<div class="js-wifi-stations loading-spinner"></div>
<div class="js-wifi-stations loading-spinner w-100"></div>
</form>
</div><!-- ./ Panel body -->
<div class="panel-footer"><?php echo _("<strong>Note:</strong> WEP access points appear as 'Open'. RaspAP does not currently support connecting to WEP"); ?></div>
</div><!-- /.panel-primary -->
</div><!-- ./ card-body -->
<div class="card-footer"><?php echo _("<strong>Note:</strong> WEP access points appear as 'Open'. RaspAP does not currently support connecting to WEP"); ?></div>
</div><!-- /.card -->
</div><!-- /.col-lg-12 -->
</div><!-- /.row -->

View file

@ -1,17 +1,17 @@
<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">
<div class="card">
<div class="card-header"><i class="fas fa-bar-chart fa-fw"></i> <?php echo _("Data usage monitoring"); ?></div>
<div class="card-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>
<li class="nav-item active"><a class="nav-link" href="#hourly" aria-controls="hourly" role="tab" data-toggle="tab"><?php echo _("Hourly"); ?></a></li>
<li class="nav-item"><a class="nav-link" href="#daily" aria-controls="daily" role="tab" data-toggle="tab"><?php echo _("Daily"); ?></a></li>
<li class="nav-item"><a class="nav-link" 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 role="tabpanel" class="tab-pane active" id="hourly">
<div class="row">
<div class="col-lg-12">
<h4><?php echo _('Hourly traffic amount'); ?></h4>
@ -70,10 +70,10 @@
</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><!-- /.card-body -->
<div class="card-footer"><?php echo _("Information provided by vnstat"); ?></div>
</div><!-- /.card -->
</div><!-- /.card -->
</div><!-- /.col-lg-12 -->
</div><!-- /.row -->
<script type="text/javascript"<?php //echo ' nonce="'.$csp_page_nonce.'"'; ?>>

View file

@ -1,26 +1,26 @@
<div class="row">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading">
<i class="fa fa-exchange fa-fw"></i> <?php echo _("Configure DHCP"); ?>
<div class="card">
<div class="card-header">
<i class="fas fa-exchange"></i> <?php echo _("Configure DHCP"); ?>
<span class="label pull-right service-status-<?php echo $serviceStatus ?>">dnsmasq <?php echo _($serviceStatus) ?></span>
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="card-body">
<?php $status->showMessages(); ?>
<form method="POST" action="?page=dhcpd_conf" class="js-dhcp-settings-form">
<?php echo CSRFTokenFieldTag() ?>
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active"><a href="#server-settings" data-toggle="tab"><?php echo _("Server settings"); ?></a>
<li class="nav-item active"><a class="nav-link" href="#server-settings" data-toggle="tab"><?php echo _("Server settings"); ?></a>
</li>
<li><a href="#static-leases" data-toggle="tab"><?php echo _("Static Leases") ?></a></li>
<li><a href="#client-list" data-toggle="tab"><?php echo _("Client list"); ?></a>
<li class="nav-item"><a class="nav-link" href="#static-leases" data-toggle="tab"><?php echo _("Static Leases") ?></a></li>
<li class="nav-item"><a class="nav-link" href="#client-list" data-toggle="tab"><?php echo _("Client list"); ?></a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade in active" id="server-settings">
<div class="tab-pane active" id="server-settings">
<h4>DHCP server settings</h4>
<div class="row">
<div class="form-group col-md-4">
@ -77,10 +77,10 @@
<h4>Client list</h4>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading"><?php echo _("Active DHCP leases"); ?></div>
<div class="card">
<div class="card-header"><?php echo _("Active DHCP leases"); ?></div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="card-body">
<div class="table-responsive">
<table class="table table-hover">
<thead>
@ -103,8 +103,8 @@
</tbody>
</table>
</div><!-- /.table-responsive -->
</div><!-- /.panel-body -->
</div><!-- /.panel -->
</div><!-- /.card-body -->
</div><!-- /.card -->
</div><!-- /.col-lg-12 -->
</div><!-- /.row -->
</div><!-- /.tab-pane -->
@ -167,8 +167,8 @@
</div><!-- /.tab-content -->
</form>
</div><!-- ./ Panel body -->
<div class="panel-footer"> <?php echo _("Information provided by Dnsmasq"); ?></div>
</div><!-- /.panel-primary -->
</div><!-- ./ card-body -->
<div class="card-footer"> <?php echo _("Information provided by Dnsmasq"); ?></div>
</div><!-- /.card -->
</div><!-- /.col-lg-12 -->
</div><!-- /.row -->

View file

@ -1,26 +1,26 @@
<div class="row">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading">
<i class="fa fa-dot-circle-o fa-fw"></i> <?php echo _("Configure hotspot"); ?>
<div class="card">
<div class="card-header">
<i class="far fa-dot-circle"></i> <?php echo _("Configure hotspot"); ?>
<span class="label pull-right service-status-<?php echo $serviceStatus ?>">hostapd <?php echo _($serviceStatus) ?></span>
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<!-- /.card-header -->
<div class="card-body">
<?php $status->showMessages(); ?>
<form role="form" action="?page=hostapd_conf" method="POST">
<?php echo CSRFTokenFieldTag() ?>
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active"><a href="#basic" data-toggle="tab"><?php echo _("Basic"); ?></a></li>
<li><a href="#security" data-toggle="tab"><?php echo _("Security"); ?></a></li>
<li><a href="#advanced" data-toggle="tab"><?php echo _("Advanced"); ?></a></li>
<li><a href="#logoutput" data-toggle="tab"><?php echo _("Logfile"); ?></a></li>
<li class="nav-item"><a class="nav-link active" id="basictab" href="#basic" aria-controls="basic" data-toggle="tab"><?php echo _("Basic"); ?></a></li>
<li class="nav-item"><a class="nav-link" id="securitytab" href="#security" data-toggle="tab"><?php echo _("Security"); ?></a></li>
<li class="nav-item"><a class="nav-link" id="advancedtab" href="#advanced" data-toggle="tab"><?php echo _("Advanced"); ?></a></li>
<li class="nav-item"><a class="nav-link" id="logoutputtab" href="#logoutput" data-toggle="tab"><?php echo _("Logfile"); ?></a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade in active" id="basic">
<div class="tab-pane active" id="basic">
<h4><?php echo _("Basic settings") ;?></h4>
<div class="row">
@ -432,7 +432,7 @@ if(ops[i].value == country){
</script>
</div>
</div><!-- /.panel-body -->
</div><!-- /.card-body -->
</div><!-- /.panel-primary -->
<?php if (!RASPI_MONITOR_ENABLED) : ?>
<input type="submit" class="btn btn-outline btn-primary" name="SaveHostAPDSettings" value="<?php echo _("Save settings"); ?>" />
@ -444,7 +444,7 @@ if(ops[i].value == country){
};
endif ?>
</form>
</div></div><!-- /.panel-primary -->
<div class="panel-footer"> <?php echo _("Information provided by hostapd"); ?></div>
</div></div><!-- /.card -->
<div class="card-footer"> <?php echo _("Information provided by hostapd"); ?></div>
</div><!-- /.col-lg-12 -->
</div><!-- /.row -->

View file

@ -1,14 +1,14 @@
<div class="row">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading"><i class="fa fa-sitemap fa-fw"></i> <?php echo _("Configure networking"); ?></div>
<div class="panel-body">
<div class="card">
<div class="card-header"><i class="fas fa-sitemap"></i> <?php echo _("Configure networking"); ?></div>
<div class="card-body">
<div id="msgNetworking"></div>
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#summary" aria-controls="summary" role="tab" data-toggle="tab"><?php echo _("Summary"); ?></a></li>
<li role="presentation" class="nav-item active"><a href="#summary" aria-controls="summary" role="tab" data-toggle="tab"><?php echo _("Summary"); ?></a></li>
<?php foreach ($interfaces as $if): ?>
<?php $if_quoted = htmlspecialchars($if, ENT_QUOTES) ?>
<li role="presentation"><a href="#<?php echo $if_quoted ?>" aria-controls="<?php echo $if_quoted ?>" role="tab" data-toggle="tab"><?php echo $if_quoted ?></a></li>
<li role="presentation"><a class="nav-link" href="#<?php echo $if_quoted ?>" aria-controls="<?php echo $if_quoted ?>" role="tab" data-toggle="tab"><?php echo $if_quoted ?></a></li>
<?php endforeach ?>
</ul>
<div class="tab-content">
@ -19,9 +19,9 @@
<?php foreach ($interfaces as $if): ?>
<?php $if_quoted = htmlspecialchars($if, ENT_QUOTES) ?>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading"><?php echo $if_quoted ?></div>
<div class="panel-body">
<div class="card">
<div class="card-header"><?php echo $if_quoted ?></div>
<div class="card-body">
<pre class="unstyled" id="<?php echo $if_quoted ?>-summary"></pre>
</div>
</div>
@ -99,8 +99,8 @@
<?php endforeach ?>
</div><!-- /.tab-content -->
</div><!-- /.panel-body -->
<div class="panel-footer"><?php echo _("Information provided by /sys/class/net"); ?></div>
</div><!-- /.panel-primary -->
</div><!-- /.card-body -->
<div class="card-footer"><?php echo _("Information provided by /sys/class/net"); ?></div>
</div><!-- /.card -->
</div><!-- /.col-lg-12 -->
</div>

View file

@ -1,11 +1,10 @@
<div class="row">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading"><i class="fa fa-wrench fa-fw"></i> <?php echo _("Change Theme"); ?></div>
<div class="panel-body">
<div class="card">
<div class="card-header"><i class="fa fa-wrench fa-fw"></i> <?php echo _("Change Theme"); ?></div>
<div class="card-body">
<h4><?php echo _("Theme settings"); ?></h4>
<div class="row">
<div class="form-group col-md-6">
<label for="code"><?php echo _("Select a theme"); ?></label>
@ -18,7 +17,7 @@
<a href="?page=<?php echo $_GET['page'] ?>" class="btn btn-outline btn-primary"><i class="fa fa-refresh"></i> <?php echo _("Refresh"); ?></a>
</form>
</div><!-- /.panel-body -->
</div><!-- /.panel-primary -->
</div><!-- /.card-body -->
</div><!-- /.card -->
</div><!-- /.col-lg-12 -->
</div><!-- /.row -->

View file

@ -3,40 +3,36 @@
<p class="text-center"><?php echo _('Click "Rescan" to search for nearby Wifi stations.') ?></p>
<?php endif ?>
<?php $index = 0; ?>
<div class="__card-deck">
<?php foreach ($networks as $ssid => $network) : ?>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-body">
<div class="card mb-3 w-50">
<div class="card-body">
<input type="hidden" name="ssid<?php echo $index ?>" value="<?php echo htmlentities($ssid, ENT_QUOTES) ?>" />
<h4><?php echo htmlspecialchars($ssid, ENT_QUOTES); ?></h4>
<input type="hidden" name="ssid<?php echo $index ?>" value="<?php echo htmlentities($ssid, ENT_QUOTES) ?>" />
<h5 class="card-title"><?php echo htmlspecialchars($ssid, ENT_QUOTES); ?></h5>
<div class="row">
<div class="col-xs-4 col-md-4">Status</div>
<div class="col-xs-4 col-md-4">
<div class="_col-xs-4 col-sm">Status</div>
<div class="_col-xs-4 col-sm">
<?php if ($network['configured']) { ?>
<i class="fa fa-check-circle fa-fw"></i>
<i class="fas fa-check-circle"></i>
<?php } ?>
<?php if ($network['connected']) { ?>
<i class="fa fa-exchange fa-fw"></i>
<i class="fas fa-exchange-alt"></i>
<?php } ?>
</div>
</div>
<div class="row">
<div class="col-xs-4 col-md-4">Channel</div>
<div class="col-xs-4 col-md-4">
<div class="_col-xs-4 col-md-4">Channel</div>
<div class="_col-xs-4 col-md-4">
<?php if ($network['visible']) { ?>
<?php echo htmlspecialchars($network['channel'], ENT_QUOTES) ?>
<?php } else { ?>
<span class="label label-warning"> X </span>
<?php } ?>
</div>
</div>
<div class="row">
<div class="col-xs-4 col-md-4">RSSI</div>
<div class="col-xs-6 col-md-6">
<div class="_col-xs-4 col-md-4">RSSI</div>
<div class="_col-xs-6 col-md-6">
<?php echo htmlspecialchars($network['RSSI'], ENT_QUOTES);
echo "dB (";
if ($network['RSSI'] >= -50) {
@ -49,17 +45,14 @@
echo "%)";
?>
</div>
</div>
<?php if (array_key_exists('priority', $network)) { ?>
<input type="hidden" name="priority<?php echo $index ?>" value="<?php echo htmlspecialchars($network['priority'], ENT_QUOTES); ?>" />
<?php } ?>
<input type="hidden" name="protocol<?php echo $index ?>" value="<?php echo htmlspecialchars($network['protocol'], ENT_QUOTES); ?>" />
<input type="hidden" name="protocol<?php echo $index ?>" value="<?php echo htmlspecialchars($network['protocol'], ENT_QUOTES); ?>" />
<div class="row">
<div class="col-xs-4 col-md-4">Security</div>
<div class="col-xs-6 col-md-6"><?php echo $network['protocol'] ?></div>
</div>
<div class="form-group">
<div class="input-group col-xs-12 col-md-12">
@ -84,10 +77,9 @@
<?php } ?>
<input type="submit" class="col-xs-4 col-md-4 btn btn-danger" value="<?php echo _("Delete"); ?>" name="delete<?php echo $index ?>"<?php echo ($network['configured'] ? '' : ' disabled')?> />
</div><!-- /.btn-group -->
</div><!-- /.panel-body -->
</div><!-- /.panel-default -->
</div><!-- /.col-md-6 -->
</div><!-- /.card-body -->
</div><!-- /.card -->
<?php $index += 1; ?>
<?php endforeach ?>
<?php endforeach ?>
</div><!-- /.card-deck -->