the_mechanic/app/Views/make_list.php

415 lines
20 KiB
PHP
Executable File

<?php include('layout/header.php'); ?>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="page-title-box page-title-box-alt">
<h4 class="page-title">Make List</h4>
<div class="page-title-right">
<ol class="breadcrumb m-0">
<li class="">
<a href="#" data-toggle="modal" data-target="#bike_make_login-modal" class="btn btn-primary waves-effect" onclick="clearDetials(this)">
Add Make
</a>
</li>
</ol>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-body">
<table id="datatable-make" class="table table-striped dt-responsive nowrap w-100" style="width:100% !important;text-align: center;width: 100%;">
<thead>
<tr>
<th>Bike Make</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php foreach ($make as $index => $item): ?>
<tr class="make_tr_<?php echo $index+1; ?>">
<td class="make"><?php echo $item['make']; ?></td>
<td>
<?php if($item['isactive'] == 1): ?>
<span style="color:green">Active</span>
<?php else: ?>
<span style="color:red">Inactive</span>
<?php endif; ?>
</td>
<td>
<div class="btn-group dropdown">
<a href="javascript: void(0);" class="dropdown-toggle arrow-none btn btn-light btn-sm" data-toggle="dropdown" aria-expanded="false"><i class="mdi mdi-dots-horizontal"></i></a>
<div class="dropdown-menu dropdown-menu-right">
<a data-toggle="modal" data-target="#bike_make_login-modal" data-value="<?php echo $item['make_id']; ?>" class="dropdown-item edit-button" onclick="editMake(this), datatableMake('make_tr_<?php echo $index+1; ?>')"><i class="ri-pencil-line mr-2 text-muted font-18 vertical-middle"></i>Edit</a>
<a href="#" data-toggle="modal" data-target="#bike_model_login-modal" class="dropdown-item add-button" title="Add" data-id="<?php echo $item['make_id']; ?>" data-value="<?php echo $item['make']; ?>" onclick="setMakeName(this), dataTableMake('make_tr_<?php echo $index+1; ?>')">
<i class="ri-add-line mr-2 text-muted font-18 vertical-middle" ></i>Add Model
</a>
<a href="<?= "bike_model_index/" . $item['make_id']; ?>" class="dropdown-item view-list-button" title="Model List" onclick="datatableMake('make_tr_<?php echo $index+1; ?>')">
<i class="ri-list-check-2 mr-2 text-muted font-18 vertical-middle"></i>Model List
</a>
<?php if($item['isactive'] == 1): ?>
<a class="dropdown-item" data-id="<?php echo $item['make_id']; ?>" data-isactive="<?php echo $item['isactive']; ?>" title="Deactivate" onclick="statusChange(this), datatableMake('make_tr_<?php echo $index+1; ?>')" ><i class="fa fa-bicycle " style="font-size:20px"></i><i class="fa fa-times" style="font-size: x-small;" style="font-size:20px"></i>Deactivate</a>
<?php else: ?>
<a class="dropdown-item" data-id="<?php echo $item['make_id']; ?>" data-isactive="<?php echo $item['isactive']; ?>" title="Activate" onclick="statusChange(this), datatableMake('make_tr_<?php echo $index+1; ?>')" ><i class="fa fa-bicycle" style="font-size:20px"></i>Activate</a>
<?php endif; ?>
</div>
</div>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Start Bike Make Create Pop-UP -->
<div id="bike_make_login-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="text-center mt-2 mb-4">
<h4 id="form_add_edit">Add Bike Make</h4>
</div>
<!-- <form id="model_form_data" class="px-3"> -->
<div class="form-group">
<label for="makename">Make Name </label>
<input type="text" id="edit_make_id" hidden>
<input class="form-control" type="text" id="bike_make_name" required="" placeholder="Make Name....">
</div>
<div class="form-group text-center">
<button class="btn btn-rounded btn-primary" type="submit" onclick="submitMake(this)">Submit</button>
</div>
<!-- </form> -->
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- End Bike Make Create Pop-UP -->
<!-- Start Bike Model Create Pop-UP -->
<div id="bike_model_login-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="text-center mt-2 mb-4">
<h4>Add Models</h4>
</div>
<!-- <form id="model_form_data" class="px-3"> -->
<div class="form-group">
<input class="form-control" type="text" id="make_id" required="" placeholder="Make Name...." style="display:none;">
<label for="makename">Make Name </label>
<input class="form-control" type="text" id="makename" required="" placeholder="Make Name...." disabled>
<div class="form-group">
<label for="cubiccapacity">Cubic capacity</label>
<select class="form-control" id="cubiccapacity" required data-toggle="select2">
<option value="0">Select Cubic capacity</option>
<?php foreach ($cubiccapacity as $item): ?>
<option value="<?= $item['id'] ?>"><?= $item['value'] ?></option>
<?php endforeach; ?>
</select>
</div>
<label for="modelname">Model Name </label>
<input class="form-control" type="text" id="modelname" required="" placeholder="Model Name....">
</div>
<div class="form-group text-center">
<button class="btn btn-rounded btn-primary" type="submit" onclick="submitModel(this)">Submit</button>
</div>
<!-- </form> -->
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- End Bike Model Create Pop-UP -->
<?php include('layout/footer.php'); ?>
<script>
function setMakeName(params) {
$('#make_id').val(params.getAttribute('data-id'));
$('#makename').val(params.getAttribute('data-value'));
}
function submitModel(params) {
// console.log( $('#modelname').val());
var formData = {
make_id: $('#make_id').val(),
modelname: $('#modelname').val(),
cubiccapacity: $('#cubiccapacity').val()
};
var model_id =0;
$(params).attr('disabled','true').text('Processing...');
$.ajax({
type: 'POST',
url: 'create_model/'+model_id,
data: formData,
dataType: 'json',
success: function(response) {
console.log(response);
if (response.code === 404) {
toastr.warning(response.data, 'Warning');
$(params).attr('disabled', false).text('Submit');
return;
}
if (response.code === 200) {
if (response.status == "failed") {
toastr.warning(response.data, 'Warning');
}else{
$('#bike_model_login-modal').modal('hide');
$('#modelname').val('');
toastr.success(response.data, 'Success');
$(params).attr('disabled', false).text('Submit');
}
} else {
alert(response.data || "Unexpected error occurred!");
toastr.success(response.data, 'Warning');
$(params).attr('disabled', false).text('Submit');
}
},
error: function(xhr, status, error) {
// Handle error response here
console.error(xhr.responseText);
let errorMessage = "An error occurred while processing your request.";
if (xhr.responseJSON && xhr.responseJSON.data) {
errorMessage = xhr.responseJSON.data;
}
toastr.success(errorMessage, 'Warning');
$(params).attr('disabled', false).text('Submit');
}
});
}
function submitMake(params) {
// Get the value of the Make Name input field
var makeName = $('#bike_make_name').val().trim();
// Check if Make Name is empty
if (makeName === '') {
// Display error message
toastr.error('Please enter a Make Name.', 'Error');
return; // Stop further execution of the function
}
var formData = {
makename: $('#bike_make_name').val()
};
var edit_make_id = $('#edit_make_id').val();
if (!edit_make_id) {
edit_make_id =0;
}
$(params).attr('disabled','true').text('Processing...');
$.ajax({
type: 'POST',
url: 'create_make/'+edit_make_id,
data: formData,
dataType: 'json',
success: function(response) {
if (response.code === 404) {
toastr.warning(response.data, 'Warning');
$(params).attr('disabled', false).text('Submit');
return;
}
if (response.code === 200) {
if (response.status == "failed") {
toastr.warning(response.data, 'Warning');
}else{
$('#bike_model_login-modal').modal('hide');
$('#modelname').val('');
toastr.success(response.data, 'Success');
window.location.reload();
}
} else {
alert(response.data || "Unexpected error occurred!");
toastr.success(response.data, 'Warning');
$(params).attr('disabled', false).text('Submit');
}
},
error: function(xhr, status, error) {
// Handle error response here
// console.error(xhr.responseText);
console.error(xhr.responseText);
let errorMessage = "An error occurred while processing your request.";
if (xhr.responseJSON && xhr.responseJSON.data) {
errorMessage = xhr.responseJSON.data;
}
toastr.success(errorMessage, 'Warning');
$(params).attr('disabled', false).text('Submit');
}
});
}
function editMake(params) {
$('#edit_make_id').val($(params).data('value'));
$('#form_add_edit').text('Edit Bike Make');
var full_div = $(params).closest('tr')[0];
$('#bike_make_name').val($(full_div).find('.make').text());
}
function clearDetials(params) {
$('#form_add_edit').text('Add Bike Make');
$('#bike_make_name').val('');
}
function statusChange(params) {
var status = params.getAttribute('data-isactive');
var make_id = params.getAttribute('data-id');
if(status == 1){
var isactive= 0;
}else{
var isactive= 1;
}
var formData = {
make_id: make_id,
isactive: isactive
};
$.ajax({
type: 'POST',
url: '<?php echo base_url()."status_make"?>',
data: formData,
dataType: 'json',
success: function(response) {
console.log(response);
if (response.status == "success") {
$('tbody').html('');
// Assuming `items` is an array containing your data
response.data.forEach(function(item) {
var row = '<tr>' +
'<td class="make">' + item.make + '</td>' +
'<td>';
if (item.isactive == 1) {
row += '<span style="color:green">Active</span>';
} else if (item.isactive == 0) {
row += '<span style="color:red">Inactive</span>';
}
row += '</td><td>' +
'<div class="btn-group dropdown">' +
'<a href="javascript:void(0);" class="dropdown-toggle arrow-none btn btn-light btn-sm" data-toggle="dropdown" aria-expanded="false"><i class="mdi mdi-dots-horizontal"></i></a>' +
'<div class="dropdown-menu dropdown-menu-right">' +
'<a data-toggle="modal" data-target="#bike_make_login-modal" data-value="' + item.make_id + '" class="dropdown-item edit-button" onclick="editMake(this)"><i class="ri-pencil-line mr-2 text-muted font-18 vertical-middle"></i>Edit</a>' +
'<a href="#" data-toggle="modal" data-target="#bike_model_login-modal" class="dropdown-item add-button" title="Add" data-id="' + item.make_id + '" data-value="' + item.make + '" onclick="setMakeName(this)"><i class="ri-add-line mr-2 text-muted font-18 vertical-middle"></i>Add Model</a>' +
'<a href="bike_model_index/' + item.make_id + '" class="dropdown-item view-list-button" title="Model List"><i class="ri-list-check-2 mr-2 text-muted font-18 vertical-middle"></i>Model List</a>';
if (item.isactive == 1) {
row += '<a class="dropdown-item" data-id="' + item.make_id + '" data-isactive="' + item.isactive + '" title="Deactivate" onclick="statusChange(this)"><i class="fa fa-bicycle" style="font-size:20px;"></i><i class="fa fa-times" style="font-size: x-small;"></i>Deactivate</a>';
} else if (item.isactive == 0) {
row += '<a class="dropdown-item" data-id="' + item.make_id + '" data-isactive="' + item.isactive + '" title="Activate" onclick="statusChange(this)"><i class="fa fa-bicycle" style="font-size:20px;"></i>Activate</a>';
}
row += '</div></div></td></tr>';
// Append the row to the tbody
$('tbody').append(row);
});
}
},
error: function(xhr, status, error) {
// Handle error response here
console.error(xhr.responseText);
}
});
}
</script>
<script>
var datatable_make ='';
$(document).ready(function() {
datatable_make = $('#datatable-make').DataTable({
"order": [[0, 'asc']], // Set initial sorting to descending on the first column
"dom": 'Bfrtip', // Show export buttons
"buttons": [{extend: 'pdfHtml5',title: 'Products', text: 'PDF',},
{extend: 'print',title: 'Products',text: 'Print',},
{extend: 'copy',text: 'Copy', titleAttr: 'Copy',},
{extend: 'csv',text: 'CSV', title: 'Products', }],
"language": {
"search": "Search: " // Customize search label
},
});
//Start DataTable Paging is session is set
var savedPage = sessionStorage.getItem('currentPage');
var hightlight_tr = sessionStorage.getItem('hightlight_tr');
// console.log(savedPage);
// console.log(hightlight_tr);
// Ensure savedPage is a number
savedPage = parseInt(savedPage);
// Check if savedPage is not null and adjust if necessary
if (savedPage !== null && !isNaN(savedPage)) {
// Check if the saved page number is within the bounds of the current DataTable
var totalPages = datatable_make.page.info().pages; // Total number of pages in the DataTable
if (savedPage >= totalPages) {
// adjust to the last page of the DataTable
savedPage = totalPages > 0 ? totalPages - 1 : 0;
}
// Move DataTable to the saved page and draw
datatable_make.page(savedPage).draw(false);
// Select the highlighted row
var $row = $('.' + hightlight_tr);
// Smoothly scroll to the row and center it in the viewport
$('html, body').animate({
scrollTop: $row.offset().top - ($(window).height() / 2) + ($row.height() / 2)
}, 500, function() {
// After focusing, change background color
$row.css('background', '#faf6ca');
// Remove background color after 4 seconds
setTimeout(function() {
$row.css('background', '');
}, 4000);
});
}
sessionStorage.removeItem('currentPage');
sessionStorage.removeItem('hightlight_tr');
//End DataTable Paging is session is set
})
function datatableMake(value) {
console.log(value);
var currentPage = datatable_make.page.info().page;
sessionStorage.setItem('currentPage', currentPage);
sessionStorage.setItem('hightlight_tr', value);
}
</script>