Add new report functionality

front/static/edit_report.html

@@ -71,7 +71,7 @@
                         <span aria-hidden="true">&times;</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>

front/static/js/newReport.js

@@ -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": []
+		}
+	]
+}

front/static/js/viewHistory.js

@@ -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);
+                let parsedData = JSON.parse(this.response);
-                callback(parsedData);
+                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";
     }
 
+    if (type === reportType.EDIT) {
         div.setAttribute("data-parent", "#editReportAccordion");
-    div.id = "collapse" + key;
+    } 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) {
+function createReportForm(parsedData, type) {
-    const modalBody = document.querySelector(".modal-body");
+    let modalBody;
-    const modalLabel = document.querySelector("#editReportModalLabel");
+    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) {
+    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")) {
+    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;
-        getDataFromEndpoint(url, createEditReportForm);
+            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

front/static/new_report.html

@@ -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">&times;</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>