Skip to content
This repository has been archived by the owner on Nov 12, 2023. It is now read-only.

Commit

Permalink
Merge pull request #85 from edx-olive/vladimir/popup-totifications-up…
Browse files Browse the repository at this point in the history 
…date-text

fix: [CAM2-762] added changes to popup notification url inside the text.
  • Loading branch information
@vladimirCampusGovIl
vladimirCampusGovIl authored Mar 20, 2022
2 parents ba10fa9 + 9e8237f commit 88d50d0
Showing 1 changed file with 139 additions and 160 deletions.
299 changes: 139 additions & 160 deletions cms/templates/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,179 +73,158 @@
<%include file="widgets/header.html" args="online_help_token=online_help_token" />

<div id="page-alert">
<!-- Start temporary notification: after update to KOA no need in this code -->
<div id="freeze-notification" class="wrapper wrapper-alert wrapper-alert-announcement">
<div class="alert announcement has-actions">
<span class="feedback-symbol fa fa-bullhorn" aria-hidden="true"></span>

<div class="copy" style="direction: rtl;">
<h2 class="title title-3 title-text"></h2>

<p class="body-text"></p>
</div>

<ul>
<li class="action-dismiss">
<div class="button" onclick="toggleNotification(null, 'freeze-notification', false)">
<span class="icon fa fa-times-circle" aria-hidden="true"></span>
<span class="button-copy">${_("Hide")}</span>
</div>
</li>
</ul>
</div>
</div>
<!-- Start temporary notification: after update to KOA no need in this code -->
<div id="freeze-notification" class="wrapper wrapper-alert wrapper-alert-announcement">
<div class="alert announcement has-actions">
<span class="feedback-symbol fa fa-bullhorn" aria-hidden="true"></span>

<script type="text/javascript">
<div class="copy" style="direction: rtl; text-align: right;">
<h2 class="title title-3 title-text"></h2>

// ttl in milliseconds
function setWithExpiry(key, value, ttl) {
const now = new Date()
<p class="body-text"></p>
</div>

// `item` is an object which contains the original value
// as well as the time when it's supposed to expire
const item = {
value: value,
expiry: now.getTime() + ttl,
}
localStorage.setItem(key, JSON.stringify(item))
}
<ul>
<li class="action-dismiss">
<div class="button" onclick="toggleNotification(null, 'freeze-notification', false)">
<span class="icon fa fa-times-circle" aria-hidden="true"></span>
<span class="button-copy">${_("Hide")}</span>
</div>
</li>
</ul>
</div>
</div>

function getWithExpiry(key) {
const itemStr = localStorage.getItem(key)
// if the item doesn't exist, return null
if (!itemStr) {
return null
}
const item = JSON.parse(itemStr)
const now = new Date()
// compare the expiry time of the item with the current time
if (now.getTime() > item.expiry) {
// If the item is expired, delete the item from storage
// and return null
localStorage.removeItem(key)
return undefined
}
return item.value
<script type="text/javascript">

const _jsonConfigFileUrl = "https://api.npoint.io/b9000ffbcc3c506ca699";
const _showFreezeNotification = "_showFreezeNotification";
//const _ttl = 10000; // 10 sec
const _ttl = 3600000; // show this notification once per 1 hour
const _today = new Date();
const _notificationDefault =
{
id: 0,
startDateStr: "03-01-2022 00:00:00 UTC+02:00",
stopDateStr: "04-01-2030 23:59:59 UTC+03:00",
text: {
title: "לא הצלחנו לטעון את תוכן ההודעה.",
body: [
"ניתן לפנות לתמיכה במייל: <a href='mailto:support.koa@campus.gov.il'>support.koa@campus.gov.il</a>",
]
}

function toggleNotification($el, id, isShow) {
// prepare element in case element is not provided
if (!$el) $el = $('#' + id);

// toggle in case status is not provided
if (isShow == null || isShow == undefined)
isShow = !$el.hasClass('is-shown');

// toggle the notification
if (isShow)
$el.addClass('is-shown');
else
$el.removeClass('is-shown');
};
var _notifications = [];

// ttl in milliseconds
function setWithExpiry(key, value, ttl) {
const now = new Date()

// `item` is an object which contains the original value
// as well as the time when it's supposed to expire
const item = {
value: value,
expiry: now.getTime() + ttl,
}
localStorage.setItem(key, JSON.stringify(item))
}

function getWithExpiry(key) {
const itemStr = localStorage.getItem(key)
// if the item doesn't exist, return null
if (!itemStr) {
return null
}
const item = JSON.parse(itemStr)
const now = new Date()
// compare the expiry time of the item with the current time
if (now.getTime() > item.expiry) {
// If the item is expired, delete the item from storage
// and return null
localStorage.removeItem(key)
return undefined
}
return item.value
}

function toggleNotification($el, id, isShow) {
// prepare element in case element is not provided
if (!$el) $el = $('#' + id);

// toggle in case status is not provided
if (isShow == null || isShow == undefined)
isShow = !$el.hasClass('is-shown');

// toggle the notification
if (isShow)
$el.addClass('is-shown');
else {
$el.removeClass('is-shown');

// in case user don't want to see the message again --> set flag for message dissapear
setWithExpiry(_showFreezeNotification, 1, _ttl); // add to localstorage
}
}

function showFreezeNotification(ttl, text) {
let _isExist = getWithExpiry(_showFreezeNotification);
if (_isExist == null) {
let _freezeNotif = $('#freeze-notification');
let _title = $('#freeze-notification .title-text');
let _body = $('#freeze-notification .body-text');

// set title text
_title.html('<div>' + text.title + '</div><br/>');

// set body text(s)
text.body.forEach(bodyRow => {
if (!bodyRow) _body.append('<br/>');
else _body.append('<div>' + bodyRow + '</div>');
});

function showFreezeNotification(ttl, text) {
const _showFreezeNotification = "_showFreezeNotification";

let _isExist = getWithExpiry(_showFreezeNotification);
if (_isExist == null) {
let _freezeNotif = $('#freeze-notification');
let _title = $('#freeze-notification .title-text');
let _body = $('#freeze-notification .body-text');
toggleNotification(_freezeNotif, true); // hide show notification

// set title text
_title.html('<div>' + text.title + '</div><br/>');
return true;
}
};

// set body text(s)
text.body.forEach(bodyRow => {
if (!bodyRow) _body.append('<br/>');
else _body.append('<div>' + bodyRow + '</div>');
});
function isShowFreezeNotification() {
_notifications.forEach(element => {

setWithExpiry(_showFreezeNotification, 1, ttl); // add to localstorage
toggleNotification(_freezeNotif, true); // hide show notification
// create date objects
element.startDate = new Date(element.startDateStr);
element.stopDate = new Date(element.stopDateStr);

return true;
// check the date objects
if (element.startDate <= _today && element.stopDate > _today) {
return !showFreezeNotification(_ttl, element.text);
}
};

function isShowFreezeNotification() {
const _today = new Date();
const _notifications = [ // !!!! TODO: move to configuration of Admin panel !!!!
//{
// id: 1,
// startDate: new Date('2022-03-08T00:00:00'),
// stopDate: new Date('2022-03-14T23:59:59'),
// text: {
// title: "הקפאת פעילות בסטודיו קמפוסIL מתאריך 15.3",
// body: [
// "שימו לב! לקראת שדרוג אתר הלמידה והסטודיו, בין התאריכים 18.3 – 15.3 לא ניתן יהיה לבצע שינויים או לפתח קורסים באמצעות הסטודיו. החל מה- 20.3 נעבור לעבוד בסטודיו בגרסת Koa. לקראת ההקפאה והמעבר מומלץ לגבות את עבודתכם.",
// "",
// "לפרטים נוספים היכנסו לסביבת הבדיקות, <a href='https://courses.koastage.campus.gov.il/courses/course-v1:CampusIL+koa-release-notes-he+2022_1/about'>ולקורס ההכרות עם תהליך השדרוג</a>.",
// "או פנו אלינו במייל: <a href='mailto:support.koa@campus.gov.il'>support.koa@campus.gov.il</a>"
// ]
// }
//},
//{
// id: 2,
// startDate: new Date('2022-03-15T00:00:00'),
// stopDate: new Date('2022-03-19T23:59:59'),
// text: {
// title: "הקפאת פעילות בסטודיו קמפוסIL",
// body: [
// "שימו לב! לקראת שדרוג אתר הלמידה והסטודיו, בין התאריכים 19.3 – 15.3 לא ניתן לעבוד בסטודיו קמפוסIL.",
// "החל מה- 20.3 נעבור לעבוד בסטודיו בגרסת Koa.",
// "",
// "לפרטים נוספים היכנסו <a href='https://courses.koastage.campus.gov.il/courses'>לסביבת הבדיקות</a>, ול<a href='https://courses.koastage.campus.gov.il/courses/course-v1:CampusIL+koa-release-notes-he+2022_1/about'>קורס ההכרות</a> עם תהליך השדרוג.",
// "או פנו אלינו במייל: <a href='mailto:support.koa@campus.gov.il'>support.koa@campus.gov.il</a>"
// ]
// }
//},
{
id: 3,
startDate: new Date("03-19-2022 00:00:00 UTC+02:00"),
stopDate: new Date("04-07-2022 23:59:59 UTC+03:00"),
text: {
title: "עברנו לסטודיו החדש!",
body: [
"שימו לב! אתם נמצאים כרגע בסטודיו הישן. אין לבצע כאן כל שינוי בקורסים.",
"להמשך פיתוח הקורס שלכם, ולהתאמת קורס קיים לסביבת koa היכנסו לסטודיו החדש: <a href='https://koaprod.campus.gov.il'>koaprod.campus.gov.il</a>.",
"החל מה- 8.4 נחזור לפעילות רגילה בסטודיו ובגרסה החדשה.",
"לפרטים נוספים פנו אלינו במייל: <a href='mailto:support.koa@campus.gov.il'>support.koa@campus.gov.il</a>",
"או הצטרפו לשעות הקבלה שלנו בימים שני וחמשי בשעות 10-11 <a href='https://midlink-il.zoom.us/j/87915254146'>קישור</a>"
]
}
},
// },
// {
// id: 4,
// startDate: new Date('2022-03-10T00:00:00'),
// stopDate: new Date('2022-03-23T23:59:59'),
// text: {
// title: "ברוכים הבאים לסטודיו החדש של קמפוסIL!",
// body: [
// "ברוכים הבאים, מוזמנים להתרשם מהשינויים והשיפורים לסטודיו קמפוסIL.",
// "ניתן להמשיך ולפתח כאן את הקורסים. מומלץ לגבות את עבודתכם מעת לעת.",
// "שימו לב! שינויים שתפורסמו יהיו גלויים ללומדים רק החל ממועד השדרוג ב- 24.3.",
// "",
// "לפרטים נוספים היכנסו לקורס ההכרות עם תהליך השדרוג {URL}.",
// "או פנו אלינו במייל: <a href='mailto:support.koa@campus.gov.il'>support.koa@campus.gov.il</a>"
// ]
// }
// },
];

_notifications.forEach(element => {
if (element.startDate <= _today && element.stopDate > _today) {
//return !showFreezeNotification(10000, element.text); // show this notification once per 10 sec
return !showFreezeNotification(3600000, element.text); // show this notification once per 1 hour
}
});
}

isShowFreezeNotification();
</script>
});
}

fetch(_jsonConfigFileUrl)
.then(response => {
return response.json();
})
.then(jsondata => {
// set notifications data
_notifications = jsondata.notifications;

// show notification
isShowFreezeNotification();
}).catch(function(error) {
// set the default notification message
_notifications.push(_notificationDefault);

// show notification
isShowFreezeNotification();

// add error to logs
console.log(error);
});

<!-- Stop temporary notification -->
</script>
<!-- Stop temporary notification -->
<%block name="page_alert"></%block>
</div>

Expand Down

0 comments on commit 88d50d0

Please sign in to comment.