This commit is contained in:
Naiel
2025-05-29 14:37:04 +02:00
committed by GitHub
parent c7d3d76516
commit ab3a89d34d
3 changed files with 2228 additions and 2164 deletions

View File

@@ -1,6 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="es"> <html lang="es">
<head>
<head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="manifest" href="manifest.json"> <link rel="manifest" href="manifest.json">
@@ -60,6 +61,7 @@
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.link, .link,
a { a {
color: lightblue; color: lightblue;
@@ -67,6 +69,7 @@
} }
@media print { @media print {
.supermesh-indicator, .supermesh-indicator,
.no_print { .no_print {
display: none; display: none;
@@ -187,11 +190,12 @@
color: white; color: white;
} }
table { table {
display: block; display: block;
overflow-x: auto; overflow-x: scroll;
line-break: loose; line-break: loose;
/* max-width: 100%; */ max-width: 100%;
width: fit-content; width: fit-content;
/* min-width: 500px; */ /* min-width: 500px; */
border: 1px solid black; border: 1px solid black;
@@ -241,11 +245,13 @@
font-size: x-small; font-size: x-small;
color: gray; color: gray;
} }
.activeSCButton { .activeSCButton {
border: 7px dashed beige; border: 7px dashed beige;
color: beige; color: beige;
background: black !important; background: black !important;
} }
.btn1.activeSCButton { .btn1.activeSCButton {
border-color: #ff0000; border-color: #ff0000;
color: #ff0000; color: #ff0000;
@@ -285,6 +291,7 @@
border-color: #147df5; border-color: #147df5;
color: #147df5; color: #147df5;
} }
hr { hr {
border-color: black; border-color: black;
border-style: solid; border-style: solid;
@@ -304,6 +311,7 @@
left: 50%; left: 50%;
bottom: 30px; bottom: 30px;
} }
#snackbar a { #snackbar a {
color: lightblue; color: lightblue;
} }
@@ -312,20 +320,15 @@
visibility: visible; visibility: visible;
} }
</style> </style>
<link <link href="static/toastr.min.css" rel="stylesheet" />
href="static/toastr.min.css"
rel="stylesheet"
/>
<!--<link rel="stylesheet" href="static/simplemde.min.css">--> <!--<link rel="stylesheet" href="static/simplemde.min.css">-->
</head> </head>
<body> <body>
<details class="supermesh-indicator"> <details class="supermesh-indicator">
<summary> <summary>
<b>SuperMesh</b><br /> <b>SuperMesh</b><br />
<br /><small id="peerPID" style="font-family: monospace" <br /><small id="peerPID" style="font-family: monospace">PID ??????????</small>
>PID ??????????</small
>
</summary> </summary>
<ul id="peerList"></ul> <ul id="peerList"></ul>
<i>Todos los datos están encriptados.</i> <i>Todos los datos están encriptados.</i>
@@ -334,31 +337,21 @@
<header class="no_print" id="header_hide_query"> <header class="no_print" id="header_hide_query">
<details id="LinkAccount_details" open> <details id="LinkAccount_details" open>
<summary> <summary>
<b <b>TeleSec - <span id="groupId">???</span> - (<span id="peerCount">?</span>
>TeleSec - <span id="groupId">???</span> - (<span id="peerCount" nodos)</b>
>?</span
>
nodos)</b
>
</summary> </summary>
<fieldset id="auth_fieldSet"> <fieldset id="auth_fieldSet">
<legend>Credenciales</legend> <legend>Credenciales</legend>
<br /> <br />
<label <label>Codigo de grupo:<br />
>Codigo de grupo:<br /> <input type="text" id="LinkAccount_group" /></label>
<input type="text" id="LinkAccount_group"
/></label>
<br /> <br />
<br /> <br />
<label <label>Clave secreta:<br />
>Clave secreta:<br /> <input type="text" id="LinkAccount_secret" /></label>
<input type="text" id="LinkAccount_secret"
/></label>
<br /><br /> <br /><br />
<button <button type="button"
type="button" onclick='LinkAccount(document.getElementById("LinkAccount_group").value, document.getElementById("LinkAccount_secret").value, true)'>
onclick='LinkAccount(document.getElementById("LinkAccount_group").value, document.getElementById("LinkAccount_secret").value, true)'
>
Iniciar sesión Iniciar sesión
</button> </button>
</fieldset> </fieldset>
@@ -400,9 +393,10 @@
<!--<script src="static/synchronous.js"></script>--> <!--<script src="static/synchronous.js"></script>-->
<!--<script src="static/axe.js"></script>--> <!--<script src="static/axe.js"></script>-->
<script src="static/toastr.min.js"></script> <script src="static/toastr.min.js"></script>
<script src="static/doublescroll.js"></script>
<!--<script src="static/simplemde.min.js"></script>--> <!--<script src="static/simplemde.min.js"></script>-->
<script async> <script async>
async function getQuota(cb = () => {}) { async function getQuota(cb = () => { }) {
if (navigator.storage && navigator.storage.estimate) { if (navigator.storage && navigator.storage.estimate) {
const quota = await navigator.storage.estimate(); const quota = await navigator.storage.estimate();
// quota.usage -> Number of bytes used. // quota.usage -> Number of bytes used.
@@ -426,8 +420,8 @@
} }
// The click event on the pop up notification // The click event on the pop up notification
document.getElementById('reload').addEventListener('click', function(){ document.getElementById('reload').addEventListener('click', function () {
setTimeout(() => {removeCache()}, 1000) setTimeout(() => { removeCache() }, 1000)
newWorker.postMessage({ action: 'skipWaiting' }); newWorker.postMessage({ action: 'skipWaiting' });
}); });
@@ -545,6 +539,9 @@
} }
</script> </script>
<script id="app_logic"> <script id="app_logic">
function tableScroll(query) {
$(query).doubleScroll();
}
//var secretTokenEl = document.getElementById("secretToken"); //var secretTokenEl = document.getElementById("secretToken");
var groupIdEl = document.getElementById("groupId"); var groupIdEl = document.getElementById("groupId");
var container = document.getElementById("container"); var container = document.getElementById("container");
@@ -705,7 +702,7 @@
icon, icon,
options, options,
values, values,
change_cb = () => {} change_cb = () => { }
) { ) {
var details_0 = document.createElement("details"); // children: img_0, summary_0 var details_0 = document.createElement("details"); // children: img_0, summary_0
//details_0.open = true; //details_0.open = true;
@@ -787,7 +784,7 @@
parent, parent,
options, options,
defaultval, defaultval,
change_cb = () => {} change_cb = () => { }
) { ) {
var details_0 = document.createElement("details"); // children: img_0, summary_0 var details_0 = document.createElement("details"); // children: img_0, summary_0
//details_0.open = true; //details_0.open = true;
@@ -1467,7 +1464,7 @@
container.innerHTML = ` container.innerHTML = `
<h1>Materiales</h1> <h1>Materiales</h1>
<button id="${btn_new}">Nuevo Material</button> <button id="${btn_new}">Nuevo Material</button>
<table> <table id="scrolltable">
<thead> <thead>
<tr> <tr>
<th>Referencia</th> <th>Referencia</th>
@@ -1481,6 +1478,7 @@
</tbody> </tbody>
</table> </table>
`; `;
tableScroll("#scrolltable")
var tablebody_EL = document.getElementById(tablebody); var tablebody_EL = document.getElementById(tablebody);
var rows = {}; var rows = {};
function render() { function render() {
@@ -1582,12 +1580,9 @@
var falta = min - act; var falta = min - act;
if (act < min) { if (act < min) {
var new_tr = document.createElement("span"); var new_tr = document.createElement("span");
new_tr.innerHTML = `<b>${ new_tr.innerHTML = `<b>${data.Nombre || "?"
data.Nombre || "?" }</b><br>Faltan ${falta || "?"} ${data.Unidad || "?"
}</b><br>Faltan ${falta || "?"} ${ } <br><i style="font-size: 75%">${data.Ubicacion || "?"
data.Unidad || "?"
} <br><i style="font-size: 75%">${
data.Ubicacion || "?"
}</i>`; }</i>`;
new_tr.className = PAGES["materiales"].navcss; new_tr.className = PAGES["materiales"].navcss;
new_tr.style.display = "inline-block"; new_tr.style.display = "inline-block";
@@ -1645,14 +1640,10 @@
.forEach((data) => { .forEach((data) => {
if (data.Puntos >= 10) { if (data.Puntos >= 10) {
var new_tr = document.createElement("span"); var new_tr = document.createElement("span");
new_tr.innerHTML = `<img src="${ new_tr.innerHTML = `<img src="${data.Foto || ""
data.Foto || "" }" alt="" height="55" style="float: left; margin-right: 5px;"><b>${data.Nombre || "?"
}" alt="" height="55" style="float: left; margin-right: 5px;"><b>${ }</b><br>Tiene ${data.Puntos || "?"
data.Nombre || "?" } puntos <br><i style="font-size: 75%">${data.Region || "?"
}</b><br>Tiene ${
data.Puntos || "?"
} puntos <br><i style="font-size: 75%">${
data.Region || "?"
}</i>`; }</i>`;
new_tr.className = PAGES["personas"].navcss; new_tr.className = PAGES["personas"].navcss;
new_tr.style.display = "inline-block"; new_tr.style.display = "inline-block";
@@ -1840,7 +1831,7 @@
container.innerHTML = ` container.innerHTML = `
<h1>Personas</h1> <h1>Personas</h1>
<button id="${btn_new}">Nueva Persona</button> <button id="${btn_new}">Nueva Persona</button>
<table> <table id="scrolltable">
<thead> <thead>
<tr> <tr>
<th>Nombre</th> <th>Nombre</th>
@@ -1853,6 +1844,7 @@
</tbody> </tbody>
</table> </table>
`; `;
tableScroll("#scrolltable") // id="scrolltable"
var tablebody_EL = document.getElementById(tablebody); var tablebody_EL = document.getElementById(tablebody);
var rows = {}; var rows = {};
function render() { function render() {
@@ -1874,10 +1866,8 @@
var btn_comanda = safeuuid(); var btn_comanda = safeuuid();
var new_tr = document.createElement("tr"); var new_tr = document.createElement("tr");
new_tr.innerHTML = ` new_tr.innerHTML = `
<td class="TextBorder" style="background-color: ${ <td class="TextBorder" style="background-color: ${data.SC_Anilla
data.SC_Anilla }; text-align: center"><img src="${data.Foto ||
}; text-align: center"><img src="${
data.Foto ||
"static/ico/user_generic.png" "static/ico/user_generic.png"
}" height="50"> <br> ${data.Nombre || ""}</td> }" height="50"> <br> ${data.Nombre || ""}</td>
<td>${data.Region || "?"}</td> <td>${data.Region || "?"}</td>
@@ -2084,7 +2074,7 @@
container.innerHTML = ` container.innerHTML = `
<h1>SuperCafé</h1> <h1>SuperCafé</h1>
<button id="${btn_new}">Nueva comanda</button> <button id="${btn_new}">Nueva comanda</button>
<table> <table id="scrolltable">
<thead> <thead>
<tr> <tr>
<th>Zona</th> <th>Zona</th>
@@ -2099,6 +2089,7 @@
</table> </table>
`; `;
tableScroll("#scrolltable") // id="scrolltable"
var tablebody_EL = document.getElementById(tablebody); var tablebody_EL = document.getElementById(tablebody);
var rows2 = {}; var rows2 = {};
function render() { function render() {
@@ -2147,15 +2138,11 @@
} }
new_tr.innerHTML = ` new_tr.innerHTML = `
<td>${persona.Region.toUpperCase() || "?"}</td> <td>${persona.Region.toUpperCase() || "?"}</td>
<td class="TextBorder" style="background-color: ${ <td class="TextBorder" style="background-color: ${persona.SC_Anilla
persona.SC_Anilla }; text-align: center; font-size: 17px;"><img src="${persona.Foto ||
}; text-align: center; font-size: 17px;"><img src="${
persona.Foto ||
"static/ico/user_generic.png" "static/ico/user_generic.png"
}" height="50"><br> ${ }" height="50"><br> ${persona.Nombre || ""
persona.Nombre || "" }<br> <span style="font-size: 25px;">${persona.Puntos || "0"
}<br> <span style="font-size: 25px;">${
persona.Puntos || "0"
} pts.</span></td> } pts.</span></td>
<td style="font-size: 17px;"> <td style="font-size: 17px;">
<button id="${btn_Pedido}" class="">Pedido</button> <button id="${btn_Pedido}" class="">Pedido</button>
@@ -2163,8 +2150,7 @@
<br><button id="${btn_Hecho}" class="">Hecho</button> <br><button id="${btn_Hecho}" class="">Hecho</button>
<br><button id="${btn_Entregado}" class="">Entregado</button> <br><button id="${btn_Entregado}" class="">Entregado</button>
<br><button id="${btn_Pagado}" class="">Pagado</button></td> <br><button id="${btn_Pagado}" class="">Pagado</button></td>
<td><pre style="font-size: 17px;">${ <td><pre style="font-size: 17px;">${SC_parse(JSON.parse(data.Comanda)) +
SC_parse(JSON.parse(data.Comanda)) +
"<hr>" + "<hr>" +
data.Notas data.Notas
}</pre></td> }</pre></td>
@@ -2347,8 +2333,7 @@
${Object.entries(SC_Personas) ${Object.entries(SC_Personas)
.sort(PERSONAS_Sorter) .sort(PERSONAS_Sorter)
.map((entry) => { .map((entry) => {
return `<option value="${entry[0]}">${ return `<option value="${entry[0]}">${entry[1].Nombre || "?"
entry[1].Nombre || "?"
}</option>`; }</option>`;
}) })
.join("")} .join("")}
@@ -2362,8 +2347,7 @@
${Object.entries(SC_Personas) ${Object.entries(SC_Personas)
.sort(PERSONAS_Sorter) .sort(PERSONAS_Sorter)
.map((entry) => { .map((entry) => {
return `<option value="${entry[0]}">${ return `<option value="${entry[0]}">${entry[1].Nombre || "?"
entry[1].Nombre || "?"
}</option>`; }</option>`;
}) })
.join("")} .join("")}
@@ -2467,7 +2451,7 @@
container.innerHTML = ` container.innerHTML = `
<h1>Notificaciones</h1> <h1>Notificaciones</h1>
<button id="${btn_new}">Nueva notificación</button> <button id="${btn_new}">Nueva notificación</button>
<table> <table id="scrolltable">
<thead> <thead>
<tr> <tr>
<th>Fecha</th> <th>Fecha</th>
@@ -2480,6 +2464,7 @@
</tbody> </tbody>
</table> </table>
`; `;
tableScroll("#scrolltable") // id="scrolltable"
var tablebody_EL = document.getElementById(tablebody); var tablebody_EL = document.getElementById(tablebody);
var rows = {}; var rows = {};
function render() { function render() {
@@ -2502,21 +2487,15 @@
var persona_destino = SC_Personas[data.Destino]; var persona_destino = SC_Personas[data.Destino];
new_tr.innerHTML = ` new_tr.innerHTML = `
<td>${data.Fecha || "????-??-??"}</td> <td>${data.Fecha || "????-??-??"}</td>
<td class="TextBorder" style="background-color: ${ <td class="TextBorder" style="background-color: ${persona_origen.SC_Anilla
persona_origen.SC_Anilla }; text-align: center"><img src="${persona_origen.Foto ||
}; text-align: center"><img src="${
persona_origen.Foto ||
"static/ico/user_generic.png" "static/ico/user_generic.png"
}" height="50"><br> ${persona_origen.Nombre || ""}<br> ${ }" height="50"><br> ${persona_origen.Nombre || ""}<br> ${persona_origen.Puntos || "?"
persona_origen.Puntos || "?"
} punto(s) } punto(s)
</td><td class="TextBorder" style="background-color: ${ </td><td class="TextBorder" style="background-color: ${persona_destino.SC_Anilla
persona_destino.SC_Anilla }; text-align: center"><img src="${persona_destino.Foto ||
}; text-align: center"><img src="${
persona_destino.Foto ||
"static/ico/user_generic.png" "static/ico/user_generic.png"
}" height="50"><br> ${persona_destino.Nombre || ""}<br> ${ }" height="50"><br> ${persona_destino.Nombre || ""}<br> ${persona_destino.Puntos || "?"
persona_destino.Puntos || "?"
} punto(s)</td> } punto(s)</td>
<td>${data.Asunto || "?"}</td> <td>${data.Asunto || "?"}</td>
`; `;
@@ -2570,5 +2549,6 @@
}); });
open_page(location.hash.replace("#", "")); open_page(location.hash.replace("#", ""));
</script> </script>
</body> </body>
</html> </html>

83
static/doublescroll.js Normal file
View File

@@ -0,0 +1,83 @@
/*
* @name DoubleScroll
* @desc displays scroll bar on top and on the bottom of the div
* @requires jQuery, jQueryUI
*
* @author Pawel Suwala - http://suwala.eu/
* @version 0.3 (12-03-2014)
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*/
(function($){
$.widget("suwala.doubleScroll", {
options: {
contentElement: undefined, // Widest element, if not specified first child element will be used
topScrollBarMarkup: '<div class="suwala-doubleScroll-scroll-wrapper" style="height: 20px;"><div class="suwala-doubleScroll-scroll" style="height: 20px;"></div></div>',
topScrollBarInnerSelector: '.suwala-doubleScroll-scroll',
scrollCss: {
'overflow-x': 'scroll',
'overflow-y':'hidden'
},
contentCss: {
'overflow-x': 'scroll',
'overflow-y':'hidden'
}
},
_create : function() {
var self = this;
var contentElement;
// add div that will act as an upper scroll
var topScrollBar = $($(self.options.topScrollBarMarkup));
self.element.before(topScrollBar);
// find the content element (should be the widest one)
if (self.options.contentElement !== undefined && self.element.find(self.options.contentElement).length !== 0) {
contentElement = self.element.find(self.options.contentElement);
}
else {
contentElement = self.element.find('>:first-child');
}
// bind upper scroll to bottom scroll
topScrollBar.scroll(function(){
self.element.scrollLeft(topScrollBar.scrollLeft());
});
// bind bottom scroll to upper scroll
self.element.scroll(function(){
topScrollBar.scrollLeft(self.element.scrollLeft());
});
// apply css
topScrollBar.css(self.options.scrollCss);
self.element.css(self.options.contentCss);
// set the width of the wrappers
$(self.options.topScrollBarInnerSelector, topScrollBar).width(contentElement[0].scrollWidth);
topScrollBar.width(self.element[0].clientWidth);
},
refresh: function(){
// this should be called if the content of the inner element changed.
// i.e. After AJAX data load
var self = this;
var contentElement;
var topScrollBar = self.element.parent().find('.suwala-doubleScroll-scroll-wrapper');
// find the content element (should be the widest one)
if (self.options.contentElement !== undefined && self.element.find(self.options.contentElement).length !== 0) {
contentElement = self.element.find(self.options.contentElement);
}
else {
contentElement = self.element.find('>:first-child');
}
// set the width of the wrappers
$(self.options.topScrollBarInnerSelector, topScrollBar).width(contentElement[0].scrollWidth);
topScrollBar.width(self.element[0].clientWidth);
}
});
})(jQuery);

3
sw.js
View File

@@ -1,4 +1,4 @@
var cacheName = 'telesec_2025-05-28_2'; var cacheName = 'telesec_2025-05-29_1';
self.addEventListener('install', event => { self.addEventListener('install', event => {
event.waitUntil( event.waitUntil(
@@ -9,6 +9,7 @@ self.addEventListener('install', event => {
"index.html", "index.html",
"manifest.json", "manifest.json",
"static/axe.js", "static/axe.js",
"static/doublescroll.js",
"static/gun.js", "static/gun.js",
"static/jquery.js", "static/jquery.js",
"static/load.js", "static/load.js",