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
Split 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. 77
      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 */
* {
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
}

2
css/style.css
Unescape View File

@ -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;

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

@ -1,22 +1,2 @@
<!DOCTYPE html>
<html lang="en">
<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>
<link rel="stylesheet" href="css/global.css">
<div class="contracts"></div>

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

@ -2,6 +2,14 @@
<div class="my-modal">
<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>
<button class="btn btn-val btn-close">Close</button>
</div>

77
js/controllers/contracts.js
Unescape View File

@ -9,18 +9,30 @@ 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()
temp_engine.after_render((temp_engine) => {
modal.load("templates/contracts/contracts_modal.html");
Contract.list(10, 1, (contracts) => {
contracts_list = contracts;
contracts.forEach(contract => {
console.log(contract)
//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
@ -47,7 +59,7 @@ export default function contracts(temp_engine) {
<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>
<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>
`
@ -59,49 +71,52 @@ export default function contracts(temp_engine) {
<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>
<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 class="card-text revenu">Revenu : ${contract.terms.payment.onAccepted} $</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);
});
$('main').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());
//Evenements
temp_engine.after_render((temp_engine) => {
modal.load("templates/contracts/contracts_modal.html");
$(".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);
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();
});
}
});
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")
}

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

@ -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) {

Write Preview
Loading…
Cancel
Save