Merge pull request #63: Added View Report functionality
CheckingViewReport
This commit is contained in:
commit
7a52211ad2
3 changed files with 81 additions and 3 deletions
BIN
back/db.sqlite3
BIN
back/db.sqlite3
Binary file not shown.
|
@ -81,6 +81,20 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal" id="viewReportModal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="viewReportModalLabel"></h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-view">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/logout.js"></script>
|
||||
<script src="js/viewHistory.js"></script>
|
||||
</body>
|
||||
|
|
|
@ -252,8 +252,10 @@ function displayListOfReports(parsedData) {
|
|||
} else {
|
||||
// View button
|
||||
dateSubmitted = new Date(reports[i].date_submitted).toLocaleDateString("en-US");
|
||||
actionButton.classList.add("btn-success");
|
||||
actionButton.classList.add("btn-success", "view-report-button");
|
||||
actionButton.innerHTML = "View";
|
||||
actionButton.setAttribute("data-toggle", "modal");
|
||||
actionButton.setAttribute("data-target", "#viewReportModal");
|
||||
}
|
||||
|
||||
let dateSubmittedCell = bodyRow.insertCell(3);
|
||||
|
@ -266,6 +268,63 @@ function displayListOfReports(parsedData) {
|
|||
}
|
||||
}
|
||||
|
||||
function displayReport(parsedData){
|
||||
//Able to get the correct report ID now just needs to display the
|
||||
//report as an modual
|
||||
const modalBody = document.querySelector(".modal-view");
|
||||
const modalLabel = document.querySelector("#viewReportModalLabel");
|
||||
|
||||
while (modalBody.firstChild) {
|
||||
modalBody.removeChild(modalBody.firstChild);
|
||||
}
|
||||
|
||||
// Add report title and date
|
||||
const reportTitle = parsedData.title;
|
||||
const dateCreated = new Date(parsedData.date_created).toLocaleDateString("en-US");
|
||||
modalLabel.innerHTML = reportTitle + " " + dateCreated;
|
||||
|
||||
const card = document.createElement("div");
|
||||
card.classList.add("card");
|
||||
|
||||
const cardHeader = document.createElement("div");
|
||||
cardHeader.classList.add("card-header");
|
||||
|
||||
const cardBody = document.createElement("div");
|
||||
cardBody.classList.add("card-body");
|
||||
|
||||
/*
|
||||
const displayTable = document.createElement("table");
|
||||
displayTable.classList.add("table table-striped table-responsive-sm");
|
||||
displayTable.style.visibility = "visible";
|
||||
cardBody.appendChild(displayTable);
|
||||
*/
|
||||
|
||||
|
||||
const sections = parsedData.sections;
|
||||
for (let key in sections) {
|
||||
let section = sections[key];
|
||||
if(section.completed) {
|
||||
const h4 = document.createElement("h4");
|
||||
const value = document.createTextNode(section.title);
|
||||
|
||||
h4.appendChild(value);
|
||||
cardBody.appendChild(h4);
|
||||
let fields = section.fields;
|
||||
for (let key in fields) {
|
||||
let field = fields[key];
|
||||
const p1 = document.createElement("p");
|
||||
const p1Value = document.createTextNode(field.label + ": " + field.value);
|
||||
p1.appendChild(p1Value);
|
||||
cardBody.appendChild(p1);
|
||||
}
|
||||
cardHeader.appendChild(cardBody);
|
||||
card.appendChild(cardHeader);
|
||||
}
|
||||
}
|
||||
|
||||
modalBody.appendChild(card);
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function(event) {
|
||||
const url = getEndpointDomain() + "api/v1/reports";
|
||||
getDataFromEndpoint(url, displayListOfReports);
|
||||
|
@ -277,6 +336,11 @@ document.addEventListener("click", function(event) {
|
|||
const url = getEndpointDomain() + "api/v1/report/" + event.target.dataset.rid;
|
||||
getDataFromEndpoint(url, createEditReportForm);
|
||||
}
|
||||
|
||||
// TODO: Add view report
|
||||
if(event.target && event.target.classList.contains("view-report-button"))
|
||||
{
|
||||
console.log("View button clicked");
|
||||
const url = getEndpointDomain() + "api/v1/report/" + event.target.dataset.rid;
|
||||
getDataFromEndpoint(url, displayReport);
|
||||
}
|
||||
// TODO: Add View Report
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue