Fix CRUD on drivers
This commit is contained in:
parent
ee2bd88f93
commit
97e322b0e9
@ -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">×</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>
|
||||
22
index.html
22
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>
|
||||
|
||||
241
js/timelaps.js
241
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> <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");
|
||||
@ -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 + " \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> <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");
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user