diff --git a/css/animation.css b/css/animation.css index 3207215..7d4adee 100644 --- a/css/animation.css +++ b/css/animation.css @@ -2,14 +2,15 @@ .ext-modal[open] { - animation: myFadeIn 2.0s ease normal; + animation: myFadeIn 0.5s ease normal; } - -@keyframes myFadeIn{ - from { - bottom: 100%; - } - to { - bottom: 0%; - } + +@keyframes myFadeIn { + from { + bottom: 100%; + } + + to { + bottom: 0%; + } } \ No newline at end of file diff --git a/html/template.html b/html/template.html index 9821bca..68f3a88 100644 --- a/html/template.html +++ b/html/template.html @@ -8,9 +8,10 @@ +
+ \ No newline at end of file diff --git a/html/templates/contracts/contracts.html b/html/templates/contracts/contracts.html new file mode 100644 index 0000000..39ca407 --- /dev/null +++ b/html/templates/contracts/contracts.html @@ -0,0 +1,22 @@ + + + + + + + + + + + + + +
+ +
+ + + + + + \ No newline at end of file diff --git a/html/templates/contracts/contracts_modal.html b/html/templates/contracts/contracts_modal.html new file mode 100644 index 0000000..5a7e619 --- /dev/null +++ b/html/templates/contracts/contracts_modal.html @@ -0,0 +1,8 @@ + + +
+

Contract

+
+ +
+
\ No newline at end of file diff --git a/js/controllers/contracts.js b/js/controllers/contracts.js index e69de29..224b1e0 100644 --- a/js/controllers/contracts.js +++ b/js/controllers/contracts.js @@ -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 = + ` +
+ +
+
${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) + + + + }) + }) + + //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") +} \ No newline at end of file diff --git a/js/controllers/login.js b/js/controllers/login.js index 9761989..1a9ae84 100644 --- a/js/controllers/login.js +++ b/js/controllers/login.js @@ -8,35 +8,33 @@ export default function login(temp_engine) { let auth = new Auth(true); let modal = new Modal("login-modal", temp_engine); - function render_login() { - temp_engine.render(`templates/auth/login.html`); - modal.load("templates/auth/login_modal.html") - } - modal.add_class("ext-modal"); - temp_engine.after_render(menu_mod); + temp_engine.after_render((temp_engine) => { + modal.load("templates/auth/login_modal.html"); - render_login(); + temp_engine.add_event("#ok", "click", () => { + home(temp_engine); + }); - temp_engine.add_event("#ok", "click", () => { - home(temp_engine); - }); + temp_engine.add_event("#forget_login", "click", () => { + My.agent = null; + auth.unload_token(); + modal.close(); + render_login(); + }); - temp_engine.add_event("#forget_login", "click", () => { - My.agent = null; - auth.unload_token(); - modal.close(); - render_login(); - }); + temp_engine.add_event("#val", "click", () => { + let token = $("#in-token").val(); + auth.login(token); + }); - temp_engine.add_event("#val", "click", () => { - let token = $("#in-token").val(); - auth.login(token); + temp_engine.add_event("#cancel", "click", () => { + $("#in-token").val(""); + }); + menu_mod(temp_engine); }); - temp_engine.add_event("#cancel", "click", () => { - $("#in-token").val(""); - }); + temp_engine.render(`templates/auth/login.html`); auth.done((agent) => { modal.show(); diff --git a/js/controllers/menu_mod.js b/js/controllers/menu_mod.js index 6287759..d9382c8 100644 --- a/js/controllers/menu_mod.js +++ b/js/controllers/menu_mod.js @@ -3,6 +3,7 @@ import login from "./login.js"; import reg from "./reg.js"; import home from "./home.js"; import { systems } from "./systems.js"; +import contracts from "./contracts.js"; function init_menu(temp_engine) { temp_engine.add_event("#reg-link", "click", () => { @@ -17,6 +18,10 @@ function init_menu(temp_engine) { temp_engine.add_event(".nav-brand", "click", () => { home(temp_engine); }); + //Contarcts + temp_engine.add_event("#contracts-link", "click", () => { + contracts(temp_engine); + }) } function loged_links() { @@ -38,7 +43,7 @@ function show_stats() { export default function menu_mod(temp_engine) { init_menu(temp_engine); - if(My.agent) { + if (My.agent) { show_stats(); loged_links(); } diff --git a/js/controllers/reg.js b/js/controllers/reg.js index a8b8425..f136e80 100644 --- a/js/controllers/reg.js +++ b/js/controllers/reg.js @@ -11,41 +11,43 @@ export default function reg(temp_engine) { function render_reg() { temp_engine.render(`templates/auth/reg.html`); - modal.load("templates/auth/reg_modal.html") } - modal.add_class("ext-modal"); - temp_engine.after_render(menu_mod); + temp_engine.after_render((temp_engine) => { + menu_mod(temp_engine); + modal.load("templates/auth/reg_modal.html") + modal.add_class("ext-modal"); - render_reg(); + temp_engine.add_event("#ok", "click", () => { + home(temp_engine); + }); - temp_engine.add_event("#ok", "click", () => { - home(temp_engine); - }); + temp_engine.add_event("#forget_reg", "click", () => { + My.agent = null; + auth.unload_token(); + modal.close(); + render_reg(); + }); - temp_engine.add_event("#forget_reg", "click", () => { - My.agent = null; - auth.unload_token(); - modal.close(); - render_reg(); - }); + temp_engine.add_event("#val", "click", () => { + if (!active) { + active = true; + let name = $("#in-name").val(); + let faction = $("#in-faction").val(); + auth.register({ + name: name, + faction: faction + }); + } + }); - temp_engine.add_event("#val", "click", () => { - if (!active) { - active = true; - let name = $("#in-name").val(); - let faction = $("#in-faction").val(); - auth.register({ - name: name, - faction: faction - }); - } + temp_engine.add_event("#cancel", "click", () => { + $("#in-name").val(""); + $("#in-faction").val(""); + }); }); - temp_engine.add_event("#cancel", "click", () => { - $("#in-name").val(""); - $("#in-faction").val(""); - }); + render_reg(); auth.done((agent) => { $(".show-token").text(agent.token); diff --git a/js/skama_code/api/contract.js b/js/skama_code/api/contract.js new file mode 100644 index 0000000..3aafe1d --- /dev/null +++ b/js/skama_code/api/contract.js @@ -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"); + } + }); + + + } + +} diff --git a/js/skama_code/api/system.js b/js/skama_code/api/system.js index 6f9ad8a..0cc8d04 100644 --- a/js/skama_code/api/system.js +++ b/js/skama_code/api/system.js @@ -27,7 +27,7 @@ export class System { error_handler("Planet not found"); } }); - } + } list(limit, page, callback, planets = []) { const url = `${SpaceTraders.host}/systems/${this.name}/waypoints` @@ -43,7 +43,7 @@ export class System { planets.push(new Planet(planet)); }); callback(planets, reponse.meta); - } + } }); } @@ -62,7 +62,7 @@ export class System { callback(planets); planets = []; } - this.#r_listing(page++, maxPage, planets, callback, end); + this.#r_listing(page++, maxPage, planets, callback, end); }, 1000); }, planets); } else { @@ -89,7 +89,7 @@ export class SystemBuilder { error_handler("System not found"); } }); - } + } static list(limit, page, callback, systems = []) { const url = `${SpaceTraders.host}/systems/` @@ -105,7 +105,7 @@ export class SystemBuilder { systems.push(new System(system)); }); callback(systems, reponse.meta); - } + } }); } @@ -125,7 +125,7 @@ export class SystemBuilder { callback(systems); systems = []; } - this.#r_listing(page++, maxPage, systems, callback, end); + this.#r_listing(page++, maxPage, systems, callback, end); }, 1000); }, systems); } else { diff --git a/js/skama_code/ui/templeting_engine.js b/js/skama_code/ui/templeting_engine.js index 924ca37..746afa7 100644 --- a/js/skama_code/ui/templeting_engine.js +++ b/js/skama_code/ui/templeting_engine.js @@ -4,13 +4,13 @@ export class TemplateEngine { constructor(path) { this.templatePath = path; } - + render(template) { this.get_template((reponse) => { $('body').html(reponse); this.get_template((reponse) => { $("#block-content").html(reponse); - if (this.after_render_callback) this.after_render_callback(this); + if (this.after_render_callback) this.#flush_events().after_render_callback(this); }, template) }); } @@ -22,9 +22,8 @@ export class TemplateEngine { } get_template(callback, template = "") { - let url = template === "" ? `${this.templatePath}/template.html`: `${this.templatePath}/${template}`; - $.ajax(url,{ - async: false, + let url = template === "" ? `${this.templatePath}/template.html` : `${this.templatePath}/${template}`; + $.ajax(url, { method: "GET", success: callback, error: (err) => { @@ -37,7 +36,12 @@ export class TemplateEngine { $("body").on(action, tag, callback); } + #flush_events() { + $("body").unbind(); + return this; + } + after_render(callback) { - this.after_render_callback = callback; + this.after_render_callback = callback; } } diff --git a/scripts/api.js b/scripts/api.js deleted file mode 100644 index 28ff322..0000000 --- a/scripts/api.js +++ /dev/null @@ -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); - } - }, -}; diff --git a/scripts/main.js b/scripts/main.js deleted file mode 100644 index 44da34d..0000000 --- a/scripts/main.js +++ /dev/null @@ -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 = ``; - $("#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 = - ` -
- -
-
${contrat.factionSymbol}
-

${contrat.deadlineToAccept}

-

Status : ${status}

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

${contrat.deadlineToAccept}

-

Status : ${status}

-

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

- - -
-
- ` - } - - - - $('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 = ` - ` - $('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(); - }) - - }) -}