Add edit report form function
This commit is contained in:
Preston Doman
parent
0b04057da2
commit
546b0730da
1 changed files with 135 additions and 49 deletions
|
|
@ -25,34 +25,131 @@ function getEndpointDomain() {
|
||||||
return domain;
|
return domain;
|
||||||
}
|
}
|
||||||
|
|
||||||
function displayListOfReports(listOfReports) {
|
function getDataFromEndpoint(url, callback) {
|
||||||
const cardBody = document.querySelector(".card-body");
|
const token = localStorage.getItem("token");
|
||||||
const table = document.createElement("table");
|
const xhr = new XMLHttpRequest();
|
||||||
const reports = listOfReports.reports;
|
|
||||||
let rowsInserted = 0;
|
|
||||||
|
|
||||||
for (let i = 0; i < reports.length; i++) {
|
console.log(`Attempting a connection to the following endpoint: ${url}`);
|
||||||
let title = reports[i].title;
|
|
||||||
let dateCreated = new Date(reports[i].date_created).toLocaleDateString("en-US");
|
xhr.open("GET", url, true);
|
||||||
let state = reports[i].state;
|
xhr.onreadystatechange = function() {
|
||||||
let dateSubmitted = (state === "created") ? "TBD": new Date(reports[i].date_submitted).toLocaleDateString("en-US");
|
if (this.readyState === 4) {
|
||||||
let bodyRow = table.insertRow(i);
|
if (this.status === 200) {
|
||||||
|
console.log("GET SUCCESS!");
|
||||||
bodyRow.insertCell(0).innerHTML = title;
|
console.log(`Server response:\n${this.response}`);
|
||||||
bodyRow.insertCell(1).innerHTML = dateCreated;
|
parsedData = JSON.parse(this.response);
|
||||||
bodyRow.insertCell(2).innerHTML = state;
|
callback(parsedData);
|
||||||
bodyRow.insertCell(3).innerHTML = dateSubmitted;
|
} else {
|
||||||
rowsInserted++;
|
console.error("GET FAILURE!");
|
||||||
|
console.error(`Server status: ${this.status}`);
|
||||||
|
console.error(`Server response:\n${this.response}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
xhr.onerror = function() {
|
||||||
|
alert("Connection error!");
|
||||||
|
};
|
||||||
|
|
||||||
|
xhr.send();
|
||||||
|
}
|
||||||
|
|
||||||
|
function createEditReportForm(parsedData) {
|
||||||
|
console.log("In createEditReportForm");
|
||||||
|
console.log(JSON.stringify(parsedData));
|
||||||
|
const cardBody = document.querySelector(".card-body");
|
||||||
|
const fragment = document.createDocumentFragment();
|
||||||
|
const title = parsedData.title;
|
||||||
|
const dateCreated = new Date(parsedData.date_created).toLocaleDateString("en-us");
|
||||||
|
|
||||||
|
|
||||||
|
if (cardBody.hasChildNodes() === true && cardBody.childNodes[1]) {
|
||||||
|
cardBody.removeChild(cardBody.childNodes[1]);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (rowsInserted === 0) {
|
console.log(`Title: ${title}`);
|
||||||
// Empty report list
|
console.log(`Date Created: ${dateCreated}`);
|
||||||
|
const form = document.createElement("form");
|
||||||
|
|
||||||
|
const sections = parsedData.sections;
|
||||||
|
for (let section in sections) {
|
||||||
|
console.log(`Section title: ${sections[section].title}`);
|
||||||
|
console.log(`Section html description: ${sections[section].html_description}`);
|
||||||
|
|
||||||
|
let sectionTitle = document.createElement("p").innerHTML = sections[section].title;
|
||||||
|
form.appendChild(title);
|
||||||
|
let sectionDescription = sections[section].html_description;
|
||||||
|
form.appendChild(sectionDescription);
|
||||||
|
|
||||||
|
for (let field in sections[section].fields) {
|
||||||
|
console.log(`Field label: ${sections[section].fields[field].label}`);
|
||||||
|
console.log(`Field type: ${sections[section].fields[field].type}`);
|
||||||
|
console.log(`Field value: ${sections[section].fields[field].value}`);
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function displayListOfReports(parsedData) {
|
||||||
|
const cardBody = document.querySelector(".card-body");
|
||||||
|
const table = document.createElement("table");
|
||||||
|
const reports = parsedData.reports;
|
||||||
|
let reportsAdded = 0;
|
||||||
|
|
||||||
|
// Create report table
|
||||||
|
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;
|
||||||
|
let rid = reports[i].report_pk;
|
||||||
|
|
||||||
|
// Create edit/view button
|
||||||
|
let actionButton = document.createElement("button");
|
||||||
|
actionButton.type = "submit";
|
||||||
|
actionButton.setAttribute("data-rid", rid);
|
||||||
|
actionButton.classList.add("btn");
|
||||||
|
|
||||||
|
if (state === "created") {
|
||||||
|
// Edit button
|
||||||
|
dateSubmitted = "TBD";
|
||||||
|
actionButton.classList.add("btn-primary");
|
||||||
|
actionButton.innerHTML = "Edit";
|
||||||
|
actionButton.addEventListener("click", openEditReportForm);
|
||||||
|
} else {
|
||||||
|
// View button
|
||||||
|
dateSubmitted = new Date(reports[i].date_submitted).toLocaleDateString("en-US");
|
||||||
|
actionButton.classList.add("btn-success");
|
||||||
|
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");
|
const p = document.createElement("p");
|
||||||
p.innerHTML = "No reports found.";
|
p.innerHTML = "No reports found.";
|
||||||
cardBody.appendChild(p);
|
cardBody.appendChild(p);
|
||||||
} else {
|
} else {
|
||||||
// Create table header, add to table, and append result to the card body
|
// Report list exists and table rows have been created
|
||||||
const thead = document.createElement("thead");
|
// Create table header, add it to the table, and append the result to the card body
|
||||||
|
|
||||||
const tr = document.createElement("tr");
|
const tr = document.createElement("tr");
|
||||||
|
|
||||||
const headTitle = document.createElement("th");
|
const headTitle = document.createElement("th");
|
||||||
|
|
@ -65,12 +162,19 @@ 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 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 visible on medium and larger displays
|
||||||
tr.appendChild(headDateSubmitted);
|
tr.appendChild(headDateSubmitted);
|
||||||
|
|
||||||
|
const headAction = document.createElement("th")
|
||||||
|
headAction.innerHTML = "Action";
|
||||||
|
tr.appendChild(headAction);
|
||||||
|
|
||||||
|
const thead = document.createElement("thead");
|
||||||
thead.appendChild(tr);
|
thead.appendChild(tr);
|
||||||
table.prepend(thead);
|
table.prepend(thead);
|
||||||
table.classList.add("table", "table-striped", "table-responsive-sm");
|
table.classList.add("table", "table-striped", "table-responsive-sm");
|
||||||
|
|
@ -79,34 +183,16 @@ function displayListOfReports(listOfReports) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function getReportHistory(event) {
|
function getReportHistory(event) {
|
||||||
const token = localStorage.getItem("token");
|
const url = getEndpointDomain() + "api/v1/reports";
|
||||||
const url = getEndpointDomain() + "backend/list_report";
|
getDataFromEndpoint(url, displayListOfReports);
|
||||||
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();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function openEditReportForm(event) {
|
||||||
|
const url = getEndpointDomain() + "api/v1/report/" + this.dataset.rid;
|
||||||
|
getDataFromEndpoint(url, createEditReportForm);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
document.addEventListener("DOMContentLoaded", getReportHistory);
|
document.addEventListener("DOMContentLoaded", getReportHistory);
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue