Refactor code
This commit is contained in:
Preston Doman
parent
72dd3d9900
commit
5aebef7be4
3 changed files with 5 additions and 236 deletions
|
|
@ -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);
|
||||
|
|
@ -54,31 +54,6 @@ function getDataFromEndpoint(url, callback) {
|
|||
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) {
|
||||
const cardBody = document.querySelector(".card-body");
|
||||
|
|
@ -96,7 +71,6 @@ function displayListOfReports(listOfReports) {
|
|||
// Create edit/view button
|
||||
let actionButton = document.createElement("button");
|
||||
actionButton.type = "submit";
|
||||
actionButton.setAttribute("data-toggle", "modal");
|
||||
actionButton.classList.add("btn");
|
||||
|
||||
if (state === "created") {
|
||||
|
|
@ -104,8 +78,6 @@ function displayListOfReports(listOfReports) {
|
|||
dateSubmitted = "TBD";
|
||||
actionButton.classList.add("btn-primary");
|
||||
actionButton.innerHTML = "Edit";
|
||||
actionButton.setAttribute("data-target", "#editReportModal");
|
||||
actionButton.addEventListener("click", editReportFormClickHandler);
|
||||
} else {
|
||||
// View button
|
||||
dateSubmitted = new Date(reports[i].date_submitted).toLocaleDateString("en-US");
|
||||
|
|
@ -119,12 +91,12 @@ function displayListOfReports(listOfReports) {
|
|||
|
||||
let stateCell = bodyRow.insertCell(2);
|
||||
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);
|
||||
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);
|
||||
reportsAdded++;
|
||||
|
|
@ -138,6 +110,7 @@ function displayListOfReports(listOfReports) {
|
|||
} 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 thead = document.createElement("thead");
|
||||
const tr = document.createElement("tr");
|
||||
|
||||
|
|
@ -151,12 +124,12 @@ function displayListOfReports(listOfReports) {
|
|||
|
||||
const headState = document.createElement("th");
|
||||
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);
|
||||
|
||||
const headDateSubmitted = document.createElement("th")
|
||||
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);
|
||||
|
||||
const headAction = document.createElement("th")
|
||||
|
|
@ -171,36 +144,6 @@ function displayListOfReports(listOfReports) {
|
|||
}
|
||||
|
||||
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";
|
||||
getDataFromEndpoint(url, displayListOfReports);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<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>
|
||||
|
|
@ -52,34 +51,6 @@
|
|||
</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>×</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/viewHistory.js"></script>
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Reference in a new issue