From 1691392b43a0699848a6f9432e9eb1678b521344 Mon Sep 17 00:00:00 2001
From: Preston Doman <pdoman@pdx.edu>
Date: Sun, 27 Jan 2019 16:21:51 -0800
Subject: [PATCH] Add list report history functionality to view_history.html

---
 front/static/js/viewHistory.js | 83 ++++++++++++++++++++++++++++++++++
 front/static/view_history.html | 16 +++++--
 2 files changed, 96 insertions(+), 3 deletions(-)
 create mode 100644 front/static/js/viewHistory.js

diff --git a/front/static/js/viewHistory.js b/front/static/js/viewHistory.js
new file mode 100644
index 0000000..bc037b6
--- /dev/null
+++ b/front/static/js/viewHistory.js
@@ -0,0 +1,83 @@
+function displayListOfReports(listOfReports) {
+    const cardBody = document.querySelector(".card-body");
+    const table = document.createElement("table");
+    const reports = listOfReports.reports;
+    let rowsInserted = 0;
+
+    for (let i = 0; i < reports.length; i++) {
+            let title = reports[i].title;
+            let dateCreated = new Date(reports[i].date_created).toLocaleDateString("en-US");
+            let state = reports[i].state;
+            let dateSubmitted = (state === "created") ? "TBD": new Date(reports[i].date_submitted).toLocaleDateString("en-US");
+            let bodyRow = table.insertRow(i); 
+            
+            bodyRow.insertCell(0).innerHTML = title;
+            bodyRow.insertCell(1).innerHTML = dateCreated; 
+            bodyRow.insertCell(2).innerHTML = state;
+            bodyRow.insertCell(3).innerHTML = dateSubmitted;
+            rowsInserted++;
+    }
+
+    if (rowsInserted === 0) {
+        // Empty report list
+        const p = document.createElement("p");
+        p.innerHTML = "No reports found.";
+        cardBody.appendChild(p);
+    } else {
+        // Create table header, add to table, and append result to the card body
+        const thead = document.createElement("thead");
+        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";
+        tr.appendChild(headState);
+
+        const headDateSubmitted = document.createElement("th")
+        headDateSubmitted.innerHTML = "Date Submitted";
+        tr.appendChild(headDateSubmitted);
+
+        thead.appendChild(tr);
+        table.prepend(thead);
+        table.classList.add("table", "table-striped", "table-responsive-sm");
+        cardBody.appendChild(table);
+    }
+}
+
+function getReportHistory(event) {
+    const token = localStorage.getItem("token");
+    const url = "https://localhost:8444/backend/list_report"
+    const xhr = new XMLHttpRequest();
+
+    xhr.open("GET", url, true);
+    xhr.setRequestHeader("Authorization", `Token  ${token}`);
+    xhr.onreadystatechange = function() {
+        if (this.readyState === 4) {
+            if (this.status === 200) {
+                console.log("GET list_report SUCCESS!");
+                console.log(`Server response:\n${this.response}`);
+                listOfReports = JSON.parse(this.response);
+                displayListOfReports(listOfReports);
+            } else {
+                console.log("GET list_report FAILURE!");
+                console.log(`Server status: ${this.status}`);
+                console.log(`Server response:\n${this.response}`);
+            }
+        }
+    };
+
+    xhr.onerror = function() {
+        alert("Connection error!");
+    };
+
+    xhr.send();
+}
+
+document.addEventListener("DOMContentLoaded", getReportHistory);
diff --git a/front/static/view_history.html b/front/static/view_history.html
index 8cefece..23fdccc 100644
--- a/front/static/view_history.html
+++ b/front/static/view_history.html
@@ -38,10 +38,20 @@
             </ul>
         </div>
     </nav>
-    <div class="container">
-        <p>View report history</p>
+    <div class="container pt-5">
+        <div class="row">
+            <div class="col-sm-8 mx-auto">
+                <div class="card bg-light text-dark">
+                    <div class="card-header text-center">
+                        <h3>Your Report History</h3>
+                    </div>
+                    <div class="card-body">
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
     <script src="js/logout.js"></script>
+    <script src="js/viewHistory.js"></script>
 </body>
 </html>
-