386 lines
9.7 KiB
Plaintext
386 lines
9.7 KiB
Plaintext
|
{% assign enrolled_events = 0 %}
|
|||
|
|
{% for training_event in training_events.enrolled %}
|
|||
|
|
{% assign enrolled_events = enrolled_events | plus: 1 %}
|
|||
|
|
{% endfor %}
|
|||
|
|
|
|||
|
|
{% include "header" %}
|
|||
|
|
{% include "course_version_outdated_alert", courses: courses.enrolled %}
|
|||
|
|
<div class="np-banner-container ">
|
|||
|
|
<div class="banner-wrapper np-max-width">
|
|||
|
|
<div class="np-banner-content">
|
|||
|
|
<div class="dashboard-heading">Dashboard</div>
|
|||
|
|
<div class="dashboard-greeting-text">
|
|||
|
|
<p>Hi {{ current_person.first_name }}!</p>
|
|||
|
|
<p>Continue where you left off or dive into <br>something new – your learning journey awaits!</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="dashboard-stats">
|
|||
|
|
<div class="dashboard-heading">
|
|||
|
|
Course progress
|
|||
|
|
</div>
|
|||
|
|
{% include 'widget_course_progress' %}
|
|||
|
|
</div>
|
|||
|
|
<div class="dashboard-upcoming-events">
|
|||
|
|
<div class="upcoming_events_heading">Upcoming events</div>
|
|||
|
|
<div class="event-card" >
|
|||
|
|
{% include "training_events_dashboard" %}
|
|||
|
|
</div>
|
|||
|
|
<div class="see-more-container"></div>
|
|||
|
|
<button class="see-more-button" onclick="scrollToRegisteredEvents()">See more</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<main class="np-main np-dashboard np-subpage-container np-max-width">
|
|||
|
|
{% assign in_progress_flag = false %}
|
|||
|
|
{% assign not_started_flag = false %}
|
|||
|
|
{% assign completed_flag = false %}
|
|||
|
|
|
|||
|
|
{% if courses.enrolled.any? %}
|
|||
|
|
{% for course in courses.enrolled %}
|
|||
|
|
{% if course.progress == 0 %}
|
|||
|
|
{% assign not_started_flag = true %}
|
|||
|
|
{% elsif course.progress > 0 and course.progress < 100 %}
|
|||
|
|
{% assign in_progress_flag = true %}
|
|||
|
|
{% else %}
|
|||
|
|
{% assign completed_flag = true %}
|
|||
|
|
{% endif %}
|
|||
|
|
{% endfor %}
|
|||
|
|
{% endif %}
|
|||
|
|
|
|||
|
|
<!-- In Progress Courses -->
|
|||
|
|
{% if in_progress_flag %}
|
|||
|
|
<div class="in-progress-container" onclick="toggleDropdown(this)" data-expanded="false">
|
|||
|
|
<div class="role-quick-link-heading" >In progress courses</div> <span class="dropdown-arrow">▼</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="category-courses course-items-container">
|
|||
|
|
{% for course in courses.enrolled %}
|
|||
|
|
{% if course.progress > 0 and course.progress < 100 %}
|
|||
|
|
<div class="category-cards-wrapper course-item">
|
|||
|
|
{% include "cards_course" with course %}
|
|||
|
|
</div>
|
|||
|
|
{% endif %}
|
|||
|
|
{% endfor %}
|
|||
|
|
</div>
|
|||
|
|
{% endif %}
|
|||
|
|
|
|||
|
|
<!-- Not Started Courses -->
|
|||
|
|
{% if not_started_flag %}
|
|||
|
|
<div class="in-progress-container" onclick="toggleDropdown(this)" data-expanded="false">
|
|||
|
|
<div class="role-quick-link-heading" >Available courses</div><span class="dropdown-arrow">▼</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="category-courses course-items-container" >
|
|||
|
|
{% for course in courses.enrolled %}
|
|||
|
|
{% if course.progress == 0 %}
|
|||
|
|
<div class="category-cards-wrapper course-item">
|
|||
|
|
{% include "cards_course" with course %}
|
|||
|
|
</div>
|
|||
|
|
{% endif %}
|
|||
|
|
{% endfor %}
|
|||
|
|
</div>
|
|||
|
|
{% endif %}
|
|||
|
|
|
|||
|
|
<!-- Completed Courses -->
|
|||
|
|
{% if completed_flag %}
|
|||
|
|
<div class="in-progress-container" onclick="toggleDropdown(this)" data-expanded="false">
|
|||
|
|
<div class="role-quick-link-heading" >Completed courses</div><span class="dropdown-arrow">▼</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="category-courses course-items-container">
|
|||
|
|
{% for course in courses.enrolled %}
|
|||
|
|
{% if course.progress == 100 %}
|
|||
|
|
<div class="category-cards-wrapper course-item">
|
|||
|
|
{% include "cards_course" with course %}
|
|||
|
|
</div>
|
|||
|
|
{% endif %}
|
|||
|
|
{% endfor %}
|
|||
|
|
</div>
|
|||
|
|
{% endif %}
|
|||
|
|
|
|||
|
|
<!-- Registered Events -->
|
|||
|
|
{% assign enrolled_events = 0 %}
|
|||
|
|
{% for training_event in training_events.enrolled %}
|
|||
|
|
{% assign enrolled_events = enrolled_events | plus: 1 %}
|
|||
|
|
{% endfor %}
|
|||
|
|
|
|||
|
|
{% if enrolled_events > 0 %}
|
|||
|
|
<div id="registered-events-section" class="in-progress-container" onclick="toggleDropdown(this)" data-expanded="false">
|
|||
|
|
<div class="role-quick-link-heading">Upcoming events</div><span class="dropdown-arrow">▼</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="category-courses course-items-container">
|
|||
|
|
{% for training_event in training_events.enrolled %}
|
|||
|
|
<div class="category-cards-wrapper course-item">
|
|||
|
|
{% include "cards_training_event" %}
|
|||
|
|
</div>
|
|||
|
|
{% endfor %}
|
|||
|
|
</div>
|
|||
|
|
{% endif %}
|
|||
|
|
</main>
|
|||
|
|
{% include "footer" %}
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
function scrollToRegisteredEvents() {
|
|||
|
|
document.getElementById("registered-events-section").scrollIntoView({ behavior: "smooth" });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|||
|
|
function setCourseItemsVisibility(container) {
|
|||
|
|
const items = container.querySelectorAll(".course-item");
|
|||
|
|
const isExpanded = container.previousElementSibling.getAttribute("data-expanded") === "true";
|
|||
|
|
|
|||
|
|
items.forEach((item, index) => {
|
|||
|
|
item.style.display = (index < 3 || isExpanded) ? "block" : "none";
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
window.toggleDropdown = function(element) {
|
|||
|
|
const container = element.nextElementSibling;
|
|||
|
|
|
|||
|
|
if (container && container.classList.contains("course-items-container")) {
|
|||
|
|
const isExpanded = element.getAttribute("data-expanded") === "true";
|
|||
|
|
element.setAttribute("data-expanded", !isExpanded);
|
|||
|
|
|
|||
|
|
setCourseItemsVisibility(container);
|
|||
|
|
|
|||
|
|
element.querySelector(".dropdown-arrow").textContent = isExpanded ? "▼" : "▲";
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
document.querySelectorAll(".course-items-container").forEach(container => {
|
|||
|
|
setCourseItemsVisibility(container);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
.np-banner-container{
|
|||
|
|
display: flex;
|
|||
|
|
padding: 33px;
|
|||
|
|
background-color: #EEEFEF;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
gap: 20px;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
}
|
|||
|
|
.np-dashboard-resources{
|
|||
|
|
border-radius: 16px;
|
|||
|
|
}
|
|||
|
|
.category-courses {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(3,1fr);
|
|||
|
|
gap: 20px;
|
|||
|
|
margin-bottom: 40px;
|
|||
|
|
}
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
.category-courses{
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.banner-wrapper {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
width: 100%;
|
|||
|
|
gap: 30px;
|
|||
|
|
}
|
|||
|
|
.dashboard-heading{
|
|||
|
|
font-size: 2.5rem;
|
|||
|
|
color: #010063;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
.upcoming_events_heading {
|
|||
|
|
font-size: 2.5rem;
|
|||
|
|
color: #010063;
|
|||
|
|
font-weight: 500;
|
|||
|
|
padding-bottom: 25px;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
.np-dashboard-resources-title{
|
|||
|
|
font-size: 25px;
|
|||
|
|
color: #0A23F5;
|
|||
|
|
font-weight: bold;
|
|||
|
|
padding-bottom: 25px;
|
|||
|
|
text-transform: none;
|
|||
|
|
}
|
|||
|
|
.dashboard-greeting-text{
|
|||
|
|
color: #01005F;
|
|||
|
|
font-size: 22px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.course-items-container {
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-circles {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-circle {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
background-color: #FFFFFF;
|
|||
|
|
padding: 20px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
width: 120px;
|
|||
|
|
height: 120px;
|
|||
|
|
justify-content: center;
|
|||
|
|
border: 8px solid #B0B0B0;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-count {
|
|||
|
|
font-size: 32px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-label {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #01005F;
|
|||
|
|
margin-top: 5px;
|
|||
|
|
}
|
|||
|
|
.progress-card-wrapper {
|
|||
|
|
margin-top: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-title{
|
|||
|
|
color:#0A23F5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-circles-container{
|
|||
|
|
padding: 40px;
|
|||
|
|
background-color: #FFFFFF;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-circles-container {
|
|||
|
|
padding: 40px;
|
|||
|
|
background-color: #FFFFFF;
|
|||
|
|
border-radius: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
.in-progress-container {
|
|||
|
|
background-color: #0A23F5;
|
|||
|
|
padding: 10px;
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
width: 100%;
|
|||
|
|
cursor: pointer;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.role-quick-link-heading {
|
|||
|
|
font-size: 20px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dropdown-arrow {
|
|||
|
|
font-size: 18px;
|
|||
|
|
transition: transform 0.3s;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.course-items {
|
|||
|
|
overflow: hidden;
|
|||
|
|
height: 500px;
|
|||
|
|
transition: height 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.course-items.show {
|
|||
|
|
height: auto;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hidden-course {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.course-items.show .hidden-course {
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.see-more-button{
|
|||
|
|
color: #fff;
|
|||
|
|
background-color: #091ED3;
|
|||
|
|
padding: 10px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
border: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
.banner-wrapper{
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</style>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
addEventListener("DOMContentLoaded", (event) => {
|
|||
|
|
const timeZones = {
|
|||
|
|
'-12': 'Etc/GMT+12',
|
|||
|
|
'-11': 'Pacific/Pago_Pago',
|
|||
|
|
'-10': 'Pacific/Honolulu',
|
|||
|
|
'-09': 'America/Anchorage',
|
|||
|
|
'-08': 'America/Los_Angeles',
|
|||
|
|
'-07': 'America/Denver',
|
|||
|
|
'-06': 'America/Chicago',
|
|||
|
|
'-05': 'America/New_York',
|
|||
|
|
'-04': 'America/Caracas',
|
|||
|
|
'-03': 'America/Argentina/Buenos_Aires',
|
|||
|
|
'-02': 'Atlantic/South_Georgia',
|
|||
|
|
'-01': 'Atlantic/Azores',
|
|||
|
|
'00': 'UTC',
|
|||
|
|
'CET': 'CET',
|
|||
|
|
'+01': 'Europe/Berlin',
|
|||
|
|
'+02': 'Europe/Athens',
|
|||
|
|
'+03': 'Europe/Moscow',
|
|||
|
|
'+04': 'Asia/Dubai',
|
|||
|
|
'+05': 'Asia/Karachi',
|
|||
|
|
'+06': 'Asia/Almaty',
|
|||
|
|
'+07': 'Asia/Bangkok',
|
|||
|
|
'+08': 'Asia/Singapore',
|
|||
|
|
'+09': 'Asia/Tokyo',
|
|||
|
|
'+10': 'Australia/Sydney',
|
|||
|
|
'+11': 'Pacific/Noumea',
|
|||
|
|
'+12': 'Pacific/Auckland',
|
|||
|
|
'+13': 'Pacific/Tongatapu',
|
|||
|
|
'+14': 'Pacific/Kiritimati'
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function formatTimeZone(offset) {
|
|||
|
|
offset = offset.trim();
|
|||
|
|
if (timeZones[offset]) {
|
|||
|
|
return timeZones[offset];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const zoneName = luxon.FixedOffsetZone.parseSpecifier(offset).name;
|
|||
|
|
return `UTC${zoneName}`;
|
|||
|
|
} catch {
|
|||
|
|
return offset;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const offset = '+08';
|
|||
|
|
const formattedZone = formatTimeZone(offset);
|
|||
|
|
console.log(`Offset ${offset} to: ${formattedZone}`);
|
|||
|
|
|
|||
|
|
document.querySelectorAll('.zone').forEach((timeElement) => {
|
|||
|
|
const offset = timeElement.textContent;
|
|||
|
|
const formattedZone = formatTimeZone(offset);
|
|||
|
|
timeElement.textContent = timeElement.textContent.replace(offset, formattedZone);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
</script>
|