209 lines
7.9 KiB
Plaintext
209 lines
7.9 KiB
Plaintext
{% include "header" %}
|
|
<div class="np-homepage-hero">
|
|
<img class="np-homepage-hero-image" src="{{ homepage.artwork_url }}" />
|
|
</div>
|
|
{% include "sub_navigation" %}
|
|
{% assign all_categories = current_school.filterable_categories | sort_natural | reverse %}
|
|
{% assign weeks = "" | split: "" %}
|
|
{% for category in all_categories %}
|
|
{% assign category_name = category.name | downcase %}
|
|
{% if category_name contains "week" %}
|
|
{% assign cat_name = category.name | split: '!@#$%^&*()' %}
|
|
{% assign weeks = weeks | concat: cat_name %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
{% if courses.in_catalog.any? %}
|
|
{% assign catalog_courses = courses.in_catalog %}
|
|
{% endif %}
|
|
|
|
<main class="np-main np-dashboard np-subpage-container np-max-width">
|
|
{% include "new_hire_instructor_info" %}
|
|
<div class="row np-flex-center">
|
|
<div class="col-xs-12">
|
|
{% for learning_path in learning_paths.enrolled %}
|
|
{% assign is_new_hire_path = false %}
|
|
{% for category in learning_path.categories %}
|
|
{% if category.name == "New Hire Training" %}
|
|
{% assign is_new_hire_path = true %}
|
|
{% break %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% if is_new_hire_path %}
|
|
{% include "new_hire_learning_path_progress_and_cta" %}
|
|
{% for week in weeks %}
|
|
<div class="row row-week row-{{ week | downcase | replace: " ", "-" }}">
|
|
<div class="col-xs-12 week-title-column">
|
|
<div class="week-title">{{ week }}</div>
|
|
</div>
|
|
{% for item in learning_path.items %}
|
|
{% if item.course? %}
|
|
{% for catalog_course in catalog_courses %}
|
|
{% if catalog_course.id == item.id %}
|
|
{% for catalog_course_category in catalog_course.categories %}
|
|
{% if catalog_course_category.name == week %}
|
|
{% if learning_path.enrolled? and item.unlocked? %}
|
|
<div
|
|
class="col-xs-12 col-sm-6 col-md-4 new-hire-course"
|
|
data-progress="{{ item.progress }}"
|
|
data-day="{{ catalog_course.properties.course_day }}">
|
|
<a class="np-card learning-path-card" href="{% route learning_path_course, learning_path_id: learning_path.id, id: item.id %}">
|
|
<div class="np-card-container">
|
|
<img
|
|
class="np-card-image"
|
|
alt="{{ item.name }}"
|
|
src="{{ item.image }}">
|
|
<div class="np-card-content np-card-content-vertical np-card-padding">
|
|
<h3 class="np-card-content-title">
|
|
{{ item.name }}
|
|
</h3>
|
|
<div class="np-card-content-footer">
|
|
<div class="np-card-content-progress np-button-color">
|
|
{% t shared.progress
|
|
, count: item.progress %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
{% else %}
|
|
<div
|
|
class="col-xs-12 col-sm-6 col-md-4 new-hire-course locked"
|
|
data-progress="{{ item.progress }}"
|
|
data-day="{{ catalog_course.properties.course_day }}">
|
|
<div class="np-card learning-path-card">
|
|
<div class="np-card-container">
|
|
<img
|
|
class="np-card-image"
|
|
alt="{{ item.name }}"
|
|
src="{{ item.image }}">
|
|
<div class="np-card-content np-card-content-vertical np-card-padding">
|
|
<h3 class="np-card-content-title">
|
|
{{ item.name }}
|
|
</h3>
|
|
<div class="np-card-content-footer">
|
|
<div class="np-card-content-progress np-button-color">
|
|
{% t shared.progress
|
|
, count: item.progress %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
{% endfor %}
|
|
{% break %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
{% include "footer" %}
|
|
|
|
<script>
|
|
const lpProgress = document.querySelector(".np-top-cta-progress-text").getAttribute("data-progress")
|
|
const newHireLpCta = document.querySelector(".new-hire-lp-button")
|
|
const learningPathBtnText = document.querySelector(".new-hire-lp-button").innerText
|
|
console.log(learningPathBtnText)
|
|
if (learningPathBtnText.toLowerCase() == "start path") {
|
|
newHireLpCta.click()
|
|
} else if (learningPathBtnText.toLowerCase() == "start new content") {
|
|
newHireLpCta.classList.remove("np-hidden")
|
|
} else if (learningPathBtnText.toLowerCase() == "continue") {
|
|
if (lpProgress == 0) {
|
|
newHireLpCta.innerText = "Begin Training"
|
|
} else {
|
|
newHireLpCta.innerText = "Continue Training"
|
|
}
|
|
newHireLpCta.classList.remove("np-hidden")
|
|
}
|
|
|
|
document.querySelector(".np-header-logo > a").href = "/app/dashboard"
|
|
|
|
reorderCoursesByDay()
|
|
|
|
setTimeout(() => {
|
|
toggleHarverLink()
|
|
}, 500)
|
|
|
|
function reorderCoursesByDay() {
|
|
let weekRows = document.querySelectorAll('.row-week');
|
|
|
|
weekRows.forEach(function(weekRow) {
|
|
|
|
const titleColumn = weekRow.querySelector(".week-title-column")
|
|
let courses = weekRow.querySelectorAll('.new-hire-course');
|
|
|
|
let coursesArray = Array.from(courses);
|
|
|
|
coursesArray.sort(function(a, b) {
|
|
let dayA = parseInt(a.getAttribute('data-day'));
|
|
let dayB = parseInt(b.getAttribute('data-day'));
|
|
return dayA - dayB; // Sort ascending; change to dayB - dayA for descending
|
|
});
|
|
|
|
weekRow.innerHTML = '';
|
|
weekRow.appendChild(titleColumn);
|
|
coursesArray.forEach(function(element) {
|
|
weekRow.appendChild(element.cloneNode(true));
|
|
});
|
|
});
|
|
}
|
|
|
|
function toggleHarverLink() {
|
|
const week1Courses = document.querySelector(".row-week-1").querySelectorAll(".new-hire-course")
|
|
console.log(week1Courses[0].getAttribute("data-progress"))
|
|
if (week1Courses.length && week1Courses[0].getAttribute("data-progress") == 100) {
|
|
if (document.getElementById("harverLink")) {
|
|
document.getElementById("harverLink").remove()
|
|
}
|
|
} else {
|
|
if (document.getElementById("harverLink")) {
|
|
document.getElementById("harverLink").style.display = "block"
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
.new-hire-lp-button {
|
|
margin: 16px 0 32px;
|
|
}
|
|
|
|
.new-hire-course .learning-path-card {
|
|
text-decoration: none;
|
|
display: block;
|
|
}
|
|
|
|
.new-hire-course .learning-path-card > .np-card-container {
|
|
box-shadow: none;
|
|
border: 1px solid #ddd;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.week-title {
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
padding-bottom: 16px;
|
|
margin-bottom: 32px;
|
|
border-bottom: 1px solid #ccc;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.new-hire-course.locked {
|
|
opacity: 0.4;
|
|
cursor: text;
|
|
}
|
|
</style> |