Skip to content

Commit

Permalink
feat: hide the survey report banner for a month after clicking the di…
Browse files Browse the repository at this point in the history
…smiss button (#34914)

This hides the survey report banner from the Django Admin for a
particular user for one month after they click on the "dismiss" button.
This is done completely on the client side using localStorage, so the
same user could see the banner again if they're logging in with a
different browser.
Asespinel authored and ormsbee committed Jun 20, 2024
1 parent 6ab0b7a commit aa70fea
Showing 2 changed files with 45 additions and 4 deletions.
Original file line number Diff line number Diff line change
@@ -1,11 +1,51 @@
$(document).ready(function(){
// Function to get user ID
function getUserId() {
return $('#userIdSurvey').val();
}

// Function to get current time in milliseconds
function getCurrentTime() {
return new Date().getTime();
}

// Function to set dismissal time and expiration time in local storage
function setDismissalAndExpirationTime(userId, dismissalTime) {
let expirationTime = dismissalTime + (30 * 24 * 60 * 60 * 1000); // 30 days
localStorage.setItem('bannerDismissalTime_' + userId, dismissalTime);
localStorage.setItem('bannerExpirationTime_' + userId, expirationTime);
}

// Function to check if banner should be shown or hidden
function checkBannerVisibility() {
let userId = getUserId();
let bannerDismissalTime = localStorage.getItem('bannerDismissalTime_' + userId);
let bannerExpirationTime = localStorage.getItem('bannerExpirationTime_' + userId);
let currentTime = getCurrentTime();

if (bannerDismissalTime && bannerExpirationTime && currentTime > bannerExpirationTime) {
// Banner was dismissed and it's not within the expiration period, so show it
$('#originalContent').show();
} else if (bannerDismissalTime && bannerExpirationTime && currentTime < bannerExpirationTime) {
// Banner was dismissed and it's within the expiration period, so hide it
$('#originalContent').hide();
} else {
// Banner has not been dismissed ever so we need to show it.
$('#originalContent').show();
}
}

// Click event for dismiss button
$('#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();
let userId = getUserId();
let dismissalTime = getCurrentTime();
setDismissalAndExpirationTime(userId, dismissalTime);
});
});

// Check banner visibility on page load
checkBannerVisibility();
// When the form is submitted
$("#survey_report_form").submit(function(event){
event.preventDefault(); // Prevent the form from submitting traditionally
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{% 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 id="originalContent" style="border: 3px solid #06405d; margin-bottom: 50px; rgb(0 0 0 / 18%) 0px 3px 5px; display: none;">
<div style="background-color: #06405d;padding: 17px 37px;">
<h1 style="margin: 0; color: #FFFF; font-weight: 600;">Join the Open edX Data Sharing Initiative and shape the future of learning</h1>
</div>
@@ -15,6 +15,7 @@ <h1 style="margin: 0; color: #FFFF; font-weight: 600;">Join the Open edX Data Sh
<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 %}
<input type="hidden" id="userIdSurvey" value="{{ user.id }}">
<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>

0 comments on commit aa70fea

Please sign in to comment.