Upload armario.html
Browse files- templates/armario.html +76 -2
templates/armario.html
CHANGED
|
@@ -252,6 +252,40 @@
|
|
| 252 |
color: #a0aec0;
|
| 253 |
font-style: italic;
|
| 254 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 255 |
</style>
|
| 256 |
</head>
|
| 257 |
<body>
|
|
@@ -318,6 +352,13 @@
|
|
| 318 |
<div id="selectionOutput" class="selection-output">
|
| 319 |
Ningún ítem seleccionado
|
| 320 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 321 |
<button id="copyButton" class="copy-button" disabled>Copiar</button>
|
| 322 |
<!-- Visor de avatar -->
|
| 323 |
<div class="avatar-preview">
|
|
@@ -397,16 +438,19 @@
|
|
| 397 |
}
|
| 398 |
// Actualizar vista de selección con "etiquetas" y botón de copiar
|
| 399 |
// Actualizar vista de selección y avatar
|
|
|
|
| 400 |
function updateSelectionDisplay() {
|
| 401 |
const copyButton = document.getElementById('copyButton');
|
| 402 |
const avatarImage = document.getElementById('avatarImage');
|
| 403 |
const avatarPlaceholder = document.getElementById('avatarPlaceholder');
|
|
|
|
| 404 |
|
| 405 |
if (selectedItems.length === 0) {
|
| 406 |
selectionOutput.innerHTML = "Ningún ítem seleccionado";
|
| 407 |
copyButton.disabled = true;
|
| 408 |
avatarImage.style.display = 'none';
|
| 409 |
avatarPlaceholder.style.display = 'block';
|
|
|
|
| 410 |
return;
|
| 411 |
}
|
| 412 |
|
|
@@ -431,6 +475,26 @@
|
|
| 431 |
avatarPlaceholder.style.display = 'none';
|
| 432 |
}
|
| 433 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 434 |
// Asignar eventos a las "etiquetas"
|
| 435 |
document.querySelectorAll('.selection-tag').forEach(tag => {
|
| 436 |
tag.addEventListener('click', (e) => {
|
|
@@ -441,6 +505,15 @@
|
|
| 441 |
});
|
| 442 |
});
|
| 443 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 444 |
// Evento de copiar
|
| 445 |
copyButton.onclick = async () => {
|
| 446 |
try {
|
|
@@ -527,16 +600,17 @@
|
|
| 527 |
itemEl.addEventListener('click', () => {
|
| 528 |
const type = itemEl.dataset.type;
|
| 529 |
const id = itemEl.dataset.id;
|
|
|
|
| 530 |
|
| 531 |
// Buscar si ya existe un ítem en esta categoría
|
| 532 |
const existingIndex = selectedItems.findIndex(item => item.type === type);
|
| 533 |
|
| 534 |
if (existingIndex !== -1) {
|
| 535 |
// Reemplazar el ítem existente
|
| 536 |
-
selectedItems[existingIndex] = { type, id };
|
| 537 |
} else {
|
| 538 |
// Agregar nuevo ítem
|
| 539 |
-
selectedItems.push({ type, id });
|
| 540 |
}
|
| 541 |
|
| 542 |
updateSelectionDisplay();
|
|
|
|
| 252 |
color: #a0aec0;
|
| 253 |
font-style: italic;
|
| 254 |
}
|
| 255 |
+
.selected-items-preview {
|
| 256 |
+
background: white;
|
| 257 |
+
padding: 15px;
|
| 258 |
+
border-radius: 12px;
|
| 259 |
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
| 260 |
+
margin: 20px 0;
|
| 261 |
+
}
|
| 262 |
+
.selected-items-grid {
|
| 263 |
+
display: flex;
|
| 264 |
+
gap: 12px;
|
| 265 |
+
flex-wrap: wrap;
|
| 266 |
+
justify-content: center;
|
| 267 |
+
min-height: 60px;
|
| 268 |
+
}
|
| 269 |
+
.selected-item-card {
|
| 270 |
+
background: #f8fafc;
|
| 271 |
+
border-radius: 8px;
|
| 272 |
+
padding: 8px;
|
| 273 |
+
text-align: center;
|
| 274 |
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
| 275 |
+
width: 80px;
|
| 276 |
+
}
|
| 277 |
+
.selected-item-card img {
|
| 278 |
+
width: 60px;
|
| 279 |
+
height: 60px;
|
| 280 |
+
object-fit: contain;
|
| 281 |
+
image-rendering: pixelated;
|
| 282 |
+
}
|
| 283 |
+
.selected-item-card .item-id {
|
| 284 |
+
font-size: 10px;
|
| 285 |
+
color: #4a5568;
|
| 286 |
+
margin-top: 4px;
|
| 287 |
+
word-break: break-all;
|
| 288 |
+
}
|
| 289 |
</style>
|
| 290 |
</head>
|
| 291 |
<body>
|
|
|
|
| 352 |
<div id="selectionOutput" class="selection-output">
|
| 353 |
Ningún ítem seleccionado
|
| 354 |
</div>
|
| 355 |
+
<!-- Miniaturas de ítems seleccionados -->
|
| 356 |
+
<div class="selected-items-preview">
|
| 357 |
+
<h3>Ítems seleccionados:</h3>
|
| 358 |
+
<div id="selectedItemsGrid" class="selected-items-grid">
|
| 359 |
+
<!-- Las miniaturas se generarán aquí -->
|
| 360 |
+
</div>
|
| 361 |
+
</div>
|
| 362 |
<button id="copyButton" class="copy-button" disabled>Copiar</button>
|
| 363 |
<!-- Visor de avatar -->
|
| 364 |
<div class="avatar-preview">
|
|
|
|
| 438 |
}
|
| 439 |
// Actualizar vista de selección con "etiquetas" y botón de copiar
|
| 440 |
// Actualizar vista de selección y avatar
|
| 441 |
+
// Actualizar todo: selección, avatar y miniaturas
|
| 442 |
function updateSelectionDisplay() {
|
| 443 |
const copyButton = document.getElementById('copyButton');
|
| 444 |
const avatarImage = document.getElementById('avatarImage');
|
| 445 |
const avatarPlaceholder = document.getElementById('avatarPlaceholder');
|
| 446 |
+
const selectedItemsGrid = document.getElementById('selectedItemsGrid');
|
| 447 |
|
| 448 |
if (selectedItems.length === 0) {
|
| 449 |
selectionOutput.innerHTML = "Ningún ítem seleccionado";
|
| 450 |
copyButton.disabled = true;
|
| 451 |
avatarImage.style.display = 'none';
|
| 452 |
avatarPlaceholder.style.display = 'block';
|
| 453 |
+
selectedItemsGrid.innerHTML = '<div style="color:#a0aec0; width:100%; text-align:center;">No hay ítems seleccionados</div>';
|
| 454 |
return;
|
| 455 |
}
|
| 456 |
|
|
|
|
| 475 |
avatarPlaceholder.style.display = 'none';
|
| 476 |
}
|
| 477 |
|
| 478 |
+
// Generar miniaturas
|
| 479 |
+
selectedItemsGrid.innerHTML = selectedItems.map((item, index) => {
|
| 480 |
+
// Construir URL de la imagen del ítem
|
| 481 |
+
const params = new URLSearchParams(window.location.search);
|
| 482 |
+
let baseUrlParams = "";
|
| 483 |
+
for (const [key, value] of params) {
|
| 484 |
+
if (!['page', 'per_page', 'q', 'type'].includes(key)) {
|
| 485 |
+
baseUrlParams += `&${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
|
| 486 |
+
}
|
| 487 |
+
}
|
| 488 |
+
const imageUrl = `/api/images/${item.lib_id}.nitro?sprite=0${baseUrlParams}`;
|
| 489 |
+
|
| 490 |
+
return `
|
| 491 |
+
<div class="selected-item-card" data-index="${index}">
|
| 492 |
+
<img src="${imageUrl}" alt="${item.lib_id}" loading="lazy">
|
| 493 |
+
<div class="item-id">${item.type}-${item.id}</div>
|
| 494 |
+
</div>
|
| 495 |
+
`;
|
| 496 |
+
}).join('');
|
| 497 |
+
|
| 498 |
// Asignar eventos a las "etiquetas"
|
| 499 |
document.querySelectorAll('.selection-tag').forEach(tag => {
|
| 500 |
tag.addEventListener('click', (e) => {
|
|
|
|
| 505 |
});
|
| 506 |
});
|
| 507 |
|
| 508 |
+
// Asignar eventos a las miniaturas
|
| 509 |
+
document.querySelectorAll('.selected-item-card').forEach(card => {
|
| 510 |
+
card.addEventListener('click', () => {
|
| 511 |
+
const index = parseInt(card.dataset.index);
|
| 512 |
+
selectedItems.splice(index, 1);
|
| 513 |
+
updateSelectionDisplay();
|
| 514 |
+
});
|
| 515 |
+
});
|
| 516 |
+
|
| 517 |
// Evento de copiar
|
| 518 |
copyButton.onclick = async () => {
|
| 519 |
try {
|
|
|
|
| 600 |
itemEl.addEventListener('click', () => {
|
| 601 |
const type = itemEl.dataset.type;
|
| 602 |
const id = itemEl.dataset.id;
|
| 603 |
+
const lib_id = itemEl.dataset.libId; // ← ¡Nuevo!
|
| 604 |
|
| 605 |
// Buscar si ya existe un ítem en esta categoría
|
| 606 |
const existingIndex = selectedItems.findIndex(item => item.type === type);
|
| 607 |
|
| 608 |
if (existingIndex !== -1) {
|
| 609 |
// Reemplazar el ítem existente
|
| 610 |
+
selectedItems[existingIndex] = { type, id, lib_id }; // ← Incluye lib_id
|
| 611 |
} else {
|
| 612 |
// Agregar nuevo ítem
|
| 613 |
+
selectedItems.push({ type, id, lib_id }); // ← Incluye lib_id
|
| 614 |
}
|
| 615 |
|
| 616 |
updateSelectionDisplay();
|