Files
Gainsight/Custom_Templates/customer_templates/DataSnipper/training_session.html.liquid

114 lines
4.6 KiB
Plaintext

{% include "header" %}
<main class="np-main np-training-session np-max-width np-page-container">
<div class="np-hidden-mobile" id="training-session-desktop">
{% include "training_session_desktop_view" %}
</div>
<div class="np-hidden-desktop" id="training-session-mobile">
{% include "training_session_mobile_view" %}
</div>
</main>
{% include "footer" %}
<style>
.np-training-session-sessions-title,
.np-training-session-zero-state-text {
color: #fff;
}
.np-resource-header-card,
.np-training-session .np-card-container {
border-radius:12px;
}
.np-training-session-tile {
background-color: #E7E9F5;
border-radius: 12px;
color: #0C176C;
}
.np-training-session-tile:hover {
background-color: #fff;
}
.np-training-session-tile-icon,
.np-training-session-tile-chevron,
.np-icon-back {
color: #0C176C;
}
.np-training-session .np-top-title,
.np-training-session .np-text-title {
color:#011638;
}
</style>
<script>
const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var day = "{{ training_session.day }}"
var month = "{{ training_session.month }}"
var year = "{{ training_session.year }}"
var timePeriod = document.querySelector("div.np-training-session-time > span:nth-child(2)").innerHTML.split(' - ')
var startTime = timePeriod[0];
var endTime = timePeriod[1];
var shortTimezone = document.querySelector("div.np-training-session-time > span:nth-child(3)").innerHTML
if (shortTimezone == "CET") {
shortTimezone = "GMT+0100"
} else if (shortTimezone == "CEST") {
shortTimezone = "GMT+0200"
}
var startDate = new Date(`${day} ${month} ${year} ${startTime} ${shortTimezone}`);
var endDate = new Date(`${day} ${month} ${year} ${endTime} ${shortTimezone}`);
var userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
var userTimeZoneAbbreviation = new Date().toLocaleTimeString('en-us',{timeZone: userTimeZone, timeZoneName:'short'}).split(' ')[2];
var startFormatedTime = formatAMPM(startDate)
var endFormatedTime = formatAMPM(endDate)
document.querySelector("div.np-training-session-time > span:nth-child(2)").innerHTML = `${startFormatedTime} - ${endFormatedTime}`
document.querySelector("div.np-training-session-time > span:nth-child(3)").innerHTML = userTimeZoneAbbreviation
document.querySelector(".np-card-training-session-date-day").innerHTML = startDate.getDate()
document.querySelectorAll(".np-training-session-tile").forEach((element) => {
var extraStartTime = element.querySelector('.np-training-session-tile-time').innerHTML.split(' - ')[0].trim()
var extraEndTime = element.querySelector('.np-training-session-tile-time').innerHTML.split(' - ')[1].trim()
var extraEndTimeFinal = `${extraEndTime.split(' ')[0]} ${extraEndTime.split(' ')[1]}`
var extraTimeZone = extraEndTime.split(' ')[2]
console.log(extraEndTime)
if (extraTimeZone == "CET") {
extraTimeZone = "GMT+0100"
} else if (extraTimeZone == "CEST") {
extraTimeZone = "GMT+0200"
}
var extraYear = element.querySelector('.np-training-session-tile-date').innerHTML.split(', ')[1].trim()
var extraMonth = element.querySelector('.np-training-session-tile-date').innerHTML.split(', ')[0].trim().split(' ')[0]
var extraDay = element.querySelector('.np-training-session-tile-date').innerHTML.split(', ')[0].trim().split(' ')[1]
var extraStartDate = new Date(`${extraDay} ${extraMonth} ${extraYear} ${extraStartTime} ${extraTimeZone}`);
var extraEndDate = new Date(`${extraDay} ${extraMonth} ${extraYear} ${extraEndTimeFinal} ${extraTimeZone}`);
var extraUserTimeZone = Intl.DateTimeFormat().resolvedOptions().extraTimeZone;
var extraUserTimeZoneAbbreviation = new Date().toLocaleTimeString('en-us',{timeZone: extraUserTimeZoneAbbreviation, timeZoneName:'short'}).split(' ')[2];
var extraStartFormatedTime = formatAMPM(extraStartDate)
var extraEndFormatedTime = formatAMPM(extraEndDate)
element.querySelector('.np-training-session-tile-time').innerHTML = `${extraStartFormatedTime} - ${extraEndFormatedTime} ${extraUserTimeZoneAbbreviation}`
element.querySelector('.np-training-session-tile-date').innerHTML = `${monthNames[extraStartDate.getMonth()]} ${extraStartDate.getDate()}, ${extraStartDate.getFullYear()}`
})
function formatAMPM(date) {
var hours = date.getHours();
var minutes = date.getMinutes();
var ampm = hours >= 12 ? 'PM' : 'AM';
hours = hours % 12;
hours = hours ? hours : 12;
minutes = minutes < 10 ? '0'+minutes : minutes;
var strTime = hours + ':' + minutes + ' ' + ampm;
return strTime;
}
</script>