add constant for resource tags. Add Functional front end

This change adds a fully functional front end menu for testing. This is a very rough outline and will need a bit of UI and UX love to get working fully. Should act as an example of functionality

2 files changed, 71 insertions, 35 deletions

diff --git a/pydis_site/apps/resources/views/resources.py b/pydis_site/apps/resources/views/resources.py
index dfd21682..f88a23fb 100644
--- a/pydis_site/apps/resources/views/resources.py
+++ b/pydis_site/apps/resources/views/resources.py
@@ -1,11 +1,24 @@
-from django.views.generic import TemplateView
 from django.shortcuts import render
 
-# class ResourcesView(TemplateView):
-#     """View for resources index page."""
-#
-#     template_name = "resources/resources.html"
+from pydis_site.apps.resources.utils import get_resources_meta
+
+RESOURCE_META_TAGS = get_resources_meta()
+
+
+def format_checkbox_options(options: str) -> list:
+    """Split up the comma separated parameters into a list."""
+    if options:
+        return options.split(",")[:-1]
+    return list()
 
 
 def resource_view(request):
-    return render(request, template_name="resources/resources.html")
+    """View for resources index page."""
+    context = {
+        "checkboxOptions": format_checkbox_options(request.GET.get("checkboxOptions")),
+        "topics": RESOURCE_META_TAGS.get("topics"),
+        "tag_types": RESOURCE_META_TAGS.get("type"),
+        "payment_tiers": RESOURCE_META_TAGS.get("payment_tiers"),
+        "complexities": RESOURCE_META_TAGS.get("complexity")
+    }
+    return render(request, template_name="resources/resources.html", context=context)
diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html
index 7eb21432..fca3d0da 100644
--- a/pydis_site/templates/resources/resources.html
+++ b/pydis_site/templates/resources/resources.html
@@ -23,55 +23,66 @@
                       <div class="column has-text-centered">
                           Topic
 
-                          <div class="field">
-                              <label class="checkbox">
-                                <input name="checkboxOption" type="checkbox" value="topic1">
-                                  <span class="has-text-grey is-size-7">Topic1</span>
-                              </label>
-                          </div>
-
-                          <div class="field">
-                              <label class="checkbox">
-                                <input name="checkboxOption" type="checkbox" value="topic2">
-                                  <span class="has-text-grey is-size-7">Topic1</span>
+                          {% for topic in topics %}
+                            <div class="field">
+                              <label class="checkbox ml-0">
+                                <input name="checkboxOption" type="checkbox" value="{{ topic }}">
+                                  <span class="has-text-grey is-size-7">{{ topic }}</span>
                               </label>
-                          </div>
-
+                            </div>
+                          {% endfor %}
                       </div>
 
                         <div class="column has-text-centered">
                             Type
+
+                            {% for tag_type in tag_types %}
                             <div class="field">
-                              <label class="checkbox">
-                                <input type="checkbox">
-                                    <span class="has-text-grey is-size-7">Remember me</span>
+                              <label class="checkbox ml-0">
+                                <input name="checkboxOption" type="checkbox" value="{{ tag_type }}">
+                                  <span class="has-text-grey is-size-7">{{ tag_type }}</span>
                               </label>
-                          </div>
+                            </div>
+                          {% endfor %}
                         </div>
 
                         <div class="column has-text-centered">
                             Payment
+
+                            {% for payment_tier in payment_tiers %}
                             <div class="field">
-                              <label class="checkbox">
-                                <input type="checkbox">
-                                    <span class="has-text-grey is-size-7">Remember me</span>
+                              <label class="checkbox ml-0">
+                                <input name="checkboxOption" type="checkbox" value="{{ payment_tier }}">
+                                  <span class="has-text-grey is-size-7">{{ payment_tier }}</span>
                               </label>
-                          </div>
+                            </div>
+                          {% endfor %}
                         </div>
 
                         <div class="column has-text-centered">
                             Level
+
+                            {% for complexity in complexities %}
                             <div class="field">
-                              <label class="checkbox">
-                                <input type="checkbox">
-                                    <span class="has-text-grey is-size-7">Remember me</span>
+                              <label class="checkbox ml-0">
+                                <input name="checkboxOption" type="checkbox" value="{{ complexity }}">
+                                  <span class="has-text-grey is-size-7">{{ complexity }}</span>
                               </label>
-                          </div>
+                            </div>
+                          {% endfor %}
                         </div>
                   </div>
 
-                  <div class="control pl-3 pb-3">
-                    <button onclick="buildQueryParams()" class="button is-link is-small">Search</button>
+                  <div class="ml-3 pb-3">
+
+                      <span class="control">
+                        <button onclick="buildQueryParams()" class="button is-link is-small">Search</button>
+                      </span>
+
+                      <span class="is-one-fifth control">
+                        <button onclick="clearQueryParams()" class="button is-danger is-small">Clear Search</button>
+                      </span>
+
                   </div>
 
               </div>
@@ -79,9 +90,18 @@
       </div>
   </section>
 <script>
+    const initialParams = new URLSearchParams(window.location.search).get("checkboxOptions");
+    const checkBoxes = document.querySelectorAll("input[name='checkboxOption']");
+    console.log(initialParams);
+
+    checkBoxes.forEach((x) => {
+        if(initialParams.includes(x.value)){
+            x.checked = true;
+        }
+    });
+
     function buildQueryParams(){
         let params = new URLSearchParams(window.location.search);
-        const checkBoxes = document.querySelectorAll("input[name='checkboxOption']");
         let allOptions = "";
         checkBoxes.forEach((x) => {
             if(x.checked){
@@ -91,7 +111,10 @@
         params.set("checkboxOptions", allOptions);
 
         window.location.search = params;
-        window.location.reload();
+    }
+
+    function clearQueryParams(){
+        checkBoxes.forEach((x) => {x.checked = false});
     }
 </script>
 {% endblock %}