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

Merge pull request #50 from danieldupriest/edit-report-form

Browse source 
Edit report form
This commit is contained in:
hui2018 2019-02-02 08:43:51 -08:00 committed by GitHub
commit 78c9ec522d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 190 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
front/static/js/login.js
View file

@ -13,7 +13,7 @@ function postToLoginEndpoint(event) {
const url = "https://reqres.in/api/login" // mock api service
const xhr = new XMLHttpRequest();
console.log(`User credentials:\n${JSON.stringify(credentials)}`);
console.log("User credentials:\n" + JSON.stringify(credentials));
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/json");
@ -21,14 +21,14 @@ function postToLoginEndpoint(event) {
if (this.readyState === 4) {
if (this.status === 200) {
console.log("LOGIN SUCCESS!");
console.log(`Server response:\n${this.response}`);
console.log("Server response:\n" + this.response);
token = JSON.parse(this.response).token;
localStorage.setItem("token", token);
window.location.replace("home.html");
} else {
console.error("LOGIN FAILURE!");
console.error(`Server status: ${this.status}`);
console.error(`Server response:\n${this.response}`);
console.error("Server status: " + this.status);
console.error("Server response:\n" + this.response);
displayErrorMessage(this.response);
}
}

10
front/static/js/logout.js
View file

@ -6,18 +6,18 @@ function postToLogoutEndpoint(event) {
const xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.setRequestHeader("Authorization", `Token ${token}`);
xhr.setRequestHeader("Authorization", "Token " + token);
xhr.onreadystatechange = function() {
if (this.readyState === 4) {
if (this.status === 200) {
console.log("LOGOUT SUCCESS!");
console.log(`Server response:\n${this.response}`);
console.log("Server response:\n" + this.response);
localStorage.removeItem("token");
window.location.replace("index.html");
} else {
console.log("LOGOUT FAILURE!");
console.log(`Server status: ${this.status}`);
console.log(`Server response:\n${this.response}`);
console.error("LOGOUT FAILURE!");
console.error("Server status: " + this.status);
console.error("Server response:\n" + this.response);
}
}
};

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

@ -14,7 +14,7 @@ function getEndpointDomain() {
else
OSName = "Unknown OS";
console.log(`Detected operating system: ${OSName}`);
console.log("Detected operating system: " + OSName);
if (OSName === "Windows") {
domain = "https://192.168.99.100:8444/";
@ -25,24 +25,25 @@ function getEndpointDomain() {
return domain;
}
// Make a GET request to url and pass response to callback function
function getDataFromEndpoint(url, callback) {
const token = localStorage.getItem("token");
const xhr = new XMLHttpRequest();
console.log(`Attempting a connection to the following endpoint: ${url}`);
console.log("Attempting a connection to the following endpoint: " + url);
xhr.open("GET", url, true);
xhr.onreadystatechange = function() {
if (this.readyState === 4) {
if (this.status === 200) {
console.log("GET SUCCESS!");
console.log(`Server response:\n${this.response}`);
console.log("Server response:\n" + this.response);
parsedData = JSON.parse(this.response);
callback(parsedData);
} else {
console.error("GET FAILURE!");
console.error(`Server status: ${this.status}`);
console.error(`Server response:\n${this.response}`);
console.error("Server status: " + this.status);
console.error("Server response:\n" + this.response);
}
}
};
@ -54,6 +55,172 @@ function getDataFromEndpoint(url, callback) {
xhr.send();
}
// Wraps a Bootstrap form group around a field
function createFormGroup(key, field) {
const formGroup = document.createElement("div")
formGroup.classList.add("form-group");
const label = document.createElement("label");
label.innerHTML = field.label;
label.setAttribute("for", key);
const input = document.createElement("input");
input.name = key;
input.id = key;
switch(field.type) {
case "boolean":
input.type = "checkbox";
if (field.value === true)
input.setAttribute("checked", "checked");
input.classList.add("form-check-input");
formGroup.classList.add("form-check");
label.classList.add("form-check-label");
formGroup.appendChild(input); // Reversed order compared to others
formGroup.appendChild(label);
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);
break;
case "file":
input.type = "file";
input.classList.add("form-control-file");
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);
break;
default:
break;
}
return formGroup;
}
function createCollapsibleCard(key, sectionTitle) {
// Create card and header
const card = document.createElement("div");
card.classList.add("card");
const cardHeader = document.createElement("div");
cardHeader.classList.add("card-header");
// Create h2, button. Append button to h2, h2 to header, and header to card
const h2 = document.createElement("h2");
const button = document.createElement("button");
button.classList.add("btn", "btn-link");
button.type = "button";
button.setAttribute("data-toggle", "collapse");
button.setAttribute("data-target", "#collapse" + key);
button.innerHTML = sectionTitle;
h2.appendChild(button);
cardHeader.appendChild(h2);
card.appendChild(cardHeader);
return card;
}
function createCollapsibleCardBody(key, form, sectionDescription, sectionCompleted) {
// Create wrapper div
const div = document.createElement("div");
sectionCompleted ? div.classList.add("collapse") : div.classList.add("collapse", "show");
div.setAttribute("data-parent", "#editReportAccordion");
div.id = "collapse" + key;
// Create card body. Append form to body, body to wrapper div
const cardBody = document.createElement("div");
cardBody.classList.add("card-body");
cardBody.insertAdjacentHTML("beforeend", sectionDescription);
cardBody.appendChild(form);
div.appendChild(cardBody);
return div;
}
function createEditReportForm(parsedData) {
const col = document.querySelector(".col-sm-8");
const fragment = document.createDocumentFragment();
while (col.firstChild) {
col.removeChild(col.firstChild)
}
// Add report title and date to card header
const reportTitle = parsedData.title;
const dateCreated = new Date(parsedData.date_created).toLocaleDateString("en-US");
const h3 = document.createElement("h3");
h3.innerHTML = reportTitle + " " + dateCreated;
h3.classList.add("text-center");
fragment.appendChild(h3);
// Create accordion
const accordion = document.createElement("div");
accordion.classList.add("accordion");
accordion.id = "editReportAccordion";
// Traverse the report's sections array
const sections = parsedData.sections;
for (let key in sections) {
let section = sections[key];
let collapsibleCard = createCollapsibleCard(key, section.title)
// Create a new form with the section key index as id
let form = document.createElement("form");
form.classList.add("form");
form.id = "form" + key;
// Traverse the fields of this section
let fields = section.fields;
for (let key in fields) {
let field = fields[key];
console.log("Field label: " + field.label);
console.log("Field type: " + field.type);
console.log("Field value: " + field.value);
// Create a form group for each field and add it to the form
let formGroup = createFormGroup(key, field);
form.appendChild(formGroup);
}
// Add save button to the current form
let saveButton = document.createElement("button");
saveButton.innerHTML = "Save";
saveButton.type = "submit";
saveButton.classList.add("btn", "btn-primary"); // TODO: add eventListener
form.appendChild(saveButton);
// Create collapsible card body, append form to it, append card to accordion
let cardBody = createCollapsibleCardBody(key, form, section.html_description, section.completed);
collapsibleCard.appendChild(cardBody);
accordion.appendChild(collapsibleCard);
}
// Add submit button to accordion
let submitButton = document.createElement("button");
submitButton.innerHTML = "Submit Report";
submitButton.type = "submit";
submitButton.classList.add("btn", "btn-primary", "btn-lg", "btn-block"); // TODO: add eventListener
accordion.appendChild(submitButton);
fragment.appendChild(accordion)
col.appendChild(fragment);
}
function displayListOfReports(parsedData) {
const cardBody = document.querySelector(".card-body");
@ -67,10 +234,12 @@ function displayListOfReports(parsedData) {
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") {
@ -78,6 +247,7 @@ function displayListOfReports(parsedData) {
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");
@ -148,4 +318,10 @@ function getReportHistory(event) {
getDataFromEndpoint(url, displayListOfReports);
}
function openEditReportForm(event) {
const url = getEndpointDomain() + "api/v1/report/" + this.dataset.rid;
getDataFromEndpoint(url, createEditReportForm);
}
document.addEventListener("DOMContentLoaded", getReportHistory);