Fixed

assets/static/euskaditech-css/simple.css

@@ -1,4 +1,3 @@
-
 html {
   color-scheme: light only;
 }
@@ -52,6 +51,7 @@
 }
 
 @media (prefers-color-scheme: dark) {
+
   .link,
   a {
     color: lightblue;
@@ -59,6 +59,7 @@
 }
 
 @media print {
+
   .supermesh-indicator,
   .no_print {
     display: none;

src/app_modules.js

@@ -628,7 +628,7 @@ function TS_IndexElement(
   container,
   rowCallback = undefined,
   canAddCallback = undefined,
-  globalSearchBar = true,
+  globalSearchBar = true
 ) {
   // Every item in config should have:
   // key: string
@@ -643,9 +643,13 @@ function TS_IndexElement(
   // Create the container with search bar and table
   container.innerHTML = `
     <div id="${scrolltable}">
-      <input type="text" id="${searchKeyInput}" placeholder="🔍 Buscar..." style="width: 100%; max-width: 20rem; padding: 8px; border: 1px solid #ccc; border-radius: 4px; background-color: rebeccapurple; color: white;">
       <table>
         <thead>
+          <tr style="background: transparent;">
+            <th colspan="100%" style="padding: 0; background: transparent;">
+              <input type="text" id="${searchKeyInput}" placeholder="🔍 Buscar..." style="width: calc(100% - 18px); padding: 8px; border: 1px solid #ccc; border-radius: 4px; background-color: rebeccapurple; color: white;">
+            </th>
+          </tr>
           <tr id="${tablehead}"></tr>
         </thead>
         <tbody id="${tablebody}">
@@ -662,7 +666,10 @@ function TS_IndexElement(
   });
   // Add search functionality
   const searchKeyEl = document.getElementById(searchKeyInput);
-  searchKeyEl.addEventListener('input', debounce(() => render(), 300));
+  searchKeyEl.addEventListener(
+    "input",
+    debounce(() => render(), 300)
+  );
 
   function searchInData(data, searchValue, config) {
     if (!searchValue) return true;
@@ -681,9 +688,12 @@ function TS_IndexElement(
           try {
             const comandaData = JSON.parse(data.Comanda);
             // Search in all comanda fields
-            if (Object.values(comandaData).some(v => 
+            if (
+              Object.values(comandaData).some((v) =>
                 String(v).toLowerCase().includes(searchValue)
-            )) return true;
+              )
+            )
+              return true;
           } catch (e) {
             // If JSON parse fails, search in raw string
             if (data.Comanda.toLowerCase().includes(searchValue)) return true;
@@ -693,8 +703,10 @@ function TS_IndexElement(
           const persona = SC_Personas[value];
           if (persona) {
             // Search in persona fields
-            if (persona.Nombre?.toLowerCase().includes(searchValue)) return true;
-            if (persona.Region?.toLowerCase().includes(searchValue)) return true;
+            if (persona.Nombre?.toLowerCase().includes(searchValue))
+              return true;
+            if (persona.Region?.toLowerCase().includes(searchValue))
+              return true;
           }
           break;
         default:
@@ -747,6 +759,7 @@ function TS_IndexElement(
               break;
             case "comanda":
               const tdComanda = document.createElement("td");
+              tdComanda.style.verticalAlign = "top";
               const parsedComanda = JSON.parse(data.Comanda);
               const precio = SC_priceCalc(parsedComanda)[0];
 
@@ -758,18 +771,26 @@ function TS_IndexElement(
               const pre = document.createElement("pre");
               pre.style.fontSize = "15px";
               pre.style.display = "inline-block";
-
+              pre.style.margin = "0";
+              pre.style.verticalAlign = "top";
+              pre.style.padding = "5px";
+              //looking like a post-it
+              pre.style.background = "rgba(255, 255, 0, 0.5)";
+              pre.style.border = "1px solid rgba(0, 0, 0, 0.2)";
+              pre.style.borderRadius = "5px";
+              pre.style.boxShadow = "2px 2px 5px rgba(0, 0, 0, 0.1)";
+              pre.style.height = "100%";
               const spanPrecio = document.createElement("span");
               spanPrecio.style.fontSize = "20px";
               spanPrecio.innerHTML =
                 SC_Personas[data.Persona].Puntos >= 10
                   ? `Total: Gratis!(${precio}c)`
                   : `Total: ${precio}c`;
-
-              pre.appendChild(spanPrecio);
+              pre.innerHTML = "<b>Ticket de compra</b> ";
               pre.appendChild(document.createTextNode("\n"));
               pre.innerHTML +=
-                SC_parse_short(parsedComanda) + "<hr>" + data.Notas;
+                SC_parse_short(parsedComanda) + "<hr>" + data.Notas + "<hr>";
+              pre.appendChild(spanPrecio);
 
               tdComanda.appendChild(pre);
               new_tr.appendChild(tdComanda);
@@ -945,7 +966,7 @@ function TS_IndexElement(
 }
 
 const PAGES = {};
-document.addEventListener("DOMContentLoaded", () => {
+function SetPages() {
   Object.keys(PAGES).forEach((key) => {
     if (PAGES[key].Esconder == true) {
       return;
@@ -956,5 +977,24 @@ document.addEventListener("DOMContentLoaded", () => {
     a.innerText = PAGES[key].Title;
     document.getElementById("appendApps").append(a);
   });
-  open_page(location.hash.replace("#", ""));
+}
+document.addEventListener("DOMContentLoaded", () => {
+  SetPages();
+  document.getElementById("appendApps").style.display = "none";
+  document.getElementById("loading").style.display = "block";
 });
+var Booted = false;
+getPeers();
+setInterval(() => {
+  getPeers();
+  if (ConnectionStarted && !Booted) {
+    Booted = true;
+    document.getElementById("loading").style.display = "none";
+    if (!SUB_LOGGED_IN) {
+      open_page("login");
+      return;
+    }
+    document.getElementById("appendApps").style.display = "block";
+    open_page(location.hash.replace("#", ""));
+  }
+}, 1500);

src/config.js

@@ -23,3 +23,22 @@ var SECRET = "";
 var SUB_LOGGED_IN = false;
 var SUB_LOGGED_IN_DETAILS = false;
 var SUB_LOGGED_IN_ID = false;
+if (urlParams.get("sublogin") != null) {
+  SUB_LOGGED_IN = true;
+  SUB_LOGGED_IN_ID = urlParams.get("sublogin");
+  SUB_LOGGED_IN_DETAILS = true;
+  setTimeout(() => {
+    SUB_LOGGED_IN_DETAILS = SC_Personas[SUB_LOGGED_IN_ID];
+  }, 1500);
+}
+function LogOutTeleSec() {
+  SUB_LOGGED_IN = false;
+  SUB_LOGGED_IN_DETAILS = false;
+  SUB_LOGGED_IN_ID = false;
+  document.getElementById("appendApps").style.display = "none";
+  document.getElementById("loading").style.display = "block";
+  //Remove sublogin from URL and reload
+  urlParams.delete("sublogin");
+  history.replaceState(null, "", "?" + urlParams.toString());
+  location.reload();
+}

src/gun_init.js

@@ -14,21 +14,13 @@ function removeCache() {
     location.reload(true);
   });
 }
-function getPeers() {
-  var peerCount = 0;
-  var peerCountEl = document.getElementById("peerCount");
-  var peerListEl = document.getElementById("peerList");
-  var list = document.createElement("ul");
-  document.getElementById("peerPID").innerText = "PID " + gun.back("opt.pid");
-  Object.values(gun.back("opt.peers")).forEach((peer) => {
-    if (
-      peer.wire != undefined &&
-      (peer.wire.readyState == 1 || peer.wire.readyState == "open")
-    ) {
-      peerCount += 1;
-      var wireType = peer.wire.constructor.name;
-      var wireHType = peer.wire.constructor.name;
-      var wireID = peer.id;
+var AtLeastThreePeers = false;
+var ConnectionStarted = false;
+function formatPeerInfo(peer) {
+  const wireType = peer.wire.constructor.name;
+  let wireHType = wireType;
+  let wireID = peer.id;
+
   switch (wireType) {
     case "WebSocket":
       wireHType = "Web";
@@ -36,26 +28,62 @@ function getPeers() {
       break;
     case "RTCDataChannel":
       wireHType = "Mesh";
-          wireID = peer.id;
+      break;
   }
-      var el = document.createElement("li");
+
+  return { wireHType, wireID };
+}
+
+function isPeerConnected(peer) {
+  return peer.wire != undefined && 
+         (peer.wire.readyState == 1 || peer.wire.readyState == "open");
+}
+
+function createPeerListElement(wireHType, wireID) {
+  const el = document.createElement("li");
   el.innerText = `Nodo ${wireHType}: ${wireID}`;
-      list.append(el);
+  return el;
 }
-  });
-  peerListEl.innerHTML = list.innerHTML;
-  peerCountEl.innerText = peerCount;
+
+function updateConnectionStatus(peerCount) {
+  const statusImage = peerCount < 3 ? "connect_ko.svg" : "connect_ok.svg";
+  document.getElementById("connectStatus").src = `static/ico/${statusImage}`;
+  
   if (peerCount < 3) {
-    document.getElementById("connectStatus").src = "static/ico/connect_ko.svg";
+    if (!window.peerRetryCount) window.peerRetryCount = 0;
+    window.peerRetryCount = (window.peerRetryCount + 1) % 3;
+    if (window.peerRetryCount === 0) {
       gun.opt({ peers: RELAYS });
+    }
+    AtLeastThreePeers = false;
   } else {
-    document.getElementById("connectStatus").src = "static/ico/connect_ok.svg";
+    ConnectionStarted = true;
+    AtLeastThreePeers = true;
   }
 }
-getPeers();
-setInterval(() => {
-  getPeers();
-}, 2500);
+
+function getPeers() {
+  const peerCountEl = document.getElementById("peerCount");
+  const peerListEl = document.getElementById("peerList");
+  const list = document.createElement("ul");
+  
+  document.getElementById("peerPID").innerText = "PID " + gun.back("opt.pid");
+  
+  const connectedPeers = Object.values(gun.back("opt.peers"))
+    .filter(isPeerConnected)
+    .map(peer => {
+      const { wireHType, wireID } = formatPeerInfo(peer);
+      return createPeerListElement(wireHType, wireID);
+    });
+    
+  connectedPeers.forEach(el => list.append(el));
+  
+  peerListEl.innerHTML = list.innerHTML;
+  const peerCount = connectedPeers.length;
+  peerCountEl.innerText = peerCount;
+  
+  updateConnectionStatus(peerCount);
+}
 function safeuuid(prefix = "AXLUID_") {
   return prefix + crypto.randomUUID().split("-")[4];
 }

src/index.html

@@ -12,6 +12,7 @@
   </head>
 
   <body>
+    <img id="loading" src="load.gif" style="display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - 50px); max-width: 400px;" />
     <details class="supermesh-indicator">
       <summary>
         <b>SuperMesh</b><br />

src/page/index.js

@@ -3,9 +3,10 @@ PAGES.index = {
   Title: "Inicio",
   index: function () {
     container.innerHTML = `
-                <h1>Inicio</h1>
+                <h1>¡Hola, ${SUB_LOGGED_IN_DETAILS.Nombre}!</h1>
                 <em>Utiliza el menú superior para abrir un modulo</em>
                 <br><br>
+                <button class="btn1" onclick="LogOutTeleSec()">Cerrar sesión</button>
             `;
   },
 };

src/page/login.js

@@ -15,7 +15,7 @@ PAGES.login = {
                     <button class="btn5" id="${btn_guardar}">Acceder</button>
                     <button class="btn1" id="${btn_reload}">Recargar lista</button>
                 </fieldset>
-                <a style="color: rgb(240,240,240)">Acceso sin cuenta</a>
+                <a style="color: rgb(240,240,240)">Acceso sin cuenta - No disponible</a>
                 `;
       var divact = document.getElementById(div_actions);
       addCategory_Personas(