diff --git a/front/static/js/login.js b/front/static/js/login.js index 66fd76f..8269c99 100644 --- a/front/static/js/login.js +++ b/front/static/js/login.js @@ -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); } } diff --git a/front/static/js/logout.js b/front/static/js/logout.js index 4cdc571..c10c381 100644 --- a/front/static/js/logout.js +++ b/front/static/js/logout.js @@ -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); } } }; diff --git a/front/static/js/viewHistory.js b/front/static/js/viewHistory.js index b39f988..e4e78d2 100644 --- a/front/static/js/viewHistory.js +++ b/front/static/js/viewHistory.js @@ -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);