Skip to content

Commit

Permalink
Move feedback modal to labs engine
Browse files Browse the repository at this point in the history
  • Loading branch information
neoformit committed Jul 15, 2024
1 parent bdf1e5b commit d0bf09a
Showing 1 changed file with 0 additions and 127 deletions.
127 changes: 0 additions & 127 deletions subdomains/singlecell/templates/conclusion.html
Original file line number Diff line number Diff line change
Expand Up @@ -40,133 +40,6 @@ <h4 class="my-3">What do you think of the {{ lab_name }}?</h4>
{% endif %}


<!-- CONTRIBUTORS -->


<section id="conclusionExtra">
{{ conclusion_extra_md|safe }}
</section>

<div class="modal fade" id="feedbackModal" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form id="feedbackForm">

{% csrf_token %}

<div class="modal-header">
<h5 class="modal-title">Feedback</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
onclick="clearForm()"></button>
</div>
<div class="modal-body">
<div class="default-content">
<p>
We'd love to hear your feedback on the Galaxy {{ site_name }} {{ lab_name }}. Please let us know what
you think!
</p>
<div class="mb-3">
<label for="nameInput" class="form-label">Name</label>

<input type="text" class="form-control" id="nameInput" required>
</div>
<div class="mb-3">
<label for="emailInput" class="form-label">Email address</label>
<input type="email" class="form-control" id="emailInput" aria-describedby="emailHelp" required>
<div id="emailHelp" class="form-text">In case we'd like to contact you for more information.</div>
</div>
<div class="mb-3">
<label for="messageInput" class="form-label">Your feedback</label>
<textarea class="form-control" id="messageInput" rows="8" required></textarea>
</div>
</div>

<div class="success-content" style="display: none;">
<p class="alert alert-success">Thanks for your feedback!</p>
</div>

<div class="loading m-5 text-center" style="display: none;">
<img src="https://raw.githubusercontent.com/usegalaxy-au/galaxy-media-site/dev/webapp/home/static/home/img/spinner.svg" alt="Loading animation" width="150px">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" onclick="clearForm();">Close</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</div>


<script>
function clearForm() {
setTimeout(() => {
document.getElementById('feedbackForm').reset();
$('#feedbackForm .default-content').show();
$('#feedbackForm .success-content').hide();
$('#feedbackForm .loading').hide();
$('button[type="submit"]').show();
}, 500);
}

function submitForm(event) {
event.preventDefault();
$('#feedbackForm .loading').show();
$('#feedbackForm .default-content').hide();
$('button[type="submit"]').hide();

// Clear any previous errors
$('#feedbackForm .error-message').remove();
$('#feedbackForm .invalid').removeClass('invalid');

let formData = new FormData();
formData.append('name', $('#nameInput').val());
formData.append('email', $('#emailInput').val());
formData.append('message', $('#messageInput').val());
formData.append('feedback_email', '{{ feedback_email }}');

fetch('/lab/feedback/{{ subdomain }}', {
method: 'POST',
headers: {
'X-CSRFToken': getCsrfToken(),
},
body: formData,
}).then(r => r.json())
.then(data => {
if (data.success) {
showSuccess();
} else {
showErrors(JSON.parse(data.errors_json));
}
});
}

function getCsrfToken() {
return document.querySelector('[name=csrfmiddlewaretoken]').value;
}

function showSuccess() {
console.log("Form success");
$('#feedbackForm .loading').hide();
$('#feedbackForm .default-content').hide();
$('#feedbackForm .success-content').show();
}

function showErrors(errors) {
Object.keys(errors).forEach( (field) => {
errors[field].forEach( err => {
const msg = err.message;
$(`#${field}Input`)
.addClass('invalid')
.parent().append(`<small class="text-danger error-message">${msg}</small>`);
})
});
$('#feedbackForm .loading').hide();
$('#feedbackForm .default-content').show();
$('button[type="submit"]').show();
}

$('#feedbackForm').submit(submitForm);

</script>

0 comments on commit d0bf09a

Please sign in to comment.