Skip to content

Commit

Permalink
feat: add dismiss button to survey report banner (#34160)
Browse files Browse the repository at this point in the history
* feat: add dismiss button to survey report banner

* refactor: move banner script to js file

* fix: remove not in conditional
  • Loading branch information
Alec4r committed Feb 29, 2024
1 parent 69e8bb1 commit da74d0b
Show file tree
Hide file tree
Showing 3 changed files with 58 additions and 2 deletions.
6 changes: 5 additions & 1 deletion lms/templates/admin/base_site.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{% extends "admin/base.html" %}
{% load i18n admin_urls %}
{% load i18n admin_urls static %}
{% block title %}{{ title }} | {{ site_title|default:_('Django site admin') }}{% endblock %}
{% block branding %}
<h1 id="site-name"><a href="{% url 'admin:index' %}">{{ site_header|default:_('Django administration') }}</a></h1>
Expand All @@ -21,6 +21,10 @@ <h1 id="site-name"><a href="{% url 'admin:index' %}">{{ site_header|default:_('D

{% endblock %}

{% block extrahead %}
<script src="{% static 'admin/js/vendor/jquery/jquery.js' %}"></script>
{% endblock %}

{% block messages %}{{ block.super }}
{% include "survey_report/admin_banner.html" %}
{% endblock %}
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
$(document).ready(function(){
$('#dismissButton').click(function() {
$('#originalContent').slideUp('slow', function() {
// If you want to do something after the slide-up, do it here.
// For example, you can hide the entire div:
// $(this).hide();
});
});
// When the form is submitted
$("#survey_report_form").submit(function(event){
event.preventDefault(); // Prevent the form from submitting traditionally

// Make the AJAX request
$.ajax({
url: $(this).attr("action"),
type: $(this).attr("method"),
data: $(this).serialize(),
success: function(response){
// Hide the original content block
$("#originalContent").slideUp(400, function() {
//$(this).css('display', 'none');
// Show the thank-you message block with slide down effect
$("#thankYouMessage").slideDown(400, function() {
// Wait for 3 seconds (3000 milliseconds) and then slide up the thank-you message
setTimeout(function() {
$("#thankYouMessage").slideUp(400);
}, 3000);
});
});
},
error: function(error){
// Handle any errors
console.error("Error sending report:", error);
}
});
});
});
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
{% block survey_report_banner %}
{% load static %}
{% if show_survey_report_banner %}
<div id="originalContent" style="border: 3px solid #06405d; margin-bottom: 50px; rgb(0 0 0 / 18%) 0px 3px 5px;">
<div style="background-color: #06405d;padding: 17px 37px;">
Expand All @@ -11,11 +12,25 @@ <h1 style="margin: 0; color: #FFFF; font-weight: 600;">Join the Open edX Data Sh
<p>If you agree and want to send a report you can click the button below. You can always send reports and see the status of reports you have sent in the past at <a href="/admin/survey_report/surveyreport/">admin/survey_report/surveyreport/</a> .</p>
</div>
<div style="display: flex; justify-content: flex-end; padding: 0 37px 17px;">
<form id='survey_report_form' method="POST" action="/survey_report/generate_report" style="margin: 0; padding: 0;">
<button id="dismissButton" type="button" style="background-color:var(--close-button-bg); color: var(--button-fg); border: none; border-radius: 4px; padding: 10px 20px; margin-right: 10px; cursor: pointer;">Dismiss</button>
<form id='survey_report_form' method="POST" action="/survey_report/generate_report" style="margin: 0; padding: 0;">
{% csrf_token %}
<button type="submit" style="background-color: #377D4D; color: var(--button-fg); border: none; border-radius: 4px; padding: 10px 20px; cursor: pointer;">Send Report</button>
</form>
</div>
</div>
<div id="thankYouMessage" style="display: none; background-color: var(--darkened-bg); padding: 20px 40px; margin-bottom: 30px;box-shadow: rgb(0 0 0 / 18%) 0px 3px 5px;">
<div style="display: flex; align-items: center;">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24">
<g fill="#377D4D"><path d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2s10 4.477 10 10Z"></path>
<path d="M16.03 8.97a.75.75 0 0 1 0 1.06l-5 5a.75.75 0 0 1-1.06 0l-2-2a.75.75 0 1 1 1.06-1.06l1.47 1.47l2.235-2.236L14.97 8.97a.75.75 0 0 1 1.06 0Z" fill="#FFF"></path>
</g>
</svg>
<span style="font-size: 16px; margin-left: 15px;">Thank you for your collaboration and support! Your contribution is greatly appreciated and will help us continue to improve.</span>
</div>
</div>
{% endif %}

<script src="{% static 'survey_report/js/admin_banner.js' %}"></script>

{% endblock %}

0 comments on commit da74d0b

Please sign in to comment.