Sacha aura +2000

ago%!(EXTRA string=11 months) · 7b000c00a5
parent 03f8a9a30a
commit 7b000c00a5
14 changed files with 147 additions and 1 deletions
--- a/assets/contracts/background.png
+++ b/assets/contracts/background.png
--- a/assets/contracts/contractscreen.png
+++ b/assets/contracts/contractscreen.png
--- a/assets/contracts/leftarrow.png
+++ b/assets/contracts/leftarrow.png
--- a/assets/contracts/procurement.png
+++ b/assets/contracts/procurement.png
--- a/assets/contracts/rightarrow.png
+++ b/assets/contracts/rightarrow.png
--- a/assets/contracts/screen.png
+++ b/assets/contracts/screen.png
--- a/assets/contracts/shuttle.png
+++ b/assets/contracts/shuttle.png
--- a/assets/contracts/transportation.png
+++ b/assets/contracts/transportation.png
--- a/css/contracts.css
+++ b/css/contracts.css
@ -0,0 +1,17 @@
+.contracts
+{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.img
+{
+  position: absolute;
+  top: 10%;
+  left: 25%;
+  z-index: -1;
+  background-repeat: no-repeat;
+  display: flex;
+  justify-content: center;
+  
+}
--- a/css/global.css
+++ b/css/global.css
@ -13,7 +13,7 @@
 body{
    background-image: url("/assets/img/background.png"); 
    background-repeat: no-repeat;
-    background-size: 100%;
+    background-size: cover;
    overflow-x: hidden;
    font-family: var(--text-familly);
    color: var(--text-color);
--- a/html/templates/contracts/contracts.html
+++ b/html/templates/contracts/contracts.html
@ -0,0 +1,5 @@
+<div class="contracts">
+</div>
+<div class="img">
+    <img src="/assets/contracts/screen.png" alt="screen">
+</div>
--- a/index.html
+++ b/index.html
@ -11,6 +11,7 @@
    <link rel="stylesheet" href="css/global.css">
    <link rel="stylesheet" href="css/auth.css">
    <link rel="stylesheet" href="css/profile.css">
+    <link rel="stylesheet" href="css/contracts.css">
  </head>
  <body>

--- a/js/controllers/contracts.js
+++ b/js/controllers/contracts.js
@ -0,0 +1,119 @@
+"use strict";
+
+import menu_mod from "./menu_mod.js";
+import { Contract } from "../skama_code/api/contract.js";
+import { Modal } from "../skama_code/ui/modal.js";
+
+export default function contracts(temp_engine) {
+  temp_engine.after_render(menu_mod);
+
+  let modal = new Modal("contract-modal", temp_engine);
+
+  temp_engine.after_render((temp_engine) => {
+
+    modal.load("templates/contracts/contracts_modal.html");
+
+    Contract.list(10, 1, (contracts) => {
+
+      //Evenements accepter
+      temp_engine.add_event(".btn-accept", "click", (e) => {
+        contracts.forEach((contract) => {
+          if ($(e.target).attr("data-id") == contract.id) {
+            contract.accept(() => {
+              $(e.target).parent().children(".status-onhold").html("Status : accepté");
+              $(e.target).parent().children(".status-onhold").attr("class", 'status-accepted');
+              $(e.target).html("Contract accepted")
+            });
+          }
+        });
+      });
+      //Evenement infos
+      temp_engine.add_event(".btn-infos", "click", (e) => {
+        contracts.forEach((contract) => {
+          const id_contract = $(e.target).attr("data-id");
+          $(".contract-id").text("ID : " + contract.id);
+          $(".contract-faction").text("Faction : " + contract.faction);
+          $(".contract-type").text("Type : " + contract.type);
+          $(".contract-expiration").text("Expiration : " + contract.expiration);
+          $(".contract-payment-accepted").text("Payment : " + contract.paymentAccepted + " $");
+          $(".contract-payment-fulfill").text("Payment fulfill : " + contract.paymentFulfill + " $");
+          $(".contract-tradeSymbol").text("Trade Symbol : " + contract.tradeSymbol);
+          $(".contract-destinationSymbol").text("Destination : " + contract.destination);
+          modal.show();
+        });
+      });
+
+      contracts.forEach(contract => {
+        let img
+        let status
+        let card
+
+        if (contract.type = "PROCUREMENT") {
+          img = "/assets/contracts/procurement.png"
+        }
+        else if (contract.type = "TRANSPORT") {
+          img = "/assets/contracts/transportation.png"
+        }
+        else {
+          img = "/assets/contracts/shuttle.png"
+        }
+
+        if (contract.accepted) {
+          status = "accepted"
+          card =
+            `                            
+                    <div class="card" style="width: 20rem;">
+                      <img src="${img}" class="card-img-top" alt="">
+                      <div class="card-body">
+                        <h5 style="color:white" class="card-title">${contract.faction}</h5>
+                        <p style="color:white" class="card-text">${contract.deadline}</p>
+                        <p style="color:white" class="card-text">${contract.deadline}</p>
+                        <p style="color:white" class="card-text">${contract.deadline}</p>
+                        <p style="color:white" class="card-text">${contract.deadline}</p>
+                        <p class="card-text status-accepted">Status : ${status}</p>
+                        <p></p>                     
+                      </div>
+                      <div class="card-button">
+                        <button data-id="${contract.id}" type="button" class="btn btn-primary btn-infos" data-bs-toggle="modal" data-bs-target="#exampleModal">Infos</button> 
+                        <button data-id="${contract.id}" class="btn-modify btn btn-primary btn-accept" data-toggle="modal" data-target="#Modify" >Contract accepted</button>  
+                      </div>
+                    </div>
+            `
+        }
+
+        else {
+          status = "on hold"
+          card =
+            `                            
+                    <div class="card" style="width: 20rem;">
+                      <img src="${img}" class="card-img-top" alt="">
+                      <div class="card-body">                  
+                          <h5 style="color:white" class="card-title">${contract.faction}</h5>
+                          <p style="color:white" class="card-text">${contract.deadline}</p>
+                          <p style="color:white" class="card-text">${contract.deadline}</p>
+                          <p style="color:white" class="card-text">${contract.deadline}</p>
+                          <p style="color:white" class="card-text">${contract.deadline}</p>
+                          <p style="color:white" class="card-text">${contract.deadline}</p>
+                          <p style="color:white" class="card-text">${contract.deadline}</p>
+                          <p class="card-text status-onhold">Status : ${status}</p>                                        
+                          <p></p>                        
+                      </div>
+                      <div class="card-button">
+                        <button type="button" class="btn btn-primary btn-infos" data-bs-toggle="modal" data-bs-target="#exampleModal">Infos</button>
+                        <button data-id="${contract.id}" class="btn-modify btn btn-primary btn-accept" data-toggle="modal" data-target="#Modify" >Accepter</button>                       
+                      </div>
+                    </div>
+            `
+        }
+        $('.contracts').append(card);
+        $('.contracts').append(card);
+      });
+
+    })
+    temp_engine.add_event(".btn-close", "click", () => {
+      modal.close();
+    });
+    menu_mod(temp_engine);
+  });
+  temp_engine.render("templates/contracts/contracts.html")
+}
--- a/js/controllers/menu_mod.js
+++ b/js/controllers/menu_mod.js
@ -1,5 +1,6 @@
 import { My } from "../skama_code/commun/my.js";
 import profile from "./profile.js";
+import contracts from "./contracts.js";

 function loged_links(temp_engine) {
  $("#links").html(`
@ -12,6 +13,9 @@ function loged_links(temp_engine) {
  temp_engine.add_event("#profile-link", "click", () => {
    profile(temp_engine);
  });
+  temp_engine.add_event("#contracts-link", "click", () => {
+    contracts(temp_engine);
+  })
 }

 export default (temp_engine) => {