list de vaisseau et modal

html/templates/ship/ship_modal.html

@@ -1,5 +1,19 @@
 <!-- Copyright © 2023 Entreprise SkamKraft -->
-<div class="container smooth">
-  <p class="con-title">Bienvenue sur SkamCraft</p>
-  <p class="con-content">Application client pour l'API Space Tarders.</p>
-</div>
+<div class="my-modal">
+  <p class="modal-title">Ship</p>
+  <p class="Ship-id"></p>
+  <p class="Ship-registration"></p>
+  <p class="Ship-nav"></p>
+  <p class="Ship-crew"></p>
+  <p class="Ship-frame"></p>
+  <p class="Ship-reactor"></p>
+  <p class="Ship-engine"></p>
+  <p class="Ship-cooldown"></p>
+  <p class="Ship-modules"></p>
+  <p class="Ship-mounts"></p>
+  <p class="Ship-cargo"></p>
+  <p class="Ship-fuel"></p>
+  <div>
+      <button class="btn btn-val btn-close">Close</button>
+  </div>
+</div>

js/controllers/ships.js

@@ -9,27 +9,44 @@ export default (temp_engine) => {
     menu_mod(temp_engine);
     modal.load("templates/ship/ship_modal.html");
 
-    Ship.list((ship) => {
-      ship.data.forEach(data => {
-          console.log(data)
-          $(".ships").html(
+    Ship.list((ships) => {
+      ships.forEach(ship => {
+        $(".ships").append(
           `
             <div>
-              <h5>${data.symbol}</h5>
-                <p>fuel capacity: ${data.fuel.capacity}</p>
-              <button id="FT">FICHE Technique<button>
+              <h5>${ship.symbol}</h5>
+                <p>fuel capacity: ${ship.fuel.capacity}</p>
+              <button id="FT" data-symbol="${ship.symbol}">FICHE Technique<button>
             </div>
           `
           )
+          temp_engine.add_event("#FT", "click", (e) => {
+            const id_ship = $(e.target).attr("data-symbol");
+            if(ship.symbol=id_ship)
+            {
+            $(".Ship-id").text("ID : " + ship.symbol);
+            $(".Ship-registration").text("Registration : " + ship.registration);
+            $(".Ship-nav").text("Nav : " + ship.nav);
+            $(".Ship-crew").text("Crew : " + ship.crew);
+            $(".Ship-frame").text("Frame : " + ship.frame );
+            $(".Ship-reactor").text("Reactor : " + ship.reactor );
+            $(".Ship-engine").text("Engine : " + ship.engine);
+            $(".Ship-cooldown").text("Cooldown : " + ship.cooldown);
+            $(".Ship-modules").text("Modules : " + ship.modules );
+            $(".Ship-mounts").text("Mounts : " + ship.mounts );
+            $(".Ship-cargo").text("Cargo : " + ship.cargo);
+            $(".Ship-fuel").text("Fuel : " + ship.fuel);
+            }
+            modal.show();
+          });
       });
+      
     });
 
-    temp_engine.add_event("#btn-close", "click", () => {
+    temp_engine.add_event(".btn-close", "click", () => {
       modal.close();
     });
-    temp_engine.add_event("#FT", "click", () => {
-      modal.show();
-    });
+    
 
     
   });

js/skama_code/api/ship.js

@@ -5,11 +5,17 @@ import { My } from "./agent.js";
 
 export class Ship {
   constructor(data) {
-    this.name = data.symbol;
-    this.AgentName = data.registration;
-    this.Nav = data.nav;
+    this.symbol = data.symbol;
+    this.registration = data.registration;
+    this.nav = data.nav;
     this.crew = data.crew;
+    this.frame = data.frame;
+    this.reactor = data.reactor;
     this.engine = data.engine;
+    this.cooldown = data.cooldown;
+    this.modules = data.modules;
+    this.mounts = data.mounts;
+    this.cargo = data.cargo;
     this.fuel = data.fuel;
   }
 
@@ -23,27 +29,32 @@ export class Ship {
         Authorization: `Bearer ${My.agent.token}`,
       },
       success: (response) => {
-        callback(response);
+        let listShips = [];
+        response.data.forEach(ship => {
+          listShips.push(new Ship(ship))
+          
+        });
+        callback(listShips);
       },
       error: (err) => {
         error_handler(["Token invalide."]);
       },
     });
   }
-  static get(callback) {
-    const url = `${SpaceTraders.host}/my/ships/${this.name}`;
+  static get(shipSymbol, callback, error_handler) {
+    const url = `${SpaceTraders.host}/my/ships/${shipSymbol}`;
     $.ajax({
       url: url,
       method: "GET",
       headers: {
         Accept: "application/json",
-        Authorization: `Bearer ${token}`,
+        Authorization: `Bearer ${My.agent.token}`,
       },
       success: (response) => {
-        callback(response);
+        callback(new Ship(response.data));
       },
       error: (err) => {
-        error_handler(["Token invalide."]);
+        error_handler(err);
       },
     });
   }