nhance-enrollment/app/Views/add_image_list.php

210 lines
8.2 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 Image List</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 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="text-center mt-2 mb-4">
<h4 id="advertise_add_edit">Add Advertise Image </h4>
</div>
<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-8">
<div class="form-group">
<label for="branchname">Image</label>
<input class="form-control" name="advertise_image" id="advertise_image" type="file" accept="image/*" onchange="PreviewImage();" required="">
</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>