anulax
/
skamkraft.anulax.ch
1
0
Fork 0
Code Issues Pull Requests Packages project_board Releases Wiki Activity

Ajout des informations des contracts

Browse Source
ruben
Ruben Tome ago%!(EXTRA string=1 year)
parent c97a219a0d
commit 930e742938
8 changed files with 120 additions and 179 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      assets/img/background.jpg
  2. BIN
      assets/img/background.png
  3. 90
      css/global.css
  4. 2
      css/style.css
  5. 24
      html/templates/contracts/contracts.html
  6. 8
      html/templates/contracts/contracts_modal.html
  7. 169
      js/controllers/contracts.js
  8. 6
      js/skama_code/api/contract.js

BIN
assets/img/background.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 287 KiB

BIN
assets/img/background.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 92 KiB

90
css/global.css
Unescape View File

@ -1,45 +1,16 @@
/* Copyright © 2023 Entreprise SkamCraft */ /* Copyright © 2023 Entreprise SkamCraft */
* {
font-family: "Inter", sans-serif;
box-sizing: border-box;
overflow: hidden;
background-color: #272727;
}
body, body,
html { html {
height: 100%; 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 { button {
margin: 2px; margin: 2px;
color: black; /* color: black; */
background-color: white; background-color: white;
border: 2px solid white; border: 2px solid white;
border-radius: 10px; border-radius: 10px;
@ -52,64 +23,25 @@ button:hover {
} }
main { main {
/* display: flex;
flex: 1; justify-content: space-between; */
overflow-y: scroll; display: grid;
display: flex; grid-template-columns: 1fr 1fr 1fr 1fr;
justify-content: left;
flex-wrap: wrap;
padding-left: 30px; 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 */
.modal-content {
color: white;
}
#exampleModal { .status-onhold{
color: white;
background-color: rgba(255, 255, 255, 0.1)
}
#modal-footer {
background-color: #272727;
}
#status-onhold {
color: orange; color: orange;
} }
#status-accepted{ .status-accepted{
color: greenyellow; color: greenyellow;
} }
#revenu {
color: white
}

2
css/style.css
Unescape View File

@ -15,7 +15,7 @@
} }
body { body {
background-image: url("/assets/img/background.jpg"); background-image: url("/assets/img/background.png");
font-family: 'M42'; font-family: 'M42';
font-size: 7px; font-size: 7px;
margin: 0px; margin: 0px;

24
html/templates/contracts/contracts.html
Unescape View File

@ -1,22 +1,2 @@
<!DOCTYPE html> <link rel="stylesheet" href="css/global.css">
<html lang="en"> <div class="contracts"></div>
<head>
<title></title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/ui.css">
<link rel="stylesheet" href="css/animation.css">
<script src="js/lib/fabric.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="module" src="js/controllers/contracts.js" defer></script>
</head>
<main>
</main>
<body>
</body>
</html>

8
html/templates/contracts/contracts_modal.html
Unescape View File

@ -2,6 +2,14 @@
<div class="my-modal"> <div class="my-modal">
<p class="modal-title">Contract</p> <p class="modal-title">Contract</p>
<p class="contract-id"></p>
<p class="contract-faction"></p>
<p class="contract-type"></p>
<p class="contract-expiration"></p>
<p class="contract-payment-accepted"></p>
<p class="contract-payment-fulfill"></p>
<p class="contract-tradeSymbol"></p>
<p class="contract-destinationSymbol"></p>
<div> <div>
<button class="btn btn-val btn-close">Close</button> <button class="btn btn-val btn-close">Close</button>
</div> </div>

169
js/controllers/contracts.js
Unescape View File

@ -9,99 +9,114 @@ import { Contract } from "../skama_code/api/contract.js";
import { Modal } from "../skama_code/ui/modal.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 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 =
`
<div class="card spacer" 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 class="card-text status-accepted">Status : ${status}</p>
<button class="btn-infos" contratID="${contract.id}" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Infos</button>
</div>
</div>
`
}
else {
status = "on hold"
card =
`
<div class="card spacer" style="width: 20rem;">
<img src="${img}" class="card-img-top" alt="">
<div class="card-body">
<h5 style="color:white" class="card-title">${contract.factionSymbol}</h5>
<p style="color:white" class="card-text">${contract.deadlineToAccept}</p>
<p class="card-text status-onhold">Status : ${status}</p>
<p class="card-text revenu">Revenu : ${contract.terms.payment.onAccepted} $</p>
<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>
`
}
$('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) => { if (contract.accepted) {
console.log("test"); status = "accepted"
contracts_list.forEach((contract) => { card =
if ($(e.target).attr("data-id") == contract.id) { `
contract.accept(() => { <div class="card spacer" style="width: 20rem;">
$(e.target).parent().children(".status-onhold").html("Status : accepté"); <img src="${img}" class="card-img-top" alt="">
$(e.target).remove(); <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 class="card-text status-accepted">Status : ${status}</p>
<button data-id="${contract.id}" class="btn-infos" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Infos</button>
</div>
</div>
`
} }
else {
status = "on hold"
card =
`
<div class="card spacer" 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 class="card-text status-onhold">Status : ${status}</p>
<p style="color:white" class="card-text revenu">Revenu : ${contract.paymentAccepted} $</p>
<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);
});
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", () => { temp_engine.add_event(".btn-close", "click", () => {
modal.close(); modal.close();
}) });
menu_mod(temp_engine); menu_mod(temp_engine);
}); });
temp_engine.render("templates/contracts/contracts.html") temp_engine.render("templates/contracts/contracts.html")
} }

6
js/skama_code/api/contract.js
Unescape View File

@ -14,6 +14,12 @@ export class Contract {
this.expiration = data.expiration; this.expiration = data.expiration;
this.deadline = data.deadlineToAccept; this.deadline = data.deadlineToAccept;
this.terms = data.terms; 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) { static get(id, callback, error_handler) {

Write Preview
Loading…
Cancel
Save