Affichage des infos des contrats

ago%!(EXTRA string=1 year) · 608a59ebf3
parent 542d1dfd88
commit 608a59ebf3
4 changed files with 95 additions and 58 deletions
--- a/img/contrat.jpg
+++ b/img/contrat.jpg
--- a/index.html
+++ b/index.html
@ -2,28 +2,28 @@

 <!DOCTYPE html>
 <html lang="fr" class="html-index">
-  <head>
+
+<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap"
-      rel="stylesheet"
-    />
-    <script
-      src="https://code.jquery.com/jquery-3.7.1.min.js"
-      integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
-      crossorigin="anonymous"
-    ></script>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap" rel="stylesheet" />
+  <script src="https://code.jquery.com/jquery-3.7.1.min.js"
+    integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
  <script type="module" src="scripts/main.js" defer></script>
  <link rel="stylesheet" href="/css/global.css" />
-    <link rel="icon" href="img/logo.png" />
+  <link rel="icon" href="" />
  <title>SkamCraft</title>
-  </head>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
+    integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
+    crossorigin="anonymous"></script>
+</head>

-  <body>
+<body>
  <header id="header">
    <div class="menu">
      <div class="title-section">
@ -44,11 +44,16 @@
    <hr />
  </header>

-    <main></main>
+  <main>
+
+
+
+  </main>

  <footer id="footer">
    <hr />
    <p>SkamKraft &copy; 2023</p>
  </footer>
-  </body>
+</body>
+
 </html>
--- a/scripts/main.js
+++ b/scripts/main.js
@ -35,9 +35,9 @@ $(document).ready(async function () {
  $("#btn-contract").on("click", () => {
    contract();
  });
-  $("#btn-faction").on("click", () => {});
-  $("#btn-ship").on("click", () => {});
-  $("#btn-system").on("click", () => {});
+  $("#btn-faction").on("click", () => { });
+  $("#btn-ship").on("click", () => { });
+  $("#btn-system").on("click", () => { });
  $("#btn-logout").on("click", () => {
    logout();
  });
@ -60,17 +60,50 @@ async function agent() {
 }

 async function contract() {
+
  const token = localStorage.getItem("token");
  const contracts = await SpaceTraders.Contract.list(token);

-  $("main").empty();
+  $('main').empty()

-  contracts.forEach((contract) => {
-    let card = `<div class="card">
-      <div class="card-title">
-        <h1>${contract.id}</h1>
+  contracts.forEach(contrat => {
+    console.log(contrat);
+    const card =
+      `                            
+        <div class="card" style="width: 20rem;">
+              <img src="/img/contrat.jpg" class="card-img-top" alt="">
+              <div class="card-body">
+                  <h5 style="color:white" class="card-title">${contrat.factionSymbol}</h5>
+                  <p style="color:white" class="card-text">${contrat.accepted}</p>
+                  <button id="btn-infos" contratID="${contrat.id}" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Infos</button>
+                  <button id="btn-accepter" class="btn-modify btn btn-primary" data-toggle="modal" data-target="#Modify" >Accepter</button>                       
              </div>
-    </div>;`;
-    $("main").append(card);
-  });
+          </div>
+      `
+
+    $('main').append(card)
+    $('#btn-infos').on('click', async function () {
+      const token = localStorage.getItem("token");
+      const contrat = await SpaceTraders.Contract.get($(this).attr('contratID'), token);
+      const modal = `
+      <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+        <div class="modal-dialog">
+          <div class="modal-content">
+            <div class="modal-header">
+              <h1 class="modal-title fs-5" id="exampleModalLabel">${contrat.id}</h1>
+              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+          <div class="modal-body">
+            ...
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+            <button type="button" class="btn btn-primary">Save changes</button>
+          </div>
+        </div>
+      </div>
+    </div>`
+      $('main').append(modal)
+    })
+  })
 }
--- a/templates/contract.html
+++ b/templates/contract.html
@ -1 +0,0 @@
-<div class="contrats"></div>