2021-09-23 00:17:35 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<meta charset="utf8" />
|
2021-09-22 22:32:17 +00:00
|
|
|
<title>hyperpop.js demo</title>
|
2021-09-23 00:17:35 +00:00
|
|
|
<style>
|
|
|
|
|
form {
|
|
|
|
|
border: solid 2px black;
|
|
|
|
|
padding: 0.2em;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<label for="token-input">Access token: </label>
|
|
|
|
|
<input id="token-input" name="token" />
|
|
|
|
|
|
|
|
|
|
<form id="token">
|
|
|
|
|
<button>Probar</button>
|
|
|
|
|
<p class="status"></p>
|
|
|
|
|
</form>
|
|
|
|
|
|
|
|
|
|
<form id="productos">
|
|
|
|
|
<button>Conseguir productos</button>
|
|
|
|
|
<p class="status"></p>
|
|
|
|
|
</form>
|
|
|
|
|
|
|
|
|
|
<form id="precios">
|
|
|
|
|
<button>Conseguir precios</button>
|
|
|
|
|
<p class="status"></p>
|
|
|
|
|
</form>
|
2021-09-22 22:32:17 +00:00
|
|
|
|
|
|
|
|
<script type="module">
|
2021-09-23 00:17:35 +00:00
|
|
|
import { dummy, getProductos, getPricesByCustomer } from "../build/index.js";
|
|
|
|
|
|
|
|
|
|
function token() {
|
|
|
|
|
return document.querySelector("#token-input").value;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function clear(el) {
|
|
|
|
|
while (el.firstChild) {
|
|
|
|
|
el.firstChild.remove();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function objectToDom(object) {
|
|
|
|
|
const preEl = document.createElement("pre");
|
|
|
|
|
const codeEl = document.createElement("code");
|
|
|
|
|
if (typeof object === "string") {
|
|
|
|
|
codeEl.append(JSON.stringify(JSON.parse(object), null, 2));
|
|
|
|
|
} else if (Object.entries(object).length > 0) {
|
|
|
|
|
codeEl.append(JSON.stringify(object, null, 2));
|
|
|
|
|
} else {
|
|
|
|
|
codeEl.append(object);
|
|
|
|
|
}
|
|
|
|
|
preEl.append(codeEl);
|
|
|
|
|
return preEl;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function showResponse(statusEl, promise) {
|
|
|
|
|
clear(statusEl);
|
|
|
|
|
try {
|
|
|
|
|
const response = await promise;
|
|
|
|
|
statusEl.append("¡Funcionó!");
|
|
|
|
|
if (response) {
|
|
|
|
|
statusEl.append(" Respuesta:", objectToDom(response));
|
|
|
|
|
}
|
|
|
|
|
} catch (error) {
|
|
|
|
|
statusEl.append("Hubo un error :(", objectToDom(error));
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const tokenForm = document.querySelector("#token");
|
|
|
|
|
tokenForm.addEventListener("submit", async (event) => {
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
const statusEl = event.target.querySelector(".status");
|
|
|
|
|
showResponse(statusEl, dummy(token()));
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const productosForm = document.querySelector("#productos");
|
|
|
|
|
productosForm.addEventListener("submit", async (event) => {
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
const statusEl = event.target.querySelector(".status");
|
|
|
|
|
showResponse(statusEl, getProductos(token(), {}));
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const preciosForm = document.querySelector("#precios");
|
|
|
|
|
preciosForm.addEventListener("submit", async (event) => {
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
const statusEl = event.target.querySelector(".status");
|
|
|
|
|
showResponse(statusEl, getPricesByCustomer(token(), {}));
|
|
|
|
|
});
|
2021-09-22 22:32:17 +00:00
|
|
|
</script>
|
