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

Add button animations

Browse source
This commit is contained in:
Preston Doman 2019-03-06 23:13:09 -08:00
parent 729cce46b7
commit 84210d6dac
2 changed files with 25 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -50,6 +50,16 @@ function makeAjaxRequest(method, url, callback, optional, payload) {
xhr.send(payload);
}
function animateButton(target, buttonText) {
let button = target;
button.disabled = true;
button.innerHTML = "";
let span = document.createElement("span");
span.classList.add("spinner-border", "spinner-border-sm");
button.appendChild(span);
button.appendChild(document.createTextNode(buttonText));
}
function updateSection(parsedData, saveButton) {
const sectionIdStr = "#section-" + parsedData.id + "-";
const sectionState = document.querySelector(sectionIdStr + "state");
@ -58,7 +68,6 @@ function updateSection(parsedData, saveButton) {
// A completed section gets a header icon
if (parsedData.completed) {
const sectionAlert = collapseDiv.querySelector(".section-alert");
console.log(sectionAlert);
if (sectionAlert) {
collapseDiv.firstChild.removeChild(sectionAlert);
}
@ -527,12 +536,14 @@ document.addEventListener("click", function(event) {
makeAjaxRequest("GET", url, displayReport);
} else if (event.target.classList.contains("review-report")) {
event.preventDefault();
console.log("review-report");
const result = confirm("Are you sure you want to submit this report for review?");
if (result) {
animateButton(event.target, " Submitting...");
const url = getEndpointDomain() + "api/v1/report/" + event.target.dataset.rid;
makeAjaxRequest("PUT", url, function(parsedData) {
alert(parsedData.message);
event.target.disabled = false;
event.target.innerHTML = "Submit for Review";
location.reload(true);
});
}
@ -541,9 +552,12 @@ document.addEventListener("click", function(event) {
console.log("finalize-report");
const result = confirm("Are you sure you want to finalize this report? This means you will no longer be able to modify it.");
if (result) {
animateButton(event.target, " Submitting...");
const url = getEndpointDomain() + "api/v1/report/" + event.target.dataset.rid + "/final";
makeAjaxRequest("PUT", url, function(parsedData) {
alert(parsedData.message);
event.target.disabled = false;
event.target.innerHTML = "Finalize Report";
location.reload(true);
});
}
@ -552,9 +566,12 @@ document.addEventListener("click", function(event) {
const title = document.querySelector("#editReportModalLabel").textContent;
const result = confirm("Are you sure you want to delete the report \"" + title + "\"?");
if (result) {
animateButton(event.target, " Deleting...");
const url = getEndpointDomain() + "api/v1/report/" + event.target.dataset.rid;
makeAjaxRequest("DELETE", url, function(parsedData) {
alert(parsedData.message);
event.target.disabled = false;
event.target.innerHTML = "Delete Report";
location.reload(true);
});
}
@ -588,12 +605,7 @@ document.addEventListener("submit", function(event) {
if (event.target.classList.contains("section-form")) {
event.preventDefault();
let saveButton = event.target.lastElementChild;
saveButton.disabled = true;
saveButton.innerHTML = "";
let span = document.createElement("span");
span.classList.add("spinner-border", "spinner-border-sm");
saveButton.appendChild(span);
saveButton.appendChild(document.createTextNode(" Saving..."));
animateButton(saveButton, " Saving...");
const formData = new FormData(event.target);
const url = getEndpointDomain() + "api/v1/report/" + event.target.dataset.rid + "/section/" + event.target.dataset.sid;
makeAjaxRequest("PUT", url, updateSection, saveButton, formData);

9
front/static/new_report.html
View file

@ -43,16 +43,16 @@
<div class="col-sm-6 mx-auto">
<div class="card bg-light text-dark">
<div class="card-header">
<h3>Create a new report</h3>
<h3>Create A New Report</h3>
</div>
<div class="card-body">
<form class="form new-report-form" autocomplete="off">
<div class="form-group">
<label for="title">Report title:</label>
<label for="title">Report Title:</label>
<input type="text" class="form-control" name="title" id="title" autofocus>
</div>
<div class="form-group">
<label for="reference">Ticket number (if available):</label>
<label for="reference">Ticket Number (if available):</label>
<input type="text" class="form-control" name="reference" id="reference">
</div>
<button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#newReportModal">Create</button>
@ -81,7 +81,8 @@
</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-report-button" >Submit Report</button>
<button type="button" class="btn btn-primary finalize-report">Finalize Report</button>
<button type="button" class="btn btn-primary review-report">Submit for Review</button>
</div>
</div>
</div>