Files
php_assessment_1/projectListing.php
emmymayo 77037e7e84 init
2025-02-04 23:06:08 +01:00

354 lines
14 KiB
PHP

<style>
.dark-header thead th {
background-color: #343a40;
/* Dark gray background */
color: white;
/* White text color */
}
</style>
<div class="container">
<h2 class="text-left">Availability Checker &nbsp; <a class="btn btn-primary" href="/<?php echo $_SESSION['role'] ?>/project/add">Add</a></h2>
<!-- <div id="loading" style="display:none;">
<div class=" spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div> -->
<!-- Table Responsive Wrapper -->
<div class="table-responsive">
<form id="multiselect-form" action="/<?php echo $_SESSION['role'] ?>/project/list/multiselect" method="POST">
<button type="submit" id="edit-selected" style="display: none;" name="edit" class="btn btn-primary">Edit Selected</button> <!-- Button for edit action -->
<button type="submit" id="delete-selected" style="display: none;" name="delete" class="btn btn-danger">Delete Selected</button> <!-- Button for delete action -->
<table class="table table-hover dark-header">
<thead>
<tr>
<th></th>
<th>ID</th>
<th>Project Name</th>
<!-- <th>Slot</th> -->
<th>Days</th>
<th>Score Threshold</th>
<th>Actual Score</th>
<th>Alert Check</th>
<th>Webhook</th>
<th></th>
</tr>
</thead>
<tbody>
<?php foreach ($data['data'] as $key => $value) {
$role = $_SESSION['role'] ;
echo ' <tr>';
echo '<td><input type="checkbox" name="selected[]" value="' . $value->id . '"></td>'; // Checkbox for multiselect
echo ' <td>' . $value->id . ' <br/><a class=" text-info" href="/' . $role . '/project/edit/' . $value->id . '">edit</a> <a class="text-danger" href="/'. $role .'/project/delete/' . $value->id . '">delete</a></td>';
// echo ' <td>' . $value->id . ' <br/><a class="text-danger" href="/project/delete/' . $value->id . '">delete</a></td>';
echo ' <td>' . $value->project_name . ' </td>';
// echo ' <td>' . $value->slot . ' </td>';
echo ' <td>' . $value->days . ' </td>';
echo ' <td>' . $value->score_threshold . ' </td>';
echo ' <td>' . $value->actual_score . ' </td>';
echo ' <td><div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" value="' . $value->alert . '" data-id="' . $value->id . '" onclick="alert_toggle(this)" class="toggle-option" autocomplete="off" ' . ($value->alert == "On" ? 'checked' : '') . ' > ' . $value->alert . '
</label>
</div></td>';
echo ' <td>' . $value->webhook . ' </td>';
echo ' <td><a style="cursor: pointer;" class="btn-link link-underline text-underline" target="__blank" data-id="' . $value->id . '" onclick="checkCal(this)">Check</a>
<a style="cursor: pointer;" class="btn-link link-underline text-underline" target="__blank" data-id="' . $value->id . '" onclick="dupl(this)">Duplicate</a>
<a style="cursor: pointer;" class="btn-link link-underline text-underline" target="__blank" data-id="' . $value->id . '" onclick="authorize(this)">Authorize</a>
</td>';
echo '</tr>';
}
?>
</tbody>
</table>
</form>
</div>
<div class="modal fade" id="calModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div id="makingWishLoading" style="display:none;">
<div class=" spinner-border text-light" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="modal-header text-center">
<h5 class="modal-title w-100" id="wishModalLable">Calendar</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" id="wishModalCloseBtn">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form id="calForm">
<div class="form-group">
<label for="wish-title">Calendar ID</label>
<input type="text" class="form-control" id="calendar_id" placeholder="" style="border: 1px solid #ced4da;" required>
</div>
<div class="modal-footer">
<button id="submit_cal" class="btn btn-primary btn-block" target="__blank" onclick="duplicate(this)">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
<?php
// Retrieve parameters
$total = $data['total'];
$currentPage = $data['page'];
$perPage = 10;
// Calculate the number of pages
$totalPages = ceil($total / $perPage);
// Define a range of pages to show at any given time
$range = 2; // This can be adjusted as needed
$startPage = ($currentPage - $range) > 0 ? ($currentPage - $range) : 1;
$endPage = ($currentPage + $range) < $totalPages ? ($currentPage + $range) : $totalPages;
?>
<!-- Pagination -->
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="ml-2">
<a href="?page=1" aria-label="Previous">
<span aria-hidden="true">&laquo;&laquo;</span>
</a>
</li>
<li class="ml-2">
<a href="?page=<?= ($currentPage - 1) > 0 ? $currentPage - 1 : 1 ?>" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
</a>
</li>
<?php
for ($i = $startPage; $i <= $endPage; $i++) {
echo '<li class="ml-2' . ($currentPage == $i ? ' active' : '') . '"><a href="?page=' . $i . '">' . $i . '</a></li>';
}
?>
<li class="ml-2">
<a href="?page=<?= ($currentPage + 1) < $totalPages ? $currentPage + 1 : $totalPages ?>" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
<li class="ml-2">
<a href="?page=<?= $totalPages ?>" aria-label="Next">
<span aria-hidden="true">&raquo;&raquo;</span>
</a>
</li>
</ul>
</nav>
</div>
<script>
// Attach click event to the toggle buttons
function alert_toggle(element) {
// Get the selected value (Yes or No)
var projectId = $(element).attr("data-id");
var selectedValue = $(element).val();
console.log(projectId)
console.log(selectedValue)
if (selectedValue == "On") {
var values = "Off"
}
if (selectedValue == "Off") {
var values = "On"
}
// Make an AJAX request to update the database
$.ajax({
type: 'POST',
url: '/alert-toggle', // Replace with the actual path to your update script
data: {
projectId: projectId,
selectedValue: values
},
success: function(response) {
// Handle the response from the server (if needed)
console.log(response);
window.location.reload()
},
error: function(error) {
console.error('Error updating data:', error);
}
});
};
function dupl(element) {
var projectId = $(element).data("id");
$('#submit_cal').attr('data-id', projectId);
$("#calModal").modal("show");
}
function checkCal(element) {
event.preventDefault();
// var calendarId = $("#calendar_id").val();
// var projectId = $("#submit_cal").attr("data-id");
var projectId = $(element).data("id");
// console.log(calendarId)
console.log(projectId)
var spinner = document.createElement('span');
spinner.className = 'spinner-border spinner-border-sm';
element.appendChild(spinner);
// Disable the button
element.classList.add('disabled');
try {
$.ajax({
type: 'POST',
url: '/check-calendar',
data: {
project_id: projectId,
},
success: function(response) {
element.removeChild(spinner);
element.classList.remove('disabled');
console.log(typeof response);
if (response == "Accepted") {
alert("Webhook triggered")
} else {
if (response == "low" || response == 'Low') {
alert("Point is higher than mininum point set")
} else {
alert(response)
}
}
// Optionally, handle success actions or update UI
// $("#calModal").modal("hide");
// $("#calForm")[0].reset();
window.location.reload();
},
error: function(error) {
console.error('Error updating data:', error);
// Optionally, display an error message or handle errors
// $("#calModal").modal("hide");
// $("#calForm")[0].reset();
}
});
} catch (e) {
notify("Unknown error occurred!");
console.log(e);
}
}
function duplicate(element) {
event.preventDefault();
var calendarId = $("#calendar_id").val();
// var projectId = $("#submit_cal").attr("data-id");
var projectId = $(element).data("id");
if (calendarId == "") {
alert('Calendar Id is empty')
return
}
// console.log(calendarId)
console.log(projectId)
try {
$.ajax({
type: 'POST',
url: '/<?php echo $_SESSION['role'] ?>/duplicate',
data: {
project_id: projectId,
calendar_id: calendarId
},
success: function(response) {
console.log(typeof response);
if (response == "Accepted") {
alert("Webhook triggered")
} else {
if (response == "low" || response == 'Low') {
alert("Point is higher than mininum point set")
} else {
alert(response)
}
}
// Optionally, handle success actions or update UI
window.location.reload()
},
error: function(error) {
console.error('Error updating data:', error);
alert('Error updating data:')
window.location.reload()
// Optionally, display an error message or handle errors
}
});
} catch (e) {
notify("Unknown error occurred!");
console.log(e);
}
}
// Event binding
$(document).ready(function() {
// $('#submit_cal').on('click', submitCal);
});
document.addEventListener('DOMContentLoaded', function() {
// Get all checkboxes
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
// Add event listener to checkboxes
checkboxes.forEach(function(checkbox) {
checkbox.addEventListener('change', function() {
// Check if any checkbox is checked
var anyChecked = Array.from(checkboxes).some(function(cb) {
return cb.checked;
});
// Show/hide the buttons based on checkbox state
document.getElementById('edit-selected').style.display = anyChecked ? 'inline-block' : 'none';
document.getElementById('delete-selected').style.display = anyChecked ? 'inline-block' : 'none';
});
});
});
function authorize(element) {
var projectId = $(element).data("id");
// Get current page from URL query parameter
var urlParams = new URLSearchParams(window.location.search);
var currentPage = urlParams.get('page') || 1;
window.location.href = '/ghl/authorize/' + projectId + 'p' + currentPage + '?redirect_uri=' + window.location.pathname;
}
// document.getElementById("multiselect-form").addEventListener("submit", function(event) {
// event.preventDefault(); // Prevent default form submission
// // Display confirmation dialog
// if (confirm("Are you sure you want to proceed?")) {
// // If user confirms, submit the form
// this.submit();
// } else {
// // If user cancels, do nothing
// return false;
// }
// });
</script>