show modal for lstart execution

Author: NeejaYanglea

css/style.css

@@ -164,6 +164,22 @@ textarea {
 .right-margin {
     right: 24px;
 }
+/*Modal*/
+.modal-kathara {
+    display: inherit!important;
+    z-index: 9999;
+    background: rgb(189, 189, 189); /* Fall-back for browsers that don't support rgba */
+    background: rgba(189, 189, 189, 0.5);  
+}
+
+.modal-kathara .modal-content{
+    border-radius: 0!important;
+}
+
+.modal-kathara .modal-footer{
+    border: 0!important;
+    padding-top: 0px; 
+}
 /*Navbar*/
 .navbar-kathara {
     position: fixed;
@@ -177,7 +193,7 @@ textarea {
     box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.35);
 }
 .navbar-kathara-primary {
-    z-index: 9999;
+    z-index: 9998;
     top: 0;
 }
 .navbar-kathara li a, .navbar-kathara li a:visited, .navbar-kathara li a:focus {
@@ -188,7 +204,7 @@ textarea {
     background-color: #5b8fbd;
 }
 .navbar-kathara-secondary {
-    z-index: 9998;
+    z-index: 9999;
     top: 51px;
     background-color: #5b8fbd;
 }

index.html

@@ -315,6 +315,26 @@ <h4>Bash file preview:</h4>
             </small>
         </div><!-- /.container-fluid -->
     </nav>
+
+    <!-- Lstart Modal -->
+    <div id="lstartModal" class="modal modal-kathara ng-hide">
+        <div class="modal-dialog">
+            <!-- Modal content-->
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" onclick="close_modal(event)">&times;</button>
+                    <h4 class="modal-title">Running Lstart</h4>
+                </div>
+                <div class="modal-body">
+                    <p>The command has been issued, please wait for its execution.</p>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-warning" onclick="close_modal(event)">Ok, I understand</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <!-- Sub-menu Download Lab -->
     <nav id="submenu-1" class="navbar navbar-primary navbar-kathara navbar-kathara-secondary ng-hide">
         <div class="container-fluid">
@@ -392,6 +412,7 @@ <h4>Bash file preview:</h4>
         }
         function executeStart(e){
             e.preventDefault();
+            show_modal();
             const {ipcRenderer} = electron;
             //console.log(script);
             ipcRenderer.send('script:execute');

js/page.js

@@ -48,4 +48,15 @@ function toggle_submenu(e, number, total) {
 function toggle_tab_and_submenu(event, elem, total_submenus) {
     toggle_submenu(event, -1, total_submenus);
     toggle_tab(event, elem);
+}
+
+function close_modal(e){
+    e.preventDefault();
+    var modal = document.getElementById("lstartModal");
+    modal.classList.add("ng-hide");
+}
+
+function show_modal(){
+    var modal = document.getElementById("lstartModal");
+    modal.classList.remove("ng-hide");
 }