feat: add AJAX setup for challenge

efca11a1 · Hidayatullah Wildan Ghaly Buchary · eea36f94 · efca11a1 · efca11a1
Commit efca11a1 authored 1 year ago by Hidayatullah Wildan Ghaly Buchary
--- a/app/views/challenge/index.php
+++ b/app/views/challenge/index.php
@@ -14,7 +14,7 @@ if (!isset($_SESSION['username'])) {
    <title>Challenge</title>
    <link rel="stylesheet" href="../../../public/css/achievement.css">
    <link rel="stylesheet" href="../../../public/css/challenge.css">
-    <script src="../../../public/js/challenge.js"></script>
+    <script src="../../../public/js/challenge.js"></script> 
 </head>
 <body>
    <?php include "../dashboard/index.php" ?>

--- a/public/js/challenge.js
+++ b/public/js/challenge.js
+document.write('<script src="../../../public/js/api.js"></script>');
+document.addEventListener('DOMContentLoaded', function () {
+    const achievementList = document.getElementById('achievement-list');
+    const paginationButtons = document.getElementById('pagination-buttons');
+    var urlParams = new URLSearchParams(window.location.search);
+    let timeout;
+    var page = urlParams.get("page");
+    var achievementLimitCookie = document.cookie.split('; ').find(cookie => cookie.startsWith('collection-limit='));
+    var limit = achievementLimitCookie ? achievementLimitCookie.split('=')[1] : 5;
+    document.getElementById('page-limit').value = limit;
+    var achievementSearchCookie = document.cookie.split('; ').find(cookie => cookie.startsWith('collection-search='));
+    var search = achievementSearchCookie ? achievementSearchCookie.split('=')[1] : "";
+    document.getElementById('searchInput').value = search;
+    var achievementSearchAttributeCookie = document.cookie.split('; ').find(cookie => cookie.startsWith('collection-search-type='));
+    var searchType = achievementSearchAttributeCookie ? achievementSearchAttributeCookie.split('=')[1] : "name";
+    document.getElementById('search-attribute').value = searchType;
+    var achievementSortCookie = document.cookie.split('; ').find(cookie => cookie.startsWith('collection-sort='));
+    var sort = achievementSortCookie ? achievementSortCookie.split('=')[1] : "default";
+    document.getElementById('sort-by').value = sort;
+    var achievementOrderCookie = document.cookie.split('; ').find(cookie => cookie.startsWith('collection-order='));
+    var order = achievementOrderCookie ? achievementOrderCookie.split('=')[1] : "asc";
+    document.getElementById('sort-type').value = order;
+    console.log(limit);
+    page = page ? page : 1;
+    function loadAchievementPage(page) {
+        var url = `${SERVER_PATH}challenge/challenge.php?page=${page}`;
+        if (limit && limit !== "null" && limit !== "undefined") {
+            url += `&limit=${limit}`;
+        }
+        console.log(url);
+        const xhr = new XMLHttpRequest();
+        xhr.open('GET', url, true);
+        xhr.onreadystatechange = function () {
+            if (xhr.readyState === 4 && xhr.status === 200) {
+                console.log(this.responseText);
+                const response = JSON.parse(xhr.responseText);
+                achievementList.innerHTML = response.achievementList;
+                paginationButtons.innerHTML = response.paginationButtons;
+            }
+        };
+        xhr.send();
+    }
+    document.getElementById("page-limit").addEventListener("change", function () {
+        limit = this.value;
+        if (!limit || limit === "null" || limit === "undefined") {
+            limit = 5;
+        }
+        document.cookie = `collection-limit=${limit}; path=/`
+        loadAchievementPage(1);
+    });
+    document.getElementById("searchInput").addEventListener("keyup", function () {
+        search = this.value;
+        clearTimeout(timeout);
+        if (!search || search === "null" || search === "undefined") {
+            search = "";
+        }
+        timeout = setTimeout(function () {
+            document.cookie = `collection-search=${search}; path=/`
+            loadAchievementPage(1);
+        }, 500);
+    });
+    document.getElementById("search-attribute").addEventListener("change", function () {
+        searchType = this.value;
+        if (!searchType || searchType === "null" || searchType === "undefined") {
+            searchType = "a.name";
+        }
+        document.cookie = `collection-search-type=${searchType}; path=/`
+        loadAchievementPage(1);
+    });
+    document.getElementById("sort-by").addEventListener("change", function () {
+        sort = this.value;
+        if (!sort || sort === "null" || sort === "undefined" || sort === "default") {
+            sort = "default";
+        }
+        document.cookie = `collection-sort=${sort}; path=/`
+        loadAchievementPage(1);
+    });
+    document.getElementById("sort-type").addEventListener("change", function () {
+        order = this.value;
+        if (!order || order === "null" || order === "undefined" || order === "default") {
+            order = "default";
+        }
+        document.cookie = `collection-order=${order}; path=/`
+        loadAchievementPage(1);
+    });
+    loadAchievementPage(page);
+});