feat: dashboard redesign

2025-07-30 19:09:27 +02:00 · 2025-02-07 01:18:33 +05:30 · 2025-02-07 01:18:33 +05:30 · 80c1a04797
commit 80c1a04797
parent 624e43f954
7 changed files with 4958 additions and 123 deletions
--- a/app/css/all.css
+++ b/app/css/all.css
@ -377,3 +377,242 @@ button > i.fas {
  border: 1px solid #ced4da;
 }

+
+
+.card-wrapper {
+  margin: 1rem;
+}
+
+.dashboard-container {
+  display: flex;
+  position: relative;
+  width: 100%;
+  min-height: 400px;
+  padding: 2rem;
+}
+
+.connections-left,
+.connections-right {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.connection-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  z-index: 5;
+}
+
+.connection-right {
+  justify-content: flex-end;
+}
+
+.connections-left i {
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: left;
+}
+
+.connections-left i:first-child {
+  margin-top: 0;
+}
+
+.connections-left i:last-child {
+  margin-bottom: 0;
+}
+
+.center-device {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  position: relative;
+  z-index: 1;
+}
+
+.client-group {
+  display: flex;
+  align-items: center;
+  flex-direction: row-reverse;
+  gap: 0.5rem;
+}
+
+.client-count {
+  text-align: right;
+}
+
+.clients-status {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-end;
+  padding-right: 1rem;
+}
+
+.dashed-lines,
+.solid-lines {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  padding: 1rem;
+  left: 112px;
+  z-index: 0;
+}
+
+.dashed-lines-right,
+.solid-lines-right {
+  left: -80px;
+}
+
+.device-status {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  justify-content: center;
+  margin: 1rem 0;
+}
+
+.wifi-bands {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.band {
+  padding: 0.25rem 1rem;
+  border: 2px solid #7D7E7E;
+  border-radius: 4px;
+  background: transparent;
+  font-weight: 600;
+  color: #7D7E7E;
+}
+
+.band.active {
+  border-color: #008281;
+  color: #008281;
+}
+
+.device-label {
+  font-size: 1.5rem;
+  text-align: center;
+  color: #008281;
+  margin-top: 1rem;
+}
+
+.status-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.3rem;
+}
+
+.bottom {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.3rem;
+  width: 100%;
+}
+
+.connection-item>i {
+  color: #7D7E7E;
+}
+
+.connections-left>.connection-item>span {
+  color: #7D7E7E;
+  margin-right: 0.5rem;
+}
+
+@media (max-width: 1200px) {
+  .connection-item > span:not(.fa-stack) {
+    display: none!important;
+  }
+}
+
+@media (max-width: 991px) {
+  .connections-right,
+  .connections-left {
+    display: none!important;
+  }
+  .dashboard-container {
+    width: auto;
+    padding: 0;
+
+  }
+  .device-status {
+    gap: 0.5rem;
+  }
+  .clients-mobile {
+    display: flex!important;
+    flex-direction: row!important;
+  }
+}
+.connection-item.active > span {
+  color: #008281!important;
+}
+.connection-item.active > i {
+  color: #008281!important;
+}
+.status-item.active > span {
+  color: #008281!important;
+}
+.status-item.active > i {
+  color: #008281!important;
+}
+.clients-mobile {
+  display: none;
+  flex-direction: column;
+  gap: 1rem;
+  margin-top: 2rem;
+}
+
+.client-type {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.client-type i {
+  font-size: 1.5rem;
+  color: #008281;
+  background: #fff;
+  width: 45px;
+  height: 45px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid #008281;
+}
+
+.client-type i.badge-icon {
+  font-size: 0.7rem;
+  background: #008281;
+  color: white;
+  width: 20px;
+  height: 20px;
+  border: none;
+}
+
+.client-count {
+  position: absolute;
+  top: -5px;
+  right: -5px;
+  background: #008281;
+  color: white;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.8rem;
+}
--- a/app/img/dashed.svg
+++ b/app/img/dashed.svg
@ -0,0 +1,10 @@
+<svg width="227" height="596" viewBox="0 0 227 596" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="dashed">
+<line id="Line 1" x1="112.75" y1="3.27835e-08" x2="112.75" y2="596" stroke="#7D7E7E" stroke-width="4" stroke-dasharray="4 4"/>
+<line id="Line 2" x1="113.231" y1="0.75" x2="7.69496e-06" y2="0.75001" stroke="#7D7E7E" stroke-width="4" stroke-dasharray="4 4"/>
+<line id="Line 3" x1="113.231" y1="198.904" x2="7.69496e-06" y2="198.904" stroke="#7D7E7E" stroke-width="4" stroke-dasharray="4 4"/>
+<line id="Line 4" x1="113.231" y1="397.058" x2="7.69496e-06" y2="397.058" stroke="#7D7E7E" stroke-width="4" stroke-dasharray="4 4"/>
+<line id="Line 5" x1="113.231" y1="595.211" x2="7.69496e-06" y2="595.211" stroke="#7D7E7E" stroke-width="4" stroke-dasharray="4 4"/>
+<line id="Line 6" x1="226.231" y1="297.75" x2="113" y2="297.75" stroke="#7D7E7E" stroke-width="4" stroke-dasharray="4 4"/>
+</g>
+</svg>
--- a/app/img/device.svg
+++ b/app/img/device.svg
--- a/app/img/right-dashed.svg
+++ b/app/img/right-dashed.svg
@ -0,0 +1,8 @@
+<svg width="314" height="594" viewBox="0 0 314 594" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="dashed">
+<line id="horizontal" y1="-0.75" x2="308" y2="-0.75" transform="matrix(4.37114e-08 1 1 -4.37114e-08 114 144)" stroke="#7D7E7E" stroke-width="4" stroke-dasharray="4 4"/>
+<line id="top" y1="-0.75" x2="113.231" y2="-0.75" transform="matrix(1 8.74228e-08 8.74228e-08 -1 114 144)" stroke="#7D7E7E" stroke-width="4" stroke-dasharray="4 4"/>
+<line id="out" y1="-0.75" x2="113.231" y2="-0.75" transform="matrix(1 8.74228e-08 8.74228e-08 -1 -0.000305176 297)" stroke="#7D7E7E" stroke-width="4" stroke-dasharray="4 4"/>
+<line id="bottom" y1="-0.75" x2="113.231" y2="-0.75" transform="matrix(1 8.74228e-08 8.74228e-08 -1 113 450)" stroke="#7D7E7E" stroke-width="4" stroke-dasharray="4 4"/>
+</g>
+</svg>
--- a/app/img/right-solid.php
+++ b/app/img/right-solid.php
@ -0,0 +1,51 @@
+<?php
+header("Content-Type: image/svg+xml");
+$showDevice1 = isset($_GET['device-1']);
+$showOut = isset($_GET['out']);
+$showDevice2 = isset($_GET['device-2']);
+?>
+
+<svg width="313" height="594" viewBox="0 0 313 594" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="313" height="594" fill="#1E1E1E"/>
+<g id="Frame 1">
+<rect width="1512" height="982" transform="translate(-973 -120)" fill="white"/>
+<g id="right connection frame">
+<g id="solid">
+    
+<?php if ($showDevice2): ?>
+    <line id="joint-device-2" y1="-0.75" x2="154" y2="-0.75" 
+          transform="matrix(4.37114e-08 1 1 -4.37114e-08 114 297)" 
+          stroke="#008281" stroke-width="4"/>
+<?php endif; ?>
+
+<?php if ($showDevice1): ?>
+    <line id="joint-device-1" style="display: inline;" 
+          y1="-0.75" x2="154" y2="-0.75" 
+          transform="matrix(4.37114e-08 1 1 -4.37114e-08 114 144)" 
+          stroke="#008281" stroke-width="4"/>
+    
+    <line id="device-1" style="display: inline;" 
+          y1="-0.75" x2="113.231" y2="-0.75" 
+          transform="matrix(1 8.74228e-08 8.74228e-08 -1 114 144)" 
+          stroke="#008281" stroke-width="4"/>
+<?php endif; ?>
+
+<?php if ($showOut): ?>
+    <line id="out" style="display: inline;" 
+          y1="-0.75" x2="113.231" y2="-0.75" 
+          transform="matrix(1 8.74228e-08 8.74228e-08 -1 -0.000305176 297)" 
+          stroke="#008281" stroke-width="4"/>
+<?php endif; ?>
+
+<?php if ($showDevice2): ?>
+    <line id="device-2" style="display: inline;" 
+          y1="-0.75" x2="113.231" y2="-0.75" 
+          transform="matrix(1 8.74228e-08 8.74228e-08 -1 113 450)" 
+          stroke="#008281" stroke-width="4"/>
+<?php endif; ?>
+
+
+</g>
+</g>
+</g>
+</svg>
--- a/app/img/solid.php
+++ b/app/img/solid.php
@ -0,0 +1,62 @@
+<?php
+header("Content-Type: image/svg+xml");
+
+$showJoint = isset($_GET['joint']);
+$showDevice1 = isset($_GET['device-1']);
+$showOut = isset($_GET['out']);
+$showDevice2 = isset($_GET['device-2']);
+$showDevice3 = isset($_GET['device-3']);
+$showDevice4 = isset($_GET['device-4']);
+?>
+
+<svg xmlns="http://www.w3.org/2000/svg" width="227" height="596" viewBox="0 0 227 596" fill="none">
+<?php 
+// Device positions array (y-coordinates)
+$devicePositions = [
+    'device-1' => 0.75,
+    'out' => 297.75,
+    'device-2' => 198.75,
+    'device-3' => 397.058,
+    'device-4' => 595.211
+];
+
+// Calculate joint line segments
+if ($showJoint) {
+    $activeDevices = array_filter([$showDevice1, $showDevice2, $showDevice3, $showDevice4]);
+    $activeYs = [];
+    
+    foreach ($devicePositions as $device => $y) {
+        if (isset($_GET[$device])) {
+            $activeYs[] = $y;
+        }
+    }
+    
+    // Add top/bottom if first/last device is connected
+    if ($showDevice1) array_unshift($activeYs, 0);
+    if ($showDevice4) $activeYs[] = 596;
+    
+    // Draw segments between consecutive points
+    for ($i = 1; $i < count($activeYs); $i++) {
+        $y1 = $activeYs[$i-1];
+        $y2 = $activeYs[$i];
+        echo "<line x1='112.75' y1='$y1' x2='112.75' y2='$y2' stroke='#008281' stroke-width='4'/>";
+    }
+}
+?>
+
+<?php if ($showDevice1): ?>
+<line x1="113.231" y1="0.75" x2="7.69496e-06" y2="0.75001" stroke="#008281" stroke-width="4" id="device-1"/>
+<?php endif; ?>
+<?php if ($showOut): ?>
+<line x1="226.231" y1="297.75" x2="113" y2="297.75" stroke="#008281" stroke-width="4" id="out"/>
+<?php endif; ?>
+<?php if ($showDevice2): ?>
+<line x1="113.231" y1="198.75" x2="7.69496e-06" y2="198.75" stroke="#008281" stroke-width="4" id="device-2"/>
+<?php endif; ?>
+<?php if ($showDevice3): ?>
+<line x1="113.231" y1="397.058" x2="7.69496e-06" y2="397.058" stroke="#008281" stroke-width="4" id="device-3"/>
+<?php endif; ?>
+<?php if ($showDevice4): ?>
+<line x1="113.231" y1="595.211" x2="7.69496e-06" y2="595.211" stroke="#008281" stroke-width="4" id="device-4"/>
+<?php endif; ?>
+</svg>
--- a/templates/dashboard.php
+++ b/templates/dashboard.php
@ -3,140 +3,159 @@
    <div class="card">
      <div class="card-header">
        <div class="row">
-    <div class="col">
-      <i class="fas fa-tachometer-alt fa-fw me-2"></i><?php echo _("Dashboard"); ?>
-    </div>
-    <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 $ifaceStatus ?>"></i></span>
-        <span class="text service-status"><?php echo strtolower($apInterface) .' '. _($ifaceStatus) ?></span>
-      </button>
-    </div>
+          <div class="col">
+            <i class="fas fa-tachometer-alt fa-fw me-2"></i>
+            <?php echo _("Dashboard"); ?>
+          </div>
+          <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 $ifaceStatus ?>"></i></span>
+              <span class="text service-status">
+                <?php echo strtolower($apInterface) .' '. _($ifaceStatus) ?>
+              </span>
+            </button>
+          </div>
        </div><!-- /.row -->
      </div><!-- /.card-header -->
+      <div class="card-wrapper">

-      <div class="card-body">
-        <div class="row">
+        <div class="card">

-          <div class="col-lg-12">
-            <div class="card mb-3">
-              <div class="card-body">
-                <h4 class="card-title"><?php echo _("Hourly traffic amount"); ?></h4>
-                <div id="divInterface" class="d-none"><?php echo $apInterface; ?></div>
-                <div class="col-md-12">
-                  <div class="col dbChart">
-                    <canvas id="divDBChartBandwidthhourly"></canvas>
+          <div class="card-body">
+            <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 active">
+                  <span>Ethernet</span>
+                  <i class="fas fa-ethernet fa-2xl"></i>
+                </div>
+                <div class="connection-item">
+                  <span>Repeater</span>
+                  <i class="fas fa-wifi fa-2xl"></i>
+                </div>
+                <div class="connection-item">
+                  <span>Tethering</span>
+                  <i class="fas fa-mobile-alt fa-2xl"></i>
+                </div>
+                <div class="connection-item">
+                  <span>Cellular</span>
+                  <i class="fas fa-broadcast-tower fa-2xl"></i>
+                </div>
+                <img src="app/img/dashed.svg" class="dashed-lines" alt="">
+                <img src="app/img/solid.php?joint&device-1&out&device-2" class="solid-lines" alt="">
+              </div>
+
+              <div class="center-device col-12 col-lg-4">
+                <div class="top" style="margin-bottom: 50px">
+                  <img class="device-illustration" src="app/img/device.svg" alt="Raspberry Pi">
+                  <div class="device-label">Raspberry Pi 3 Model B+</div>
+                </div>
+
+                <div class="bottom">
+                  <div class="device-status ">
+                    <div class="status-item active">
+                      <i class="fas fa-bullseye fa-2xl"></i>
+                      <span>
+                        <?php echo _('AP'); ?>
+                      </span>
+                    </div>
+                    <div class="status-item">
+                      <i class="fas fa-bridge fa-2xl"></i>
+                      <span>
+                        <?php echo _('Bridged'); ?>
+                      </span>
+                    </div>
+                    <div class="status-item">
+                      <i class="fas fa-hand-paper fa-2xl"></i>
+                      <span>
+                        <?php echo _('Adblock'); ?>
+                      </span>
+                    </div>
+                    <div class="status-item">
+                      <i class="fas fa-shield-alt fa-2xl"></i>
+                      <span>
+                        <?php echo _('VPN'); ?>
+                      </span>
+                    </div>
+                    <div class="status-item disabled">
+                      <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>
+                        <i class="fas fa-slash fa-stack-1x"></i>
+                      </span>
+                      <span>
+                        <?php echo _('Firewall'); ?>
+                      </span>
+                    </div>
+                  </div>
+
+                  <div class="wifi-bands">
+                    <span class="band active">5G</span>
+                    <span class="band">2.4G</span>
                  </div>
                </div>
-              </div><!-- /.card-body -->
-            </div><!-- /.card-->
-          </div>

-          <div class="col-sm-6 align-items-stretch">
-            <div class="card h-100">
-              <div class="card-body wireless">
-                <h4 class="card-title"><?php echo _("Wireless Client"); ?></h4>
-                <div class="row ms-1">
-                  <div class="col-sm">
-                    <div class="row mb-1">
-                      <div class="info-item col"><?php echo _("Connected To"); ?></div><div class="info-value col"><?php echo htmlspecialchars($connectedSSID, ENT_QUOTES); ?></div>
-                    </div>
-                    <div class="row mb-1">
-                      <div class="info-item col"><?php echo _("Interface"); ?></div><div class="info-value col"><?php echo htmlspecialchars($clientInterface); ?></div>
-                    </div>
-                    <div class="row mb-1">
-                      <div class="info-item col"><?php echo _("AP Mac Address"); ?></div><div class="info-value col"><?php echo htmlspecialchars($connectedBSSID, ENT_QUOTES); ?></div>
-                    </div>
-                    <div class="row mb-1">
-                      <div class="info-item col"><?php echo _("Bitrate"); ?></div><div class="info-value col"><?php echo htmlspecialchars($bitrate, ENT_QUOTES); ?></div>
-                    </div>
-                    <div class="row mb-1">
-                      <div class="info-item col"><?php echo _("Signal Level"); ?></div><div class="info-value col"><?php echo htmlspecialchars($signalLevel, ENT_QUOTES); ?></div>
-                    </div>
-                    <div class="row mb-1">
-                      <div class="info-item col"><?php echo _("Transmit Power"); ?></div><div class="info-value col"><?php echo htmlspecialchars($txPower, ENT_QUOTES); ?></div>
-                    </div>
-                    <div class="row mb-1">
-                      <div class="info-item col"><?php echo _("Frequency"); ?></div><div class="info-value col"><?php echo htmlspecialchars($frequency, ENT_QUOTES); ?></div>
+                <div class="clients-mobile">
+                  <div class="client-type">
+                    <i class="fas fa-globe"></i>
+                    <div class="client-count">
+                      <i class="fas fa-ethernet badge-icon"></i>
                    </div>
                  </div>
-                  <div class="col-md d-flex">
-                    <script>var linkQ = <?php echo json_encode($strLinkQuality); ?>;</script>
-                    <div class="chart-container">
-                      <canvas id="divChartLinkQ"></canvas>
-                    </div>
+                  <div class="client-type">
+                    <i class="fas fa-laptop"></i>
+                    <span class="client-count">3</span>
                  </div>
-                </div><!--row-->
-              </div><!-- /.card-body -->
-            </div><!-- /.card -->
-          </div><!-- /.col-md-6 -->
-          <div class="col-sm-6">
-            <div class="card h-100 mb-3">
-              <div class="card-body">
-                <h4 class="card-title"><?php echo _("Connected Devices"); ?></h4>
-                <div class="table-responsive">
-                  <table class="table table-hover">
-                    <thead>
-                      <tr>
-                        <?php if ($bridgedEnable == 1) : ?>
-                          <th><?php echo _("MAC Address"); ?></th>
-                        <?php else : ?>
-                          <th><?php echo _("Host name"); ?></th>
-                          <th><?php echo _("IP Address"); ?></th>
-                          <th><?php echo _("MAC Address"); ?></th>
-                        <?php endif; ?>
-                      </tr>
-                    </thead>
-                    <tbody>
-                        <?php if ($bridgedEnable == 1) : ?>
-                          <tr>
-                            <td><small class="text-muted"><?php echo _("Bridged AP mode is enabled. For Hostname and IP, see your router's admin page.");?></small></td>
-                          </tr>
-                        <?php endif; ?>
-                        <?php foreach (array_slice($clients,0, 2) as $client) : ?>
-                        <tr>
-                          <?php if ($arrHostapdConf['BridgedEnable'] == 1): ?>
-                            <td><?php echo htmlspecialchars($client, ENT_QUOTES) ?></td>
-                          <?php else : ?>
-                            <?php $props = explode(' ', $client) ?>
-                            <td><?php echo htmlspecialchars($props[3], ENT_QUOTES) ?></td>
-                            <td><?php echo htmlspecialchars($props[2], ENT_QUOTES) ?></td>
-                            <td><?php echo htmlspecialchars($props[1], ENT_QUOTES) ?></td>
-                          <?php endif; ?>
-                        </tr>
-                        <?php endforeach ?>
-                    </tbody>
-                  </table>
-                  <?php if (sizeof($clients) >2) : ?>
-                      <div class="col-lg-12 float-end">
-                        <a class="btn btn-outline-info" role="button" href="<?php echo $moreLink ?>"><?php echo _("More");?>  <i class="fas fa-chevron-right"></i></a>
-                      </div>
-                  <?php elseif (sizeof($clients) ==0) : ?>
-                      <div class="col-lg-12 mt-3"><?php echo _("No connected devices");?></div>
-                  <?php endif; ?>
-                </div><!-- /.table-responsive -->
-              </div><!-- /.card-body -->
-            </div><!-- /.card -->
-          </div><!-- /.col-md-6 -->
-        </div><!-- /.row -->
+                </div>
+              </div>

-        <div class="col-lg-12 mt-3">
-          <div class="row">
-            <form action="wlan0_info" method="POST">
-                <?php echo CSRFTokenFieldTag() ?>
-                <?php if (!RASPI_MONITOR_ENABLED) : ?>
-                    <?php if (!$wlan0up) : ?>
-                    <input type="submit" class="btn btn-success" value="<?php echo _("Start").' '.$apInterface ?>" name="ifup_wlan0" />
-                    <?php else : ?>
-                    <input type="submit" class="btn btn-warning" value="<?php echo _("Stop").' '.$apInterface ?>"  name="ifdown_wlan0" />
-                    <?php endif ?>
-                <?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>
-            </form>
+              <div class="connections-right col-lg-4">
+                <div class="d-flex flex-column justify-content-around h-100">
+                  <div class="connection-item connection-right">
+                    <span class="fa-stack">
+                      <i class="fas fa-laptop fa-stack-1x fa-2xl"></i>
+                      <i class="fas fa-wifi fa-stack-1x fa-xl" style="line-height: 0!important;"></i>
+                    </span>
+                    <span>3 WLAN Clients</span>
+                  </div>
+                  <div class="connection-item connection-right">
+                    <span class="fa-stack">
+                      <i class="fas fa-laptop fa-stack-1x fa-2xl"></i>
+                      <i class="fas fa-wifi fa-stack-1x fa-xl" style="line-height: 0!important;"></i>
+                    </span>
+                    <span>1 LAN Client</span>
+                  </div>
+                </div>
+
+                <img src="app/img/right-solid.php?device-1&out" class="solid-lines solid-lines-right" alt="">
+                <img src="app/img/right-dashed.svg" class="dashed-lines dashed-lines-right" alt="">
+              </div>
+            </div>
          </div>
        </div>

-      </div><!-- /.card-body -->
+        <div class="col-lg-12 mt-3">
+
+        </div>
+        <div class="row">
+          <form action="wlan0_info" method="POST">
+            <?php echo CSRFTokenFieldTag() ?>
+            <?php if (!RASPI_MONITOR_ENABLED) : ?>
+            <?php if (!$wlan0up) : ?>
+            <input type="submit" class="btn btn-success" value="<?php echo _(" Start").' '.$apInterface ?>" name="ifup_wlan0" />
+                  <?php else : ?>
+                  <input type="submit" class="btn btn-warning" value="<?php echo _("Stop").' '.$apInterface ?>"  name="ifdown_wlan0" />
+                  <?php endif ?>
+              <?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>
+          </form>
+        </div>
+      </div>
+
+
+
      <div class="card-footer"><?php echo _("Information provided by ip and iw and from system"); ?></div>
    </div><!-- /.card -->
  </div><!-- /.col-lg-12 -->
@ -144,6 +163,7 @@
 <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>
+  t[' send'] = '<?php echo addslashes(_(' Send')); ?>';
+  t['receive'] = '
+    <? php echo addslashes(_('Receive')); ?> ';
+</script>