Modularized, fixed SuperCafe's table
This commit is contained in:
naielv
224
src/page__personas.js
Normal file
224
src/page__personas.js
Normal file
@@ -0,0 +1,224 @@
|
||||
PAGES.personas = {
|
||||
navcss: "btn4",
|
||||
Title: "Personas",
|
||||
edit: function (mid) {
|
||||
var nameh1 = safeuuid();
|
||||
var field_nombre = safeuuid();
|
||||
var field_zona = safeuuid();
|
||||
var field_roles = safeuuid();
|
||||
var field_puntos = safeuuid();
|
||||
var field_notas = safeuuid();
|
||||
var field_anilla = safeuuid();
|
||||
var field_foto = safeuuid();
|
||||
var render_foto = safeuuid();
|
||||
var btn_guardar = safeuuid();
|
||||
var btn_borrar = safeuuid();
|
||||
container.innerHTML = `
|
||||
<h1>Persona <code id="${nameh1}"></code></h1>
|
||||
<fieldset>
|
||||
<label>
|
||||
Nombre<br>
|
||||
<input type="text" id="${field_nombre}"><br><br>
|
||||
</label>
|
||||
<label>
|
||||
Zona<br>
|
||||
<input type="text" id="${field_zona}"><br><br>
|
||||
</label>
|
||||
<label>
|
||||
Permisos<br>
|
||||
<input type="text" id="${field_roles}"><br><br>
|
||||
</label>
|
||||
<label>
|
||||
Puntos<br>
|
||||
<input type="number" id="${field_puntos}"><br><br>
|
||||
</label>
|
||||
<label>
|
||||
Anilla<br>
|
||||
<input type="color" id="${field_anilla}"><br><br>
|
||||
</label>
|
||||
<label>
|
||||
Foto (PNG o JPG)<br>
|
||||
<img id="${render_foto}" height="100px" style="border: 3px inset; min-width: 7px;" src="static/camera2.png">
|
||||
<input type="file" accept="image/*" id="${field_foto}" style="display: none;"><br><br>
|
||||
</label>
|
||||
|
||||
|
||||
<label>
|
||||
Notas<br>
|
||||
<textarea id="${field_notas}"></textarea><br><br>
|
||||
</label><hr>
|
||||
<button class="btn5" id="${btn_guardar}">Guardar</button>
|
||||
<button class="rojo" id="${btn_borrar}">Borrar</button>
|
||||
</fieldset>
|
||||
`;
|
||||
var resized = "";
|
||||
gun
|
||||
.get(TABLE)
|
||||
.get("personas")
|
||||
.get(mid)
|
||||
.once((data, key) => {
|
||||
function load_data(data, ENC = "") {
|
||||
document.getElementById(nameh1).innerText = key;
|
||||
document.getElementById(field_nombre).value = data["Nombre"] || "";
|
||||
document.getElementById(field_zona).value = data["Region"] || "";
|
||||
document.getElementById(field_roles).value = data["Roles"] || "";
|
||||
document.getElementById(field_puntos).value = data["Puntos"] || 0;
|
||||
document.getElementById(field_anilla).value = data["SC_Anilla"] || "";
|
||||
// document.getElementById(field_foto).value = "";
|
||||
document.getElementById(render_foto).src =
|
||||
data["Foto"] || "static/ico/user_generic.png";
|
||||
resized = data["Foto"] || "static/ico/user_generic.png";
|
||||
document.getElementById(field_notas).value = data["markdown"] || "";
|
||||
}
|
||||
if (typeof data == "string") {
|
||||
SEA.decrypt(data, SECRET, (data) => {
|
||||
load_data(data, "%E");
|
||||
});
|
||||
} else {
|
||||
load_data(data);
|
||||
}
|
||||
});
|
||||
document
|
||||
.getElementById(field_foto)
|
||||
.addEventListener("change", function (e) {
|
||||
const file = e.target.files[0];
|
||||
if (!file) return;
|
||||
|
||||
resizeInputImage(
|
||||
file,
|
||||
function (url) {
|
||||
document.getElementById(render_foto).src = url;
|
||||
resized = url;
|
||||
},
|
||||
125,
|
||||
0.7
|
||||
);
|
||||
});
|
||||
document.getElementById(btn_guardar).onclick = () => {
|
||||
var data = {
|
||||
Nombre: document.getElementById(field_nombre).value,
|
||||
Region: document.getElementById(field_zona).value,
|
||||
Roles: document.getElementById(field_roles).value,
|
||||
Puntos: document.getElementById(field_puntos).value,
|
||||
SC_Anilla: document.getElementById(field_anilla).value,
|
||||
Foto: resized,
|
||||
markdown: document.getElementById(field_notas).value,
|
||||
};
|
||||
var enc = SEA.encrypt(data, SECRET, (encrypted) => {
|
||||
document.getElementById("actionStatus").style.display = "block";
|
||||
betterGunPut(gun.get(TABLE).get("personas").get(mid), encrypted);
|
||||
toastr.success("Guardado!");
|
||||
setTimeout(() => {
|
||||
document.getElementById("actionStatus").style.display = "none";
|
||||
setUrlHash("personas");
|
||||
}, 1500);
|
||||
});
|
||||
};
|
||||
document.getElementById(btn_borrar).onclick = () => {
|
||||
if (confirm("¿Quieres borrar esta persona?") == true) {
|
||||
betterGunPut(gun.get(TABLE).get("personas").get(mid), null);
|
||||
toastr.error("Borrado!");
|
||||
setTimeout(() => {
|
||||
setUrlHash("personas");
|
||||
}, 1500);
|
||||
}
|
||||
};
|
||||
},
|
||||
index: function () {
|
||||
const tablebody = safeuuid();
|
||||
var btn_new = safeuuid();
|
||||
container.innerHTML = `
|
||||
<h1>Personas</h1>
|
||||
<button id="${btn_new}">Nueva Persona</button>
|
||||
<div id="scrolltable"><table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Nombre</th>
|
||||
<th>Zona</th>
|
||||
<th>Puntos</th>
|
||||
<th>Permisos</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="${tablebody}">
|
||||
</tbody>
|
||||
</table></div>
|
||||
`;
|
||||
tableScroll("#scrolltable"); // id="scrolltable"
|
||||
var tablebody_EL = document.getElementById(tablebody);
|
||||
var rows = {};
|
||||
function render() {
|
||||
function sorter(a, b) {
|
||||
if (a.Region.toUpperCase() < b.Region.toUpperCase()) {
|
||||
return -1;
|
||||
}
|
||||
if (a.Region.toUpperCase() > b.Region.toUpperCase()) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
var tablebody_EL = document.getElementById(tablebody);
|
||||
tablebody_EL.innerHTML = "";
|
||||
// SC_Personas = rows
|
||||
Object.values(rows)
|
||||
.sort(sorter)
|
||||
.forEach((data) => {
|
||||
var btn_comanda = safeuuid();
|
||||
var new_tr = document.createElement("tr");
|
||||
new_tr.innerHTML = `
|
||||
<td class="TextBorder" style="background-color: ${
|
||||
data.SC_Anilla
|
||||
}; text-align: center"><img src="${
|
||||
data.Foto || "static/ico/user_generic.png"
|
||||
}" height="50"> <br> ${data.Nombre || ""}</td>
|
||||
<td>${data.Region || "?"}</td>
|
||||
<td>${data.Puntos || 0}</td>
|
||||
<td>${data.Roles || ""}</td>
|
||||
`;
|
||||
|
||||
// <button id="${btn_comanda}" class="${PAGES.ventas.navcss}">Nueva venta</button>
|
||||
var act = parseFloat(data.Puntos);
|
||||
if (act >= 10) {
|
||||
new_tr.style.backgroundColor = "gold";
|
||||
}
|
||||
new_tr.onclick = () => {
|
||||
setUrlHash("personas," + data._key);
|
||||
};
|
||||
tablebody_EL.append(new_tr);
|
||||
// document.getElementById(btn_comanda).onclick = (e) => {
|
||||
// setUrlHash("ventas," + data._key);
|
||||
// if (!e) var e = window.event;
|
||||
// e.cancelBubble = true;
|
||||
// if (e.stopPropagation) e.stopPropagation();
|
||||
// };
|
||||
});
|
||||
}
|
||||
gun
|
||||
.get(TABLE)
|
||||
.get("personas")
|
||||
.map()
|
||||
.on((data, key, _msg, _ev) => {
|
||||
EVENTLISTENER = _ev;
|
||||
if (data != null) {
|
||||
function add_row(data, key) {
|
||||
if (data != null) {
|
||||
data["_key"] = key;
|
||||
rows[key] = data;
|
||||
} else {
|
||||
delete rows[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("personas," + safeuuid(""));
|
||||
};
|
||||
},
|
||||
};
|
||||
Reference in New Issue
Block a user