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

Refactor code

Browse source
This commit is contained in:
Preston Doman 2019-01-29 22:17:44 -08:00
parent 72dd3d9900
commit 5aebef7be4
3 changed files with 5 additions and 236 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,145 +0,0 @@
// 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);

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

@ -54,31 +54,6 @@ function getDataFromEndpoint(url, callback) {
xhr.send(); xhr.send();
} }
function buildEditReportForm(parsedReport) {
const modalHeader = document.querySelector(".modal-header");
const h5 = document.createElement("h5");
h5.classList.add("modal-title", "text-center");
const date = new Date(parsedReport.date_created).toLocaleDateString("en-US");
h5.innerHTML = `${parsedReport.title}, ${date}`;
modalHeader.prepend(h5);
const sections = parsedReport.sections;
for (let i = 0; i < sections.length; i++) {
console.log(sections[i].title);
console.log(sections[i].html_description);
console.log(sections[i].fields);
for (field in sections[i].fields) {
console.log(sections[i].fields[field].label);
console.log(sections[i].fields[field].type);
console.log(sections[i].fields[field].value);
}
}
}
function editReportFormClickHandler(event) {
const url = getEndpointDomain() + "backend/get_report";
getDataFromEndpoint(url, buildEditReportForm);
}
function displayListOfReports(listOfReports) { function displayListOfReports(listOfReports) {
const cardBody = document.querySelector(".card-body"); const cardBody = document.querySelector(".card-body");
@ -96,7 +71,6 @@ function displayListOfReports(listOfReports) {
// Create edit/view button // Create edit/view button
let actionButton = document.createElement("button"); let actionButton = document.createElement("button");
actionButton.type = "submit"; actionButton.type = "submit";
actionButton.setAttribute("data-toggle", "modal");
actionButton.classList.add("btn"); actionButton.classList.add("btn");
if (state === "created") { if (state === "created") {
@ -104,8 +78,6 @@ function displayListOfReports(listOfReports) {
dateSubmitted = "TBD"; dateSubmitted = "TBD";
actionButton.classList.add("btn-primary"); actionButton.classList.add("btn-primary");
actionButton.innerHTML = "Edit"; actionButton.innerHTML = "Edit";
actionButton.setAttribute("data-target", "#editReportModal");
actionButton.addEventListener("click", editReportFormClickHandler);
} else { } else {
// View button // View button
dateSubmitted = new Date(reports[i].date_submitted).toLocaleDateString("en-US"); dateSubmitted = new Date(reports[i].date_submitted).toLocaleDateString("en-US");
@ -119,12 +91,12 @@ function displayListOfReports(listOfReports) {
let stateCell = bodyRow.insertCell(2); let stateCell = bodyRow.insertCell(2);
stateCell.innerHTML = state; stateCell.innerHTML = state;
stateCell.classList.add("d-none", "d-lg-table-cell"); stateCell.classList.add("d-none", "d-lg-table-cell"); // Column visible only on large displays
let dateSubmittedCell = bodyRow.insertCell(3); let dateSubmittedCell = bodyRow.insertCell(3);
dateSubmittedCell.innerHTML = dateSubmitted; dateSubmittedCell.innerHTML = dateSubmitted;
dateSubmittedCell.classList.add("d-none", "d-md-table-cell"); dateSubmittedCell.classList.add("d-none", "d-md-table-cell"); // Column visible on medium and larger displays
bodyRow.insertCell(4).appendChild(actionButton); bodyRow.insertCell(4).appendChild(actionButton);
reportsAdded++; reportsAdded++;
@ -138,6 +110,7 @@ function displayListOfReports(listOfReports) {
} else { } else {
// Report list exists and table rows have been created // 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 // Create table header, add it to the table, and append the result to the card body
const thead = document.createElement("thead"); const thead = document.createElement("thead");
const tr = document.createElement("tr"); const tr = document.createElement("tr");
@ -151,12 +124,12 @@ function displayListOfReports(listOfReports) {
const headState = document.createElement("th"); const headState = document.createElement("th");
headState.innerHTML = "State"; headState.innerHTML = "State";
headState.classList.add("d-none", "d-lg-table-cell"); // Column shown only on large displays headState.classList.add("d-none", "d-lg-table-cell"); // Column visible only on large displays
tr.appendChild(headState); tr.appendChild(headState);
const headDateSubmitted = document.createElement("th") const headDateSubmitted = document.createElement("th")
headDateSubmitted.innerHTML = "Date Submitted"; headDateSubmitted.innerHTML = "Date Submitted";
headDateSubmitted.classList.add("d-none", "d-md-table-cell"); // Column only shown on medium and larger displays headDateSubmitted.classList.add("d-none", "d-md-table-cell"); // Column visible on medium and larger displays
tr.appendChild(headDateSubmitted); tr.appendChild(headDateSubmitted);
const headAction = document.createElement("th") const headAction = document.createElement("th")
@ -171,36 +144,6 @@ function displayListOfReports(listOfReports) {
} }
function getReportHistory(event) { function getReportHistory(event) {
/*
const token = localStorage.getItem("token");
const url = getEndpointDomain() + "backend/list_report";
const xhr = new XMLHttpRequest();
console.log(`Attempting a connection to the following endpoint: ${url}`);
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();
*/
const url = getEndpointDomain() + "backend/list_report"; const url = getEndpointDomain() + "backend/list_report";
getDataFromEndpoint(url, displayListOfReports); getDataFromEndpoint(url, displayListOfReports);
} }

29
front/static/view_history.html
View file

@ -7,7 +7,6 @@
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <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://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://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"> <link rel="shortcut icon" href="img/favicon.ico">
<title>Reimbursinator</title> <title>Reimbursinator</title>
</head> </head>
@ -52,34 +51,6 @@
</div> </div>
</div> </div>
</div> </div>
<div class="modal" id="editReportModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span>&times;</span>
</button>
</div>
<div class="modal-body">
<form id="editReportForm">
<div class="form-group">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
<script src="js/logout.js"></script> <script src="js/logout.js"></script>
<script src="js/viewHistory.js"></script> <script src="js/viewHistory.js"></script>
</body> </body>