Merge branch 'master' of https://github.com/danieldupriest/reimbursinator into remove_serializer

front/static/edit_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>
@@ -43,6 +44,19 @@
                         <h3>Your Report History</h3>
                     </div>
                     <div class="card-body">
+                        <table class="table table-striped table-responsive-sm" style="visibility:hidden">
+                            <thead>
+                                <tr>
+                                    <th>Title</th>
+                                    <th>Date Created</th>
+                                    <th class="d-none d-lg-table-cell">State</th>
+                                    <th class="d-none d-md-table-cell">Date Submitted</th>
+                                    <th>Action</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                            </tbody>
+                        </table>
                     </div>
                 </div>
             </div>

front/static/js/viewHistory.js

@@ -18,8 +18,10 @@ function getEndpointDomain() {
 
     if (OSName === "Windows") {
         domain = "https://192.168.99.100:8444/";
+    } else if (OSName === "MacOS" && navigator.userAgent.includes("Firefox")) {
+        domain = "https://192.168.99.100:8444/"; // That's Shuaiyi
     } else {
-        domain = "https://localhost:8444/"
+        domain = "https://localhost:8444/"; // Jack, Preston
     }
 
     return domain;
@@ -58,12 +60,16 @@ function getDataFromEndpoint(url, callback) {
 // Wraps a Bootstrap form group around a field
 function createFormGroup(key, field) {
     const formGroup = document.createElement("div")
-    formGroup.classList.add("form-group");
+    formGroup.classList.add("form-group", "row");
 
     const label = document.createElement("label");
-    label.innerHTML = field.label;
+    label.classList.add("col-sm-4", "col-form");
+    label.innerHTML = field.label + ": ";
     label.setAttribute("for", key);
     
+    const div = document.createElement("div");
+    div.classList.add("col-sm-6");
+
     const input = document.createElement("input");
     input.name = key;
     input.id = key;
@@ -74,36 +80,38 @@ function createFormGroup(key, field) {
             if (field.value === true)
                 input.setAttribute("checked", "checked");
             input.classList.add("form-check-input");
-            formGroup.classList.add("form-check");
+            label.className = "";
             label.classList.add("form-check-label");
-            formGroup.appendChild(input); // Reversed order compared to others
+            outerLabel = document.createElement("div");
-            formGroup.appendChild(label);
+            outerLabel.classList.add("col-sm-4");
+            outerLabel.innerHTML = "Flight type: ";
+            formCheck = document.createElement("div");
+            formCheck.classList.add("form-check");
+            formCheck.appendChild(input);
+            formCheck.appendChild(label);
+            div.appendChild(formCheck);
+            formGroup.appendChild(outerLabel);
+            formGroup.appendChild(div);
             break;
         case "date":
-            input.type = "datetime";
-            input.value = field.value;
-            input.classList.add("form-control");
-            formGroup.appendChild(label);
-            formGroup.appendChild(input);
-            break;
         case "decimal":
             input.type = "text";
             input.value = field.value;
             input.classList.add("form-control");
             formGroup.appendChild(label);
-            formGroup.appendChild(input);
+            div.appendChild(input)
+            formGroup.appendChild(div);
             break;
         case "file":
             input.type = "file";
             input.classList.add("form-control-file");
+            let uploadMessage = document.createElement("p");
+            uploadMessage.classList.add("form-text");
+            uploadMessage.innerHTML = field.value;
+            div.appendChild(input)
+            div.appendChild(uploadMessage);
             formGroup.appendChild(label);
-            formGroup.appendChild(input);
+            formGroup.appendChild(div);
-            let uploadMessage = document.createTextNode("Uploaded file:");
-            formGroup.appendChild(uploadMessage);
-            const link = document.createElement("a");
-            link.href = field.value;
-            link.innerHTML = field.value;
-            formGroup.appendChild(link);
             break;
         default:
             break;
@@ -159,7 +167,7 @@ function createEditReportForm(parsedData) {
         col.removeChild(col.firstChild)
     }
 
-    // Add report title and date to card header
+    // Add report title and date
     const reportTitle = parsedData.title;
     const dateCreated = new Date(parsedData.date_created).toLocaleDateString("en-US");
     const h3 = document.createElement("h3"); 
@@ -172,7 +180,6 @@ function createEditReportForm(parsedData) {
     accordion.classList.add("accordion");
     accordion.id = "editReportAccordion";
 
-
     // Traverse the report's sections array
     const sections = parsedData.sections;
     for (let key in sections) {
@@ -223,12 +230,18 @@ function createEditReportForm(parsedData) {
 }
 
 function displayListOfReports(parsedData) {
-    const cardBody = document.querySelector(".card-body");
-    const table = document.createElement("table");
     const reports = parsedData.reports;
-    let reportsAdded = 0;
 
-    // Create report table
+    if (reports.length === 0) {
+        const cardBody = document.querySelector(".card-body");
+        const p = document.createElement("p");
+        p.innerHTML = "No reports found.";
+        cardBody.appendChild(p);
+    } else {
+        const table = document.querySelector("table");
+        const tbody = document.querySelector("tbody");
+
+        // Insert data into the table row
         for (let i = 0; i < reports.length; i++) {
             let title = reports[i].title;
             let dateCreated = new Date(reports[i].date_created).toLocaleDateString("en-US");
@@ -236,6 +249,14 @@ function displayListOfReports(parsedData) {
             let dateSubmitted;
             let rid = reports[i].report_pk;
 
+            let bodyRow = tbody.insertRow(i); 
+            bodyRow.insertCell(0).innerHTML = title;
+            bodyRow.insertCell(1).innerHTML = dateCreated; 
+
+            let stateCell = bodyRow.insertCell(2);
+            stateCell.innerHTML = state;
+            stateCell.classList.add("d-none", "d-lg-table-cell"); // Column visible only on large displays
+
             // Create edit/view button
             let actionButton = document.createElement("button");
             actionButton.type = "submit";
@@ -245,9 +266,9 @@ function displayListOfReports(parsedData) {
             if (state === "created") {
                 // Edit button
                 dateSubmitted = "TBD";
-            actionButton.classList.add("btn-primary");
+                actionButton.classList.add("btn-primary", "edit-report-button"); // Add event listener class
                 actionButton.innerHTML = "Edit";
-            actionButton.addEventListener("click", openEditReportForm);
+                //actionButton.addEventListener("click", openEditReportForm);
             } else {
                 // View button
                 dateSubmitted = new Date(reports[i].date_submitted).toLocaleDateString("en-US");
@@ -255,73 +276,27 @@ function displayListOfReports(parsedData) {
                 actionButton.innerHTML = "View";
             }
 
-        // Insert data into the table object
-        let bodyRow = table.insertRow(i); 
-        bodyRow.insertCell(0).innerHTML = title;
-        bodyRow.insertCell(1).innerHTML = dateCreated; 
-
-        let stateCell = bodyRow.insertCell(2);
-        stateCell.innerHTML = state;
-        stateCell.classList.add("d-none", "d-lg-table-cell"); // Column visible only on large displays
-
             let dateSubmittedCell = bodyRow.insertCell(3);
             dateSubmittedCell.innerHTML = dateSubmitted;
             dateSubmittedCell.classList.add("d-none", "d-md-table-cell"); // Column visible on medium and larger displays
-
             bodyRow.insertCell(4).appendChild(actionButton);
-        reportsAdded++;
         }
 
-    if (reportsAdded === 0) {
+        table.style.visibility = "visible";
-        // Report list is empty
-        const p = document.createElement("p");
-        p.innerHTML = "No reports found.";
-        cardBody.appendChild(p);
-    } else {
-        // Report list exists and table rows have been created
-        // Create table header, add it to the table, and append the result to the card body
-
-        const tr = document.createElement("tr");
-
-        const headTitle = document.createElement("th");
-        headTitle.innerHTML = "Title";
-        tr.appendChild(headTitle);
-
-        const headDateCreated = document.createElement("th");
-        headDateCreated.innerHTML = "Date Created";
-        tr.appendChild(headDateCreated);
-
-        const headState = document.createElement("th");
-        headState.innerHTML = "State";
-        headState.classList.add("d-none", "d-lg-table-cell"); // Column visible only on large displays
-        tr.appendChild(headState);
-
-        const headDateSubmitted = document.createElement("th")
-        headDateSubmitted.innerHTML = "Date Submitted";
-        headDateSubmitted.classList.add("d-none", "d-md-table-cell"); // Column visible on medium and larger displays
-        tr.appendChild(headDateSubmitted);
-
-        const headAction = document.createElement("th")
-        headAction.innerHTML = "Action";
-        tr.appendChild(headAction);
-
-        const thead = document.createElement("thead");
-        thead.appendChild(tr);
-        table.prepend(thead);
-        table.classList.add("table", "table-striped", "table-responsive-sm");
-        cardBody.appendChild(table);
     }
 }
 
-function getReportHistory(event) {
+document.addEventListener("DOMContentLoaded", function(event) {
     const url = getEndpointDomain() + "api/v1/reports";
     getDataFromEndpoint(url, displayListOfReports);
-}
+});
 
-function openEditReportForm(event) {
+document.addEventListener("click", function(event) {
-    const url = getEndpointDomain() + "api/v1/report/" + this.dataset.rid;
+    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);
-}
+    }
 
-
+    // TODO: Add view report
-document.addEventListener("DOMContentLoaded", getReportHistory);
+});