Adding notify JS to alert if connexion to APIs is lost.

index.html

@@ -468,6 +468,7 @@
 
 <!-- Custom scripts for all pages-->
 <script src="js/sb-admin-2.min.js"></script>
+<script src="vendor/notify/notify.min.js"></script>
 <script src="js/timelaps.js"></script>
 
 <!-- Page level plugins -->
@@ -477,9 +478,7 @@
 <script>
 
     $(document).ready(function () {
-
         getKartsMenu();
-
     });
 
 </script>

js/timelaps.js

@@ -31,7 +31,8 @@ function showKarts() {
             });
         },
         error: function (xhr) {
-            alert('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);
+            $.notify("APIs unreachable!", "error");
+            console.log('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);
         },
     });
 }
@@ -54,7 +55,8 @@ function getKartsMenu() {
             });
         },
         error: function (xhr) {
-            alert('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);
+            $.notify("APIs unreachable!", "error");
+            console.log('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);
         },
     });
 }
@@ -129,7 +131,8 @@ function getPilotsByKart() {
             });
         },
         error: function (xhr) {
-            alert('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);
+            $.notify("APIs unreachable!", "error");
+            console.log('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);
         },
     });
 }

karts.html

@@ -195,7 +195,7 @@
                     <div class="card-header py-3">
                         <h6 class="m-0 font-weight-bold text-primary">
                             Karting list -
-                            <a href="#" class="btn btn-primary btn-circle">
+                            <a href="#" class="btn btn-primary btn-circle" data-toggle="modal" data-target="#modal_newkart">
                                 <i class="fas fa-plus"></i>
                             </a>
                         </h6>
@@ -264,6 +264,35 @@
         </div>
         <!-- End of Main Content -->
 
+        <div class="modal fade" id="modal_newkart" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+            <div class="modal-dialog" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="exampleModalLabel">New kart</h5>
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                            <span aria-hidden="true">&times;</span>
+                        </button>
+                    </div>
+                    <form>
+                        <div class="modal-body">
+                                <div class="form-group">
+                                    <label for="inputKartName">Name</label>
+                                    <input type="email" class="form-control" id="inputKartName" placeholder="Enter kart name">
+                                </div>
+                                <div class="form-group">
+                                    <label for="inputAutonomy">Autonomy</label>
+                                    <input type="password" class="form-control" id="inputAutonomy" placeholder="Autonomy">
+                                </div>
+                        </div>
+                        <div class="modal-footer">
+                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                            <button type="submit" class="btn btn-primary">Save changes</button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+
         <!-- Footer -->
         <footer class="sticky-footer bg-white">
             <div class="container my-auto">
@@ -296,7 +325,7 @@
 <script src="js/sb-admin-2.min.js"></script>
 <script src="vendor/datatables/jquery.dataTables.min.js"></script>
 <script src="vendor/datatables/dataTables.bootstrap4.min.js"></script>
-
+<script src="vendor/notify/notify.min.js"></script>
 <script src="js/timelaps.js"></script>
 
 <script>

params.html

@@ -256,14 +256,13 @@
 
 <!-- Custom scripts for all pages-->
 <script src="js/sb-admin-2.min.js"></script>
-
+<script src="vendor/notify/notify.min.js"></script>
 <script src="js/timelaps.js"></script>
 
 <script>
 
     $(document).ready(function () {
         getKartsMenu();
-        showKarts();
     });
 
 </script>

pilots.html

@@ -229,7 +229,7 @@
 <script src="js/sb-admin-2.min.js"></script>
 <script src="vendor/datatables/jquery.dataTables.min.js"></script>
 <script src="vendor/datatables/dataTables.bootstrap4.min.js"></script>
-
+<script src="vendor/notify/notify.min.js"></script>
 <script src="js/timelaps.js"></script>
 
 <script>