Revise trainer viewing

src/admin/gym/trainer/index.php

@@ -29,7 +29,12 @@ AuthMiddleware::getInstance()->secureRoute(true);
         echo NavbarAdmin();
         ?>
         <div class="space"></div>
-        <div class="application-container" id="application-trainer">
+        <div class="application-container" id="application-trainer-1">
+        </div>
+        <div class="space"></div>
+
+        <div class="space"></div>
+        <div class="application-container" id="application-trainer-2">
         </div>
         <div class="space"></div>
     </div>
@@ -37,7 +42,8 @@ AuthMiddleware::getInstance()->secureRoute(true);
     <script src="/public/javascript/gym/trainer_card.js"></script>
     <script src="/public/javascript/gym/trainer.js"></script>
     <script>
-        showTrainerData(trainerData[0]);   // Temporary example
+        showTrainerInformation(trainerData[0]);   // Temporary example
+        showTrainerSkill(trainerData[0]);
     </script>
 </body>
 

src/public/javascript/gym/trainer.js

@@ -4,8 +4,11 @@ let trainer_1 = {
     gym_id: 43,
     trainer_name: "Arnold Schwarzenegger",
     trainer_description: "Seven times champion of Mr. Olympia",
-    skill_name: "Arnold Press",
-    skill_description: "Shoulder press with slight modification"
+    skills: 
+    {
+        "Arnold Press": "Shoulder press with slight modification",
+        "Praying Mantis": "A majestic bodybuilding pose"
+    }
   }
 
   let trainer_2 = {
@@ -13,8 +16,14 @@ let trainer_1 = {
     gym_id: 43,
     trainer_name: "Mike O'Hearn",
     trainer_description: "Baby don't Hearn me",
-    skill_name: "Being natty",
-    skill_description: "Being a real natural (no cap)"
+    skills:
+    {
+        1:
+        {
+            skill_name: "Being natty",
+            skill_description: "Being a real natural (no cap)"
+        }
+    }
   }
 
   let trainerData = [trainer_1, trainer_2];
@@ -38,10 +47,10 @@ function showGymTrainers(data) {
     });
 }
 
-function showTrainerData(trainer){
-    const gymTrainerList = document.getElementById("application-trainer");
-    gymTrainerList.innerHTML = `
-    <h2>Trainer Application</h2>
+function showTrainerInformation(trainer){
+    const gymTrainer = document.getElementById("application-trainer-1");
+    gymTrainer.innerHTML = `
+    <h2>Trainer Information</h2>
     <table>
         <tr>
             <td><strong>Username</strong></td>
@@ -59,14 +68,30 @@ function showTrainerData(trainer){
             <td><strong>Trainer Description</strong></td>
             <td>${trainer.trainer_description}</td>
         </tr>
-        <tr>
-            <td><strong>Skill</strong></td>
-            <td>${trainer.skill_name}</td>
-        </tr>
-        <tr>
-            <td><strong>Skill Description</strong></td>
-            <td>${trainer.skill_description}</td>
-        </tr>
+
     </table>
     `
+}
+
+function showTrainerSkill(trainer){
+    const gymTrainer = document.getElementById("application-trainer-2");
+
+    let i = 1;
+    for(const skillName in trainer.skills) {
+        const skillDescription = trainer.skills[skillName];
+        gymTrainer.innerHTML += `
+        <h2>Trainer Skill ${i}</h2>
+        <table>
+            <tr>
+                <td><strong>Skill Name</strong></td>
+                <td>${skillName}</td>
+            </tr>
+            <tr>
+                <td><strong>Skill Description</strong></td>
+                <td>${skillDescription}</td>
+            </tr>
+        </table>
+        `;
+        i++;
+    }
 }
\ No newline at end of file