Your IP : 216.73.216.86
home/emeraadmin/public_html/pages/taskprovider/addtasks.php 0000644 00000033325 15167742273 0020247 0 ustar 00 <?php include('head.php'); ?>
<?php
require_once '../../Service/ServiceService.php';
// Create ServiceService instance
$serviceService = new ServiceService();
$services = $serviceService->getAllServicesForDropdown();
?>
<div class="main-content">
<div class="container-fluid">
<div class="page-header">
<div class="row align-items-end">
<div class="col-lg-8">
<div class="page-header-title">
<i class="ik ik-edit bg-blue"></i>
<div class="d-inline">
<h5>Add Tasks</h5>
<span>Add tasks to the schedule</span>
</div>
</div>
</div>
<div class="col-lg-4"></div>
</div>
</div>
<div class="card">
<div class="card-header">
<div class="card-header-left">
<h3>Add Tasks</h3>
</div>
<div class="card-header-right">
</div>
</div>
<div class="card-body">
<p>Click the add button to repeat the form</p>
<div class="form-group">
<label for="schedule-name" class="sr-only">Schedule Name</label>
<input type="text" class="form-control" id="schedule-name" placeholder="Schedule Name">
<input type="hidden" id="current-user" value="<?php echo $_SESSION['user_id']; ?>">
</div>
<form class="form-inline repeater">
<div data-repeater-list="group-a">
<div data-repeater-item="" class="d-flex mb-2">
<table class="left-column">
<tr>
<td>
<div class="form-group mb-2">
<label for="service-name" class="service-name-label">Service Name</label>
<select name="service-name" class="form-control select2 service-name-select">
</select>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-group mb-2">
<label for="frequency" class="frequency-label">Frequency</label>
<select class="form-control frequencySelect" name="frequency">
<option value="daily">Daily</option>
<option value="3x/week">3x/week</option>
</select>
</div>
</td>
</tr>
</table>
<div class="form-group mb-2 mr-sm-2 mb-sm-0">
<input type="text" class="form-control date-picker" placeholder="Select Date" hidden>
</div>
<div class="date-time-container mb-2 mr-sm-2 mb-sm-0 flex-grow-1">
<!-- Date and time fields will be appended here -->
</div>
<button data-repeater-delete type="button" class="btn btn-danger btn-icon ml-2">
<i class="ik ik-trash-2"></i>
</button>
</div>
</div>
<button data-repeater-create type="button" class="btn btn-success btn-icon ml-2 mb-2">
<i class="ik ik-plus"></i>
</button>
</form>
<button id="addTaskBtn" class="btn btn-primary">Add Tasks</button>
</div>
</div>
</div>
</div>
<style>
.card-body {
width: 100%;
}
.repeater {
}
.repeater > div {
background-color: #f9f9f9;
}
label {
font-weight: bold;
}
.form-control {
width: 100%;
}
</style>
<script>
$(document).ready(function () {
function initializeFlatpickr() {
$('.date-picker').each(function () {
flatpickr(this, {
dateFormat: "Y-m-d",
mode: "multiple",
inline: true,
onChange: function (selectedDates, dateStr, instance) {
const container = $(instance.element).closest('.d-flex').find('.date-time-container');
const existingDateTimePairs = [];
container.find('.form-group').each(function () {
const date = $(this).find('input[type="text"]').first().val();
const time = $(this).find('.time-picker').val();
existingDateTimePairs.push({date, time});
});
selectedDates.sort((a, b) => new Date(a) - new Date(b));
container.empty();
selectedDates.forEach((date) => {
const formattedDate = formatDate(date);
let timeValue = '';
existingDateTimePairs.forEach(pair => {
if (pair.date === formattedDate) {
timeValue = pair.time;
}
});
container.append(`
<div class="form-group mb-2 mr-sm-2 mb-sm-0">
<input type="text" class="form-control" value="${formattedDate}" readonly>
<input type="text" class="form-control time-picker" placeholder="Start Time" value="${timeValue}">
</div>
`);
});
initializeTimePicker(container);
}
});
});
}
function initializeTimePicker(container) {
container.find('.time-picker').each(function () {
flatpickr(this, {
enableTime: true,
noCalendar: true,
dateFormat: "H:i",
});
});
}
function formatDate(date) {
const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, '0');
const day = date.getDate().toString().padStart(2, '0');
return `${year}-${month}-${day}`;
}
$('.repeater').repeater({
show: function () {
$(this).slideDown();
initializeFlatpickr();
populateServiceNames($(this).find('.service-name-select'));
initializeSelect2($(this).find('.service-name-select')); // Initialize Select2 for new element
},
hide: function (deleteElement) {
const container = $(deleteElement).closest('.d-flex').find('.date-time-container');
container.find('.form-group').remove();
$(deleteElement).remove();
},
ready: function (setIndexes) {
initializeFlatpickr();
populateServiceNames($('.service-name-select'));
initializeSelect2($('.service-name-select')); // Initialize Select2 for existing elements
}
});
initializeFlatpickr();
function populateServiceNames(selectElement) {
var services = <?php echo json_encode($services); ?>;
services.forEach(service => {
var option = document.createElement("option");
option.value = service.id;
option.textContent = service.name;
selectElement.append(option);
});
}
function initializeSelect2(selectElement) {
selectElement.select2({
placeholder: 'Select a service',
allowClear: true
});
}
$('#addTaskBtn').click(function (event) {
event.preventDefault();
var scheduleName = $('#schedule-name').val().trim();
var currentUserId = $('#current-user').val().trim();
var tasks = [];
$('div[data-repeater-item]').each(function () {
var dates = [];
var service = $(this).find('.service-name-select').val().trim();
var frequency = $(this).find('.frequencySelect').val().trim();
$(this).find('.date-time-container .form-group').each(function () {
var date = $(this).find('input[type="text"]').first().val().trim();
//if a daily task send time otherwise time is empty
var time = frequency === 'daily' ? $(this).find('.time-picker').val().trim() : '';
dates.push({date: date, time: time});
});
tasks.push({
service: service,
frequency: frequency,
dates: dates
});
});
var postData = {
scheduleName: scheduleName,
currentUserId: currentUserId,
tasks: tasks
};
if (scheduleName === '') {
Swal.fire({
title: 'Error',
text: 'Please enter a schedule name',
icon: 'error',
confirmButtonText: 'Close'
});
return;
}
if (tasks.length === 0) {
Swal.fire({
title: 'Error',
text: 'Please add at least one task',
icon: 'error',
confirmButtonText: 'Close'
});
return;
}
if (tasks.some(task => task.dates.length === 0)) {
Swal.fire({
title: 'Error',
text: 'Please select at least one date and time for each task',
icon: 'error',
confirmButtonText: 'Close'
});
return;
}
Swal.fire({
title: 'Form Data',
text: 'Are you sure you want to submit the form data?',
confirmButtonText: 'Confirm',
cancelButtonText: 'Cancel',
showCancelButton: true,
showLoaderOnConfirm: true,
preConfirm: () => {
return new Promise(function (resolve, reject) {
$.ajax({
type: 'POST',
url: 'add_tasks.php',
data: JSON.stringify(postData),
contentType: 'application/json',
success: function (response) {
resolve(response);
},
error: function (xhr, status, error) {
reject(error);
}
});
});
},
allowOutsideClick: () => !Swal.isLoading()
}).then((result) => {
if (result.isConfirmed) {
var response = JSON.parse(result.value);
if (response.success) {
Swal.fire({
title: 'Success',
text: response.message,
icon: 'success',
confirmButtonText: 'Close'
}).then(() => {
window.location.href = 'viewscheduletasks.php?id=' + btoa(response.schedule_id);
});
} else {
Swal.fire({
title: 'Error',
text: response.message,
icon: 'error',
confirmButtonText: 'Close'
});
}
} else if (result.dismiss === Swal.DismissReason.cancel) {
Swal.fire({
title: 'Cancelled',
text: 'You cancelled the operation',
icon: 'info',
confirmButtonText: 'Close'
});
}
}).catch((error) => {
console.error('Error:', error);
Swal.fire({
title: 'Error',
text: 'An error occurred while processing your request. Please try again later.',
icon: 'error',
confirmButtonText: 'Close'
});
});
});
// Initialize service names in the first select and apply Select2
initializeSelect2($('.service-name-select').first());
});
</script>
<?php include('footer.php'); ?>