Conservancy/reimbursinator
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Rupika 2019-02-04 09:53:57 -08:00
commit eeac88a3ed
2 changed files with 93 additions and 104 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
front/static/edit_report.html
View file

@ -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>

141
front/static/js/viewHistory.js
View file

@ -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
formGroup.appendChild(label);
outerLabel = document.createElement("div");
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);
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);
formGroup.appendChild(div);
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) {
// 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);
table.style.visibility = "visible";
}
}
function getReportHistory(event) {
document.addEventListener("DOMContentLoaded", function(event) {
const url = getEndpointDomain() + "api/v1/reports";
getDataFromEndpoint(url, displayListOfReports);
}
});
function openEditReportForm(event) {
const url = getEndpointDomain() + "api/v1/report/" + this.dataset.rid;
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);
}
document.addEventListener("DOMContentLoaded", getReportHistory);
// TODO: Add view report
});