From 156951f12c05146650a84d4ac9d45e7a8a085023 Mon Sep 17 00:00:00 2001
From: fisher60 <wakefollower@gmail.com>
Date: Sat, 24 Jul 2021 18:22:59 -0500
Subject: 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
---
 pydis_site/templates/resources/resources.html | 81 +++++++++++++++++----------
 1 file changed, 52 insertions(+), 29 deletions(-)

(limited to 'pydis_site/templates')

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 %}
-- 
cgit v1.2.3