Tomé Rúben
ago%!(EXTRA string=1 year)
parent
bf774f69f5
commit
c97a219a0d
13 changed files with 349 additions and 395 deletions
@ -0,0 +1,22 @@ |
||||
<!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> |
||||
@ -0,0 +1,8 @@ |
||||
<!-- Copyright © 2023 Entreprise SkamKraft --> |
||||
|
||||
<div class="my-modal"> |
||||
<p class="modal-title">Contract</p> |
||||
<div> |
||||
<button class="btn btn-val btn-close">Close</button> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,107 @@ |
||||
// Copyright © 2023 Entreprise SkamKraft
|
||||
"use strict"; |
||||
|
||||
import { SpaceTraders } from "../skama_code/api/config.js"; |
||||
|
||||
import menu_mod from "./menu_mod.js"; |
||||
import { My } from "../skama_code/api/agent.js"; |
||||
import { Contract } from "../skama_code/api/contract.js"; |
||||
import { Modal } from "../skama_code/ui/modal.js"; |
||||
|
||||
|
||||
export default function contracts(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) |
||||
|
||||
|
||||
|
||||
}) |
||||
}) |
||||
|
||||
//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(); |
||||
}); |
||||
} |
||||
}); |
||||
}); |
||||
|
||||
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") |
||||
} |
||||
@ -0,0 +1,129 @@ |
||||
// Copyright © 2023 Entreprise SkamKraft
|
||||
'use strict'; |
||||
import contracts from "../../controllers/contracts.js"; |
||||
import { My } from "../api/agent.js"; |
||||
import { SpaceTraders } from "./config.js"; |
||||
|
||||
|
||||
export class Contract { |
||||
constructor(data) { |
||||
this.id = data.id; |
||||
this.faction = data.factionSymbol; |
||||
this.type = data.type; |
||||
this.accepted = data.accepted; |
||||
this.expiration = data.expiration; |
||||
this.deadline = data.deadlineToAccept; |
||||
this.terms = data.terms; |
||||
} |
||||
|
||||
static get(id, callback, error_handler) { |
||||
const url = `${SpaceTraders.host}/my/contracts/${id}`; |
||||
$.ajax({ |
||||
url: url, |
||||
method: "GET", |
||||
headers: { |
||||
Accept: "application/json", |
||||
Authorization: `Bearer ${My.agent.token}`, |
||||
}, |
||||
success: (reponse) => { |
||||
callback(new Contract(reponse.data)); |
||||
}, |
||||
error: (err) => { |
||||
error_handler("Contract not found"); |
||||
} |
||||
}); |
||||
} |
||||
|
||||
static list(limit, page, callback) { |
||||
const url = `${SpaceTraders.host}/my/contracts` |
||||
$.ajax({ |
||||
url: url, |
||||
method: "GET", |
||||
data: { |
||||
limit: limit, |
||||
page: page, |
||||
}, |
||||
headers: { |
||||
Accept: "application/json", |
||||
Authorization: `Bearer ${My.agent.token}`, |
||||
}, |
||||
success: (reponse) => { |
||||
let contracts = []; |
||||
reponse.data.forEach(contract => { |
||||
contracts.push(new Contract(contract)); |
||||
}); |
||||
callback(contracts); |
||||
}, |
||||
error: (err) => { |
||||
error_handler("Contract not found"); |
||||
} |
||||
}); |
||||
} |
||||
|
||||
accept(callback) { |
||||
console.log("Access"); |
||||
const url = `${SpaceTraders.host}/my/contracts/${this.id}/accept` |
||||
$.ajax({ |
||||
url: url, |
||||
method: "POST", |
||||
headers: { |
||||
'Content-Type': 'application/json', |
||||
Accept: "application/json", |
||||
Authorization: `Bearer ${My.agent.token}`, |
||||
}, |
||||
success: (reponse) => { |
||||
callback(reponse); |
||||
}, |
||||
error: (err) => { |
||||
//error_handler("Contract not found");
|
||||
} |
||||
}); |
||||
|
||||
|
||||
} |
||||
|
||||
static deliver(contractId, token) { |
||||
|
||||
const url = `${SpaceTraders.host}/my/contracts/${contractId}/deliver` |
||||
$.ajax({ |
||||
url: url, |
||||
method: "POST", |
||||
headers: { |
||||
'Content-Type': 'application/json', |
||||
Accept: "application/json", |
||||
Authorization: `Bearer ${My.agent.token}`, |
||||
}, |
||||
success: (reponse) => { |
||||
callback(reponse); |
||||
}, |
||||
error: (err) => { |
||||
error_handler("Contract not found"); |
||||
} |
||||
}); |
||||
|
||||
|
||||
} |
||||
|
||||
static fulfill(contractId, token) { |
||||
|
||||
const url = `${SpaceTraders.host}/my/contracts/${contractId}/fulfill` |
||||
$.ajax({ |
||||
url: url, |
||||
method: "POST", |
||||
headers: { |
||||
'Content-Type': 'application/json', |
||||
Accept: "application/json", |
||||
Authorization: `Bearer ${My.agent.token}`, |
||||
}, |
||||
success: (reponse) => { |
||||
callback(reponse); |
||||
}, |
||||
error: (err) => { |
||||
error_handler("Contract not found"); |
||||
} |
||||
}); |
||||
|
||||
|
||||
} |
||||
|
||||
} |
||||
@ -1,157 +0,0 @@ |
||||
// Copyright © 2023 Entreprise SkamKraft
|
||||
|
||||
"use strict"; |
||||
|
||||
const spacetradersApiUrl = "https://api.spacetraders.io/v2/"; |
||||
|
||||
const REQUEST = async (url, method, headers, data) => { |
||||
try { |
||||
const response = await $.ajax(url, { |
||||
method, |
||||
headers, |
||||
data, |
||||
}); |
||||
|
||||
return response.data; |
||||
} catch (error) { |
||||
return error; |
||||
} |
||||
}; |
||||
|
||||
export default { |
||||
Agent: { |
||||
create: (symbol, faction) => { |
||||
const url = `${spacetradersApiUrl}register`; |
||||
const headers = { "Content-Type": "application/json" }; |
||||
const data = JSON.stringify({ symbol, faction }); |
||||
|
||||
return REQUEST(url, "POST", headers, data); |
||||
}, |
||||
|
||||
get: (token) => { |
||||
const url = `${spacetradersApiUrl}my/agent`; |
||||
const headers = { |
||||
Accept: "application/json", |
||||
Authorization: `Bearer ${token}`, |
||||
}; |
||||
|
||||
return REQUEST(url, "GET", headers); |
||||
}, |
||||
|
||||
getPublic: (symbol) => { |
||||
const url = `${spacetradersApiUrl}agents/${symbol}`; |
||||
const headers = { Accept: "application/json" }; |
||||
|
||||
return REQUEST(url, "GET", headers); |
||||
}, |
||||
|
||||
list: (limit, page) => { |
||||
const url = `${spacetradersApiUrl}agents`; |
||||
const headers = { Accept: "application/json" }; |
||||
const data = { limit, page }; |
||||
|
||||
return REQUEST(url, "GET", headers, data); |
||||
}, |
||||
}, |
||||
|
||||
Faction: { |
||||
list: (limit, page) => { |
||||
const url = `${spacetradersApiUrl}factions`; |
||||
const headers = { Accept: "application/json" }; |
||||
const data = { limit, page }; |
||||
|
||||
return REQUEST(url, "GET", headers, data); |
||||
}, |
||||
}, |
||||
|
||||
System: { |
||||
list: (limit, page) => { |
||||
const url = `${spacetradersApiUrl}systems/`; |
||||
const headers = { Accept: "application/json" }; |
||||
const data = { limit, page }; |
||||
|
||||
return REQUEST(url, "GET", headers, data); |
||||
}, |
||||
|
||||
get: (symbol) => { |
||||
const url = `${spacetradersApiUrl}systems/${symbol}`; |
||||
const headers = { Accept: "application/json" }; |
||||
|
||||
return REQUEST(url, "GET", headers); |
||||
}, |
||||
}, |
||||
|
||||
Waypoint: { |
||||
list: (limit, page, systemSymbol) => { |
||||
const url = `${spacetradersApiUrl}systems/${systemSymbol}/waypoints`; |
||||
const headers = { Accept: "application/json" }; |
||||
const data = { limit, page }; |
||||
|
||||
return REQUEST(url, "GET", headers, data); |
||||
}, |
||||
|
||||
get: (systemSymbol, waypointSymbol, token) => { |
||||
const url = `${spacetradersApiUrl}systems/${systemSymbol}/waypoints/${waypointSymbol}/market`; |
||||
const headers = { |
||||
Accept: "application/json", |
||||
Authorization: `Bearer ${token}`, |
||||
}; |
||||
|
||||
return REQUEST(url, "GET", headers); |
||||
}, |
||||
}, |
||||
|
||||
Contract: { |
||||
list: (token) => { |
||||
const url = `${spacetradersApiUrl}my/contracts/`; |
||||
const headers = { |
||||
Accept: "application/json", |
||||
Authorization: `Bearer ${token}`, |
||||
}; |
||||
|
||||
return REQUEST(url, "GET", headers); |
||||
}, |
||||
|
||||
get: async (contratId, token) => { |
||||
const url = `${spacetradersApiUrl}my/contracts/${contratId}`; |
||||
const headers = { |
||||
Accept: "application/json", |
||||
Authorization: `Bearer ${token}`, |
||||
}; |
||||
|
||||
return REQUEST(url, "GET", headers); |
||||
}, |
||||
|
||||
accept: async (contratId, token) => { |
||||
const url = `${spacetradersApiUrl}my/contracts/${contratId}/accept`; |
||||
const headers = { |
||||
'Content-Type': 'application/json', |
||||
Accept: "application/json", |
||||
Authorization: `Bearer ${token}`, |
||||
}; |
||||
|
||||
return REQUEST(url, "POST", headers); |
||||
}, |
||||
|
||||
deliver : async(contratId, token)=>{ |
||||
const url = `${spacetradersApiUrl}my/contracts/${contratId}/deliver`; |
||||
const headers = { |
||||
'Content-Type': 'application/json', |
||||
Accept: "application/json", |
||||
Authorization: `Bearer ${token}`, |
||||
}; |
||||
|
||||
return REQUEST(url, "POST", headers); |
||||
}, |
||||
fulfill: async (contratId, token) =>{ |
||||
const url = `${spacetradersApiUrl}my/contracts/${contratId}/fulfill`; |
||||
const headers = { |
||||
'Content-Type': 'application/json', |
||||
Accept: "application/json", |
||||
Authorization: `Bearer ${token}`, |
||||
}; |
||||
|
||||
return REQUEST(url, "POST", headers); |
||||
} |
||||
}, |
||||
}; |
||||
@ -1,166 +0,0 @@ |
||||
// Copyright © 2023 Entreprise SkamCraft
|
||||
|
||||
"use strict"; |
||||
|
||||
import AUTH from "./auth.js"; |
||||
import SpaceTraders from "./api.js"; |
||||
|
||||
$(document).ready(async function () { |
||||
//Auth
|
||||
if (document.URL.includes("login.html")) { |
||||
$("#btn-login").on("click", () => { |
||||
AUTH.login(); |
||||
}); |
||||
return; |
||||
} |
||||
|
||||
if (document.URL.includes("register.html")) { |
||||
const factions = await SpaceTraders.Faction.list(10, 1); |
||||
factions.forEach((faction) => { |
||||
const option = `<option>${faction.symbol}</option>`; |
||||
$("#group-faction").append(option); |
||||
}); |
||||
|
||||
$("#btn-register").on("click", () => { |
||||
AUTH.register(); |
||||
}); |
||||
return; |
||||
} |
||||
|
||||
if (!(await AUTH.isLogin())) window.location.href = "login.html"; |
||||
|
||||
agent(); |
||||
|
||||
//Buttons
|
||||
$("#btn-contract").on("click", () => { |
||||
contract(); |
||||
}); |
||||
$("#btn-faction").on("click", () => { }); |
||||
$("#btn-ship").on("click", () => { }); |
||||
$("#btn-system").on("click", () => { }); |
||||
$("#btn-logout").on("click", () => { |
||||
logout(); |
||||
}); |
||||
}); |
||||
|
||||
function loadPage(page) { |
||||
$("main").load(`templates/${page}.html`); |
||||
} |
||||
|
||||
function logout() { |
||||
localStorage.removeItem("token"); |
||||
window.location.href = "login.html"; |
||||
} |
||||
|
||||
async function agent() { |
||||
let token = localStorage.getItem("token"); |
||||
let agent = await SpaceTraders.Agent.get(token); |
||||
|
||||
$("#credits").text(agent.credits.toLocaleString() + " $"); |
||||
} |
||||
|
||||
async function contract() { |
||||
|
||||
const token = localStorage.getItem("token"); |
||||
const contracts = await SpaceTraders.Contract.list(token); |
||||
|
||||
$('main').empty() |
||||
|
||||
contracts.forEach(contrat => { |
||||
let img |
||||
let status |
||||
let card |
||||
console.log(contrat) |
||||
if (contrat.type = "PROCUREMENT") { |
||||
img = "/img/procurement.png" |
||||
} |
||||
else if (contrat.type = "TRANSPORT") { |
||||
img = "/img/transportation.png" |
||||
} |
||||
else { |
||||
img = "/img/shuttle.png" |
||||
} |
||||
if (contrat.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">${contrat.factionSymbol}</h5> |
||||
<p style="color:white" class="card-text">${contrat.deadlineToAccept}</p> |
||||
<p id="status-accepted" class="card-text">Status : ${status}</p> |
||||
<button id="btn-infos" contratID="${contrat.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">${contrat.factionSymbol}</h5> |
||||
<p style="color:white" class="card-text">${contrat.deadlineToAccept}</p> |
||||
<p id="status-onhold" class="card-text">Status : ${status}</p> |
||||
<p id="revenu" class="card-text">Revenu : ${contrat.terms.payment.onAccepted} $</p> |
||||
<button id="btn-infos" contratID="${contrat.id}" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Infos</button> |
||||
<button id="btn-accept" contratID="${contrat.id}" class="btn-modify btn btn-primary" data-toggle="modal" data-target="#Modify" >Accepter</button> |
||||
</div> |
||||
</div> |
||||
` |
||||
} |
||||
|
||||
|
||||
|
||||
$('main').append(card) |
||||
$('main').append(card) |
||||
$('main').append(card) |
||||
$('main').append(card) |
||||
$('main').append(card) |
||||
$('main').append(card) |
||||
$('main').append(card) |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
$('#btn-infos').on('click', async function () { |
||||
const token = localStorage.getItem("token"); |
||||
const contrat = await SpaceTraders.Contract.get($(this).attr('contratID'), token); |
||||
const modal = ` |
||||
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> |
||||
<div class="modal-dialog"> |
||||
<div class="modal-content"> |
||||
<div class="modal-header"> |
||||
<h1 class="modal-title fs-5" id="title-modal">Informations</h1> |
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> |
||||
</div> |
||||
<div class="modal-body"> |
||||
Contrat ID : ${contrat.id} <br> |
||||
Type : ${contrat.type} <br> |
||||
Faction : ${contrat.factionSymbol} <br> |
||||
DeadLine : ${contrat.deadlineToAccept} |
||||
</div> |
||||
<div class="modal-footer" id="modal-footer"> |
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div>` |
||||
$('main').append(modal) |
||||
}) |
||||
|
||||
$('#btn-accept').on('click', async function () { |
||||
const token = localStorage.getItem("token"); |
||||
await SpaceTraders.Contract.accept($(this).attr('contratID'), token); |
||||
$("#status-onhold").html("Status : accepté"); |
||||
document.getElementById("status-onhold").id = "status-accepted"; |
||||
agent(); |
||||
this.remove(); |
||||
}) |
||||
|
||||
}) |
||||
} |
||||
Loading…
Reference in New Issue