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

Modification css et flèche changement de page

Browse Source
ruben
Ruben Tome ago%!(EXTRA string=1 year)
parent cc78be691f
commit 28871311b9
2 changed files with 79 additions and 27 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. 32
      css/contract.css
  2. 70
      js/controllers/contracts.js

32
css/contract.css
Unescape View File

@ -37,13 +37,41 @@ html {
/* Ecran contenant les contrats */
.nav-nav {
margin-bottom: 100px;
}
.contracts {
display: flex;
display: grid;
justify-content: center;
grid-template-rows: 1fr 1fr;
}
.card img {
margin-right: 50px;
}
.card-body {
margin-right: 50px;
}
.card {
margin-bottom: 100px;
margin-left: -400px;
display: flex;
}
.card {}
.card-button {
display: flex;
flex-direction: row;
height: 30%;
}
.arrows {
display: flex;
justify-content: center;
}
/* Modal */

70
js/controllers/contracts.js
Unescape View File

@ -11,7 +11,6 @@ import { Modal } from "../skama_code/ui/modal.js";
export default (temp_engine) => {
let modal = new Modal("contract-modal", temp_engine);
temp_engine.after_render((temp_engine) => {
@ -20,7 +19,7 @@ export default (temp_engine) => {
Contract.list(10, 1, (contracts) => {
//Evenements
//Evenements accepter
temp_engine.add_event(".btn-accept", "click", (e) => {
contracts.forEach((contract) => {
if ($(e.target).attr("data-id") == contract.id) {
@ -32,12 +31,10 @@ export default (temp_engine) => {
}
});
});
//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);
@ -46,11 +43,40 @@ export default (temp_engine) => {
$(".contract-payment-fulfill").text("Payment fulfill : " + contract.paymentFulfill + " $");
$(".contract-tradeSymbol").text("Trade Symbol : " + contract.tradeSymbol);
$(".contract-destinationSymbol").text("Destination : " + contract.destination);
modal.show();
});
});
//Evenement flèche droite
temp_engine.add_event("#rightarrow", "click", (e) => {
if (contracts.lenght > 2) {
console.log("arrah")
}
else {
console.log("1 seul")
}
let slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("contracts");
if (n > slides.length) { slideIndex = 1 }
if (n < 1) { slideIndex = slides.length }
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex - 1].style.display = "block";
}
});
contracts.forEach(contract => {
@ -58,8 +84,6 @@ export default (temp_engine) => {
let status
let card
if (contract.type = "PROCUREMENT") {
img = "/assets/contracts/procurement.png"
}
@ -82,9 +106,10 @@ export default (temp_engine) => {
<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>
@ -99,33 +124,32 @@ export default (temp_engine) => {
<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-onhold">Status : ${status}</p>
<p style="color:white" class="card-text revenu">Revenu : ${contract.paymentAccepted} $</p>
<p></p>
<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")
}
Write Preview
Loading…
Cancel
Save