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> |