215 lines
8.6 KiB
PHP
Executable File
215 lines
8.6 KiB
PHP
Executable File
<style>
|
||
.table th,
|
||
.table td {
|
||
padding: 8px;
|
||
}
|
||
|
||
table.dataTable tbody td {
|
||
padding: 4px 4px !important;
|
||
}
|
||
|
||
table.dataTable thead th {
|
||
padding: 4px 4px !important;
|
||
}
|
||
|
||
.col-12{
|
||
|
||
max-width: 98% !important;
|
||
}
|
||
</style>
|
||
|
||
<div class="row" id="client_list">
|
||
<div class="col-12">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<div class="row" style="margin-bottom:1rem;">
|
||
<div class="col-6" style="align-self: center;">
|
||
<h4 style="position: relative;">Advertisement Images</h4>
|
||
</div>
|
||
<div class="col-6" style="text-align: right; position: relative;top: 5px;">
|
||
<a data-toggle="modal" data-target="#bike_make_login-modal" href="#" type="button" id="btnAdd" class="btn btn-primary waves-effect waves-light" data-toggle="" data-placement="top" title="Add" data-trigger="hover">ADD</a>
|
||
</div>
|
||
</div>
|
||
<table data-custom-table-css="table" class="table table-sm table-hover m-0 table-centered dt-responsive nowrap w-100" cellspacing="0"
|
||
id="tickets-table">
|
||
<thead class="bg-light">
|
||
<tr>
|
||
<th class="font-weight-medium">Advertisement Image Name</th>
|
||
<th class="font-weight-medium">Status</th>
|
||
<th class="font-weight-medium">Action</th>
|
||
</tr>
|
||
</thead>
|
||
|
||
<tbody>
|
||
<?php foreach($addImageList as $row){ ?>
|
||
<tr >
|
||
<td class="client_info" data-id="<?php echo $row['id']; ?>"><?php echo $row['name']; ?></td>
|
||
<td>
|
||
<?php echo $row['is_active']; ?>
|
||
</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 class="dropdown-item advertise_image_edit" href="#" data-toggle="modal" data-id="<?php echo $row['id']; ?>" data-target="#bike_make_login-modal"><i class="mdi mdi-pencil mr-2 text-muted font-18 vertical-middle"></i>Edit</a>
|
||
<a class="dropdown-item" data-id="<?= $row['id'];?>" onclick="removeClient(this)"><i class="mdi mdi-delete mr-2 text-muted font-18 vertical-middle"></i>Delete</a>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
|
||
</tr>
|
||
|
||
<?php } ?>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div><!-- end col -->
|
||
</div>
|
||
<!-- end row -->
|
||
|
||
|
||
<div id="append_client_info"></div>
|
||
|
||
<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="mt-2 mb-4">
|
||
<h4 id="advertise_add_edit">Add Advertise Image </h4>
|
||
</div>
|
||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||
<form id="model_form_data" class="px-4">
|
||
|
||
<input type="text" name="add_image_id" id="add_image_id" value="0" hidden>
|
||
|
||
<div class="row">
|
||
<div class="col-md-12">
|
||
<div class="form-group">
|
||
<label for="branchname">Upload Image</label>
|
||
<div class="input-icon">
|
||
<input type="file" class="form-control" name="advertise_image" id="advertise_image"
|
||
accept="image/*" onchange="PreviewImage();" required="">
|
||
<i class="mdi mdi-upload additional-icon"></i>
|
||
</div>
|
||
</div>
|
||
<div class="form-group col-md-6 float-left" style="position: relative;top: 0px;">
|
||
<img src=" " width="100" height="100" id="uploadPreview" class="avatar img-circle img-thumbnail" alt="avatar"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-group text-center">
|
||
<button class="btn btn-rounded btn-primary" type="submit" onclick="submitBranch(this)">Submit</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<script>
|
||
|
||
function submitBranch(params) {
|
||
|
||
// if ($('#add_image_id').val()) {
|
||
// var url = '<?= base_url("edit_advertise_image/"); ?>'+$('#add_image_id').val();
|
||
// }else{
|
||
var url = '<?= base_url("add_advertise_image"); ?>';
|
||
// }
|
||
|
||
var formData = new FormData($('#model_form_data')[0]);
|
||
|
||
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: url,
|
||
data: formData,
|
||
dataType: 'json',
|
||
processData: false,
|
||
contentType: false,
|
||
success: function(response) {
|
||
console.log(response);
|
||
$('#bike_model_login-modal').modal('hide');
|
||
$('#bike_make_name').val('');
|
||
|
||
window.location.reload();
|
||
},
|
||
error: function(xhr, status, error) {
|
||
// Handle error response here
|
||
console.error(xhr.responseText);
|
||
}
|
||
});
|
||
}
|
||
|
||
|
||
|
||
function PreviewImage() {
|
||
console.log('function called');
|
||
var fileInput = document.getElementById("advertise_image");
|
||
var file = fileInput.files[0];
|
||
|
||
if (file) {
|
||
var allowedExtensions = ["jpg", "jpeg", "png"];
|
||
var fileExtension = file.name.split('.').pop().toLowerCase();
|
||
|
||
if (!allowedExtensions.includes(fileExtension) || file.size > 200 * 1024) {
|
||
toastr.warning('Maximum file size allowed is 200KB.', 'File size exceeds limit.');
|
||
fileInput.value = ""; // Clear the file input
|
||
document.getElementById("uploadPreview").src = "<?= base_url()."public/assets/images/avatar_2x.png" ?>"; // Remove the preview image
|
||
return;
|
||
}
|
||
|
||
var reader = new FileReader();
|
||
reader.readAsDataURL(file);
|
||
|
||
reader.onload = function (event) {
|
||
var img = new Image();
|
||
img.src = event.target.result;
|
||
|
||
img.onload = function () {
|
||
if (img.width !== 1640 || img.height !== 664) {
|
||
toastr.warning('Image dimensions must be 1640x664 pixels.', 'Invalid image dimensions.');
|
||
fileInput.value = ""; // Clear the file input
|
||
document.getElementById("uploadPreview").src = "<?= base_url()."public/assets/images/avatar_2x.png" ?>"; // Remove the preview image
|
||
} else {
|
||
document.getElementById("uploadPreview").src = img.src;
|
||
}
|
||
};
|
||
};
|
||
}
|
||
}
|
||
|
||
|
||
$('#btnAdd').click(function () {
|
||
$('#add_image_id').val(0);
|
||
$('#advertise_add_edit').html('Add Advertise Image');
|
||
$('#uploadPreview').attr('src', '<?= base_url()."public/assets/images/avatar_2x.png" ?>');
|
||
|
||
})
|
||
|
||
$('.advertise_image_edit').click(function (params) {
|
||
// console.log($(this).data('id'));
|
||
$('#add_image_id').val($(this).data('id'));
|
||
var url = '<?= base_url("getAdvertiseImage/"); ?>'+$(this).data('id') ;
|
||
$.ajax({
|
||
type: 'GET',
|
||
url: url,
|
||
success: function (response) {
|
||
console.log(response);
|
||
$('#advertise_add_edit').html('Edit Advertise Image');
|
||
$('#uploadPreview').attr('src', '<?= base_url() . "public/uploads/advertiseImage/"?>' + response)
|
||
.on('error', function() {
|
||
$(this).attr('src', '<?= base_url()."public/assets/images/avatar_2x.png" ?>');
|
||
});
|
||
|
||
|
||
},
|
||
error: function (xhr, status, error) {
|
||
console.error(xhr.responseText);
|
||
}
|
||
|
||
})
|
||
})
|
||
|
||
</script>
|