Commit 35d55f8c authored by Vegard Murvold Sporstøl's avatar Vegard Murvold Sporstøl
Browse files

complete sorting of exercises

parent 68f83d9d
Pipeline #113486 passed with stage
in 27 seconds
......@@ -40,8 +40,8 @@
<div class="col-lg-6"></div>
<div class="col-lg-6">
<label for="inputCategory" class="form-label">Category</label>
<select id="inputCategory" class="form-select" name="category" disabled>
<option value="None"></option>
<select id="inputCategory" class="form-select" name="category" readonly>
<option value=""></option>
<option value="Endurance">Endurance</option>
<option value="Strength">Strength</option>
<option value="Balance">Balance</option>
......
......@@ -19,6 +19,21 @@
<h3 class="mt-5">View Exercises</h3>
<p>Here you can view, create, and edit exercise types defined by you and other athletes.</p>
<input type="button" class="btn btn-primary" id="btn-create-exercise" value="Create new exercise">
</div>
</div>
<div class="col-lg text-center"> <br>
<p>Sort exercises on category:</p>
<input type="checkbox" value="Endurance" name="sort" checked>
<label for="endurance">Endurance &nbsp;</label>
<input type="checkbox" value="Strength" name="sort" checked>
<label for="strength">Strength &nbsp;</label>
<input type="checkbox" value="Balance" name="sort" checked>
<label for="balance">Balance &nbsp;</label>
<input type="checkbox" value="Flexibility" name="sort" checked>
<label for="flexibility">Flexibility &nbsp;</label>
<input type="checkbox" value="Other" name="sort" checked>
<label for="other">Other</label> <br><br>
</div>
</div>
<div class="row">
<div class="col-lg text-center">
......
......@@ -5,19 +5,22 @@ async function fetchExerciseTypes(request) {
let data = await response.json();
let exercises = data.results;
document.getElementById('div-content').innerHTML = "";
let container = document.getElementById('div-content');
let exerciseTemplate = document.querySelector("#template-exercise");
exercises.forEach(exercise => {
const exerciseAnchor = exerciseTemplate.content.firstElementChild.cloneNode(true);
exerciseAnchor.href = `exercise.html?id=${exercise.id}`;
if (getSelected().includes(exercise.category)) {
const exerciseAnchor = exerciseTemplate.content.firstElementChild.cloneNode(true);
exerciseAnchor.href = `exercise.html?id=${exercise.id}`;
const h5 = exerciseAnchor.querySelector("h5");
h5.textContent = exercise.name;
const h5 = exerciseAnchor.querySelector("h5");
h5.textContent = exercise.name;
const p = exerciseAnchor.querySelector("p");
p.textContent = exercise.description;
const p = exerciseAnchor.querySelector("p");
p.textContent = exercise.description;
container.appendChild(exerciseAnchor);
container.appendChild(exerciseAnchor);
}
});
}
......@@ -28,15 +31,29 @@ function createExercise() {
window.location.replace("exercise.html");
}
function getSelected() {
const checkboxes = document.querySelectorAll('input[name="sort"]:checked');
let selected = [];
checkboxes.forEach((checkbox) => {
selected.push(checkbox.value);
});
return selected
}
window.addEventListener("DOMContentLoaded", async () => {
let createButton = document.querySelector("#btn-create-exercise");
createButton.addEventListener("click", createExercise);
document.querySelectorAll('input[name="sort"]').forEach(item => {
item.addEventListener('change', fetchExerciseTypes);
});
let response = await fetchExerciseTypes();
if (!response.ok) {
let data = await response.json();
let alert = createAlert("Could not retrieve exercise types!", data);
document.body.prepend(alert);
}
});
});
\ No newline at end of file
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