From 34f90d19e78b0644ca58944d6134d67f43428b6a Mon Sep 17 00:00:00 2001
From: naielv <109038805+naielv@users.noreply.github.com>
Date: Fri, 13 Jun 2025 11:58:52 +0200
Subject: [PATCH] Optimize SC & add Layered Icon Descriptors (images preloaded)
---
index.html | 604 ++++++++++--------
static/ico/layered1/Azucar-Az. Blanco.png | Bin 0 -> 4370 bytes
static/ico/layered1/Azucar-Az. Moreno.png | Bin 0 -> 5604 bytes
static/ico/layered1/Azucar-Edulcorante.png | Bin 0 -> 11062 bytes
static/ico/layered1/Azucar-Sacarina.png | Bin 0 -> 11062 bytes
static/ico/layered1/Azucar-Sin.png | Bin 0 -> 11327 bytes
static/ico/layered1/Azucar-Stevia (Gotas).png | Bin 0 -> 8812 bytes
.../layered1/Azucar-Stevia (Pastillas).png | Bin 0 -> 20530 bytes
static/ico/layered1/Background.png | Bin 0 -> 246 bytes
static/ico/layered1/Cafeina-Con.png | Bin 0 -> 24831 bytes
static/ico/layered1/Cafeina-Sin.png | Bin 0 -> 27637 bytes
static/ico/layered1/Leche-Agua.png | Bin 0 -> 12289 bytes
static/ico/layered1/Leche-Sin lactosa.png | Bin 0 -> 11363 bytes
static/ico/layered1/Leche-Vegetal.png | Bin 0 -> 11560 bytes
static/ico/layered1/Leche-de Vaca.png | Bin 0 -> 14432 bytes
static/ico/layered1/Selección-CafeSolo.png | Bin 0 -> 45685 bytes
static/ico/layered1/Selección-CaféLeche.png | Bin 0 -> 51287 bytes
static/ico/layered1/Selección-ColaCao.png | Bin 0 -> 75477 bytes
static/ico/layered1/Selección-Infusion.png | Bin 0 -> 18480 bytes
static/ico/layered1/Selección-Leche.png | Bin 0 -> 16373 bytes
static/ico/layered1/Tamaño-Grande.png | Bin 0 -> 7326 bytes
static/ico/layered1/Tamaño-Pequeño.png | Bin 0 -> 4423 bytes
static/ico/layered1/Temperatura-Caliente.png | Bin 0 -> 12414 bytes
static/ico/layered1/Temperatura-Frio.png | Bin 0 -> 11593 bytes
static/ico/layered1/Temperatura-Templado.png | Bin 0 -> 10626 bytes
sw.js | 2 +-
26 files changed, 326 insertions(+), 280 deletions(-)
create mode 100644 static/ico/layered1/Azucar-Az. Blanco.png
create mode 100644 static/ico/layered1/Azucar-Az. Moreno.png
create mode 100644 static/ico/layered1/Azucar-Edulcorante.png
create mode 100644 static/ico/layered1/Azucar-Sacarina.png
create mode 100644 static/ico/layered1/Azucar-Sin.png
create mode 100644 static/ico/layered1/Azucar-Stevia (Gotas).png
create mode 100644 static/ico/layered1/Azucar-Stevia (Pastillas).png
create mode 100644 static/ico/layered1/Background.png
create mode 100644 static/ico/layered1/Cafeina-Con.png
create mode 100644 static/ico/layered1/Cafeina-Sin.png
create mode 100644 static/ico/layered1/Leche-Agua.png
create mode 100644 static/ico/layered1/Leche-Sin lactosa.png
create mode 100644 static/ico/layered1/Leche-Vegetal.png
create mode 100644 static/ico/layered1/Leche-de Vaca.png
create mode 100644 static/ico/layered1/Selección-CafeSolo.png
create mode 100644 static/ico/layered1/Selección-CaféLeche.png
create mode 100644 static/ico/layered1/Selección-ColaCao.png
create mode 100644 static/ico/layered1/Selección-Infusion.png
create mode 100644 static/ico/layered1/Selección-Leche.png
create mode 100644 static/ico/layered1/Tamaño-Grande.png
create mode 100644 static/ico/layered1/Tamaño-Pequeño.png
create mode 100644 static/ico/layered1/Temperatura-Caliente.png
create mode 100644 static/ico/layered1/Temperatura-Frio.png
create mode 100644 static/ico/layered1/Temperatura-Templado.png
diff --git a/index.html b/index.html
index fd01e40..5b2b8a8 100644
--- a/index.html
+++ b/index.html
@@ -375,7 +375,8 @@
-->
![]()
- 
+
@@ -466,7 +467,7 @@
// const PUBLIC_KEY = "~cppGiuA4UFUPGTDoC-4r2izVC3F7MfpaCmF3iZdESN4.vntmjgbAVUpF_zfinYY6EKVFuuTYxh5xOrL4KmtdTmc"
var TABLE = GROUPID + ":telesec.tech.eus";
const RELAYS = [
- "https://gun-es01.tech.eus/gun",
+ // "https://gun-es01.tech.eus/gun",
"https://gun-es02.tech.eus/gun",
"https://gun-es03.tech.eus/gun",
"https://gun-es04.tech.eus/gun",
@@ -528,12 +529,12 @@
});
peerListEl.innerHTML = list.innerHTML;
peerCountEl.innerText = peerCount;
- if (peerCount < 2){
+ if (peerCount < 2) {
document.getElementById("connectStatus").src = "static/ico/connect_ko.svg"
- gun.opt({peers: RELAYS});
+ gun.opt({ peers: RELAYS });
} else {
document.getElementById("connectStatus").src = "static/ico/connect_ok.svg"
-
+
}
}
getPeers();
@@ -2101,289 +2102,334 @@
};
},
index: function () {
- var tts = false;
- var sc_nobtn = ""
- if (urlParams.get("sc_nobtn") == "yes") {
- sc_nobtn = "pointer-events: none; opacity: 0.5"
+ function setLayeredImages(comanda, key) {
+ // Base paths for each layer type (adjust paths as needed)
+ const basePaths = {
+ Selección: "static/ico/layered1/",
+ Café: "static/ico/layered1/",
+ Endulzante: "static/ico/layered1/",
+ Cafeina: "static/ico/layered1/",
+ Leche: "static/ico/layered1/",
+ };
+
+ // Map for Selección to filenames
+ const selectionMap = {
+ "ColaCao con leche": "Selección-ColaCao.png",
+ "Infusión": "Selección-Infusion.png",
+ "Café con leche": "Selección-CaféLeche.png",
+ "Solo Leche": "Selección-Leche.png",
+ "Solo café (sin leche)": "Selección-CaféSolo.png",
+ };
+
+ // Start div with relative positioning for layering
+ let html = ``;
+
+ // Layer 1: Selección image
+ const selection = comanda["Selección"];
+ console.log(selection)
+ if (selectionMap[selection]) {
+ html += `
`;
+ }
+
+ // Layer 2: Café
+ if (comanda.Café) {
+ html += `
`;
+ }
+
+ // Layer 3: Endulzante
+ if (comanda.Endulzante) {
+ html += `
`;
+ }
+
+ // Layer 4: Cafeina
+ if (comanda.Cafeina) {
+ html += `
`;
+ }
+ // Layer 5: Leche
+ if (comanda.Leche) {
+ html += `
`;
+ }
+ // Layer 6: Temperatura
+ if (comanda.Temperatura) {
+ html += `
`;
+ }
+ // Layer 7: Tamaño
+ if (comanda.Tamaño) {
+ html += `
`;
+ }
+
+ // Close div
+ html += "
SuperCafé
-
-
-
+ SuperCafé
+
+
+
+
+ `;
-
- `;
-
- tableScroll("#scrolltable") // id="scrolltable"
+ tableScroll("#scrolltable");
var tablebody_EL = document.getElementById(tablebody);
var rows2 = {};
- function render() {
- function sorter(a, b) {
- if (
- SC_Personas[a.Persona].Region.toUpperCase() <
- SC_Personas[b.Persona].Region.toUpperCase()
- ) {
- return -1;
- }
- if (
- SC_Personas[a.Persona].Region.toUpperCase() >
- SC_Personas[b.Persona].Region.toUpperCase()
- ) {
- return 1;
- }
- return 0;
- }
- var tablebody_EL = document.getElementById(tablebody);
- tablebody_EL.innerHTML = "";
- var DefaultPersona = {
- Foto: "static/ico/user_generic.png",
- Nombre: "Desconocido??",
- Puntos: "1",
- Region: "SIN AULA",
- Roles: "Cafe_SiCaf",
- SC_Anilla: "#000000",
- markdown: "Fantasma",
- _key: "135733281028030249",
- };
- Object.values(rows2)
- .sort(sorter)
- .forEach((data) => {
- var btn_Pedido = safeuuid();
- var btn_Preparacion = safeuuid();
- var btn_Hecho = safeuuid();
- var btn_Entregado = safeuuid();
- var btn_Deuda = safeuuid();
- var btn_Pagado = safeuuid();
- var span_precio = safeuuid();
- var persona = SC_Personas[data.Persona] || DefaultPersona;
- var new_tr = document.createElement("tr");
- var pcalc = SC_priceCalc(JSON.parse(data.Comanda));
- var precio = pcalc[0]
- var resumen = pcalc[1]
- if (persona == DefaultPersona) {
- data.Persona = "135733281028030249";
- }
- if (sc_nobtn != "") {new_tr.style.pointerEvents = "none"}
-
- new_tr.innerHTML = `
- ${persona.Region.toUpperCase() || "?"}
${data.Fecha} |
- 
${persona.Nombre || ""
- }
${persona.Puntos || "0"
- } pts. |
-
-
-
-
-
-
-
|
- ${SC_parse(JSON.parse(data.Comanda)) +
- "
" +
- data.Notas
- } |
- ${resumen} |
- `;
- tablebody_EL.append(new_tr);
- if (data.Estado == "Pedido") {
- document.getElementById(btn_Pedido).classList = "rojo";
- }
- if (data.Estado == "En preparación") {
- document.getElementById(btn_Preparacion).classList = "rojo";
- new_tr.style.backgroundColor = "#FFCCCB";
- }
- if (data.Estado == "Listo") {
- new_tr.style.backgroundColor = "gold";
- document.getElementById(btn_Hecho).classList = "rojo";
- }
- if (data.Estado == "Entregado") {
- document.getElementById(btn_Entregado).classList = "rojo";
- new_tr.style.backgroundColor = "lightgreen";
- }
- if (data.Estado == "Deuda") {
- document.getElementById(btn_Deuda).classList = "rojo";
- new_tr.style.backgroundColor = "hotpink";
- }
- new_tr.onclick = () => {
- setUrlHash("supercafe," + data._key);
- };
- if (SC_Personas[data.Persona].Puntos >= 10) {
- document.getElementById(span_precio).innerHTML =
- "Gratis!
Usando puntos";
- } else {
- document.getElementById(span_precio).innerHTML = `Pagando ${precio}c`
- }
- // Acciónes
- document.getElementById(btn_Pedido).onclick = () => {
- window.event.cancelBubble = true;
- window.event.stopPropagation();
- data.Estado = "Pedido";
- var enc = SEA.encrypt(data, SECRET, (encrypted) => {
- betterGunPut(
- gun.get(TABLE).get("supercafe").get(data._key),
- encrypted
- );
- toastr.success("Guardado!");
- });
- };
- document.getElementById(btn_Preparacion).onclick = () => {
- window.event.cancelBubble = true;
- window.event.stopPropagation();
- data.Estado = "En preparación";
- var enc = SEA.encrypt(data, SECRET, (encrypted) => {
- betterGunPut(
- gun.get(TABLE).get("supercafe").get(data._key),
- encrypted
- );
- toastr.success("Guardado!");
- });
- };
- document.getElementById(btn_Hecho).onclick = () => {
- window.event.cancelBubble = true;
- window.event.stopPropagation();
- data.Estado = "Listo";
- var enc = SEA.encrypt(data, SECRET, (encrypted) => {
- betterGunPut(
- gun.get(TABLE).get("supercafe").get(data._key),
- encrypted
- );
- toastr.success("Guardado!");
- });
- };
- document.getElementById(btn_Entregado).onclick = () => {
- window.event.cancelBubble = true;
- window.event.stopPropagation();
- data.Estado = "Entregado";
- var enc = SEA.encrypt(data, SECRET, (encrypted) => {
- betterGunPut(
- gun.get(TABLE).get("supercafe").get(data._key),
- encrypted
- );
- toastr.success("Guardado!");
- });
- };
- document.getElementById(btn_Deuda).onclick = () => {
- window.event.cancelBubble = true;
- window.event.stopPropagation();
- data.Estado = "Deuda";
- var enc = SEA.encrypt(data, SECRET, (encrypted) => {
- betterGunPut(
- gun.get(TABLE).get("supercafe").get(data._key),
- encrypted
- );
- toastr.success("Guardado!");
- });
- };
- document.getElementById(btn_Pagado).onclick = () => {
- window.event.cancelBubble = true;
- window.event.stopPropagation();
- if (!confirm("¿Quieres marcar como pagado? - Se borrara la comanda y se actualizarán los puntos.")) {return}
- data.Estado = "Pagado";
- betterGunPut(
- gun.get(TABLE).get("supercafe").get(data._key),
- null
- );
- //setUrlHash("personas");
- //setUrlHash("supercafe");
- toastr.success("Guardado!");
- if (SC_Personas[data.Persona].Puntos >= 10) {
- SC_Personas[data.Persona].Puntos -= 10;
- toastr.success(
- "¡Comada gratis para " +
- SC_Personas[data.Persona].Nombre +
- "!"
- );
- toastr.success(
- "¡Comada gratis para " +
- SC_Personas[data.Persona].Nombre +
- "!"
- );
- } else {
- SC_Personas[data.Persona].Puntos += 1;
- toastr.success("¡Comada DE PAGO!");
- }
- SEA.encrypt(
- SC_Personas[data.Persona],
- SECRET,
- (encrypted) => {
- betterGunPut(
- gun.get(TABLE).get("personas").get(data.Persona),
- encrypted
- );
- }
- );
- };
- });
- }
+ var renderedRows = {};
var old = {};
- gun
- .get(TABLE)
- .get("supercafe")
- .map()
- .on((data, key, _msg, _ev) => {
- EVENTLISTENER = _ev;
- //alert("sc_map_on")
- function add_row(data, key) {
- if (data != null) {
- data["_key"] = key;
- console.log(old[key], data.Estado)
- if (old[key] == undefined) {
- old[key] = "";
- }
- if (old[key] != data.Estado) {
- console.log("SC:Updated:", data)
- if (tts && document.getElementById(tts_check).checked) {
- var msg = `Comanda de ${SC_Personas[data.Persona].Region}. - ${JSON.parse(data.Comanda)["Selección"]}. - ${SC_Personas[data.Persona].Nombre}. - ${data.Estado}`
- console.log("TTS: " + msg)
- let utterance = new SpeechSynthesisUtterance(msg);
- utterance.rate = 0.9
- // utterance.voice = speechSynthesis.getVoices()[7]
- speechSynthesis.speak(utterance);
- }
- }
- rows2[key] = data;
- old[key] = data.Estado;
- } else {
- // console.log("delete", key);
- delete rows2[key];
- delete old[key];
- }
- render();
- }
- if (typeof data == "string") {
- SEA.decrypt(data, SECRET, (data) => {
- add_row(data, key);
- });
- } else {
- add_row(data, key);
- }
- });
- document.getElementById(btn_new).onclick = () => {
- setUrlHash("supercafe," + safeuuid(""));
+ var old2 = {};
+
+ var DefaultPersona = {
+ Foto: "static/ico/user_generic.png",
+ Nombre: "Desconocido??",
+ Puntos: "1",
+ Region: "SIN AULA",
+ Roles: "Cafe_SiCaf",
+ SC_Anilla: "#000000",
+ markdown: "Fantasma",
+ _key: "135733281028030249",
};
- },
+
+ // Sorting: Fecha desc, then Region, then Nombre
+ function sortRows(a, b) {
+ const fechaA = new Date(a.Fecha);
+ const fechaB = new Date(b.Fecha);
+ if (fechaA < fechaB) return 1;
+ if (fechaA > fechaB) return -1;
+
+ const regionA = (SC_Personas[a.Persona]?.Region || "").toUpperCase();
+ const regionB = (SC_Personas[b.Persona]?.Region || "").toUpperCase();
+ if (regionA < regionB) return -1;
+ if (regionA > regionB) return 1;
+
+ const nombreA = (SC_Personas[a.Persona]?.Nombre || "").toUpperCase();
+ const nombreB = (SC_Personas[b.Persona]?.Nombre || "").toUpperCase();
+ if (nombreA < nombreB) return -1;
+ if (nombreA > nombreB) return 1;
+
+ return 0;
+ }
+
+ function createRow(data) {
+ var persona = SC_Personas[data.Persona] || DefaultPersona;
+ var pcalc = SC_priceCalc(JSON.parse(data.Comanda));
+ var precio = pcalc[0];
+ var resumen = pcalc[1];
+
+ var new_tr = document.createElement("tr");
+ new_tr.id = "row-" + data._key;
+ if (sc_nobtn != "") {
+ new_tr.style.pointerEvents = "none";
+ new_tr.style.opacity = "0.5";
+ }
+ const ESTADOS = ["Pedido", "En preparación", "Listo", "Entregado", "Deuda", "Pagado"];
+
+ function createEstadoButtons(currentEstado, key) {
+ return ESTADOS.map(estado => {
+ const active = estado === currentEstado ? 'disabled class="rojo"' : '';
+ return `
`;
+ }).join(" ");
+ }
+
+ // Set color for estado buttons and row background (simplified to text here)
+ var estadoClass = "";
+ var bgColor = "";
+ switch (data.Estado) {
+ case "Pedido": estadoClass = "rojo"; break;
+ case "En preparación": estadoClass = "rojo"; bgColor = "#FFCCCB"; break;
+ case "Listo": estadoClass = "rojo"; bgColor = "gold"; break;
+ case "Entregado": estadoClass = "rojo"; bgColor = "lightgreen"; break;
+ case "Deuda": estadoClass = "rojo"; bgColor = "hotpink"; break;
+ case "Pagado": estadoClass = ""; break;
+ }
+ new_tr.style.backgroundColor = bgColor;
+
+ new_tr.innerHTML = `
+ ${persona.Region.toUpperCase() || "?"}
${data.Fecha} |
+
+ 
${persona.Nombre}
+ ${persona.Puntos} pts.
+ |
+
+ ${createEstadoButtons(data.Estado, data._key)}
+ |
+
+ ${setLayeredImages(JSON.parse(data.Comanda), data._key)}
+ ${SC_parse(JSON.parse(data.Comanda))}
${data.Notas}
+ |
+ ${resumen}${persona.Puntos >= 10 ? "
Gratis! Usando puntos" : `
Pagando ${precio}c`} |
+ `;
+
+ // Add click to set URL hash
+ new_tr.onclick = () => {
+ setUrlHash("supercafe," + data._key);
+ };
+
+ return new_tr;
+ }
+
+ function insertSortedRow(tr, data) {
+ // Insert `tr` into `tablebody_EL` sorted per sortRows
+ const rows = Array.from(tablebody_EL.children);
+ let inserted = false;
+ for (let i = 0; i < rows.length; i++) {
+ let key = rows[i].id.replace("row-", "");
+ if (!rows2[key]) continue;
+ if (sortRows(data, rows2[key]) < 0) {
+ tablebody_EL.insertBefore(tr, rows[i]);
+ inserted = true;
+ break;
+ }
+ }
+ if (!inserted) {
+ tablebody_EL.appendChild(tr);
+ }
+ }
+
+ function renderRow(data) {
+ // Create and insert sorted row
+ const tr = createRow(data);
+ insertSortedRow(tr, data);
+ renderedRows[data._key] = tr;
+ }
+
+ function updateRow(data) {
+ const tr = renderedRows[data._key];
+ if (!tr) return;
+ const ESTADOS = ["Pedido", "En preparación", "Listo", "Entregado", "Deuda", "Pagado"];
+
+ function createEstadoButtons(currentEstado, key) {
+ return ESTADOS.map(estado => {
+ const active = estado === currentEstado ? 'disabled class="rojo"' : '';
+ return `
`;
+ }).join(" ");
+ }
+
+ var persona = SC_Personas[data.Persona] || DefaultPersona;
+ var pcalc = SC_priceCalc(JSON.parse(data.Comanda));
+ var precio = pcalc[0];
+ var resumen = pcalc[1];
+
+ tr.style.pointerEvents = sc_nobtn ? "none" : "";
+ tr.style.opacity = sc_nobtn ? "0.5" : "";
+
+ // Update background and estado
+ var bgColor = "";
+ switch (data.Estado) {
+ case "Pedido": tr.style.backgroundColor = ""; break;
+ case "En preparación": bgColor = "#FFCCCB"; break;
+ case "Listo": bgColor = "gold"; break;
+ case "Entregado": bgColor = "lightgreen"; break;
+ case "Deuda": bgColor = "hotpink"; break;
+ case "Pagado": bgColor = ""; break;
+ }
+ tr.style.backgroundColor = bgColor;
+
+ // Update cells
+ tr.cells[0].innerHTML = `${persona.Region.toUpperCase() || "?"}
${data.Fecha}
`;
+ tr.cells[1].innerHTML = `
${persona.Nombre}
${persona.Puntos} pts.`;
+ tr.cells[2].innerHTML = createEstadoButtons(data.Estado, data._key);
+ tr.cells[3].innerHTML = `
+ ${setLayeredImages(JSON.parse(data.Comanda), data._key)}
+ ${SC_parse(JSON.parse(data.Comanda))}
${data.Notas}`;
+ tr.cells[4].innerHTML = `${resumen}${persona.Puntos >= 10 ? "
Gratis! Usando puntos" : `
Pagando ${precio}c`}`;
+
+ // Reposition if necessary (in case sorting keys changed)
+ tablebody_EL.removeChild(tr);
+ insertSortedRow(tr, data);
+ }
+
+ function speakTTS(data) {
+ if (tts && document.getElementById(tts_check).checked) {
+ var persona = SC_Personas[data.Persona] || DefaultPersona;
+ var comanda = JSON.parse(data.Comanda);
+ var msg = `Comanda de ${persona.Region}. ${comanda["Selección"]}. ${persona.Nombre}. Estado: ${data.Estado}`;
+ var utterance = new SpeechSynthesisUtterance(msg);
+ utterance.rate = 0.9;
+ speechSynthesis.speak(utterance);
+ }
+ }
+
+ function add_row(data, key) {
+ if (data != null) {
+ data["_key"] = key;
+
+ if (old2[key] === undefined) old2[key] = "";
+ if (old[key] === undefined) old[key] = "";
+
+ var estadoChanged = old[key] !== data.Estado;
+ var comandaChanged = old2[key] !== data.Comanda;
+
+ rows2[key] = data;
+
+ if (!renderedRows[key]) {
+ renderRow(data);
+ } else if (estadoChanged || comandaChanged) {
+ updateRow(data);
+ }
+
+ if (estadoChanged) {
+ speakTTS(data);
+ }
+
+ old[key] = data.Estado;
+ old2[key] = data.Comanda;
+ } else {
+ // Remove row
+ if (renderedRows[key]) {
+ renderedRows[key].remove();
+ delete renderedRows[key];
+ }
+ delete rows2[key];
+ delete old[key];
+ delete old2[key];
+ }
+ }
+
+ gun.get(TABLE).get("supercafe").map().on((data, key, _msg, _ev) => {
+ if (typeof data === "string") {
+ SEA.decrypt(data, SECRET, (decData) => {
+ add_row(decData, key);
+ });
+ } else {
+ add_row(data, key);
+ }
+ });
+
+ document.getElementById(btn_new).onclick = () => {
+ SC_newCommand();
+ };
+ }
+
},
notificaciones: {
navcss: "btn6",
@@ -2639,4 +2685,4 @@
-