diff options
| -rw-r--r-- | pydis_site/templates/resources/resources.html | 55 |
1 files changed, 34 insertions, 21 deletions
diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html index e2275e89..f2d5a976 100644 --- a/pydis_site/templates/resources/resources.html +++ b/pydis_site/templates/resources/resources.html @@ -28,7 +28,7 @@ {% for topic in topics %} <div class="field"> <label class="checkbox ml-0"> - <input name="checkboxOption" type="checkbox" value="{{ topic }}"> + <input name="topicOption" type="checkbox" value="{{ topic }}"> <span class="has-text-grey is-size-7">{{ topic }}</span> </label> </div> @@ -41,7 +41,7 @@ {% for tag_type in tag_types %} <div class="field"> <label class="checkbox ml-0"> - <input name="checkboxOption" type="checkbox" value="{{ tag_type }}"> + <input name="typeOption" type="checkbox" value="{{ tag_type }}"> <span class="has-text-grey is-size-7">{{ tag_type }}</span> </label> </div> @@ -54,7 +54,7 @@ {% for payment_tier in payment_tiers %} <div class="field"> <label class="checkbox ml-0"> - <input name="checkboxOption" type="checkbox" value="{{ payment_tier }}"> + <input name="paymentOption" type="checkbox" value="{{ payment_tier }}"> <span class="has-text-grey is-size-7">{{ payment_tier }}</span> </label> </div> @@ -67,7 +67,7 @@ {% for complexity in complexities %} <div class="field"> <label class="checkbox ml-0"> - <input name="checkboxOption" type="checkbox" value="{{ complexity }}"> + <input name="complexityOption" type="checkbox" value="{{ complexity }}"> <span class="has-text-grey is-size-7">{{ complexity }}</span> </label> </div> @@ -124,32 +124,45 @@ {% endif %} <script> - const initialParams = new URLSearchParams(window.location.search).get("checkboxOptions"); - const checkBoxes = document.querySelectorAll("input[name='checkboxOption']"); - - if(initialParams != null){ - checkBoxes.forEach((x) => { - if(initialParams.includes(x.value)){ - x.checked = true; - } - }); + "use strict"; + const initialParams = new URLSearchParams(window.location.search); + const checkboxOptions = ['topicOption', 'typeOption', 'paymentOption', 'complexityOption']; + // const topicOptions = document.querySelectorAll("input[name='topicOption']"); + + const createQuerySelect = (opt) => { + return "input[name=" + opt + "]" } - function buildQueryParams(){ - let params = new URLSearchParams(window.location.search); - let allOptions = ""; - checkBoxes.forEach((x) => { - if(x.checked){ - allOptions += x.value + ","; + checkboxOptions.forEach((option) => { + document.querySelectorAll(createQuerySelect(option)).forEach((checkbox) => { + if(initialParams.get(option).includes(checkbox.value)){ + checkbox.checked = true } }); - params.set("checkboxOptions", allOptions); + }); + + + function buildQueryParams(){ + let params = new URLSearchParams(window.location.search); + checkboxOptions.forEach((option) => { + let tempOut = "" + document.querySelectorAll(createQuerySelect(option)).forEach((checkbox) => { + if(checkbox.checked){ + tempOut += checkbox.value + ","; + } + }); + params.set(option, tempOut); + }); window.location.search = params; } function clearQueryParams(){ - checkBoxes.forEach((x) => {x.checked = false}); + checkboxOptions.forEach((option) => { + document.querySelectorAll(createQuerySelect(option)).forEach((checkbox) => { + checkbox.checked = false; + }); + }); } </script> {% endblock %} |