Tons of Solutions Engineering work done today for the rest of the CS team! Headway, Howard Hanna, Engels, Brighton, etc. Also completed Datasnippers auth flow and worked on Anthology's script. Cloned Anthology's courses (900..) and will clone Full Story on Monday.
This commit is contained in:
@ -0,0 +1,179 @@
|
||||
{% include "header" %}
|
||||
{% include "sub_navigation" %}
|
||||
<main class="np-main np-learning-paths np-subpage-container np-max-width">
|
||||
<div class="np-learning-paths-main">
|
||||
<div class="filters-container Lps-filters">
|
||||
<div class="filters-heading">APPLY FILTERS<i class="fa fa-chevron-down"></i></div>
|
||||
<div class="filters-content">
|
||||
<div class="filter-column status-column">
|
||||
<div class="filter-column-title">STATUS</div>
|
||||
<div class="filters-list">
|
||||
<div class="filter-item status-filter">
|
||||
<input type="checkbox" name="completed" value="completed">
|
||||
<label for="completed">Completed <span></span></label>
|
||||
</div>
|
||||
|
||||
<div class="filter-item status-filter">
|
||||
<input type="checkbox" name="in-progress" value="in-progress">
|
||||
<label for="in-progress">In Progress <span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-column categories-column">
|
||||
<div class="filter-column-title">CATEGORY</div>
|
||||
<div class="filters-list">
|
||||
{% for category in categories.enrolled %}
|
||||
<div class="filter-item category-filter">
|
||||
<input type="checkbox" name="{{category.name}}" value="{{category.name}}">
|
||||
<label for="{{category.name}}">{{category.name}} <span></span></label>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% assign learning_paths_alphabetical = learning_paths.available | sort: "name" %}
|
||||
{% include "learning_paths_index", items: learning_paths_alphabetical %}
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
.np-card-content-vertical {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.learning-path-card .np-card-content-title {
|
||||
font-size: 16px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.np-learning-path-image {
|
||||
align-self: unset !important;
|
||||
object-fit: cover !important;
|
||||
width: 100% !important;
|
||||
min-height: unset !important;
|
||||
}
|
||||
|
||||
.learning-path-image-container {
|
||||
max-width: 265px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.onload = () => {
|
||||
let url = new URL(window.location.href);
|
||||
let params = new URLSearchParams(url.search);
|
||||
if (params.has('category')) {
|
||||
let allParams = params.getAll('category')
|
||||
allParams.forEach((param) => {
|
||||
document.querySelector(`.filter-item input[value='${param}']`).click()
|
||||
})
|
||||
}
|
||||
|
||||
addCountToFilters()
|
||||
}
|
||||
|
||||
$("input[type='checkbox']").change(function(e) {
|
||||
filterLps()
|
||||
})
|
||||
|
||||
$("document").ready(function() {
|
||||
|
||||
document.querySelector(".filters-heading").addEventListener("click", function() {
|
||||
this.classList.toggle("active");
|
||||
var panel = this.nextElementSibling;
|
||||
if (panel.style.maxHeight) {
|
||||
panel.style.maxHeight = null;
|
||||
} else {
|
||||
panel.style.maxHeight = panel.scrollHeight + 32 + "px";
|
||||
}
|
||||
})
|
||||
|
||||
document.querySelector(".filters-heading").click()
|
||||
})
|
||||
|
||||
function filterLps() {
|
||||
// hide all Lps
|
||||
$(".lp-column").hide()
|
||||
|
||||
// get all checked filters
|
||||
let selectedStatusFilters = []
|
||||
let selectedCategoryFilters = []
|
||||
|
||||
$(".status-column input[type='checkbox']:checked").each((index, filter) => {
|
||||
selectedStatusFilters.push(filter.value)
|
||||
})
|
||||
|
||||
$(".categories-column input[type='checkbox']:checked").each((index, filter) => {
|
||||
selectedCategoryFilters.push(filter.value)
|
||||
})
|
||||
|
||||
//loop over Lps and get filters
|
||||
$(".lp-column").each((index, lp) => {
|
||||
const lpStatus = $(lp).data("progress")
|
||||
const courseCategory = $(lp).data("category")
|
||||
|
||||
if (selectedStatusFilters.length && selectedCategoryFilters.length) {
|
||||
if($.inArray(courseCategory, selectedCategoryFilters) !== -1 && $.inArray(lpStatus, selectedStatusFilters) !== -1) {
|
||||
$(lp).show()
|
||||
}
|
||||
} else if (!selectedStatusFilters.length && selectedCategoryFilters.length) {
|
||||
if($.inArray(courseCategory, selectedCategoryFilters) !== -1) {
|
||||
$(lp).show()
|
||||
}
|
||||
} else if (selectedStatusFilters.length && !selectedCategoryFilters.length) {
|
||||
if($.inArray(lpStatus, selectedStatusFilters) !== -1) {
|
||||
$(lp).show()
|
||||
}
|
||||
} else {
|
||||
$(lp).show()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function addCountToFilters() {
|
||||
const allFiltersFromLps = []
|
||||
|
||||
$(".lp-column").each((index, course) => {
|
||||
if ($(course).attr("data-progress")) {
|
||||
allFiltersFromLps.push($(course).attr("data-progress"))
|
||||
}
|
||||
|
||||
if ($(course).attr("data-category")) {
|
||||
allFiltersFromLps.push($(course).attr("data-category"))
|
||||
}
|
||||
})
|
||||
|
||||
$(".filter-item").each((index, filter) => {
|
||||
const filterValue = $(filter).find("input").val()
|
||||
const filterCount = getFilterCount(filterValue, allFiltersFromLps)
|
||||
|
||||
|
||||
if ($(filter).hasClass("category-filter")) {
|
||||
if (filterCount == 0) {
|
||||
$(filter).hide()
|
||||
} else {
|
||||
$(filter).find("label > span").text(`(${filterCount})`)
|
||||
}
|
||||
} else {
|
||||
$(filter).find("label > span").text(`(${filterCount})`)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const getFilterCount = (value, array) => {
|
||||
let count = 0;
|
||||
|
||||
array.forEach(filter => {
|
||||
if (filter == value) { count++; }
|
||||
});
|
||||
|
||||
return count
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user