Commit d4a93ece authored by Kevin Mentzoni Halvarsson's avatar Kevin Mentzoni Halvarsson
Browse files

Added button that sorts exercises by favorites then alphabetically. Also...

Added button that sorts exercises by favorites then alphabetically. Also automatically shows favorite on top of any list shown.
parent af79d6c2
Pipeline #116472 passed with stages
in 2 minutes and 11 seconds
......@@ -21,7 +21,11 @@
<input type="button" class="btn btn-primary" id="btn-create-exercise" value="Create new exercise">
</div>
<div class="row">
<button type="button" id="sort" class="btn btn-light" onclick="sortAlphabetically()">
<i class="fas fa-sort"></i>
</button>
<div class="col-lg text-center">
<div class="list-group mt-1" id="div-content"></div>
</div>
</div>
......
......@@ -21,7 +21,7 @@ async function renderExerciseTypes(exercises, favorites) {
p.textContent = exercise.description;
const icon = exerciseAnchor.querySelector("i");
icon.classList.add("fa-heart");
icon.classList.add("fa-star");
icon.classList.add(favorites !== undefined ? (favorites.some(favorite => favorite.exercise === exercise.id) ? "fas" : "far") : "far");
container.appendChild(exerciseAnchor);
......@@ -32,6 +32,28 @@ function createExercise() {
window.location.replace("exercise.html");
}
function sortAlphabetically(){
var parent = document.getElementById("div-content");
var children = parent.childNodes;
var childrenAsArray = [];
children.forEach(child=> childrenAsArray.push(child));
var sortByFavoritesThenByName = function(a, b) {
let aIsFave = a.children[0].children[1].classList.contains("fas");
let bIsFave = b.children[0].children[1].classList.contains("fas");
console.log(aIsFave, bIsFave)
if(aIsFave && !bIsFave) return -1;
else if(!aIsFave && bIsFave) return 1;
else return a.children[0].children[0].innerHTML.toLowerCase().localeCompare(b.children[0].children[0].innerHTML.toLowerCase());
}
childrenAsArray.sort(sortByFavoritesThenByName);
for (var i = 0; i < childrenAsArray.length; i++) {
childrenAsArray[i].parentNode.appendChild(childrenAsArray[i]);
}
}
window.addEventListener("DOMContentLoaded", async () => {
let createButton = document.querySelector("#btn-create-exercise");
createButton.addEventListener("click", createExercise);
......
......@@ -30,9 +30,19 @@ function renderWorkouts(workouts) {
});
}
function renderExerciseOptions(exerciseTypes) {
function renderExerciseOptions(exerciseTypes, favorites) {
console.log(exerciseTypes);
console.log(favorites);
const selectElement = document.querySelector("#exercise-filter-select");
if(favorites !== undefined){
let user_id = JSON.parse(atob(("; "+document.cookie).split("; access=").pop().split(";").shift().split(".")[1]))["user_id"];
favorites = favorites.filter(favorite => parseInt(favorite.user) === parseInt(user_id));
exerciseTypes = exerciseTypes.sort((a, b) => {
if(favorites.some(favorite => favorite.exercise === a.id) && !favorites.some(favorite => favorite.exercise === b.id)) return 1;
else if (!favorites.some(favorite => favorite.exercise === a.id) && favorites.some(favorite => favorite.exercise === b.id)) return -1;
else return 0;
}).reverse();
}
exerciseTypes.forEach((exerciseType) => {
const option = document.createElement("option");
option.value = exerciseType.url;
......@@ -137,9 +147,10 @@ window.addEventListener("DOMContentLoaded", async () => {
let workouts = await fetchWorkouts(ordering);
renderWorkouts(workouts);
let favoritedExercises = await sendRequest("GET", `${HOST}/api/favorites/`);
let data = await favoritedExercises.json();
fetchExerciseTypes()
.then((exerciseTypes) => renderExerciseOptions(exerciseTypes))
.then((exerciseTypes) => renderExerciseOptions(exerciseTypes, data.results))
.catch((errorResponse) => {
console.error(errorResponse);
});
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment