1 | /** |
2 | * @template T |
3 | * @param { Promise<IDBDatabase> } bd |
4 | * @param { string[] } entidades |
5 | * @param { ( |
6 | * transaccion: IDBTransaction, |
7 | * resolve: (resultado:T)=>void |
8 | * ) => void } consulta |
9 | * @returns {Promise<T>} |
10 | */ |
11 | export async function bdConsulta(bd, entidades, consulta) { |
12 | |
13 | const base = await bd |
14 | |
15 | return new Promise((resolve, reject) => { |
16 | // Inicia una transacción de solo lectura. |
17 | const transaccion = base.transaction(entidades, "readonly") |
18 | // Al terminar con error ejecuta la función reject. |
19 | transaccion.onerror = () => reject(transaccion.error) |
20 | // Estas son las operaciones para realizar la consulta. |
21 | consulta(transaccion, resolve) |
22 | }) |
23 | |
24 | } |
1 | /** |
2 | * @param { Promise<IDBDatabase> } bd |
3 | * @param { string[] } entidades |
4 | * @param { (t:IDBTransaction) => void } operaciones |
5 | */ |
6 | export async function bdEjecuta(bd, entidades, operaciones) { |
7 | |
8 | // Espera que se abra la bd |
9 | const base = await bd |
10 | |
11 | return new Promise( |
12 | (resolve, reject) => { |
13 | // Inicia una transacción de lectura y escritura. |
14 | const transaccion = base.transaction(entidades, "readwrite") |
15 | // Al terminar con éxito, ejecuta la función resolve. |
16 | transaccion.oncomplete = resolve |
17 | // Al terminar con error, ejecuta la función reject. |
18 | transaccion.onerror = () => reject(transaccion.error) |
19 | // Estas son las operaciones de la transacción. |
20 | operaciones(transaccion) |
21 | }) |
22 | |
23 | } |
1 | import { ProblemDetails } from "./ProblemDetails.js" |
2 | |
3 | /** |
4 | * Espera a que la promesa de un fetch termine. Si |
5 | * hay error, lanza una excepción. Si no hay error, |
6 | * interpreta la respuesta del servidor como JSON y |
7 | * la convierte en una literal de objeto. |
8 | * |
9 | * @param { string | Promise<Response> } servicio |
10 | */ |
11 | export async function consumeJson(servicio) { |
12 | |
13 | if (typeof servicio === "string") { |
14 | servicio = fetch(servicio, { |
15 | headers: { "Accept": "application/json, application/problem+json" } |
16 | }) |
17 | } else if (!(servicio instanceof Promise)) { |
18 | throw new Error("Servicio de tipo incorrecto.") |
19 | } |
20 | |
21 | const respuesta = await servicio |
22 | |
23 | const headers = respuesta.headers |
24 | |
25 | if (respuesta.ok) { |
26 | // Aparentemente el servidor tuvo éxito. |
27 | |
28 | if (respuesta.status === 204) { |
29 | // No contiene texto de respuesta. |
30 | |
31 | return { headers, body: {} } |
32 | |
33 | } else { |
34 | |
35 | const texto = await respuesta.text() |
36 | |
37 | try { |
38 | |
39 | return { headers, body: JSON.parse(texto) } |
40 | |
41 | } catch (error) { |
42 | |
43 | // El contenido no es JSON. Probablemente sea texto de un error. |
44 | throw new ProblemDetails(respuesta.status, headers, texto, |
45 | "/error/errorinterno.html") |
46 | |
47 | } |
48 | |
49 | } |
50 | |
51 | } else { |
52 | // Hay un error. |
53 | |
54 | const texto = await respuesta.text() |
55 | |
56 | if (texto === "") { |
57 | |
58 | // No hay texto. Se usa el texto predeterminado. |
59 | throw new ProblemDetails(respuesta.status, headers, respuesta.statusText) |
60 | |
61 | } else { |
62 | // Debiera se un ProblemDetails en JSON. |
63 | |
64 | try { |
65 | |
66 | const { title, type, detail } = JSON.parse(texto) |
67 | |
68 | throw new ProblemDetails(respuesta.status, headers, |
69 | typeof title === "string" ? title : respuesta.statusText, |
70 | typeof type === "string" ? type : undefined, |
71 | typeof detail === "string" ? detail : undefined) |
72 | |
73 | } catch (error) { |
74 | |
75 | if (error instanceof ProblemDetails) { |
76 | // El error si era un ProblemDetails |
77 | |
78 | throw error |
79 | |
80 | } else { |
81 | |
82 | throw new ProblemDetails(respuesta.status, headers, respuesta.statusText, |
83 | undefined, texto) |
84 | |
85 | } |
86 | |
87 | } |
88 | |
89 | } |
90 | |
91 | } |
92 | |
93 | } |
94 | |
95 | // Permite que los eventos de html usen la función. |
96 | window["consumeJson"] = consumeJson |
1 | import { consumeJson } from "./consumeJson.js" |
2 | |
3 | /** |
4 | * @param { string } url |
5 | * @param { Object } body |
6 | * @param { "GET" | "POST"| "PUT" | "PATCH" | "DELETE" | "TRACE" | "OPTIONS" |
7 | * | "CONNECT" | "HEAD" } metodoHttp |
8 | */ |
9 | export async function enviaJson(url, body, metodoHttp = "POST") { |
10 | return await consumeJson(fetch(url, { |
11 | method: metodoHttp, |
12 | headers: { |
13 | "Content-Type": "application/json", |
14 | "Accept": "application/json, application/problem+json" |
15 | }, |
16 | body: JSON.stringify(body) |
17 | })) |
18 | } |
19 | |
20 | // Permite que los eventos de html usen la función. |
21 | window["enviaJson"] = enviaJson |
1 | /** |
2 | * Codifica un texto para que cambie los caracteres |
3 | * especiales y no se pueda interpretar como |
4 | * etiiqueta HTML. Esta técnica evita la inyección |
5 | * de código. |
6 | * @param { string } texto |
7 | */ |
8 | export function htmlentities(texto) { |
9 | return texto.replace(/[<>"']/g, textoDetectado => { |
10 | switch (textoDetectado) { |
11 | case "<": return "<" |
12 | case ">": return ">" |
13 | case '"': return """ |
14 | case "'": return "'" |
15 | default: return textoDetectado |
16 | } |
17 | }) |
18 | } |
19 |
1 | import { ProblemDetails } from "./ProblemDetails.js" |
2 | |
3 | /** |
4 | * Muestra un error en la consola y en un cuadro de |
5 | * alerta el mensaje de una excepción. |
6 | * @param { ProblemDetails | Error | null } error descripción del error. |
7 | */ |
8 | export function muestraError(error) { |
9 | |
10 | if (error === null) { |
11 | |
12 | console.log("Error") |
13 | alert("Error") |
14 | |
15 | } else if (error instanceof ProblemDetails) { |
16 | |
17 | let mensaje = error.title |
18 | if (error.detail) { |
19 | mensaje += `\n\n${error.detail}` |
20 | } |
21 | mensaje += `\n\nCódigo: ${error.status}` |
22 | if (error.type) { |
23 | mensaje += ` ${error.type}` |
24 | } |
25 | |
26 | console.error(mensaje) |
27 | console.error(error) |
28 | console.error("Headers:") |
29 | error.headers.forEach((valor, llave) => console.error(llave, "=", valor)) |
30 | alert(mensaje) |
31 | |
32 | } else { |
33 | |
34 | console.error(error) |
35 | alert(error.message) |
36 | |
37 | } |
38 | |
39 | } |
40 | |
41 | // Permite que los eventos de html usen la función. |
42 | window["muestraError"] = muestraError |
1 | /** |
2 | * @param { Document | HTMLElement } raizHtml |
3 | * @param { any } objeto |
4 | */ |
5 | export function muestraObjeto(raizHtml, objeto) { |
6 | |
7 | for (const [nombre, definiciones] of Object.entries(objeto)) { |
8 | |
9 | if (Array.isArray(definiciones)) { |
10 | |
11 | muestraArray(raizHtml, nombre, definiciones) |
12 | |
13 | } else if (definiciones !== undefined && definiciones !== null) { |
14 | |
15 | const elementoHtml = buscaElementoHtml(raizHtml, nombre) |
16 | |
17 | if (elementoHtml instanceof HTMLInputElement) { |
18 | |
19 | muestraInput(raizHtml, elementoHtml, definiciones) |
20 | |
21 | } else if (elementoHtml !== null) { |
22 | |
23 | for (const [atributo, valor] of Object.entries(definiciones)) { |
24 | if (atributo in elementoHtml) { |
25 | elementoHtml[atributo] = valor |
26 | } |
27 | } |
28 | |
29 | } |
30 | |
31 | } |
32 | |
33 | } |
34 | |
35 | } |
36 | // Permite que los eventos de html usen la función. |
37 | window["muestraObjeto"] = muestraObjeto |
38 | |
39 | /** |
40 | * @param { Document | HTMLElement } raizHtml |
41 | * @param { string } nombre |
42 | */ |
43 | export function buscaElementoHtml(raizHtml, nombre) { |
44 | return raizHtml.querySelector( |
45 | `#${nombre},[name="${nombre}"],[data-name="${nombre}"]`) |
46 | } |
47 | |
48 | /** |
49 | * @param { Document | HTMLElement } raizHtml |
50 | * @param { string } propiedad |
51 | * @param {any[]} valores |
52 | */ |
53 | function muestraArray(raizHtml, propiedad, valores) { |
54 | |
55 | const conjunto = new Set(valores) |
56 | const elementos = |
57 | raizHtml.querySelectorAll(`[name="${propiedad}"],[data-name="${propiedad}"]`) |
58 | |
59 | if (elementos.length === 1) { |
60 | const elemento = elementos[0] |
61 | |
62 | if (elemento instanceof HTMLSelectElement) { |
63 | const options = elemento.options |
64 | for (let i = 0, len = options.length; i < len; i++) { |
65 | const option = options[i] |
66 | option.selected = conjunto.has(option.value) |
67 | } |
68 | return |
69 | } |
70 | |
71 | } |
72 | |
73 | for (let i = 0, len = elementos.length; i < len; i++) { |
74 | const elemento = elementos[i] |
75 | if (elemento instanceof HTMLInputElement) { |
76 | elemento.checked = conjunto.has(elemento.value) |
77 | } |
78 | } |
79 | |
80 | } |
81 | |
82 | /** |
83 | * @param { Document | HTMLElement } raizHtml |
84 | * @param { HTMLInputElement } input |
85 | * @param { any } definiciones |
86 | */ |
87 | function muestraInput(raizHtml, input, definiciones) { |
88 | |
89 | for (const [atributo, valor] of Object.entries(definiciones)) { |
90 | |
91 | if (atributo == "data-file") { |
92 | |
93 | const img = getImgParaElementoHtml(raizHtml, input) |
94 | if (img !== null) { |
95 | input.dataset.file = valor |
96 | input.value = "" |
97 | if (valor === "") { |
98 | img.src = "" |
99 | img.hidden = true |
100 | } else { |
101 | img.src = valor |
102 | img.hidden = false |
103 | } |
104 | } |
105 | |
106 | } else if (atributo in input) { |
107 | |
108 | input[atributo] = valor |
109 | |
110 | } |
111 | } |
112 | |
113 | } |
114 | |
115 | /** |
116 | * @param { Document | HTMLElement } raizHtml |
117 | * @param { HTMLElement } elementoHtml |
118 | */ |
119 | export function getImgParaElementoHtml(raizHtml, elementoHtml) { |
120 | const imgId = elementoHtml.getAttribute("data-img") |
121 | if (imgId === null) { |
122 | return null |
123 | } else { |
124 | const input = buscaElementoHtml(raizHtml, imgId) |
125 | if (input instanceof HTMLImageElement) { |
126 | return input |
127 | } else { |
128 | return null |
129 | } |
130 | } |
131 | } |
1 | /** Detalle de los errores devueltos por un servicio. */ |
2 | export class ProblemDetails extends Error { |
3 | |
4 | /** |
5 | * @param {number} status |
6 | * @param {Headers} headers |
7 | * @param {string} title |
8 | * @param {string} [type] |
9 | * @param {string} [detail] |
10 | */ |
11 | constructor(status, headers, title, type, detail) { |
12 | super(title) |
13 | /** @readonly */ |
14 | this.status = status |
15 | /** @readonly */ |
16 | this.headers = headers |
17 | /** @readonly */ |
18 | this.type = type |
19 | /** @readonly */ |
20 | this.detail = detail |
21 | /** @readonly */ |
22 | this.title = title |
23 | } |
24 | |
25 | } |
1 | import { muestraError } from "./muestraError.js" |
2 | |
3 | /** |
4 | * @param { string | URL } urlDeServiceWorker |
5 | */ |
6 | export async function registraServiceWorkerSiEsSoportado(urlDeServiceWorker) { |
7 | try { |
8 | if ("serviceWorker" in navigator) { |
9 | const registro = await navigator.serviceWorker.register(urlDeServiceWorker) |
10 | console.log(urlDeServiceWorker, "registrado.") |
11 | console.log(registro) |
12 | } |
13 | } catch (error) { |
14 | muestraError(error) |
15 | } |
16 | } |