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

Add buttons and more responsive styling to report table

Browse source
This commit is contained in:
Preston Doman 2019-01-29 01:27:38 -08:00
parent d4b569187e
commit d8aee961ca
3 changed files with 185 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

145
front/static/js/editReport.js Normal file
View file

@ -0,0 +1,145 @@
// Hack to change endpoint url for each OS
function getEndpointDomain() {
let OSName;
let domain;
if (navigator.appVersion.indexOf("Win") !== -1)
OSName = "Windows";
else if (navigator.appVersion.indexOf("Mac") !== -1)
OSName = "MacOS";
else if (navigator.appVersion.indexOf("X11") !== -1)
OSName = "UNIX";
else if (navigator.appVersion.indexOf("Linux") !== -1)
OSName = "Linux";
else
OSName = "Unknown OS";
console.log(`Detected operating system: ${OSName}`);
if (OSName === "Windows") {
domain = "https://192.168.99.100:8444/";
} else {
domain = "https://localhost:8444/"
}
return domain;
}
function populateEditReportForm(specificReport) {
const cardBody = document.querySelector(".card-body");
cardBody.innerHTML = JSON.stringify(specificReport);
}
function getSpecificReport(event) {
event.preventDefault();
const token = localStorage.getItem("token");
// need to get rid from option value here
const rid = this.elements.rid.value;
console.log(`rid for this report is ${rid}`);
const url = getEndpointDomain() + "backend/get_report";
const xhr = new XMLHttpRequest();
console.log("getSpecificReport");
console.log(`Attempting a connection to the following endpoint: ${url}`);
console.log("Before open()");
xhr.open("GET", url, true);
//xhr.setRequestHeader("Authorization", `Token ${token}`);
console.log("After open()");
xhr.onreadystatechange = function() {
console.log(`In onreadystate, readyState = ${this.readyState}`);
if (this.readyState === 4) {
if (this.status === 200) {
console.log("GET get_report SUCCESS!");
console.log(`Server response:\n${this.response}`);
specificReport = JSON.parse(this.response);
populateEditReportForm(specificReport);
} else {
console.log("GET get_report FAILURE!");
console.log(`Server status: ${this.status}`);
console.log(`Server response:\n${this.response}`);
}
}
};
xhr.onerror = function() {
alert("Connection error!");
};
console.log("Before send()");
xhr.send();
console.log("After send()");
}
function populateSelectDropdown(listOfReports) {
const select = document.querySelector("select");
const reports = listOfReports.reports;
const fragment = document.createDocumentFragment();
for (let i = 0; i < reports.length; i++) {
if (reports[i].state === "created") {
let title = reports[i].title;
let dateCreated = new Date(reports[i].date_created).toLocaleDateString("en-US");
let rid = 2;
let option = document.createElement("option");
option.innerHTML = `${title}, ${dateCreated}`;
option.value = rid;
fragment.appendChild(option);
}
}
if (fragment.hasChildNodes() === false) {
// Empty unfinished report list
const emptyOption = document.createElement("option");
emptyOption.innerHTML = "No unfinshed reports found.";
fragment.appendChild(emptyOption);
}
select.appendChild(fragment);
}
function getAllReports(event) {
const token = localStorage.getItem("token");
const url = getEndpointDomain() + "backend/list_report";
const xhr = new XMLHttpRequest();
console.log("getAllReports");
console.log(`Attempting a connection to the following endpoint: ${url}`);
console.log("Before open()");
xhr.open("GET", url, true);
console.log("After open()");
//xhr.setRequestHeader("Authorization", `Token ${token}`);
xhr.onreadystatechange = function() {
console.log(`In onreadystatechange, readyState = ${this.readyState}`);
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);
populateSelectDropdown(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!");
};
console.log("Before send()");
xhr.send();
console.log("After send()");
}
document.addEventListener("DOMContentLoaded", getAllReports);
const editReportForm = document.querySelector("#editReportForm");
editReportForm.addEventListener("submit", getSpecificReport);

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

@ -32,17 +32,39 @@ function displayListOfReports(listOfReports) {
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++;
let title = reports[i].title;
let dateCreated = new Date(reports[i].date_created).toLocaleDateString("en-US");
let state = reports[i].state;
let dateSubmitted;
let actionButton = document.createElement("button");
actionButton.type = "submit";
actionButton.classList.add("btn");
if (state === "created") {
dateSubmitted = "TBD";
actionButton.classList.add("btn-primary");
actionButton.innerHTML = "Edit";
} else {
dateSubmitted = new Date(reports[i].date_submitted).toLocaleDateString("en-US");
actionButton.classList.add("btn-success");
actionButton.innerHTML = "View";
}
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");
let dateSubmittedCell = bodyRow.insertCell(3);
dateSubmittedCell.innerHTML = dateSubmitted;
dateSubmittedCell.classList.add("d-none", "d-md-table-cell");
bodyRow.insertCell(4).appendChild(actionButton);
rowsInserted++;
}
if (rowsInserted === 0) {
@ -65,12 +87,18 @@ function displayListOfReports(listOfReports) {
const headState = document.createElement("th");
headState.innerHTML = "State";
headState.classList.add("d-none", "d-lg-table-cell");
tr.appendChild(headState);
const headDateSubmitted = document.createElement("th")
headDateSubmitted.innerHTML = "Date Submitted";
headDateSubmitted.classList.add("d-none", "d-md-table-cell");
tr.appendChild(headDateSubmitted);
const headAction = document.createElement("th")
headAction.innerHTML = "Action";
tr.appendChild(headAction);
thead.appendChild(tr);
table.prepend(thead);
table.classList.add("table", "table-striped", "table-responsive-sm");

1
front/static/view_history.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>
<link rel="stylesheet" href="test.css">
<link rel="shortcut icon" href="img/favicon.ico">
<title>Reimbursinator</title>
</head>