demo/demo.ts

@@ -15,17 +15,29 @@ import {
   getPriceLists,
 } from "../index.js";
 
-// TODO: hacerlo input
-const HOST = "http://sutty.vm:4001";
+const hostInput = document.querySelector<HTMLInputElement>("#host")!;
+const userInput = document.querySelector<HTMLInputElement>("#user")!;
+const passInput = document.querySelector<HTMLInputElement>("#pass")!;
 
 const tokenInput = document.querySelector<HTMLInputElement>("#token-input")!;
 
-if (localStorage.token) {
-  tokenInput.value = localStorage.token;
+function headers() {
+  const h = new Headers();
+
+  h.set("content-type", "application/json");
+
+  if (tokenInput.value) {
+    h.set("accesstoken", tokenInput.value);
+  } else {
+    const basic = btoa(`${userInput.value}:${passInput.value}`);
+    h.set("authorization", `Basic ${basic}`);
   }
 
-function token() {
-  return tokenInput.value;
+  return h;
+}
+
+function host() {
+  return hostInput.value;
 }
 
 function clear(el: Node) {
@@ -88,34 +100,34 @@ function setupForm(selector: string, listener: (event: Event) => Promise<any>) {
   });
 }
 
-setupForm("#token", () => dummy(HOST, token()));
-setupForm("#save-token", async () => {
-  localStorage.token = token();
+setupForm("#token", () => {
+  console.log(headers());
+  return dummy(host(), headers());
 });
-setupForm("#productos", () => getProductos(HOST, token(), {}));
-setupForm("#publicaciones", () => getPublications(HOST, token(), {}));
+setupForm("#productos", () => getProductos(host(), headers(), {}));
+setupForm("#publicaciones", () => getPublications(host(), headers(), {}));
 setupForm("#price", (event) =>
-  getPrices(HOST, token(), {
+  getPrices(host(), headers(), {
     filter: (event.target! as any).filter.value,
   })
 );
 setupForm("#stock", (event) =>
-  getStocks(HOST, token(), {
+  getStocks(host(), headers(), {
     filter: (event.target! as any).filter.value,
     warehouseCode: (event.target! as any).warehouseCode.value,
   })
 );
 setupForm("#price-by-customer", (event) =>
-  getPricesByCustomer(HOST, token(), {
+  getPricesByCustomer(host(), headers(), {
     filter: (event.target! as any).filter.value,
   })
 );
 setupForm("#price-list", (event) =>
-  getPriceLists(HOST, token(), {
+  getPriceLists(host(), headers(), {
     filter: (event.target! as any).filter.value,
   })
 );
-setupForm("#customers", () => getCustomers(HOST, token(), {}));
+setupForm("#customers", () => getCustomers(host(), headers(), {}));
 
 let customer: Customer | null = null;
 
@@ -123,7 +135,7 @@ setupForm("#pedido-customer", async (event) => {
   const cuit = (event.target! as any).cuit.value;
   if (cuit.length === 0) throw new Error("No pusiste un CUIT.");
 
-  const customers = await getCustomers(HOST, token(), {
+  const customers = await getCustomers(host(), headers(), {
     customer: {
       type: TipoDeDocumento.CUIT,
       number: cuit,
@@ -160,17 +172,23 @@ setupForm("#pedido-item", async (event) => {
   const sku = (event.target! as any).sku.value;
   if (sku.length === 0) throw new Error("No pusiste un SKU.");
 
-  const productosResponse = await getProductos(HOST, token(), { filter: sku });
+  const productosResponse = await getProductos(host(), headers(), {
+    filter: sku,
+  });
   if (productosResponse.Data.length !== 1)
     throw new Error("Encontré más de un producto.");
 
-  const preciosDelClienteResponse = await getPricesByCustomer(HOST, token(), {
+  const preciosDelClienteResponse = await getPricesByCustomer(
+    host(),
+    headers(),
+    {
       SKUCode: sku,
       customer: {
         type: customer.DocumentType,
         number: customer.DocumentNumber,
       },
-  });
+    }
+  );
   if (preciosDelClienteResponse.Data.length !== 1)
     throw new Error("Encontré más de un producto.");
 
@@ -216,5 +234,5 @@ setupForm("#pedido", async () => {
     },
   };
 
-  return await order(HOST, token(), orderJson);
+  return await order(host(), headers(), orderJson);
 });

demo/index.html

@@ -31,6 +31,15 @@
   }
 </style>
 
+<label for="host">Host: </label>
+<input id="host" name="host" value="http://sutty.vm:4001" />
+
+<label for="user">User: </label>
+<input id="user" name="user" />
+
+<label for="pass">Pass: </label>
+<input id="pass" name="pass" value="" />
+
 <label for="token-input">Access token: </label>
 <input id="token-input" name="token" />
 
@@ -56,7 +65,11 @@
 
 <form id="price">
   <button>Conseguir precios</button>
-  <input name="filter" type="text" placeholder="Filtro por lista de precios (ID, opcional)" />
+  <input
+    name="filter"
+    type="text"
+    placeholder="Filtro por lista de precios (ID, opcional)"
+  />
   <p class="status"></p>
 </form>
 
@@ -75,7 +88,11 @@
 <form id="stock">
   <button>Conseguir stock</button>
   <input name="filter" type="text" placeholder="Filtro por ID (opcional)" />
-  <input name="warehouseCode" type="text" placeholder="Filtro por código de deposito (opcional)" />
+  <input
+    name="warehouseCode"
+    type="text"
+    placeholder="Filtro por código de deposito (opcional)"
+  />
   <p class="status"></p>
 </form>