This portal only for GCC Officers. Based on there roles and Group ID they can view there module`s Like PGR, QR Public Asset Feedback, Makkalai Thedi Mayor,etc...
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

705 lines
31 KiB

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragments/modules/base/head :: head}"></head>
<style>
.required{
color: red;
}
/* Mobile screens - targeting devices with a max width of 767px */
@media (max-width: 767px)
{
#campaignrequestform label{
margin-top: 10px;
}
}
</style>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="wrapper">
<!-- header top menu Start -->
<header th:replace="~{fragments/modules/base/header :: header}"></header>
<!-- header top menu end -->
<div class="page-wrap">
<!--=============== Left Menu side Start ================-->
<div th:replace="~{fragments/modules/base/menu :: menu}"></div>
<!--=============== Left side End ================-->
<div class="main-content">
<div class="container-fluid">
<div class="page-header mb-2">
<div class="row align-items-end">
<div class="col-lg-8">
<div class="page-header-title">
<i class="far fa-calendar-plus bg-blue"></i>
<div class="d-inline">
<h5>Create Campaign</h5>
<span>1913 Campaign creation</span>
</div>
</div>
</div>
<div class="col-lg-4">
<nav class="breadcrumb-container" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index"><i
class="ik ik-home"></i></a></li>
<li class="breadcrumb-item" aria-current="page">1913 Campaign</li>
<li class="breadcrumb-item active" aria-current="page">Create Campaign</li>
</ol>
</nav>
</div>
</div>
</div>
<h4 class="h4 text-right text-mute" style="font-size: 12px;">
Auot refresh in <font id="refresh-countdown">00</font> seconds
</h4>
<div class="row">
<div class="col-md-12">
<div class="card" style="margin-top: 0px;">
<div class="card-header justify-content-between align-items-center">
<h3><b>Campaign Request Form</b></h3>
<button type="button" class="btn btn-warning btn-sm" id="downloadExcel"><i class="ik ik-download f-16 mr-2"></i>Template Download</button>
</div>
<div class="card-body">
<form id="campaignrequestform">
<div class="form-group">
<div class="row">
<div class="col-sm-12 col-md-6">
<label for="name">Name<span class="required">*</span></label>
<input type="text" class="form-control" id="name" placeholder="Enter Name">
</div>
<div class="col-sm-12 col-md-6">
<label for="category">Category<span class="required">*</span></label>
<select class="form-control" id="category">
<option selected value="0">Select category</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label><b><u>Event Date:</u></b></label>
<div class="row">
<div class="col-sm-12 col-md-6">
<label for="eventstartdate">From Date<span class="required">*</span></label>
<input type="date" class="form-control" id="eventstartdate">
</div>
<div class="col-sm-12 col-md-6">
<label for="eventenddate">To Date<span class="required">*</span></label>
<input type="date" class="form-control" id="eventenddate">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12 col-md-6">
<label for="no_of_agent">No of Agents to be Assigned<span class="required">*</span></label>
<input type="number" class="form-control" id="no_of_agent">
</div>
<div class="col-sm-12 col-md-6">
<label for="no_of_calls">No of Calls to be Assigned (per Person)<span class="required">*</span></label>
<input type="number" class="form-control" id="no_of_calls">
</div>
</div>
</div>
<div class="form-group">
<label for="description">Description<span class="required">*</span></label>
<textarea class="form-control" id="description" rows="2"></textarea>
</div>
<div class="form-group">
<label for="upload">Upload Excelsheet:<span class="required">*</span></label>
<input type="file" class="form-control" id="fileInput">
<small id="fileError" class="text-danger" style="display:none;">Only Excel files (.xlsx, .xls) are allowed.</small>
</div>
<div class="form-group text-center">
<button type="submit" class="btn btn-primary " id="requestsubmit">Submit</button>
<button type="reset" class="btn btn-secondary ml-2" onclick="resetForm()">Reset</button>
</div>
</form>
</div>
</div>
</div>
<div class="col-md-12">
<div class="card">
<div class="card-block">
<div class="page-header-title" >
<h5 style="margin: 0;font-weight: bold;">Campaign Details</h5><hr>
</div>
<div>
<table id="CampaignDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid">
<thead class="thead-dark">
<tr role="row">
<th class="text-center">S.No</th>
<th class="text-center">Name</th>
<th class="text-center">Event Date</th>
<th class="text-center">Description</th>
<th class="text-center">Agents Assigned</th>
<th class="text-center">Calls per Person</th>
<th class="text-center">Total Calls</th>
<th class="text-center no-sort" width="%2">Action</th>
</tr>
</thead>
<tbody>
<tr th:each="campaign, i: ${campaigns}">
<td th:text="${i.count}">0</td>
<td th:text="${campaign.campaign_name}"></td>
<td th:text="${campaign.event_dates}"></td>
<td th:text="${campaign.description}"></td>
<td th:text="${campaign.no_of_agents}" class="text-center"></td>
<td th:text="${campaign.calls_per_agent}" class="text-center"></td>
<td th:text="${campaign.total_calls}" class="text-center"></td>
<td class="text-center">
<a href="#" th:onclick="return callEdit([[${campaign.campaign_id}]])" data-animation="true" data-toggle="tooltip" data-placement="top" title="Edit" data-original-title="Edit">
<i class="ik ik-edit f-16 mr-15 text-green"></i>
</a>
</td>
</tr>
</tbody>
<tfoot class="thead-dark">
<tr>
<th class="text-center">S.No</th>
<th class="text-center">Name</th>
<th class="text-center">Event Date</th>
<th class="text-center">Description</th>
<th class="text-center">Agents Assigned</th>
<th class="text-center">Calls per Person</th>
<th class="text-center">Total Calls</th>
<th class="text-center no-sort" width="%2">Action</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
</div>
</div>
<!-- The Modal -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="editModalLabel">Edit Campaign</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<!-- Your form or content for editing can go here -->
<form id="editForm" onsubmit="submitForm(event)" >
<input type="hidden" name="campaign_id" id="campaign_id" />
<div class="form-group">
<label for="campaign_name">Name<span class="required">*</span></label>
<input type="text" class="form-control" id="campaign_name" placeholder="Enter Name" readonly="readonly">
</div>
<div class="form-group">
<label><b><u>Event Date:</u></b></label>
<div class="row">
<div class="col">
<label for="start_date">From Date<span class="required">*</span></label>
<input type="date" class="form-control" id="start_date" onchange="setEndDateMin()" readonly="readonly" >
</div>
<div class="col">
<label for="end_date">To Date<span class="required">*</span></label>
<input type="date" class="form-control" id="end_date" required>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col">
<label for="no_of_agents">No of Agents to be Assigned<span class="required">*</span></label>
<input type="number" class="form-control" id="no_of_agents" required>
</div>
<div class="col">
<label for="calls_per_agent">No of Calls to be Assigned (per Person)<span class="required">*</span></label>
<input type="number" class="form-control" id="calls_per_agent" required>
</div>
</div>
</div>
<div class="form-group">
<label for="description_modal">Description<span class="required">*</span></label>
<textarea class="form-control" id="description_modal" rows="2" readonly="readonly"></textarea>
</div>
<div class="form-group text-center">
<button type="submit" class="btn btn-primary" id="editsubmit">Save changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
<script th:replace="~{fragments/modules/base/script :: script}"></script>
<script src="node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var table = $('#CampaignDatatable').DataTable({
dom: 'Bftip',
columnDefs: [
{ targets: 'no-sort', orderable: false }
],
lengthMenu: [
[50, 100, 200, 500, -1],
['50 rows', '100 rows', '200 rows', 'Show all']
],
scrollY: '50vh',
fixedColumns: {
left: 1,
right: 1
},
buttons: [
{
extend: 'pageLength',
className: 'btn btn-warning'
},
{
title: 'Data export',
extend: 'copyHtml5',
text: 'Copy',
className: 'btn btn-secondary',
id: 'copyBtn'
},
{
extend: 'excelHtml5',
text: 'Excel',
className: 'btn btn-secondary',
id: 'excelBtn'
},
{
extend: 'csvHtml5',
text: 'CSV',
className: 'btn btn-secondary',
id: 'csvBtn'
},
{
extend: 'pdfHtml5',
text: 'PDF',
className: 'btn btn-secondary',
id: 'pdfBtn'
}
],
fixedHeader: true,
autoWidth: true,
responsive: true,
searching: false,
select: false,
processing: false
});
});
document.addEventListener('DOMContentLoaded', function() {
const fromDate = document.getElementById('eventstartdate');
const toDate = document.getElementById('eventenddate');
// Initially disable the "To Date" field
toDate.disabled = true;
fromDate.addEventListener('change', function() {
if (fromDate.value) {
// Enable the "To Date" field when "From Date" is selected
toDate.disabled = false;
// Get the selected "From Date"
const selectedFromDate = new Date(fromDate.value);
// Set the "To Date" minimum to the same day as the "From Date"
const sameDayString = selectedFromDate.toISOString().split('T')[0];
toDate.setAttribute('min', sameDayString);
// Set the "To Date" value to the next day by default
toDate.value = sameDayString;
} else {
// Disable the "To Date" field if "From Date" is cleared
toDate.disabled = true;
toDate.value = ''; // Clear the "To Date" input
}
});
});
function resetForm() {
document.getElementById('campaignrequestform').reset(); // Built-in reset functionality
}
function setEndDateMin() {
var fromDate = document.getElementById('start_date').value;
document.getElementById('end_date').min = fromDate;
}
// excel format to download
document.getElementById('downloadExcel').addEventListener('click', function() {
// Create a new workbook
var wb = XLSX.utils.book_new();
// Define the data for the worksheet
var ws_data = [
// Headers
["ID","NAME","ADDRESS","BALANCE AMOUNT","MOBILE NUMBER","TINY_URL"],
// Add more data rows here as needed
];
// Create the worksheet from the data
var ws = XLSX.utils.aoa_to_sheet(ws_data);
// Optional: Set column widths for better readability
ws['!cols'] = [
{ wch: 10 }, // ID
{ wch: 10 }, // NAME
{ wch: 20 }, // ADDRESS
{ wch: 15 }, // MOBILE NUMBER
{ wch: 20 }, // BALANCE AMOUNT
{ wch: 25 }, // TINY URL
];
// Append the worksheet to the workbook
XLSX.utils.book_append_sheet(wb, ws, 'Property Tax');
// Export the workbook to an Excel file
XLSX.writeFile(wb, 'PropertyTaxTemp.xlsx');
});
$(document).ready(function() {
$('#requestsubmit').on('click', function(event) {
event.preventDefault(); // Prevent form from submitting the traditional way
$('#requestsubmit').attr('disabled', true).text('Submitting...');
// Get form values
var name = $('#name').val();
var category = $('#category').val();
var eventStartDate = $('#eventstartdate').val();
var eventEndDate = $('#eventenddate').val();
var noOfAgent = $('#no_of_agent').val();
var noOfCalls = $('#no_of_calls').val();
var description = $('#description').val();
var fileInput = $('#fileInput')[0].files[0]; // Get the file from the input
// Check for empty values and trigger Swal error
if (!name || !category || !eventStartDate || !eventEndDate || !noOfAgent || !noOfCalls || !description || !fileInput) {
Swal.fire({
icon: 'info',
title: 'Info',
text: 'Please fill in all fields and upload a file before submitting.',
});
$('#requestsubmit').attr('disabled', false).text('Submit');
return; // Stop form submission if any field is empty
}
// Create a FormData object to hold all form data, including the file
var formData = new FormData();
formData.append('name', name);
formData.append('category', category);
formData.append('eventstartdate', eventStartDate);
formData.append('eventenddate', eventEndDate);
formData.append('no_of_agent', noOfAgent);
formData.append('no_of_calls', noOfCalls);
formData.append('description', description);
formData.append('file', fileInput); // Append the file to formData
// Make an AJAX request to submit the form data
$.ajax({
url: '/gcc/api/campaign/save', // API endpoint to save form data
type: 'POST',
data: formData,
processData: false, // Don't process the data (needed for FormData)
contentType: false, // Don't set content type (needed for FormData)
success: function(response) {
if (response.status === 'success') {
Swal.fire({
icon: 'success',
title: 'Success',
text: response.message
}).then((result) => {
$('#requestsubmit').attr('disabled', false).text('Submit');
// Reload the page after the SweetAlert is closed
if (result.isConfirmed) {
// Optional: Reset the form
$('#campaignrequestform')[0].reset();
// Send the categoryId to another AJAX call
let categoryId = parseInt(response.category_id, 10); // Extract the category_id from the response
// Make the second AJAX call with the categoryId
$.ajax({
url: `/gcc/api/campaign/getlastCampaignid`, // Replace with your actual endpoint
type: 'GET', // Or POST depending on your use case
success: function(response) {
console.log("Second AJAX call successful. Data: ", response);
// Handle the success of the second AJAX call here
$('#requestsubmit').attr('disabled', false).text('Submit');
let campaignId = response[0].campaign_id;
console.log('categoryId:', categoryId, 'campaignId:', campaignId); // Log values before AJAX call
// Make the third AJAX call with both categoryId and campaignId
$.ajax({
url: '/gcc/api/agents/excel?categoryId='+categoryId+'&campaignId='+campaignId,
type: 'GET',// Or POST depending on your use case
success: function(response) {
//alert("third_ajax");
console.log("Third AJAX call successful. Data: ", response);
$('#requestsubmit').attr('disabled', false).text('Submit');
// Handle the success of the third AJAX call here
},
error: function(xhr, status, error) {
console.error('Error in third AJAX call:', error);
$('#requestsubmit').attr('disabled', false).text('Submit');
}
});
},
error: function(xhr, status, error) {
console.error('Error in second AJAX call:', error);
$('#requestsubmit').attr('disabled', false).text('Submit');
}
});
// Reload the page after SweetAlert is closed
location.reload();
}
});
$('#requestsubmit').attr('disabled', false).text('Submit');
// Optionally reset the form
$('#campaignrequestform')[0].reset();
} else {
Swal.fire({
icon: 'error',
title: 'Error',
text: 'Something went wrong. Please try again.'
});
$('#requestsubmit').attr('disabled', false).text('Submit');
}
},
error: function(xhr, status, error) {
Swal.fire({
icon: 'error',
title: 'Error',
text: 'An error occurred: ' + error
});
$('#requestsubmit').attr('disabled', false).text('Submit');
}
});
//upload file data
});
});
//Update request form details
$(document).ready(function () {
// Function to open the edit modal and populate data
window.callEdit = function (campaignId) {
fetchCampaignDetails(campaignId);
return false; // Prevent default anchor click behavior
};
function fetchCampaignDetails(campaignId) {
$.ajax({
url: `/gcc/api/campaign/getCampaignDetailsbyId?campaign_id=${campaignId}`,
type: 'GET',
success: function (response) {
console.log(response);
if (response) {
// Populate modal fields with data
$('#campaign_id').val(response.campaign_id);
$('#campaign_name').val(response.campaign_name); // Assuming the key in the response is 'campaign_name'
$('#start_date').val(response.start_date);
$('#end_date').val(response.end_date);
$('#no_of_agents').val(response.no_of_agents);
$('#calls_per_agent').val(response.calls_per_agent);
$('#description_modal').val(response.description);
setEndDateMin();
// Open the modal
$('#editModal').modal('show');
} else {
alert('Campaign details not found.');
}
},
error: function (xhr, status, error) {
console.error('Error fetching campaign details:', error);
alert('An error occurred while fetching campaign details.');
}
});
}
window.submitForm = function (event) {
event.preventDefault(); // Prevent the default form submission
var campaignId = $('#campaign_id').val();
var campaignName = $('#campaign_name').val();
var startDate = $('#start_date').val();
var endDate = $('#end_date').val();
var noOfAgents = $('#no_of_agents').val();
var callsPerAgent = $('#calls_per_agent').val();
var description = $('#description_modal').val();
$.ajax({
url: '/gcc/api/campaign/updateCampaign', // Endpoint without query parameters
type: 'POST',
data: {
campaign_id: campaignId,
campaign_name: campaignName,
start_date: startDate,
end_date: endDate,
no_of_agents: noOfAgents,
calls_per_agent: callsPerAgent,
description: description
}, // Send all data as JSON
success: function (response) {
console.log('Campaign ID:',campaign_id);
Swal.fire({
title: 'Success!',
text: response, // Show the success message from the API response
icon: 'success',
confirmButtonText: 'OK'
}).then((result) => {
if (result.isConfirmed) {
$('#editModal').modal('hide'); // Hide the modal
location.reload(); // Optionally reload the page to refresh the data
}
});
},
error: function (xhr, status, error) {
console.error('Error updating campaign details:', error);
Swal.fire({
title: 'Error!',
text: 'An error occurred while updating campaign details.',
icon: 'error',
confirmButtonText: 'OK'
});
}
});
}
});
//hari category populate api
// Fetch category dropdown from the server
$(document).ready(function() {
// Make an AJAX request to the API
$.ajax({
url: '/gcc/api/category/getcategory',
method: 'GET',
success: function(response) {
// Check if the response has data
if (response && response.length > 0) {
// Populate the select dropdown with options
var $categorySelect = $('#category');
$.each(response, function(index, category) {
$categorySelect.append(
$('<option>', {
value: category.category_id,
text: category.category_name
})
);
});
}
},
error: function(xhr, status, error) {
console.error('Error fetching categories:', error);
}
});
});
document.getElementById('fileInput').addEventListener('change', function (event) {
var fileInput = event.target;
var filePath = fileInput.value;
var allowedExtensions = /(\.xlsx|\.xls)$/i;
if (!allowedExtensions.exec(filePath)) {
document.getElementById('fileError').style.display = 'block'; // Show error message
fileInput.value = ''; // Clear the input
} else {
document.getElementById('fileError').style.display = 'none'; // Hide error message
}
});
</script>
</body>
</html>