update: finish application in admin page

src/admin/gym/application/index.php

@@ -13,6 +13,7 @@ AuthMiddleware::getInstance()->secureRoute(true);
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="/public/css/style.css">
+    <link rel="stylesheet" href="/public/css/application.css"> 
     <title>Gym Finder App</title>
 </head>
 
@@ -20,25 +21,60 @@ AuthMiddleware::getInstance()->secureRoute(true);
     <div class="app">
         <script>
             const apikey = <?php echo json_encode($_ENV['API_KEY']) ?>;
+            const urlParams = new URLSearchParams(window.location.search);
+            const gymId = urlParams.get("gym_id");
+            const username = urlParams.get("trainer_username");
         </script>
         <?php
         echo NavbarAdmin();
         ?>
         <div class="space"></div>
+        <div class="application-container" id="application-trainer">
+        </div>
+        <div class="space"></div>
+        
+        <div class="first-line-button">
+            <button class="button-filter" id="accept-trainer" onclick="showPopupAcc();">
+                Accept Trainer
+            </button>
+
+            <div class="popup" id="pop-up-accept" onclick="hidePopupAcc();">
+                <div class="popup-content" onclick="event.stopPropagation();">
+                    <div class="popup-title acc" id="pop-up-title-edit-delete">
+                        Do you want to accept this trainer?
+                    </div>
+                    <div class="space2"></div>
+                    <button class="search-filter" onclick="acceptApplication(gymId, username);">Yes</button>
+                    <div class="space3"></div>
+                    <button class="cancel-filter"onclick="hidePopupAcc();">Cancel</button>
+                </div>
+            </div>
 
-        <div class="gym-page-content">
-            <div class="gym-content" id="gym-content">
-                
+            <div class="popup" id="pop-up-reject" onclick="hidePopupRej();">
+                <div class="popup-content" onclick="event.stopPropagation();">
+                    <div class="popup-title" id="pop-up-title-edit-delete">
+                        Do you want to reject this trainer?
+                    </div>
+                    <div class="space2"></div>
+                    <button class="search-filter" onclick="rejectApplication(gymId, username);">Yes</button>
+                    <div class="space3"></div>
+                    <button class="cancel-filter"onclick="hidePopupRej();">Cancel</button>
+                </div>
             </div>
-            <div class="space"></div>
-            
-           
-            <div class="space"></div>
+
+            <button class="button-filter reject" id="reject-trainer" onclick="showPopupRej();">
+                Reject Trainer
+            </button>
         </div>
+
+
     </div>
     <script src="/public/javascript/gym/format_card.js"></script>
     <script src="/public/javascript/gym/trainer_card.js"></script>
     <script src="/public/javascript/gym/application.js"></script>
+    <script>
+        getApplication(gymId, username);
+    </script>
 </body>
 
-</html>
+</html>
\ No newline at end of file

src/admin/gym/index.php

@@ -73,6 +73,13 @@ AuthMiddleware::getInstance()->secureRoute(true);
             </div>
             <div class="space"></div>
             
+            <div class="gym-attribute">Trainer List</div>
+            <div class="gym-card-container" id="gym-trainer-list">
+            <div class="space"></div>
+                Loading...
+            </div>
+            <div class="space"></div>
+
             <div class="gym-attribute">Application List</div>
             <div class="gym-card-container" id="gym-application-list">
             <div class="space"></div>
@@ -109,6 +116,9 @@ AuthMiddleware::getInstance()->secureRoute(true);
     <script src="/public/javascript/gym/format_card.js"></script>
     <script src="/public/javascript/gym/trainer_card.js"></script>
     <script src="/public/javascript/gym/application.js"></script>
+    <script>
+        getGymApplication(<?php echo $gym_id ?>);
+    </script>
 </body>
 
 </html>
\ No newline at end of file

src/public/css/application.css

+.application-container {
+    max-width: 80%;
+    margin: 0 auto;
+    margin-top: 2%;
+    margin-bottom: 2%;
+    padding: 2%;
+    padding-top: 1%;
+    border: 1px solid #ccc;
+    border-radius: 10px;
+    font-size: var(--font-size-medium);
+    /* color: var(--text-standard); */
+    font-family: var(--font-standard);
+    font-weight: 400;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+table, th, td {
+    border: 1px solid #ccc;
+}
+
+th, td {
+    padding: 10px;
+    text-align: left;
+}
+
+.first-line-button {
+    gap: 5%;
+}
+
+.reject {
+    background-color: rgb(238, 61, 61);
+    color: #e7faff;
+}
+
+.reject:hover, .reject:focus {
+    background-color: #b10000;
+    color: #e7faff;
+}
+
+.acc {
+    color: var(--text-standard);
+}
+@media screen and (min-width: 1440px){
+    .application-container {
+        max-width: 70%;
+        font-size: var(--font-size-standard);
+    }
+}
\ No newline at end of file

src/public/css/gym.css

@@ -30,8 +30,8 @@
 }
 .loading, .gym-name, .gym-attribute, .nama-kota, .gym-description, .gym-price, .rate-button, .gym-card-text, .trainer-card-text {
   color: var(--text-standard);
-  text-align: center;
   font-family: var(--font-standard);
+  text-align: center;
   font-size: 20px;
   font-style: normal;
   font-weight: 400;
@@ -80,7 +80,11 @@
 }
 .gym-card-text-bottom {
   width: 100%;
-  font-weight: 400;
+  font-weight: 500;
+  font-family: var(--font-standard);
+}
+.bold {
+  font-weight: 600;
 }
 .gym-card {
   margin-top: 10px;

src/public/css/style.css

@@ -16,7 +16,7 @@
   --button-standard: #f0f9ff;
   --button-active-standard: #bee1f8;
   --red-color: #cb0000;
-  --cancel-filter-color: #b1cad1;
+  --cancel-filter-color: #b1cad1;   
   --filter-option: #d9e8ed;
   --filter-option-stroke: #b3c7d2;
   --filter-option-hover: #c6e1eb;

src/public/javascript/gym/application.js

-function modifyGymApplicationList(data) {
-    const gymApplicationList = document.getElementById("gym-application-list");
-    gymApplicationList.innerHTML = "";
-    data.forEach((trainer) => {
-      gymApplicationList.innerHTML += TrainerCard(trainer);
-    });
-}
+function hidePopupAcc() { document.querySelector(`#pop-up-accept`).style.display = "none";}
+function showPopupAcc() { document.querySelector(`#pop-up-accept`).style.display = "flex";}
+function hidePopupRej() { document.querySelector(`#pop-up-reject`).style.display = "none";}
+function showPopupRej() { document.querySelector(`#pop-up-reject`).style.display = "flex";}
+
 // dummy data
 let trainer = {
-    name: "John Doe",
-    username: "johndoe",
-    acceptance: 0,
-    gym_id: 43
+  username: "johndoe",
+  gym_id: 43,
+  acceptance: 0,
+  trainer_name: "John Doe",
+  trainer_description: "Aku ingin bekerja",
+  application_description: "Aku ingin bekerja di sebuah gym, aku memiliki semangat di gym 43 ini semoga bisa keterima. Sekian dan terima kasih atas perhatian dan kesan dan pesannya",
 }
 let trainer2 = {
-    name: "Jane Doe",
-    username: "janedoe",
-    acceptance: 1,
-    gym_id: 43
+  username: "johndoedfdf",
+  gym_id: 43, 
+  acceptance: 0,
+  trainer_name: "John Doe",
+  trainer_description: "Aku ingin bekerja",
+  application_description: "Aku ingin bekerja",
 }
 let data = [trainer, trainer2];
-modifyGymApplicationList(data);
 
-function getApplication(gymId, username) {
+
+function modifyGymApplicationList(data) {
+    const gymApplicationList = document.getElementById("gym-application-list");
+    gymApplicationList.innerHTML = "";
+    if (data.length == 0) {
+      gymApplicationList.innerHTML = `
+      <div class="space"></div>
+      <div class="gym-card-text"> No Aplication found </div>
+      `;
+    }
+    data.forEach((trainer) => {
+      gymApplicationList.innerHTML += ApplicationCard(trainer);
+    });
+}
+
+function getGymApplication(gymId) {
+    modifyGymApplicationList(data);
     const xhr = new XMLHttpRequest();
     xhr.onreadystatechange = function () {
       if (this.readyState === 4) {
         if (this.status === 200) {
-        //   modifyGymRateList(JSON.parse(this.responseText)["ratings"], username);
           modifyGymApplicationList(JSON.parse(this.responseText)["trainers"]);
         } else {
           const json = JSON.parse(this.responseText);
@@ -40,11 +56,19 @@ function getApplication(gymId, username) {
     xhr.send();
 }
 
+function getApplication(username, gymId) {
+  // alert("get application with username: " + username + " and gym id: " + gymId);
+  modifyApplication(trainer);
+
+}
+
 function acceptApplication(username, gymId) {
-    const xhr = new XMLHttpRequest();
-    xhr.onreadystatechange = function () {
-      if (this.readyState === 4) {
-        if (this.status === 200) {
+  alert("ajax : accept with username: " + username + " and gym id: " + gymId);
+  const xhr = new XMLHttpRequest();
+  xhr.onreadystatechange = function () {
+    if (this.readyState === 4) {
+      if (this.status === 200) {
+          alert("accept with username: " + username + " and gym id: " + gymId);
         
         } else {
           const json = JSON.parse(this.responseText);
@@ -56,4 +80,52 @@ function acceptApplication(username, gymId) {
     // xhr.open("GET", `/api/gym/rating?gym_id=${gymId}`, true);
     // xhr.setRequestHeader("X-API-KEY", apikey);
     xhr.send();
+}
+
+function rejectApplication(username, gymId) {
+  alert("ajax : reject with username: " + username + " and gym id: " + gymId);
+  const xhr = new XMLHttpRequest();
+  xhr.onreadystatechange = function () {
+    if (this.readyState === 4) {
+      if (this.status === 200) {
+          alert("reject with username: " + username + " and gym id: " + gymId);
+        
+        } else {
+          const json = JSON.parse(this.responseText);
+          alert(json["error"]);
+        }
+      }
+    };
+    // xhr.open("GET", `/api/gym/rating?gym_id=${gymId}`, true);
+    // xhr.setRequestHeader("X-API-KEY", apikey);
+    xhr.send();
+}
+
+function modifyApplication(trainer) {
+    const gymApplicationList = document.getElementById("application-trainer");
+    gymApplicationList.innerHTML = `
+    <h2>Trainer Application</h2>
+    <table>
+        <tr>
+            <td><strong>Username</strong></td>
+            <td>${trainer.username}</td>
+        </tr>
+        <tr>
+            <td><strong>Gym ID</strong></td>
+            <td>${trainer.gym_id}</td>
+        </tr>
+        <tr>
+            <td><strong>Trainer Name</strong></td>
+            <td>${trainer.trainer_name}</td>
+        </tr>
+        <tr>
+            <td><strong>Trainer Description</strong></td>
+            <td>${trainer.trainer_description}</td>
+        </tr>
+        <tr>
+            <td><strong>Application Description</strong></td>
+            <td>${trainer.application_description}</td>
+        </tr>
+    </table>
+    `
 }
\ No newline at end of file

src/public/javascript/gym/trainer_card.js

@@ -10,15 +10,15 @@ function acceptance(acc_code){
     }
 }
 
-function TrainerCard(trainer){
-    let truncated_name = truncateText(trainer.name, 16);
+function ApplicationCard(trainer){
+    let truncated_name = truncateText(trainer.trainer_name, 16);
     let acceptance_status = acceptance(trainer.acceptance);
     let tname = "trainer name : " + truncated_name;
     let tusername = "username : " + trainer.username;
-    let trainer_card = `
+    let application_card = `
     <a class="gym-card" id="gym-card-${trainer.username}" href="./application/?gym_id=${trainer.gym_id}&trainer_username=${trainer.username}">
     <div class="trainer-card-text">
-        <div class="gym-card-name"> ${tname} </div>
+        <div class="gym-card-text-bottom"> ${tname} </div>
         <div class="space3"></div>
         <div class="gym-card-text-bottom">
             <div class="gym-card-text-bottom-left">
@@ -31,5 +31,25 @@ function TrainerCard(trainer){
     </div>
     </a>
     `;
+    return application_card;
+}
+
+function TrainerCard(trainer){
+    let truncated_name = truncateText(trainer.trainer_name, 16);
+    let tname = "trainer name : " + truncated_name;
+    let tusername = "username : " + trainer.username;
+    let trainer_card = `
+    <a class="gym-card" id="gym-card-${trainer.username}" href="./application/?gym_id=${trainer.gym_id}&trainer_username=${trainer.username}">
+    <div class="trainer-card-text bold">
+        <div class="gym-card-text-bottom"> ${tname} </div>
+        <div class="space3"></div>
+        <div class="gym-card-text-bottom">
+            <div class="gym-card-text-bottom-left">
+                ${tusername}
+            </div>
+        </div>
+    </div>
+    </a>
+    `;
     return trainer_card;
 }
\ No newline at end of file