Migrate uv guide to webpack

pedagogy/templates/pedagogy/guide.jinja

@@ -9,6 +9,10 @@
   <link rel="stylesheet" href="{{ static('pedagogy/css/pedagogy.scss') }}">
 {% endblock %}
 
+{% block additional_js %}
+  <script src="{{ static('webpack/pedagogy/guide-index.js') }}" defer></script>
+{% endblock %}
+
 {% block head %}
   {{ super() }}
   <meta name="viewport" content="width=device-width, initial-scale=0.6, maximum-scale=2">
@@ -113,105 +117,6 @@
         </template>
       </tbody>
     </table>
-    {{ paginate_alpine("page", "max_page()") }}
+    {{ paginate_alpine("page", "maxPage()") }}
   </div>
-  <script>
-    {#
-    How does this work :
-
-    The page contains two main elements : the form and the results.
-    The form contains multiple inputs, allowing the user to apply the filter of its choice.
-    Each modification of those filters will modify the GET parameters of the URL,
-    then fetch the corresponding data from the API.
-    This data will then be displayed on the result part of the page.
-    #}
-    const pageDefault = 1;
-    const pageSizeDefault = 100;
-    document.addEventListener("alpine:init", () => {
-      Alpine.data("uv_search", () => ({
-        uvs: [],
-        loading: false,
-        page: pageDefault,
-        pageSize: pageSizeDefault,
-        search: "",
-        department: [],
-        credit_type: [],
-        semester: [],
-        to_change: [],
-        pushstate: History.PUSH,
-
-        update: undefined,
-
-        async initializeArgs() {
-          let url = new URLSearchParams(window.location.search);
-          this.pushstate = History.REPLACE;
-
-          this.page = parseInt(url.get("page")) || pageDefault;;
-          this.pageSize = parseInt(url.get("pageSize")) || pageSizeDefault;
-          this.search = url.get("search") || "";
-          this.department = url.getAll("department");
-          this.credit_type = url.getAll("credit_type");
-              {# The semester is easier to use on the backend as an enum (spring/autumn/both/none)
-              and easier to use on the frontend as an array ([spring, autumn]).
-              Thus there is some conversion involved when both communicate together #}
-          this.semester = url.has("semester") ?
-          url.get("semester").split("_AND_") : [];
-
-          this.update()
-        },
-
-        async init() {
-          this.update = Alpine.debounce(async () => {
-            {# Create the whole url before changing everything all at once #}
-            let first = this.to_change.shift();
-            let url = updateQueryString(first.param, first.value, History.NONE);
-            this.to_change.forEach((value) => {
-              url = updateQueryString(value.param, value.value, History.NONE, url);
-            })
-            updateQueryString(first.param, first.value, this.pushstate, url);
-            await this.fetchData();  {# reload data on form change #}
-            this.to_change = [];
-            this.pushstate = History.PUSH;
-          }, 50);
-
-          let search_params = ["search", "department", "credit_type", "semester"];
-          let pagination_params = ["page", "pageSize"];
-
-          search_params.forEach((param) => {
-            this.$watch(param, async (value) => {
-              if (this.pushstate != History.PUSH){
-                {# This means that we are doing a mass param edit #}
-                return;
-              }
-              {# Reset pagination on search #}
-              this.page = pageDefault;
-              this.pageSize = pageSizeDefault;
-            });
-          });
-          search_params.concat(pagination_params).forEach((param) => {
-            this.$watch(param, async (value) => {
-              this.to_change.push({ param: param, value: value })
-              this.update();
-            });
-          });
-          window.addEventListener("popstate", async (event) => {
-            await this.initializeArgs();
-          });
-          await this.initializeArgs();
-        },
-
-
-        async fetchData() {
-          this.loading = true;
-          const url = "{{ url("api:fetch_uvs") }}" + window.location.search;
-          this.uvs = await (await fetch(url)).json();
-          this.loading = false;
-        },
-
-        max_page() {
-          return Math.ceil(this.uvs.count / this.pageSize);
-        }
-      }))
-    })
-  </script>
 {% endblock content %}