feat: add pagination number

dewanakl · Sep 16, 2023 · d59168d · d59168d
1 parent 75999ec
commit d59168d
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 9 deletions.
diff --git a/index.html b/index.html
@@ -24,7 +24,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin="anonymous">
     <link rel="preconnect" href="https://gstatic.com" crossorigin="anonymous">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/normalize.css" integrity="sha256-WAgYcAck1C1/zEl5sBl5cfyhxtLgKGdpI3oKyJffVRI=" crossorigin="anonymous">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected].1/dist/css/bootstrap.min.css" integrity="sha256-2TnSHycBDAm2wpZmgdi0z81kykGPJAkiUY+Wf97RbvY=" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected].2/dist/css/bootstrap.min.css" integrity="sha256-MBffSnbbXwHCuZtgPYiwMQbfE7z+GOZ7fBPCNB06Z98=" crossorigin="anonymous">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css" integrity="sha256-CTSx/A06dm1B063156EVh15m6Y67pAjZZaQc89LLSrU=" crossorigin="anonymous">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/aos.css" integrity="sha256-GqiEX9BuR1rv5zPU5Vs2qS/NSHl1BJyBcjQYJ6ycwD4=" crossorigin="anonymous">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap">
@@ -361,6 +361,9 @@ <h1 class="font-estetik text-center mb-3" style="font-size: 3rem;">Ucapan & Doa<
                                 <i class="fa-solid fa-circle-left me-1"></i>Sebelumnya
                             </button>
                         </li>
+                        <li class="page-item disabled">
+                            <span class="page-link" id="page">1</span>
+                        </li>
                         <li class="page-item" id="next">
                             <button class="page-link" onclick="pagination.next(this)" aria-label="Next">
                                 Selanjutnya<i class="fa-solid fa-circle-right ms-1"></i>
@@ -449,7 +452,7 @@ <h1 class="font-estetik my-4" style="font-size: 2.5rem;">Wahyu & Riski</h1>
         </div>
     </div>
 
-    <script src="https://cdn.jsdelivr.net/npm/[email protected].1/dist/js/bootstrap.bundle.min.js" integrity="sha256-0upsHgyryiDRjpJLJaHNAYfDi6fDP2CrBuGwQCubzbU=" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected].2/dist/js/bootstrap.bundle.min.js" integrity="sha256-gvZPYrsDwbwYJLD5yeBfcNujPhRoGOY831wwbIzz3t0=" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/aos.js" integrity="sha256-pQBbLkFHcP1cy0C8IhoSdxlm0CtcH5yJ2ki9jjgR03c=" crossorigin="anonymous"></script>
     <script src="./js/app.js"></script>
 </body>

diff --git a/js/app.js b/js/app.js
@@ -127,6 +127,10 @@ const parseRequest = (method, token = null, body = null) => {
 const getUrl = (optional = null) => {
     let url = document.querySelector('body').getAttribute('data-url');
 
+    if (url.slice(-1) == '/') {
+        url = url.slice(0, -1);
+    }
+
     if (optional) {
         return url + optional;
     }
@@ -322,6 +326,16 @@ const like = async (button) => {
             parseRequest('PATCH', token))
             .then((res) => res.json())
             .then((res) => {
+                if (res.error.length != 0) {
+                    if (res.error[0] == 'Expired token') {
+                        alert('Terdapat kesalahan, token expired !');
+                        window.location.reload();
+                        return;
+                    }
+
+                    alert(res.error[0]);
+                }
+
                 if (res.data.status) {
                     removeTempLike(id);
 
@@ -342,13 +356,25 @@ const like = async (button) => {
             parseRequest('POST', token))
             .then((res) => res.json())
             .then((res) => {
-                setTempLike(id, res.data.uuid);
+                if (res.error.length != 0) {
+                    if (res.error[0] == 'Expired token') {
+                        alert('Terdapat kesalahan, token expired !');
+                        window.location.reload();
+                        return;
+                    }
+
+                    alert(res.error[0]);
+                }
 
-                heart.classList.remove('fa-regular');
-                heart.classList.add('fa-solid', 'text-danger');
+                if (res.code == 201) {
+                    setTempLike(id, res.data.uuid);
 
-                info.setAttribute('data-suka', (parseInt(info.getAttribute('data-suka')) + 1).toString())
-                info.innerText = info.getAttribute('data-suka') + ' suka';
+                    heart.classList.remove('fa-regular');
+                    heart.classList.add('fa-solid', 'text-danger');
+
+                    info.setAttribute('data-suka', (parseInt(info.getAttribute('data-suka')) + 1).toString())
+                    info.innerText = info.getAttribute('data-suka') + ' suka';
+                }
             })
             .catch((err) => {
                 alert(err);
@@ -457,9 +483,9 @@ const pagination = (() => {
         button.disabled = true;
         button.innerHTML = `<span class="spinner-border spinner-border-sm me-1"></span>Loading...`;
         await ucapan();
+        document.getElementById('daftarucapan').scrollIntoView({ behavior: 'smooth' });
         button.disabled = false;
         button.innerHTML = tmp;
-        document.getElementById('daftarucapan').scrollIntoView({ behavior: 'smooth' });
     };
 
     return {
@@ -473,6 +499,7 @@ const pagination = (() => {
             pageNow = 0;
             resultData = 0;
             await ucapan();
+            document.getElementById('page').innerText = 1;
             document.getElementById('next').classList.remove('disabled');
             disabledPrevious();
         },
@@ -486,6 +513,7 @@ const pagination = (() => {
             if (pageNow < 0) {
                 disabledPrevious();
             } else {
+                document.getElementById('page').innerText = parseInt(document.getElementById('page').innerText) - 1;
                 pageNow -= perPage;
                 disabledNext();
                 await buttonAction(button);
@@ -499,6 +527,7 @@ const pagination = (() => {
             if (resultData < perPage) {
                 disabledNext();
             } else {
+                document.getElementById('page').innerText = parseInt(document.getElementById('page').innerText) + 1;
                 pageNow += perPage;
                 disabledPrevious();
                 await buttonAction(button);

diff --git a/readme.md b/readme.md
@@ -6,7 +6,7 @@
 ##### Deployment API Hosting: [https://dikit.my.id/DeploymentApiHosting](https://dikit.my.id/DeploymentApiHosting)
 
 ### Tech stack
-- Bootstrap 5.3.1
+- Bootstrap 5.3.2
 - AOS 2.3.4
 - Fontawsome 6.4.2
 - Normalize.css 8.0.1