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,198 @@
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.enrolled %}
|
||||
{% include "sub_navigation" %}
|
||||
<main class="np-main np-courses np-subpage-container np-max-width">
|
||||
<div class="row row-with-thumbnails">
|
||||
<div class="col-xs-12">
|
||||
<div class="filters-container courses-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 class="filter-item status-filter">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="in-progress"
|
||||
value="not-started">
|
||||
<label for="not-started">Not Started
|
||||
<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 %}
|
||||
<script>
|
||||
console.log("{{category.name}}")
|
||||
</script>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{% include "courses_index", class: "col-xs-12 col-sm-6 col-md-4 col-lg-3 course-column" %}
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<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()
|
||||
addActiveNavigationClass()
|
||||
|
||||
}
|
||||
|
||||
$("input[type='checkbox']").change(function(e) {
|
||||
filterCourses()
|
||||
})
|
||||
|
||||
$("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 filterCourses() {
|
||||
|
||||
// hide all courses
|
||||
$(".course-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 courses and get filters
|
||||
$(".course-column").each((index, course) => {
|
||||
const courseStatus = $(course).data("progress")
|
||||
const courseCategory = $(course).data("category")
|
||||
|
||||
if (selectedStatusFilters.length && selectedCategoryFilters.length) {
|
||||
if ($.inArray(courseCategory, selectedCategoryFilters) !== -1 && $.inArray(courseStatus, selectedStatusFilters) !== -1) {
|
||||
$(course).show()
|
||||
}
|
||||
} else if (! selectedStatusFilters.length && selectedCategoryFilters.length) {
|
||||
if ($.inArray(courseCategory, selectedCategoryFilters) !== -1) {
|
||||
$(course).show()
|
||||
}
|
||||
} else if (selectedStatusFilters.length && ! selectedCategoryFilters.length) {
|
||||
if ($.inArray(courseStatus, selectedStatusFilters) !== -1) {
|
||||
$(course).show()
|
||||
}
|
||||
} else {
|
||||
$(course).show()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function addCountToFilters() {
|
||||
const allFiltersFromCourses = []
|
||||
|
||||
$(".course-column").each((index, course) => {
|
||||
if ($(course).attr("data-progress")) {
|
||||
allFiltersFromCourses.push($(course).attr("data-progress"))
|
||||
}
|
||||
|
||||
if ($(course).attr("data-category")) {
|
||||
allFiltersFromCourses.push($(course).attr("data-category"))
|
||||
}
|
||||
})
|
||||
|
||||
$(".filter-item").each((index, filter) => {
|
||||
const filterValue = $(filter).find("input").val()
|
||||
const filterCount = getFilterCount(filterValue, allFiltersFromCourses)
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
function addActiveNavigationClass() {
|
||||
$('a[href="/app/courses"]').addClass("np-sub-navigation-content-item-active").removeClass("np-sub-navigation-content-item-inactive")
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user