|
|
<!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">×</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>
|