From 97e322b0e93ac81b4057f60f8ef863a9609e48a4 Mon Sep 17 00:00:00 2001
From: bglacial <nicolas.riault@gmail.com>
Date: Thu, 18 Apr 2019 23:56:45 +0200
Subject: [PATCH] Fix CRUD on drivers

---
 pilots.html => drivers.html |  67 +++++++++-
 index.html                  |  22 ++--
 js/timelaps.js              | 245 +++++++++++++++++++++++-------------
 karts.html                  |   4 +-
 params.html                 |   4 +-
 5 files changed, 236 insertions(+), 106 deletions(-)
 rename pilots.html => drivers.html (72%)

diff --git a/pilots.html b/drivers.html
similarity index 72%
rename from pilots.html
rename to drivers.html
index 958fd18..3094a23 100644
--- a/pilots.html
+++ b/drivers.html
@@ -9,7 +9,7 @@
     <meta name="description" content="">
     <meta name="author" content="nriault">
 
-    <title>Timelaps - Pilots</title>
+    <title>Timelaps - Drivers</title>
 
     <!-- Custom fonts for this template-->
     <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
@@ -64,9 +64,9 @@
         </li>
 
         <li class="nav-item">
-            <a class="nav-link" href="pilots.html">
+            <a class="nav-link" href="drivers.html">
                 <i class="fas fa-fw fa-user-astronaut"></i>
-                <span>Pilots</span></a>
+                <span>Drivers</span></a>
         </li>
 
         <li class="nav-item">
@@ -197,6 +197,50 @@
         </div>
         <!-- End of Main Content -->
 
+        <div class="modal fade" id="modal_new_driver" 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 driver</h5>
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                            <span aria-hidden="true">&times;</span>
+                        </button>
+                    </div>
+                    <form id="driverForm">
+                        <div class="modal-body">
+                            <input type="hidden" class="form-control" id="id" name="id" value="">
+                            <input type="hidden" class="form-control" id="kart_id" name="kart_id" value="">
+                            <div class="form-group">
+                                <label for="short_name">Short name</label>
+                                <input type="text" class="form-control" id="short_name" name="short_name">
+                            </div>
+                            <div class="form-group">
+                                <label for="first_name">First name</label>
+                                <input type="text" class="form-control" id="first_name" name="first_name">
+                            </div>
+                            <div class="form-group">
+                                <label for="last_name">Last name</label>
+                                <input type="text" class="form-control" id="last_name" name="last_name">
+                            </div>
+                            <div class="form-group">
+                                <label for="order">Order</label>
+                                <input type="number" step="1" class="form-control" id="order" name="order">
+                            </div>
+                            <div class="form-group">
+                                <label for="ref_time">Ref. time</label>
+                                <input type="number" step="1" class="form-control" id="ref_time" name="ref_time">
+                            </div>
+                        </div>
+                        <div class="modal-footer">
+                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                            <button type="submit" id="saveDriverChanges" class="btn btn-primary">Save changes</button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+
         <!-- Footer -->
         <footer class="sticky-footer bg-white">
             <div class="container my-auto">
@@ -237,7 +281,22 @@
 
     $(document).ready(function () {
         getKartsMenu();
-        getPilotsByKart();
+        getDriversByKart();
+
+        $("#driverForm").submit(function (event) {
+            $("#saveDriverChanges").prop('disabled', true);
+            event.preventDefault();
+
+            if($('#id').val() == ""){
+                addDriver($( this ).serialize())
+            }else{
+                editDriver($('#id').val(), $( this ).serialize())
+            }
+        });
+
+        $('#modal_new_driver').on('hide.bs.modal', function () {
+            $("#saveDriverChanges").closest('form').find("input, textarea").val("");
+        })
     });
 
 </script>
diff --git a/index.html b/index.html
index e5543ca..23027ac 100644
--- a/index.html
+++ b/index.html
@@ -61,9 +61,9 @@
         </li>
 
         <li class="nav-item">
-            <a class="nav-link" href="pilots.html">
+            <a class="nav-link" href="drivers.html">
                 <i class="fas fa-fw fa-user-astronaut"></i>
-                <span>Pilots</span></a>
+                <span>Drivers</span></a>
         </li>
 
         <li class="nav-item">
@@ -201,8 +201,8 @@
                         <div class="row">
                             <div class="col-md-6">
 
-                                <h4>Relay in progress : <label id="pilot-ock1"> Nicolas</label> - <label
-                                        id="time-pilot-ock1">37:55</label></h4>
+                                <h4>Relay in progress : <label id="driver-ock1"> Nicolas</label> - <label
+                                        id="time-driver-ock1">37:55</label></h4>
 
                                 <div class="progress">
                                     <div class="progress-bar" role="progressbar" style="width: 79%" aria-valuenow="79"
@@ -219,7 +219,7 @@
                                         <thead>
                                         <tr>
                                             <th></th>
-                                            <th>Pilot</th>
+                                            <th>Driver</th>
                                             <th>Start</th>
                                             <th>End</th>
                                             <th>Refueled</th>
@@ -281,8 +281,8 @@
                         <div class="row">
                             <div class="col-md-6">
 
-                                <h4>Relay in progress : <label id="pilot-ock2"> Nicolas</label> - <label
-                                        id="time-pilot-ock2">37:55</label></h4>
+                                <h4>Relay in progress : <label id="driver-ock2"> Nicolas</label> - <label
+                                        id="time-driver-ock2">37:55</label></h4>
 
                                 <div class="progress">
                                     <div class="progress-bar" role="progressbar" style="width: 79%" aria-valuenow="79"
@@ -299,7 +299,7 @@
                                         <thead>
                                         <tr>
                                             <th></th>
-                                            <th>Pilot</th>
+                                            <th>Driver</th>
                                             <th>Start</th>
                                             <th>End</th>
                                             <th>Refueled</th>
@@ -361,8 +361,8 @@
                         <div class="row">
                             <div class="col-md-6">
 
-                                <h4>Relay in progress : <label id="pilot-ock3"> Nicolas</label> - <label
-                                        id="time-pilot-ock3">37:55</label></h4>
+                                <h4>Relay in progress : <label id="driver-ock3"> Nicolas</label> - <label
+                                        id="time-driver-ock3">37:55</label></h4>
 
                                 <div class="progress">
                                     <div class="progress-bar" role="progressbar" style="width: 79%" aria-valuenow="79"
@@ -379,7 +379,7 @@
                                         <thead>
                                         <tr>
                                             <th></th>
-                                            <th>Pilot</th>
+                                            <th>Driver</th>
                                             <th>Start</th>
                                             <th>End</th>
                                             <th>Refueled</th>
diff --git a/js/timelaps.js b/js/timelaps.js
index 5652951..5d03fbf 100644
--- a/js/timelaps.js
+++ b/js/timelaps.js
@@ -22,82 +22,6 @@ function getKartsMenu() {
     });
 }
 
-function getPilotsByKart() {
-
-    $.ajax({
-        type: 'GET',
-        crossDomain: true,
-        url: api_url + 'karts/',
-        dataType: 'json',
-        success: function (data, status) {
-            $.each(data, function (index, value) {
-                $('.container-fluid').append("" +
-                    "<div class=\"card shadow mb-4\">\n" +
-                    "                    <div class=\"card-header py-3\">\n" +
-                    "                        <h6 class=\"m-0 font-weight-bold text-primary\">\n" +
-                    "                            Pilot list - " + value.name + " \n" +
-                    "                            <a href=\"#\" class=\"btn btn-primary btn-circle\" title='Ajouter un piote au karting " + value.name + "'>\n" +
-                    "                                <i class=\"fas fa-plus\"></i>\n" +
-                    "                            </a>\n" +
-                    "                        </h6>\n" +
-                    "                    </div>\n" +
-                    "                    <div class=\"card-body\">\n" +
-                    "                        <div class=\"table-responsive\">\n" +
-                    "                            <table class=\"table table-bordered\" id=\"dataTable_pilots" + value.id + "\" width=\"100%\" cellspacing=\"0\">\n" +
-                    "                                <thead>\n" +
-                    "                                <tr>\n" +
-                    "                                    <th></th>\n" +
-                    "                                    <th>Order</th>\n" +
-                    "                                    <th>Short Name</th>\n" +
-                    "                                    <th>First Name</th>\n" +
-                    "                                    <th>Last Name</th>\n" +
-                    "                                    <th>Ref time (Sec)</th>\n" +
-                    "                                </tr>\n" +
-                    "                                </thead>\n" +
-                    "                                <tbody>\n" +
-                    "                                </tbody>\n" +
-                    "                            </table>\n" +
-                    "                        </div>\n" +
-                    "                    </div>\n" +
-                    "                </div>" +
-                    "");
-
-                $('#dataTable_pilots' + value.id).DataTable({
-                    data: value.drivers,
-                    columns: [
-                        {
-                            data: "id",
-                            render: function (data, type, row, meta) {
-                                return '<a href="#" class="btn btn-primary btn-circle"><i class="fas fa-edit"></i></a>&nbsp;<a href="#" class="btn btn-danger btn-circle"><i class="fas fa-trash"></i>';
-                            }
-                        },
-                        {
-                            data: "order"
-                        },
-                        {
-                            data: "first_name"
-                        },
-                        {
-                            data: "first_name"
-                        },
-                        {
-                            data: "last_name"
-                        },
-                        {
-                            data: "ref_time"
-                        }
-                    ]
-                });
-
-            });
-        },
-        error: function (xhr) {
-            $.notify("APIs unreachable!", "error");
-            console.log('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);
-        },
-    });
-}
-
 function getParams() {
 
     $.ajax({
@@ -137,19 +61,18 @@ function editParams(data) {
     });
 }
 
+/***
+ * Get one kart data by Id
+ * @param id
+ */
 function getKarts(id) {
-
     $.ajax({
         type: 'GET',
         crossDomain: true,
         url: api_url + 'karts/' + id + '/',
         dataType: 'json',
         success: function (data, status) {
-            $('#id').val(data.id);
-            $('#autonomy').val(data.autonomy);
-            $('#stand_minimum_time').val(data.stand_minimum_time);
-            $('#default_relay').val(data.default_relay);
-            $('#comment').val(data.comment);
+            console.log(data);
         },
         error: function (xhr) {
             $.notify("APIs unreachable!", "error");
@@ -243,7 +166,7 @@ function modalEditKarts(id) {
     $.ajax({
         type: 'GET',
         crossDomain: true,
-        url: api_url + 'karts/'+id+'/',
+        url: api_url + 'karts/' + id + '/',
         dataType: 'json',
         success: function (data, status) {
             $('#id').val(data.id);
@@ -262,7 +185,7 @@ function editKarts(id, data) {
     $.ajax({
         type: 'PUT',
         crossDomain: true,
-        url: api_url + 'karts/'+id+'/',
+        url: api_url + 'karts/' + id + '/',
         dataType: 'json',
         data: data,
         success: function (data, status) {
@@ -280,6 +203,113 @@ function editKarts(id, data) {
     });
 }
 
+function modalEditDriver(id) {
+    $('#modal_new_driver').modal('show');
+    $('#modal_new_driver').val(kart_id);
+    $.ajax({
+        type: 'GET',
+        crossDomain: true,
+        url: api_url + 'drivers/' + id + '/',
+        dataType: 'json',
+        success: function (data, status) {
+            $('#id').val(data.id);
+            $('#short_name').val(data.short_name);
+            $('#first_name').val(data.first_name);
+            $('#last_name').val(data.last_name);
+            $('#order').val(data.order);
+            $('#ref_time').val(data.ref_time);
+        },
+        error: function (xhr) {
+            $.notify("APIs unreachable!", "error");
+            console.log('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);
+        },
+    });
+}
+
+function modalAddDriver(kart_id) {
+    $('#modal_new_driver').modal('show');
+    $('#kart_id').val(kart_id);
+}
+
+function getDriversByKart() {
+    $.ajax({
+        type: 'GET',
+        crossDomain: true,
+        url: api_url + 'karts/',
+        dataType: 'json',
+        success: function (data, status) {
+            $.each(data, function (index, value) {
+                if ($.fn.DataTable.isDataTable("#dataTable_drivers" + value.id)) {
+                    $('#dataTable_drivers' + value.id).DataTable().destroy();
+                } else {
+                    $('.container-fluid').append("" +
+                        "<div class=\"card shadow mb-4\">\n" +
+                        "                    <div class=\"card-header py-3\">\n" +
+                        "                        <h6 class=\"m-0 font-weight-bold text-primary\">\n" +
+                        "                            " + value.name + " &nbsp; \n" +
+                        "                            <a href=\"#\" onclick='modalAddDriver(" + value.id + ")' class=\"btn btn-primary btn-circle\" title='Add driver to " + value.name + "'>\n" +
+                        "                                <i class=\"fas fa-plus\"></i>\n" +
+                        "                            </a>\n" +
+                        "                        </h6>\n" +
+                        "                    </div>\n" +
+                        "                    <div class=\"card-body\">\n" +
+                        "                        <div class=\"table-responsive\">\n" +
+                        "                            <table class=\"table table-bordered\" id=\"dataTable_drivers" + value.id + "\" width=\"100%\" cellspacing=\"0\">\n" +
+                        "                                <thead>\n" +
+                        "                                <tr>\n" +
+                        "                                    <th></th>\n" +
+                        "                                    <th>Order</th>\n" +
+                        "                                    <th>Short Name</th>\n" +
+                        "                                    <th>First Name</th>\n" +
+                        "                                    <th>Last Name</th>\n" +
+                        "                                    <th>Ref time (Sec)</th>\n" +
+                        "                                </tr>\n" +
+                        "                                </thead>\n" +
+                        "                                <tbody>\n" +
+                        "                                </tbody>\n" +
+                        "                            </table>\n" +
+                        "                        </div>\n" +
+                        "                    </div>\n" +
+                        "                </div>" +
+                        "");
+                }
+
+                $('#dataTable_drivers' + value.id).DataTable({
+                    data: value.drivers,
+                    columns: [
+                        {
+                            data: "id",
+                            render: function (data, type, row, meta) {
+                                return '<a href="#" onclick=\'modalEditDriver(' + data + ')\'  class="btn btn-primary btn-circle"><i class="fas fa-edit"></i></a>&nbsp;<a href="#" onclick=\'deleteDriver(' + data + ','+value.id + ',' + meta.row + ')\'  class="btn btn-danger btn-circle"><i class="fas fa-trash"></i>';
+                            }
+                        },
+                        {
+                            data: "order"
+                        },
+                        {
+                            data: "short_name"
+                        },
+                        {
+                            data: "first_name"
+                        },
+                        {
+                            data: "last_name"
+                        },
+                        {
+                            data: "ref_time"
+                        }
+                    ]
+                });
+
+            });
+        },
+        error: function (xhr) {
+            $.notify("APIs unreachable!", "error");
+            console.log('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);
+        },
+    });
+}
+
 function getDriver(id) {
 
     $.ajax({
@@ -301,16 +331,57 @@ function getDriver(id) {
     });
 }
 
-function editDriver(data) {
+function addDriver(data) {
+    $.ajax({
+        type: 'POST',
+        crossDomain: true,
+        url: api_url + 'drivers/',
+        dataType: 'json',
+        data: data,
+        success: function (data, status) {
+            $.notify("Insert done!", "success");
+            getDriversByKart();
+            $("#saveDriverChanges").prop('disabled', false);
+            $('#modal_new_driver').modal('hide');
+        },
+        error: function (xhr) {
+            $.notify("APIs unreachable!", "error");
+            console.log('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);
+            $("#saveDriverChanges").prop('disabled', false);
+        },
+    });
+}
+
+function editDriver(id, data) {
     $.ajax({
         type: 'PUT',
         crossDomain: true,
-        url: api_url + 'drivers/1/',
+        url: api_url + 'drivers/' + id + '/',
         dataType: 'json',
         data: data,
         success: function (data, status) {
             $.notify("Update done!", "success");
-            getPilotsByKart();
+            getDriversByKart();
+            $("#saveDriverChanges").prop('disabled', false);
+            $('#modal_new_driver').modal('hide');
+        },
+        error: function (xhr) {
+            $.notify("APIs unreachable!", "error");
+            console.log('Request Status: ' + xhr.status + ' Status Text: ' + xhr.statusText + ' ' + xhr.responseText);
+            $("#saveDriverChanges").prop('disabled', false);
+        },
+    });
+}
+
+function deleteDriver(id, kart_id, row_index) {
+    $.ajax({
+        type: 'DELETE',
+        crossDomain: true,
+        url: api_url + 'drivers/' + id + '/',
+        dataType: 'json',
+        success: function (data, status) {
+            $.notify("Delete done!", "success");
+            $('#dataTable_drivers' + kart_id).DataTable().row(row_index).remove().draw();
         },
         error: function (xhr) {
             $.notify("APIs unreachable!", "error");
diff --git a/karts.html b/karts.html
index afb3314..89cbea4 100644
--- a/karts.html
+++ b/karts.html
@@ -64,9 +64,9 @@
         </li>
 
         <li class="nav-item">
-            <a class="nav-link" href="pilots.html">
+            <a class="nav-link" href="drivers.html">
                 <i class="fas fa-fw fa-user-astronaut"></i>
-                <span>Pilots</span></a>
+                <span>Drivers</span></a>
         </li>
 
         <li class="nav-item">
diff --git a/params.html b/params.html
index 298a19e..a8fb462 100644
--- a/params.html
+++ b/params.html
@@ -61,9 +61,9 @@
         </li>
 
         <li class="nav-item">
-            <a class="nav-link" href="pilots.html">
+            <a class="nav-link" href="drivers.html">
                 <i class="fas fa-fw fa-user-astronaut"></i>
-                <span>Pilots</span></a>
+                <span>Drivers</span></a>
         </li>
 
         <li class="nav-item">