410 lines
15 KiB
HTML
410 lines
15 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
|
<title></title>
|
||
|
|
<link
|
||
|
|
rel="stylesheet"
|
||
|
|
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"
|
||
|
|
crossorigin="anonymous"
|
||
|
|
/>
|
||
|
|
<link
|
||
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
|
||
|
|
rel="stylesheet"
|
||
|
|
/>
|
||
|
|
<!-- <link href="/public/assets/css/tabulator_semanticui.min.css" rel="stylesheet"> -->
|
||
|
|
<link href="https://parsleyjs.org/src/parsley.css" rel="stylesheet" />
|
||
|
|
<script
|
||
|
|
src="https://code.jquery.com/jquery-2.2.4.min.js"
|
||
|
|
crossorigin="anonymous"
|
||
|
|
></script>
|
||
|
|
<script
|
||
|
|
src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"
|
||
|
|
crossorigin="anonymous"
|
||
|
|
></script>
|
||
|
|
<script
|
||
|
|
src="https://cdnjs.cloudflare.com/ajax/libs/stapes/1.0.0/stapes.js"
|
||
|
|
crossorigin="anonymous"
|
||
|
|
></script>
|
||
|
|
|
||
|
|
<link href="https://parsleyjs.org/src/parsley.css" rel="stylesheet" />
|
||
|
|
<link href="/style.css" rel="stylesheet" />
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.time-container {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.flex-container {
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
|
||
|
|
.flex-item {
|
||
|
|
flex: 1;
|
||
|
|
/* margin-right: 10px; */
|
||
|
|
/* Adjust margin as needed */
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div class="wrapper">
|
||
|
|
<nav id="sidebar">
|
||
|
|
<div class="sidebar-header">Team Followup</div>
|
||
|
|
<ul class="list-unstyled components">
|
||
|
|
<li><a href="/admin/license"> License </a></li>
|
||
|
|
<li><a href="/admin/accesslog"> Access log </a></li>
|
||
|
|
<li><a href="/admin/project" class="active"> Project</a></li>
|
||
|
|
<li><a href="/admin/users"> Users </a></li>
|
||
|
|
<li><a href="/admin/logout"> Logout </a></li>
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
<div id="content">
|
||
|
|
<div class="container mt-5">
|
||
|
|
<h2 class="text-center">Add Project</h2>
|
||
|
|
<form action="" method="POST" class="mt-4">
|
||
|
|
<!-- <div class="form-group">
|
||
|
|
<label for="project_name">Project Name</label>
|
||
|
|
<input type="text" name="project_name" id="project_name" class="form-control" required>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="calendar_id">Calendar ID</label>
|
||
|
|
<input type="text" name="calendar_id" id="calendar_id" class="form-control" required>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="webhook">Webhook</label>
|
||
|
|
<input type="text" name="webhook" id="webhook" class="form-control" required>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="score_threshold">Score Threshold</label>
|
||
|
|
<input type="text" name="score_threshold" id="score_threshold" class="form-control" required>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="actual_score">Actual Score</label>
|
||
|
|
<input type="text" name="actual_score" id="actual_score" class="form-control" required>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="alert">Alert</label>
|
||
|
|
<input type="text" name="alert" id="alert" class="form-control" required>
|
||
|
|
</div> -->
|
||
|
|
<div class="form-group">
|
||
|
|
<div class="form-check">
|
||
|
|
<input
|
||
|
|
class="form-check-input"
|
||
|
|
type="checkbox"
|
||
|
|
id="sundayCheckbox"
|
||
|
|
value="sun"
|
||
|
|
onclick="showTimeInput('sundayTime')"
|
||
|
|
/>
|
||
|
|
<label class="form-check-label" for="sundayCheckbox"
|
||
|
|
>Sunday</label
|
||
|
|
>
|
||
|
|
|
||
|
|
<!-- <div id="mondayTime" class="time-container">
|
||
|
|
<label for="mondayFromInput">From:</label>
|
||
|
|
<input type="time" id="mondayFromInput" class="time-input">
|
||
|
|
<label for="mondayToInput">To:</label>
|
||
|
|
<input type="time" id="mondayToInput" class="time-input">
|
||
|
|
<button type="button" onclick="addTime('mondayTime')">Add Time</button>
|
||
|
|
</div> -->
|
||
|
|
|
||
|
|
<div class="form-row time-container" id="sundayTime">
|
||
|
|
<div class="time-set form-row">
|
||
|
|
<div class="form-group col-md-6">
|
||
|
|
<label for="sundayFromInput">From</label>
|
||
|
|
<input
|
||
|
|
type="time"
|
||
|
|
name="from"
|
||
|
|
id="sundayFromInput"
|
||
|
|
class="form-control mb-2 time-input"
|
||
|
|
required
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="form-group col-md-6">
|
||
|
|
<label for="sundayToInput">To</label>
|
||
|
|
<input
|
||
|
|
type="time"
|
||
|
|
name="to"
|
||
|
|
id="sundayToInput"
|
||
|
|
class="form-control mb-2 time-input"
|
||
|
|
required
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="form-group col-md-12">
|
||
|
|
<a
|
||
|
|
type="button"
|
||
|
|
class="btn btn-link"
|
||
|
|
onclick="addTime('sundayTime')"
|
||
|
|
>Add Time</a
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="form-check">
|
||
|
|
<input
|
||
|
|
class="form-check-input"
|
||
|
|
type="checkbox"
|
||
|
|
id="inlineCheckbox2"
|
||
|
|
value="mon"
|
||
|
|
/>
|
||
|
|
<label class="form-check-label" for="inlineCheckbox2"
|
||
|
|
>Monday</label
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
<div class="form-check">
|
||
|
|
<input
|
||
|
|
class="form-check-input"
|
||
|
|
type="checkbox"
|
||
|
|
id="inlineCheckbox3"
|
||
|
|
value="tue"
|
||
|
|
/>
|
||
|
|
<label class="form-check-label" for="inlineCheckbox3"
|
||
|
|
>Tuesday</label
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
<div class="form-check">
|
||
|
|
<input
|
||
|
|
class="form-check-input"
|
||
|
|
type="checkbox"
|
||
|
|
id="inlineCheckbox3"
|
||
|
|
value="wed"
|
||
|
|
/>
|
||
|
|
<label class="form-check-label" for="inlineCheckbox3"
|
||
|
|
>Wednesday</label
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
<div class="form-check">
|
||
|
|
<input
|
||
|
|
class="form-check-input"
|
||
|
|
type="checkbox"
|
||
|
|
id="inlineCheckbox3"
|
||
|
|
value="thurs"
|
||
|
|
/>
|
||
|
|
<label class="form-check-label" for="inlineCheckbox3"
|
||
|
|
>Thursday</label
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
<div class="form-check">
|
||
|
|
<input
|
||
|
|
class="form-check-input"
|
||
|
|
type="checkbox"
|
||
|
|
id="inlineCheckbox3"
|
||
|
|
value="fri"
|
||
|
|
/>
|
||
|
|
<label class="form-check-label" for="inlineCheckbox3"
|
||
|
|
>Friday</label
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
<div class="form-check">
|
||
|
|
<input
|
||
|
|
class="form-check-input"
|
||
|
|
type="checkbox"
|
||
|
|
id="inlineCheckbox3"
|
||
|
|
value="sat"
|
||
|
|
/>
|
||
|
|
<label class="form-check-label" for="inlineCheckbox3"
|
||
|
|
>Saturday</label
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button
|
||
|
|
type="submit"
|
||
|
|
class="btn btn-primary"
|
||
|
|
onclick="submitForm(event)"
|
||
|
|
>
|
||
|
|
Submit
|
||
|
|
</button>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
var formData = {};
|
||
|
|
|
||
|
|
function showTimeInput(containerId) {
|
||
|
|
var checkbox = document.getElementById(
|
||
|
|
containerId.replace("Time", "Checkbox")
|
||
|
|
);
|
||
|
|
var timeContainer = document.getElementById(containerId);
|
||
|
|
|
||
|
|
if (checkbox.checked) {
|
||
|
|
timeContainer.style.display = "flex";
|
||
|
|
} else {
|
||
|
|
timeContainer.style.display = "none";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function addTime(containerId) {
|
||
|
|
var timeContainer = document.getElementById(containerId);
|
||
|
|
|
||
|
|
var newTimeSet = document.createElement("div");
|
||
|
|
newTimeSet.className = "time-set form-row";
|
||
|
|
|
||
|
|
var newFormGroup1 = document.createElement("div");
|
||
|
|
newFormGroup1.className = "form-group col-md-6";
|
||
|
|
var newLabelFrom = document.createElement("label");
|
||
|
|
newLabelFrom.textContent = "From:";
|
||
|
|
var newInputFrom = document.createElement("input");
|
||
|
|
newInputFrom.type = "time";
|
||
|
|
newInputFrom.name = "from";
|
||
|
|
newInputFrom.className = "form-control mb-2 time-input";
|
||
|
|
newFormGroup1.appendChild(newLabelFrom);
|
||
|
|
newFormGroup1.appendChild(newInputFrom);
|
||
|
|
|
||
|
|
var newFormGroup2 = document.createElement("div");
|
||
|
|
newFormGroup2.className = "form-group col-md-6";
|
||
|
|
var newLabelTo = document.createElement("label");
|
||
|
|
newLabelTo.textContent = "To:";
|
||
|
|
var newInputTo = document.createElement("input");
|
||
|
|
newInputTo.type = "time";
|
||
|
|
newInputTo.name = "to";
|
||
|
|
newInputTo.className = "form-control mb-2 time-input";
|
||
|
|
newFormGroup2.appendChild(newLabelTo);
|
||
|
|
newFormGroup2.appendChild(newInputTo);
|
||
|
|
|
||
|
|
newTimeSet.appendChild(newFormGroup1);
|
||
|
|
newTimeSet.appendChild(newFormGroup2);
|
||
|
|
|
||
|
|
// Insert the new time set before the "Add Time" button
|
||
|
|
timeContainer.insertBefore(
|
||
|
|
newTimeSet,
|
||
|
|
timeContainer.lastElementChild
|
||
|
|
);
|
||
|
|
|
||
|
|
updateFormData(); // Call function to update formData when time is added
|
||
|
|
}
|
||
|
|
|
||
|
|
// function updateFormDatass() {
|
||
|
|
// // Reset formData
|
||
|
|
// formData = {};
|
||
|
|
|
||
|
|
// // Loop through each day
|
||
|
|
// ['sunday', 'monday'].forEach(function(day) {
|
||
|
|
// var fromInputs = document.querySelectorAll('#' + day + 'Time .time-input:nth-child(odd)');
|
||
|
|
// var toInputs = document.querySelectorAll('#' + day + 'Time .time-input:nth-child(even)');
|
||
|
|
// console.log(fromInputs)
|
||
|
|
// console.log(toInputs)
|
||
|
|
// var dayData = [];
|
||
|
|
|
||
|
|
// // Check if the day is selected and both time inputs have values
|
||
|
|
// for (var i = 0; i < fromInputs.length; i++) {
|
||
|
|
// if (fromInputs[i].value.trim() !== '' && toInputs[i].value.trim() !== '') {
|
||
|
|
// // Store the data in dayData array
|
||
|
|
// dayData.push({
|
||
|
|
// from: fromInputs[i].value,
|
||
|
|
// to: toInputs[i].value
|
||
|
|
// });
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// console.log(dayData)
|
||
|
|
// // If there is data for the day, store it in formData
|
||
|
|
// if (document.getElementById(day + 'Checkbox').checked && dayData.length > 0) {
|
||
|
|
// formData[day] = dayData;
|
||
|
|
// }
|
||
|
|
// });
|
||
|
|
// }
|
||
|
|
|
||
|
|
function updateFormData() {
|
||
|
|
// Reset formData
|
||
|
|
formData = {};
|
||
|
|
|
||
|
|
// Loop through each day
|
||
|
|
["sunday", "monday"].forEach(function (day) {
|
||
|
|
var checkbox = document.getElementById(day + "Checkbox");
|
||
|
|
var timeContainer = document.getElementById(day + "Time");
|
||
|
|
var timeSets = timeContainer.querySelectorAll(".time-set");
|
||
|
|
console.log(checkbox);
|
||
|
|
console.log(timeContainer);
|
||
|
|
console.log(timeSets);
|
||
|
|
|
||
|
|
if (checkbox.checked) {
|
||
|
|
var dayData = [];
|
||
|
|
|
||
|
|
// Iterate over each time set
|
||
|
|
timeSets.forEach(function (timeSet) {
|
||
|
|
console.log(timeSet);
|
||
|
|
|
||
|
|
var fromInput = timeSet.querySelector('input[name="from"]');
|
||
|
|
var toInput = timeSet.querySelector('input[name="to"]');
|
||
|
|
|
||
|
|
// Check if both "From" and "To" inputs have values
|
||
|
|
if (
|
||
|
|
fromInput.value.trim() !== "" &&
|
||
|
|
toInput.value.trim() !== ""
|
||
|
|
) {
|
||
|
|
// Store the data in dayData array
|
||
|
|
dayData.push({
|
||
|
|
from: fromInput.value,
|
||
|
|
to: toInput.value,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
console.log(dayData);
|
||
|
|
|
||
|
|
// If there is data for the day, store it in formData
|
||
|
|
if (dayData.length > 0) {
|
||
|
|
formData[day] = dayData;
|
||
|
|
console.log(formData); // Log formData for debugging
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
console.log(formData); // Log formData for debugging
|
||
|
|
}
|
||
|
|
|
||
|
|
function submitForm(event) {
|
||
|
|
event.preventDefault();
|
||
|
|
|
||
|
|
updateFormData(); // Ensure formData is updated before submission
|
||
|
|
|
||
|
|
$.ajax({
|
||
|
|
url: "/admin/project/add",
|
||
|
|
method: "POST",
|
||
|
|
data: {
|
||
|
|
project_name: project_name,
|
||
|
|
slot: slot,
|
||
|
|
days: days,
|
||
|
|
},
|
||
|
|
success: function (response) {
|
||
|
|
// console.log(response.slots_available);
|
||
|
|
|
||
|
|
const slotsAvailable = response.slots_available;
|
||
|
|
|
||
|
|
$(".user-pick-time-slots").each(function () {
|
||
|
|
const userTimeSlot = $(this).val();
|
||
|
|
// console.log(slotsAvailable[$(this).val()])
|
||
|
|
|
||
|
|
if (slotsAvailable[userTimeSlot] > 0) {
|
||
|
|
// Slot is available, enable the radio button
|
||
|
|
$(this).prop("disabled", false);
|
||
|
|
} else {
|
||
|
|
// Slot is not available, disable the radio button
|
||
|
|
$(this).prop("disabled", true);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
error: function (xhr, status, error) {
|
||
|
|
console.log(error);
|
||
|
|
// console.log("error oooo")
|
||
|
|
},
|
||
|
|
});
|
||
|
|
// Display the collected data (you can replace this with your own logic)
|
||
|
|
alert(JSON.stringify(formData));
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<footer>
|
||
|
|
<script
|
||
|
|
src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.9.2/parsley.min.js"
|
||
|
|
integrity="sha512-eyHL1atYNycXNXZMDndxrDhNAegH2BDWt1TmkXJPoGf1WLlNYt08CSjkqF5lnCRmdm3IrkHid8s2jOUY4NIZVQ=="
|
||
|
|
crossorigin="anonymous"
|
||
|
|
referrerpolicy="no-referrer"
|
||
|
|
></script>
|
||
|
|
</footer>
|
||
|
|
</body>
|
||
|
|
</html>
|