Merge pull request #72 from danieldupriest/save-section
Add frontend save section functionality
This commit is contained in:
commit
69b57ff45a
2 changed files with 37 additions and 3 deletions
|
@ -154,6 +154,8 @@ def report_detail(request, report_pk):
|
||||||
# update a section with new data
|
# update a section with new data
|
||||||
@api_view(['PUT'])
|
@api_view(['PUT'])
|
||||||
def section(request, report_pk, section_pk):
|
def section(request, report_pk, section_pk):
|
||||||
|
|
||||||
|
""" original stub
|
||||||
data = {
|
data = {
|
||||||
"message": "Updated report {0}, section {1}.".format(report_pk, section_pk),
|
"message": "Updated report {0}, section {1}.".format(report_pk, section_pk),
|
||||||
"fields": {
|
"fields": {
|
||||||
|
@ -163,5 +165,11 @@ def section(request, report_pk, section_pk):
|
||||||
"lowest_fare_screenshot": "image",
|
"lowest_fare_screenshot": "image",
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
"""
|
||||||
|
|
||||||
|
data = {
|
||||||
|
"message": "Updated report {0}, section {1}.".format(report_pk, section_pk),
|
||||||
|
"request.data": request.data
|
||||||
|
}
|
||||||
|
|
||||||
return JsonResponse(data)
|
return JsonResponse(data)
|
||||||
|
|
|
@ -9,6 +9,10 @@ function getEndpointDomain() {
|
||||||
return "https://" + window.location.hostname + ":8444/";
|
return "https://" + window.location.hostname + ":8444/";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function alertCallback(parsedData) {
|
||||||
|
alert(JSON.stringify(parsedData));
|
||||||
|
}
|
||||||
|
|
||||||
function makeAjaxRequest(method, url, callback, type, payload) {
|
function makeAjaxRequest(method, url, callback, type, payload) {
|
||||||
const token = localStorage.getItem("token");
|
const token = localStorage.getItem("token");
|
||||||
const xhr = new XMLHttpRequest();
|
const xhr = new XMLHttpRequest();
|
||||||
|
@ -17,7 +21,17 @@ function makeAjaxRequest(method, url, callback, type, payload) {
|
||||||
|
|
||||||
xhr.open(method, url, true);
|
xhr.open(method, url, true);
|
||||||
xhr.setRequestHeader("Authorization", "Bearer " + token);
|
xhr.setRequestHeader("Authorization", "Bearer " + token);
|
||||||
method === "POST" ? xhr.setRequestHeader("Content-Type", "application/json") : payload = null;
|
|
||||||
|
switch (method) {
|
||||||
|
case "PUT":
|
||||||
|
break;
|
||||||
|
case "POST":
|
||||||
|
xhr.setRequestHeader("Content-Type", "application/json");
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
payload = null;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
xhr.onreadystatechange = function() {
|
xhr.onreadystatechange = function() {
|
||||||
if (this.readyState === 4) {
|
if (this.readyState === 4) {
|
||||||
|
@ -217,8 +231,10 @@ function createReportForm(parsedData, type) {
|
||||||
|
|
||||||
// Create a new form with the section key index as id
|
// Create a new form with the section key index as id
|
||||||
let form = document.createElement("form");
|
let form = document.createElement("form");
|
||||||
form.classList.add("form");
|
form.classList.add("form", "section-form");
|
||||||
form.id = "form" + key;
|
form.id = "form" + key;
|
||||||
|
form.setAttribute("data-rid", parsedData.report_pk);
|
||||||
|
form.setAttribute("data-sid", section.id);
|
||||||
|
|
||||||
// Traverse the fields of this section
|
// Traverse the fields of this section
|
||||||
let fields = section.fields;
|
let fields = section.fields;
|
||||||
|
@ -238,7 +254,7 @@ function createReportForm(parsedData, type) {
|
||||||
let saveButton = document.createElement("button");
|
let saveButton = document.createElement("button");
|
||||||
saveButton.innerHTML = "Save";
|
saveButton.innerHTML = "Save";
|
||||||
saveButton.type = "submit";
|
saveButton.type = "submit";
|
||||||
saveButton.classList.add("btn", "btn-primary"); // TODO: add eventListener
|
saveButton.classList.add("btn", "btn-primary", "save-section"); // TODO: add eventListener
|
||||||
form.appendChild(saveButton);
|
form.appendChild(saveButton);
|
||||||
|
|
||||||
// Create collapsible card body, append form to it, append card to accordion
|
// Create collapsible card body, append form to it, append card to accordion
|
||||||
|
@ -411,3 +427,13 @@ if (newReportForm) {
|
||||||
this.reset();
|
this.reset();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
document.addEventListener("submit", function(event) {
|
||||||
|
if (event.target.classList.contains("section-form")) {
|
||||||
|
event.preventDefault();
|
||||||
|
console.log(event.target);
|
||||||
|
const formData = new FormData(event.target);
|
||||||
|
const url = getEndpointDomain() + "api/v1/report/" + event.target.dataset.rid + "/section/" + event.target.dataset.sid;
|
||||||
|
makeAjaxRequest("PUT", url, alertCallback, null, formData);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
Loading…
Reference in a new issue