Add new report functionality
This commit is contained in:
Preston Doman
parent
b5b65c3b9e
commit
b076eae02b
4 changed files with 133 additions and 25 deletions
|
|
@ -71,7 +71,7 @@
|
|||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="modal-body" id="editReportModalBody">
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-danger">Delete Report</button>
|
||||
|
|
|
|||
56
front/static/js/newReport.js
Normal file
56
front/static/js/newReport.js
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
|
||||
let newReport = {
|
||||
"title": "2018 Portland trip",
|
||||
"date_created": "2018-05-22T14:56:28.000Z",
|
||||
"submitted": false,
|
||||
"date_submitted": "0000-00-00T00:00:00.000Z",
|
||||
"sections": [{
|
||||
"id": 1,
|
||||
"completed": false,
|
||||
"title": "Flight Info",
|
||||
"html_description": "<p>Enter flight details here.</p>",
|
||||
"fields": {
|
||||
"international": {
|
||||
"label": "International flight",
|
||||
"type": "boolean",
|
||||
"value": ""
|
||||
},
|
||||
"travel_date": {
|
||||
"label": "Travel start date",
|
||||
"type": "date",
|
||||
"value": ""
|
||||
},
|
||||
"fare": {
|
||||
"label": "Fare",
|
||||
"type": "decimal",
|
||||
"value": ""
|
||||
},
|
||||
"lowest_fare_screenshot": {
|
||||
"label": "Lowest fare screenshot",
|
||||
"type": "file",
|
||||
"value": ""
|
||||
},
|
||||
"plane_ticket_invoice": {
|
||||
"label": "Plane ticket invoice PDF",
|
||||
"type": "file",
|
||||
"value": ""
|
||||
}
|
||||
},
|
||||
"rule_violations": []
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"completed": false,
|
||||
"title": "Hotel info",
|
||||
"html_description": "<p>If you used a hotel, please enter the details.</p>",
|
||||
"fields": {
|
||||
"total": {
|
||||
"label": "Total cost",
|
||||
"type": "decimal",
|
||||
"value": ""
|
||||
}
|
||||
},
|
||||
"rule_violations": []
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -4,7 +4,7 @@ function getEndpointDomain() {
|
|||
}
|
||||
|
||||
// Make a GET request to url and pass response to callback function
|
||||
function getDataFromEndpoint(url, callback) {
|
||||
function getDataFromEndpoint(url, callback, optional) {
|
||||
const token = localStorage.getItem("token");
|
||||
const xhr = new XMLHttpRequest();
|
||||
|
||||
|
|
@ -16,8 +16,8 @@ function getDataFromEndpoint(url, callback) {
|
|||
if (this.status === 200) {
|
||||
console.log("GET SUCCESS!");
|
||||
console.log("Server response:\n" + this.response);
|
||||
parsedData = JSON.parse(this.response);
|
||||
callback(parsedData);
|
||||
let parsedData = JSON.parse(this.response);
|
||||
optional === undefined ? callback(parsedData) : callback(parsedData, optional);
|
||||
} else {
|
||||
console.error("GET FAILURE!");
|
||||
console.error("Server status: " + this.status);
|
||||
|
|
@ -118,10 +118,13 @@ function createCollapsibleCard(key, sectionTitle) {
|
|||
return card;
|
||||
}
|
||||
|
||||
function createCollapsibleCardBody(key, form, sectionDescription, sectionCompleted) {
|
||||
function createCollapsibleCardBody(key, form, type, sectionDescription, sectionCompleted) {
|
||||
// Create wrapper div
|
||||
const div = document.createElement("div");
|
||||
div.id = "collapse" + key;
|
||||
const sectionAlert = document.createElement("div");
|
||||
const cardBody = document.createElement("div");
|
||||
cardBody.classList.add("card-body");
|
||||
|
||||
if (sectionCompleted) {
|
||||
div.classList.add("collapse");
|
||||
|
|
@ -133,12 +136,13 @@ function createCollapsibleCardBody(key, form, sectionDescription, sectionComplet
|
|||
sectionAlert.innerHTML = "This section is not complete";
|
||||
}
|
||||
|
||||
div.setAttribute("data-parent", "#editReportAccordion");
|
||||
div.id = "collapse" + key;
|
||||
if (type === reportType.EDIT) {
|
||||
div.setAttribute("data-parent", "#editReportAccordion");
|
||||
} else {
|
||||
div.setAttribute("data-parent", "#newReportAccordion");
|
||||
}
|
||||
|
||||
// Create card body. Append form to body, body to wrapper div
|
||||
const cardBody = document.createElement("div");
|
||||
cardBody.classList.add("card-body");
|
||||
cardBody.appendChild(sectionAlert);
|
||||
cardBody.insertAdjacentHTML("beforeend", sectionDescription);
|
||||
cardBody.appendChild(form);
|
||||
|
|
@ -147,9 +151,23 @@ function createCollapsibleCardBody(key, form, sectionDescription, sectionComplet
|
|||
return div;
|
||||
}
|
||||
|
||||
function createEditReportForm(parsedData) {
|
||||
const modalBody = document.querySelector(".modal-body");
|
||||
const modalLabel = document.querySelector("#editReportModalLabel");
|
||||
function createReportForm(parsedData, type) {
|
||||
let modalBody;
|
||||
let modalLabl;
|
||||
const accordion = document.createElement("div");
|
||||
accordion.classList.add("accordion");
|
||||
|
||||
if (type === reportType.EDIT) {
|
||||
modalBody = document.querySelector("#editReportModalBody");
|
||||
modalLabel = document.querySelector("#editReportModalLabel");
|
||||
accordion.id = "editReportAccordion";
|
||||
} else if (type === reportType.NEW) {
|
||||
modalBody = document.querySelector("#newReportModalBody");
|
||||
modalLabel = document.querySelector("#newReportModalLabel");
|
||||
accordion.id = "newReportAccordion";
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
|
||||
while (modalBody.firstChild) {
|
||||
modalBody.removeChild(modalBody.firstChild);
|
||||
|
|
@ -160,11 +178,6 @@ function createEditReportForm(parsedData) {
|
|||
const dateCreated = new Date(parsedData.date_created).toLocaleDateString("en-US");
|
||||
modalLabel.innerHTML = reportTitle + " " + dateCreated;
|
||||
|
||||
// Create accordion
|
||||
const accordion = document.createElement("div");
|
||||
accordion.classList.add("accordion");
|
||||
accordion.id = "editReportAccordion";
|
||||
|
||||
// Traverse the report's sections array
|
||||
const sections = parsedData.sections;
|
||||
for (let key in sections) {
|
||||
|
|
@ -198,7 +211,7 @@ function createEditReportForm(parsedData) {
|
|||
form.appendChild(saveButton);
|
||||
|
||||
// Create collapsible card body, append form to it, append card to accordion
|
||||
let cardBody = createCollapsibleCardBody(key, form, section.html_description, section.completed);
|
||||
let cardBody = createCollapsibleCardBody(key, form, type, section.html_description, section.completed);
|
||||
collapsibleCard.appendChild(cardBody);
|
||||
accordion.appendChild(collapsibleCard);
|
||||
}
|
||||
|
|
@ -265,15 +278,32 @@ function displayListOfReports(parsedData) {
|
|||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function(event) {
|
||||
const url = getEndpointDomain() + "api/v1/reports";
|
||||
getDataFromEndpoint(url, displayListOfReports);
|
||||
if (window.location.pathname === "/edit_report.html") {
|
||||
const url = getEndpointDomain() + "api/v1/reports";
|
||||
getDataFromEndpoint(url, displayListOfReports);
|
||||
}
|
||||
});
|
||||
|
||||
const reportType = {
|
||||
EDIT : 1,
|
||||
VIEW : 2,
|
||||
NEW : 3
|
||||
};
|
||||
|
||||
document.addEventListener("click", function(event) {
|
||||
if (event.target && event.target.classList.contains("edit-report-button")) {
|
||||
console.log("Edit button clicked");
|
||||
const url = getEndpointDomain() + "api/v1/report/" + event.target.dataset.rid;
|
||||
getDataFromEndpoint(url, createEditReportForm);
|
||||
if (event.target) {
|
||||
if (event.target.classList.contains("edit-report-button")) {
|
||||
console.log("Edit button clicked");
|
||||
console.log(event);
|
||||
const url = getEndpointDomain() + "api/v1/report/" + event.target.dataset.rid;
|
||||
const type = reportType.EDIT;
|
||||
getDataFromEndpoint(url, createReportForm, type);
|
||||
} else if (event.target.classList.contains("new-report-button")) {
|
||||
//const url = getEndpointDomain() + "api/v1/report";
|
||||
const type = reportType.NEW;
|
||||
//getDataFromEndpoint(url, createReportForm, type);
|
||||
createReportForm(newReport, type);
|
||||
}
|
||||
}
|
||||
|
||||
// TODO: Add view report
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.2.20171210/classList.min.js"></script>
|
||||
<link rel="shortcut icon" href="img/favicon.ico">
|
||||
<title>Reimbursinator</title>
|
||||
</head>
|
||||
|
|
@ -36,8 +37,29 @@
|
|||
</div>
|
||||
</nav>
|
||||
<div class="container">
|
||||
<p>Create a new report</p>
|
||||
<button type="button" class="btn btn-primary new-report-button" data-toggle="modal" data-target="#newReportModal">Create New</button>
|
||||
</div>
|
||||
<div class="modal fade" id="newReportModal" 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="newReportModalLabel"></h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body" id="newReportModalBody">
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-danger">Delete Report</button>
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary">Submit Report</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/logout.js"></script>
|
||||
<script src="js/newReport.js"></script>
|
||||
<script src="js/viewHistory.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue