I'm currently working on a project where I need to implement a table filter using checkboxes, and I'm facing some challenges. I've managed to set up the basic functionality, but I'm struggling with a couple of specific requirements. I'm reaching out to the community for some guidance and assistance.
Overview of the Project:
I have an HTML table that displays data, and I've implemented checkboxes to filter the data based on different criteria such as terms, statuses, programs, and more. The table is working as expected, but I'm looking to add a couple of enhancements.
I'd be extremely grateful if any of you could provide guidance, examples, or suggestions on how to achieve these enhancements and optimize the existing code.
Thank you in advance for your time and assistance. Your support will be greatly appreciated!
-Mark
Overview of the Project:
I have an HTML table that displays data, and I've implemented checkboxes to filter the data based on different criteria such as terms, statuses, programs, and more. The table is working as expected, but I'm looking to add a couple of enhancements.
- Date Calculation Feature: I want to add a new checkbox where the user can input a number representing days. When this checkbox is selected, I'd like the script to calculate the difference between the current date and the entered number of days. This calculated value should then be sent as a parameter to all three of the functions, which retrieves and sends the data to a server that updates the table data accordingly.
- Code Optimization: While my current implementation is functional, I believe there's room for optimization. I'd appreciate any suggestions on how to reduce the script size while maintaining the functionality.
HTML:
<html>
<head>
<title></title>
<style type="text/css">.checkbox-container {
display: inline-flex;
flex-direction: column;
align-items: left;
border: 1px solid black;
background-color: WhiteSmoke;
padding: 5px;
margin-top: 10px;
margin-left: 10px;
height: 165px;
}
.checkbox-container label {
margin-bottom: 2px;
}
</style>
</head>
<body>
<div class="checkbox-container" style="height: 165px;">
<label for="term-selector"><strong>Term</strong></label> {% for result in terms %} <label><input class="term-selector" data-id="{{result.term_id}}" type="checkbox" /><span style="font-size:12px;"> {{result.term_name}}</span></label>{% endfor %}
</div>
<div class="checkbox-container" style="height: 165px;">
<label for="status-selector"><strong>Status</strong></label><label><input class="status-selector" data-id="Awaiting Submission" type="checkbox" /><span style="font-size:12px;"> Awaiting Submission</span></label><label><input class="status-selector" data-id="Awaiting Payment" type="checkbox" /><span style="font-size:12px;"> Awaiting Payment</span></label><label><input class="status-selector" data-id="Awaiting Materials" type="checkbox" /><span style="font-size:12px;"> Awaiting Materials</span></label><label><input class="status-selector" data-id="Checklist Complete" type="checkbox" /><span style="font-size:12px;"> Checklist Complete</span></label><label><input class="status-selector" data-id="Decided" type="checkbox" /><span style="font-size:12px;"> Decided</span></label>
</div>
<div class="checkbox-container" style="overflow-y: auto; max-width: 600px;">
<label for="program-selector"><strong>Program</strong></label> {% for result in programs %} <label><input class="program-selector" data-id="{{result.program_id}}" type="checkbox" /> {{result.program_name}}</label> {% endfor %}
</div>
<div class="checkbox-container">
<label for="oakland-selector"><strong>Additional Filters</strong></label><label><input class="int-selector" data-id="767867867" type="checkbox" /><span style="font-size:12px;"> International </span><img alt="" src="https://gradapply.oakland.edu/www/images/icons8-international-50%20(2).png" style="width: 16px; height: 16px;" /></label><label><input class="oakland-selector" data-id="1497" type="checkbox" /><span style="font-size:12px;"> Attended OU </span><img alt="" src="https://gradapply.oakland.edu/www/images/OU_BLK.png" style="width: 16px; height: 16px;" /></label><label for="ga-selector"></label><label><input class="ga-selector" data-id="1" type="checkbox" /><span style="font-size:12px;"> Graduate Assistantship </span><img alt="" src="https://gradapply.oakland.edu/www/images/icons8-teach-30.png" style="width: 16px; height: 16px;" /></label><label for="int-selector"></label>
</div>
<div class="checkbox-container" style="height: 165px;">
<label for="priority-selector"><strong>Priority</strong></label><label><input class="priority-selector" data-id="245265436" type="checkbox" /><span style="font-size:12px;"> High</span></label><label><input class="priority-selector" data-id="f14ec933-550d-4208-9d63-36c4c5e61662" type="checkbox" /><span style="font-size:12px;"> Normal</span></label><label><input class="priority-selector" data-id="679e441b-cbe7-4bf4-9fc3-f8b9b99e5ab4" type="checkbox" /><span style="font-size:12px;"> Low</span></label>
</div>
<div class="checkbox-container" style="height: 165px;">
<input id="daysToSubtract" placeholder="Enter days to subtract" type="checkbox" />
</div>
<div style="text-align: right;">
<button data-href="?cmd=print" href="#" onclick="return openDataInNewWindow(this);">Print</button> <button href="#" onclick="downloadCSV();">Download</button>
</div>
<div id="results" style="margin-top:30px">
</div>
<script type="text/javascript">
function downloadCSV() {
var oaklandonly = $(".oakland-selector:checked");
var programList = $(".program-selector:checked");
var termList = $(".term-selector:checked");
var gaonly = $(".ga-selector:checked");
var selectedList = $(".status-selector:checked");
var priorityList = $(".priority-selector:checked");
var intonly = $(".int-selector:checked");
var program = programList.map(function () {
return $(this).data("id");
}).get();
var oakland = oaklandonly.map(function () {
return $(this).data("id");
}).get();
var term = termList.map(function () {
return $(this).data("id");
}).get();
var ga = gaonly.map(function () {
return $(this).data("id");
}).get();
var selected = selectedList.map(function () {
return $(this).data("id");
}).get();
var priority = priorityList.map(function () {
return $(this).data("id");
}).get();
var int = intonly.map(function () {
return $(this).data("id");
}).get();
program = program.join(",");
term = term.join(",");
selected = selected.join(",");
priority = priority.join(",");
var url =
"https://gradapply.oakland.edu/portal/Filter?cmd=download&statusselect=" +
selected +
"&program=" +
program +
"&term=" +
term +
"&priorityselect=" +
priority +
"&oaklandselect=" +
oakland +
"&GAselect=" +
ga +
"&INTselect=" +
int;
var link = document.createElement("a");
link.href = url;
link.target = "_blank";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
function openDataInNewWindow(element) {
var url = element.getAttribute("data-href");
var checkedPrograms = $(".program-selector:checked").map(function () {
return $(this).data("id");
}).get();
var checkedTerms = $(".term-selector:checked").map(function () {
return $(this).data("id");
}).get();
var checkedStatuses = $(".status-selector:checked").map(function () {
return $(this).data("id");
}).get();
var checkedOakland = $(".oakland-selector:checked").map(function () {
return $(this).data("id");
}).get();
var checkedGA = $(".ga-selector:checked").map(function () {
return $(this).data("id");
}).get();
var checkedINT = $(".int-selector:checked").map(function () {
return $(this).data("id");
}).get();
var checkedPriority = $(".priority-selector:checked").map(function () {
return $(this).data("id");
}).get();
url += "&program=" + checkedPrograms.join(",");
url += "&term=" + checkedTerms.join(",");
url += "&statusselect=" + checkedStatuses.join(",");
url += "&oaklandselect=" + checkedOakland.join(",");
url += "&GAselect=" + checkedGA.join(",");
url += "&INTselect=" + checkedINT.join(",");
url += "&priorityselect=" + checkedPriority.join(",");
var printWindow = window.open(url, "_blank");
printWindow.addEventListener("afterprint", function () {
printWindow.close();
});
printWindow.onload = function () {
printWindow.print();
};
return false;
}
function fetchData() {
var oaklandonly = $(".oakland-selector:checked");
var programList = $(".program-selector:checked");
var termList = $(".term-selector:checked");
var gaonly = $(".ga-selector:checked");
var selectedList = $(".status-selector:checked");
var priorityList = $(".priority-selector:checked");
var intonly = $(".int-selector:checked");
var program = programList.map(function () {
return $(this).data("id");
}).get();
var oakland = oaklandonly.map(function () {
return $(this).data("id");
}).get();
var term = termList.map(function () {
return $(this).data("id");
}).get();
var ga = gaonly.map(function () {
return $(this).data("id");
}).get();
var selected = selectedList.map(function () {
return $(this).data("id");
}).get();
var priority = priorityList.map(function () {
return $(this).data("id");
}).get();
var int = intonly.map(function () {
return $(this).data("id");
}).get();
program = program.join(",");
term = term.join(",");
selected = selected.join(",");
priority = priority.join(",");
var url =
"https://gradapply.oakland.edu/portal/coordinators?cmd=search&statusselect=" +
selected +
"&program=" +
program +
"&term=" +
term +
"&priorityselect=" +
priority +
"&oaklandselect=" +
oakland +
"&GAselect=" +
ga +
"&INTselect=" +
int;
fetch(url)
.then(function (response) {
return response.text();
})
.then(function (data) {
console.log(data);
$("#results").html(data);
})
.catch(function (error) {
console.error("Error:", error);
});
}
$("input.program-selector, input.term-selector, input.status-selector, input.priority-selector, input.oakland-selector, input.ga-selector, input.int-selector").change(function () {
fetchData();
});
fetchData();</script>
</body>
</html>I'd be extremely grateful if any of you could provide guidance, examples, or suggestions on how to achieve these enhancements and optimize the existing code.
Thank you in advance for your time and assistance. Your support will be greatly appreciated!
-Mark
