diff --git a/assets/img/background.jpg b/assets/img/background.jpg deleted file mode 100644 index 5d0683d..0000000 Binary files a/assets/img/background.jpg and /dev/null differ diff --git a/assets/img/background.png b/assets/img/background.png new file mode 100644 index 0000000..8765004 Binary files /dev/null and b/assets/img/background.png differ diff --git a/css/global.css b/css/global.css index b5b416d..ec35e3e 100644 --- a/css/global.css +++ b/css/global.css @@ -1,45 +1,16 @@ /* Copyright © 2023 Entreprise SkamCraft */ -* { - font-family: "Inter", sans-serif; - box-sizing: border-box; - overflow: hidden; - background-color: #272727; -} + body, html { height: 100%; - display: flex; - flex-direction: column; -} - -/* Menu */ -.menu { - display: flex; - align-items: center; - justify-content: space-between; -} - -.title-section { - color: white; - display: flex; - align-items: center; - padding-left: 10px; -} - -.title-section img { - max-width: 80px; - max-height: 50px; } -.page-change-button { - padding-left: 10px; -} button { margin: 2px; - color: black; + /* color: black; */ background-color: white; border: 2px solid white; border-radius: 10px; @@ -52,64 +23,25 @@ button:hover { } main { - - flex: 1; - overflow-y: scroll; - display: flex; - justify-content: left; - flex-wrap: wrap; + /* display: flex; + justify-content: space-between; */ + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; padding-left: 30px; } - -.spacer { - margin-bottom: 35px; - margin-left: 100px; - margin-right: 100px; -} - -#credits { - background-color: white; - border: 2px solid white; - border-radius: 10px; - color: black; -} - -/* Footer */ -footer { - color: white; -} - -footer p { - display: flex; - justify-content: center; - margin-bottom: 0px; -} - /* Modal */ -.modal-content { - color: white; -} -#exampleModal { - color: white; - background-color: rgba(255, 255, 255, 0.1) -} - -#modal-footer { - background-color: #272727; -} - -#status-onhold { +.status-onhold{ color: orange; } -#status-accepted{ +.status-accepted{ color: greenyellow; } -#revenu { - color: white -} + + + diff --git a/css/style.css b/css/style.css index 1503b8f..b8a021c 100644 --- a/css/style.css +++ b/css/style.css @@ -15,7 +15,7 @@ } body { - background-image: url("/assets/img/background.jpg"); + background-image: url("/assets/img/background.png"); font-family: 'M42'; font-size: 7px; margin: 0px; diff --git a/html/templates/contracts/contracts.html b/html/templates/contracts/contracts.html index 39ca407..2e33570 100644 --- a/html/templates/contracts/contracts.html +++ b/html/templates/contracts/contracts.html @@ -1,22 +1,2 @@ - - - - - - - - - - - - - -
- -
- - - - - - \ No newline at end of file + +
\ No newline at end of file diff --git a/html/templates/contracts/contracts_modal.html b/html/templates/contracts/contracts_modal.html index 5a7e619..e09dddd 100644 --- a/html/templates/contracts/contracts_modal.html +++ b/html/templates/contracts/contracts_modal.html @@ -2,6 +2,14 @@

Contract

+

+

+

+

+

+

+

+

diff --git a/js/controllers/contracts.js b/js/controllers/contracts.js index 224b1e0..532e26e 100644 --- a/js/controllers/contracts.js +++ b/js/controllers/contracts.js @@ -9,99 +9,114 @@ import { Contract } from "../skama_code/api/contract.js"; import { Modal } from "../skama_code/ui/modal.js"; -export default function contracts(temp_engine) { +export default (temp_engine) => { let modal = new Modal("contract-modal", temp_engine); - let contracts_list = []; - - $('main').empty() - - Contract.list(10, 1, (contracts) => { - contracts_list = contracts; - contracts.forEach(contract => { - console.log(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 = - ` -
- -
-
${contract.faction}
-

${contract.deadline}

-

Status : ${status}

- -
-
- ` - } - else { - status = "on hold" - card = - ` -
- -
-
${contract.factionSymbol}
-

${contract.deadlineToAccept}

-

Status : ${status}

-

Revenu : ${contract.terms.payment.onAccepted} $

- - -
-
- ` - } - - $('main').append(card) + temp_engine.after_render((temp_engine) => { + modal.load("templates/contracts/contracts_modal.html"); + Contract.list(10, 1, (contracts) => { + + //Evenements + 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).remove(); + + }); + } + }); + }); + + 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" + } - }) - }) - //Evenements - temp_engine.after_render((temp_engine) => { - modal.load("templates/contracts/contracts_modal.html"); - temp_engine.add_event(".btn-accept", "click", (e) => { - console.log("test"); - contracts_list.forEach((contract) => { - if ($(e.target).attr("data-id") == contract.id) { - contract.accept(() => { - $(e.target).parent().children(".status-onhold").html("Status : accepté"); - $(e.target).remove(); - }); + if (contract.accepted) { + status = "accepted" + card = + ` +
+ +
+
${contract.faction}
+

${contract.deadline}

+

Status : ${status}

+ +
+
+ ` } + else { + status = "on hold" + card = + ` +
+ +
+
${contract.faction}
+

${contract.deadline}

+

Status : ${status}

+

Revenu : ${contract.paymentAccepted} $

+ + +
+
+ ` + } + $('.contracts').append(card); + }); + + temp_engine.add_event(".btn-infos", "click", (e) => { + console.log(e) + const id_contract = $(e.target).attr("data-id"); + console.log(id_contract); + const contract = contracts.find((element) => { + console.log(element); + return element.id == id_contract; + }); + + // const date = new Date(contract.expiration); + // console.log(date) + // let expiration = (date.getHours() + "h" + date.getMinutes() + ", " + date.getUTCMonth() + "." + date.getMonth() + "." +date.getFullYear()); + + $(".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(); }); - }); - temp_engine.add_event(".btn-infos", "click", () => { - modal.show(); }) temp_engine.add_event(".btn-close", "click", () => { modal.close(); - }) + }); menu_mod(temp_engine); }); + temp_engine.render("templates/contracts/contracts.html") } \ No newline at end of file diff --git a/js/skama_code/api/contract.js b/js/skama_code/api/contract.js index 3aafe1d..5d7119b 100644 --- a/js/skama_code/api/contract.js +++ b/js/skama_code/api/contract.js @@ -14,6 +14,12 @@ export class Contract { this.expiration = data.expiration; this.deadline = data.deadlineToAccept; this.terms = data.terms; + this.paymentAccepted = data.terms.payment.onAccepted; + this.paymentFulfill = data.terms.payment.onFulfilled; + this.tradeSymbol = data.terms.deliver[0].tradeSymbol; + this.destination = data.terms.deliver[0].destinationSymbol; + + } static get(id, callback, error_handler) {