Add service-status indicator

templates/dhcp.php

@@ -2,27 +2,33 @@
 <div class="col-lg-12">
   <div class="card">
   <div class="card-header">
-    <i class="fas fa-exchange-alt"></i> <?php echo _("Configure DHCP"); ?>
+    <div class="row">
-    <span class="label pull-right service-status-<?php echo $serviceStatus ?>">dnsmasq <?php echo _($serviceStatus) ?></span>
+      <div class="col">
+        <i class="fas fa-exchange-alt mr-2"></i><?php echo _("Configure DHCP"); ?>
       </div>
-    <!-- /.panel-heading -->
+      <div class="col">
+        <button class="btn btn-light btn-icon-split btn-sm service-status float-right">
+          <span class="icon text-gray-600"><i class="fas fa-circle service-status-<?php echo $serviceStatus ?>"></i></span>
+          <span class="text service-status">dnsmasq <?php echo _($serviceStatus) ?></span>
+        </button>
+      </div>
+    </div><!-- /.row -->
+  </div><!-- /.card-header -->
   <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="nav-item active"><a class="nav-link" href="#server-settings" data-toggle="tab"><?php echo _("Server settings"); ?></a>
+          <li class="nav-item"><a class="nav-link active" href="#server-settings" data-toggle="tab"><?php echo _("Server settings"); ?></a></li>
-            </li>
           <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 class="nav-item"><a class="nav-link" href="#client-list" data-toggle="tab"><?php echo _("Client list"); ?></a></li>
-            </li>
       </ul>
   <!-- Tab panes -->
   <div class="tab-content">
-<div class="tab-pane active" id="server-settings">
+  <div class="tab-pane active" id="server-settings">
-<h4>DHCP server settings</h4>
+  <h4 class="mt-3">DHCP server settings</h4>
-<div class="row">
+  <div class="row">
     <div class="form-group col-md-4">
       <label for="code">Interface</label>
       <select class="form-control" name="interface">
@@ -33,22 +39,22 @@
       <?php endforeach ?>
       </select>
     </div>
-</div>
+  </div>
-<div class="row">
+  <div class="row">
     <div class="form-group col-md-4">
       <label for="code"><?php echo _("Starting IP Address"); ?></label>
       <input type="text" class="form-control"name="RangeStart" value="<?php echo htmlspecialchars($RangeStart, ENT_QUOTES); ?>" />
     </div>
-</div>
+  </div>
 
-<div class="row">
+  <div class="row">
     <div class="form-group col-md-4">
       <label for="code"><?php echo _("Ending IP Address"); ?></label>
       <input type="text" class="form-control" name="RangeEnd" value="<?php echo htmlspecialchars($RangeEnd, ENT_QUOTES); ?>" />
     </div>
-</div>
+  </div>
 
-<div class="row">
+  <div class="row">
     <div class="form-group col-xs-2 col-sm-2">
       <label for="code"><?php echo _("Lease Time"); ?></label>
       <input type="text" class="form-control" name="RangeLeaseTime" value="<?php echo htmlspecialchars($arrRangeLeaseTime[1], ENT_QUOTES); ?>" />
@@ -62,21 +68,21 @@
         <option value="infinite"<?php echo $infiniteselected; ?>><?php echo _("Infinite"); ?></option>
       </select>
     </div>
-</div>
+  </div>
-<?php if (!RASPI_MONITOR_ENABLED) : ?>
+  <?php if (!RASPI_MONITOR_ENABLED) : ?>
       <input type="submit" class="btn btn-outline btn-primary" value="<?php echo _("Save settings"); ?>" name="savedhcpdsettings" />
       <?php if ($dnsmasq_state) : ?>
         <input type="submit" class="btn btn-warning" value="<?php echo _("Stop dnsmasq") ?>" name="stopdhcpd" />
       <?php else : ?>
         <input type="submit" class="btn btn-success" value="<?php echo _("Start dnsmasq") ?>" name="startdhcpd" />
       <?php endif ?>
-<?php endif ?>
+  <?php endif ?>
-</div><!-- /.tab-pane -->
+  </div><!-- /.tab-pane -->
 
-<div class="tab-pane fade in" id="client-list">
+  <div class="tab-pane fade in" id="client-list">
-<h4>Client list</h4>
+  <h4 class="mt-3 mb-3">Client list</h4>
-<div class="row">
+  <div class="row">
-<div class="col-lg-12">
+  <div class="col-lg-12">
     <div class="card">
     <div class="card-header"><?php echo _("Active DHCP leases"); ?></div>
     <!-- /.panel-heading -->
@@ -105,11 +111,11 @@
       </div><!-- /.table-responsive -->
     </div><!-- /.card-body -->
     </div><!-- /.card -->
-</div><!-- /.col-lg-12 -->
+  </div><!-- /.col-lg-12 -->
-</div><!-- /.row -->
+  </div><!-- /.row -->
-</div><!-- /.tab-pane -->
+  </div><!-- /.tab-pane -->
 
-<div class="tab-pane fade in" id="static-leases">
+  <div class="tab-pane fade in" id="static-leases">
       <div class="dhcp-static-leases js-dhcp-static-lease-container">
           <?php foreach ($dhcpHost as $host) : ?>
               <?php list($mac, $ip) = array_map("trim", explode(",", $host)); ?>
@@ -127,7 +133,7 @@
           <?php endforeach ?>
       </div>
 
-    <h5><?php echo _("Add static DHCP lease") ?></h5>
+      <h4 class="mt-3 mb-3"><?php echo _("Add static DHCP lease") ?></h4>
       <div class="row dhcp-static-lease-row js-new-dhcp-static-lease">
           <div class="col-md-5 col-xs-5">
               <input type="text" name="mac" value="" placeholder="<?php echo _("MAC address") ?>" class="form-control" autofocus="autofocus">
@@ -163,9 +169,9 @@
           }
           ?>
       <?php endif ?>
-</div>
+  </div>
 
-</div><!-- /.tab-content -->
+  </div><!-- /.tab-content -->
 </form>
 </div><!-- ./ card-body -->
 <div class="card-footer"> <?php echo _("Information provided by Dnsmasq"); ?></div>