From efca11a16c5ac14beedfcf7067ccd320d67f18bf Mon Sep 17 00:00:00 2001
From: Hidayatullah Wildan Ghaly Buchary <16521502@std.stei.itb.ac.id>
Date: Sat, 7 Oct 2023 19:25:53 +0700
Subject: [PATCH] feat: add AJAX setup for challenge
---
app/views/challenge/index.php | 2 +-
public/js/challenge.js | 110 ++++++++++++++++++++++++++++++++++
2 files changed, 111 insertions(+), 1 deletion(-)
create mode 100644 public/js/challenge.js
diff --git a/app/views/challenge/index.php b/app/views/challenge/index.php
index c4e755c..e4c881b 100644
--- 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" ?>
diff --git a/public/js/challenge.js b/public/js/challenge.js
new file mode 100644
index 0000000..46c9015
--- /dev/null
+++ b/public/js/challenge.js
@@ -0,0 +1,110 @@
+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);
+
+});
+
+
--
GitLab