Implement hostapd modal dialog

app/css/custom.php

@@ -52,19 +52,23 @@ body {
   font-weight: 500;
 }
 
-.card .card-header {
+.card .card-header, .modal-header {
   border-color: <?php echo $color; ?>;
   color: #fff;
   background-color: <?php echo $color; ?>;
 }
 
+.modal-header {
+  border-radius: 0px;
+}
+
 .btn-primary {
   color: <?php echo $color; ?>;
   border-color: <?php echo $color; ?>;
   background-color: #fff;
 }
 
-.card-footer {
+.card-footer, .modal-footer {
   background-color: #f2f1f0;
 }
 

app/css/hackernews.css

@@ -34,12 +34,12 @@ h5.card-title {
   color: #212529;
 }
 
-.card {
+.card, .modal-dialog {
   border-radius: 1px;
   border-color: #ff6600;
 }
 
-.card>.card-header {
+.card>.card-header, .modal-header {
   border-color: #ff6600;
   background-color: #ff6600;
   color: #000;
@@ -53,11 +53,20 @@ h5.card-title {
   font-size: 1.0rem;
 }
 
-.card-header [class^="fa"] {
+.card-header [class^="fa"], .modal-header [class^="fa"] {
   color: #fff;
   font-size: 1.0rem;
 }
 
+.modal-title {
+  color: #000;
+  font-size: 1.0rem;
+}
+
+.modal-content {
+  border-radius: 0px;
+}
+
 .sidebar-brand-text {
   text-transform: none;
   color: #212529;

app/css/lightsout.css

@@ -119,7 +119,7 @@ a:focus, a:hover {
   color: #d2d2d2;
 }
 
-.card>.card-header {
+.card>.card-header, .modal-content, .modal-header {
   border-color: #404040;
   background-color: #202020;
   color: #afafaf;
@@ -129,6 +129,10 @@ a:focus, a:hover {
   font-weight: 400;
 }
 
+.modal-body {
+  background-color: #141414;
+}
+
 .card>.card-header .fa {
   color: #202020;
 }
@@ -197,11 +201,15 @@ hr {
   width: 6.5rem;
 }
 
-.card-footer {
+.card-footer, .modal-footer {
   background-color: #202020;
   border-top: 0px;
 }
 
+.modal-footer {
+  border-radius: 0.3rem;
+}
+
 .card>.card-header::before, .navbar-default::before {
   content: " ";
   display: block;

app/js/custom.js

@@ -232,6 +232,18 @@ function loadChannel() {
     });
 }
 
+$('#hostapdModal').on('shown.bs.modal', function (e) {
+    var seconds = 9;
+    var countDown = setInterval(function(){
+      if(seconds <= 0){
+        clearInterval(countDown);
+      }
+      var pcg = Math.floor(100-(seconds*100/9));
+      document.getElementsByClassName('progress-bar').item(0).setAttribute('style','width:'+Number(pcg)+'%');
+      seconds --;
+    }, 1000);
+});
+
 /*
 Sets the wirelss channel select options based on hw_mode and country_code.
 

locale/en_US/LC_MESSAGES/messages.po

@@ -462,6 +462,12 @@ msgstr "Disable <code>disassoc_low_ack</code>"
 msgid "Do not disassociate stations based on excessive transmission failures."
 msgstr "Do not disassociate stations based on excessive transmission failures."
 
+msgid "RaspAP service start executing"
+msgstr "RaspAP service start executing"
+
+msgid "Close"
+msgstr "Close"
+
 #: includes/networking.php
 msgid "Summary"
 msgstr "Summary"

templates/hostapd.php

@@ -2,11 +2,30 @@
   <?php if (!RASPI_MONITOR_ENABLED) : ?>
     <input type="submit" class="btn btn-outline btn-primary" name="SaveHostAPDSettings" value="<?php echo _("Save settings"); ?>" />
     <?php if ($hostapdstatus[0] == 0) : ?>
-      <input type="submit" class="btn btn-success" name="StartHotspot" value="<?php echo  _("Start hotspot") ?>"/>
+      <input type="submit" class="btn btn-success" name="StartHotspot" value="<?php echo  _("Start hotspot"); $msg=_("Starting hotspot"); ?>" data-toggle="modal" data-target="#hostapdModal"/>
     <?php else : ?>
       <input type="submit" class="btn btn-warning" name="StopHotspot" value="<?php echo _("Stop hotspot") ?>"/>
-      <input type ="submit" class="btn btn-warning" name="RestartHotspot" value="<?php echo _("Restart hotspot") ?>"/>
+      <input type ="submit" class="btn btn-warning" name="RestartHotspot" value="<?php echo _("Restart hotspot"); $msg=_("Restarting hotspot"); ?>" data-toggle="modal" data-target="#hostapdModal"/>
     <?php endif ?>
+    <!-- Modal -->
+    <div class="modal fade" id="hostapdModal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
+      <div class="modal-dialog" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <div class="modal-title" id="ModalLabel"><i class="fas fa-sync-alt mr-2"></i><?php echo $msg ?></div>
+          </div>
+          <div class="modal-body">
+            <div class="col-md-12 mb-3 mt-1"><?php echo _("RaspAP service start executing") ?>...</div>
+            <div class="progress" style="height: 20px;">
+              <div class="progress-bar bg-info" role="progressbar" id="progressBar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="9"></div>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-outline btn-primary" data-dismiss="modal"><?php echo _("Close"); ?></button>
+          </div>
+        </div>
+      </div>
+    </div>
   <?php endif ?>
 <?php $buttons = ob_get_clean(); ob_end_clean() ?>