add global search

This commit is contained in:
naielv
2025-10-02 22:45:41 +02:00
parent f46ec17c03
commit 617711fb1a
6 changed files with 517 additions and 4 deletions

View File

@@ -62,7 +62,15 @@ function open_page(params) {
function setUrlHash(hash) {
location.hash = "#" + hash;
// Handle quick search transfer
if (hash === 'buscar') {
const quickSearchInput = document.getElementById('quickSearchInput');
if (quickSearchInput && quickSearchInput.value.trim()) {
// Store the search term temporarily
sessionStorage.setItem('telesec_quick_search', quickSearchInput.value.trim());
quickSearchInput.value = ''; // Clear the input
}
}
}
window.onhashchange = () => {
open_page(location.hash.replace("#", ""));

View File

@@ -1102,7 +1102,7 @@ setInterval(() => {
getPeers();
}, 750);
setInterval(() => {
var BootIntervalID = setInterval(() => {
BootLoops += 1;
console.log("BootLoops", BootLoops)
if ((BootLoops >= TimeoutBoot || window.navigator.onLine == false) && !Booted) {
@@ -1115,6 +1115,7 @@ setInterval(() => {
SetPages()
open_page(location.hash.replace("#", ""));
}
clearInterval(BootIntervalID);
}
if (ConnectionStarted && !Booted) {
Booted = true;
@@ -1125,6 +1126,7 @@ setInterval(() => {
}
SetPages()
open_page(location.hash.replace("#", ""));
clearInterval(BootIntervalID);
}
}, 1000);
@@ -1132,6 +1134,7 @@ setInterval(() => {
const tabs = document.querySelectorAll('.ribbon-tab');
const detailTabs = {
modulos: document.getElementById('tab-modulos'),
buscar: document.getElementById('tab-buscar'),
credenciales: document.getElementById('tab-credenciales')
};
@@ -1152,4 +1155,225 @@ tabs.forEach(tab => {
tabs.forEach(t => t.classList.remove('active'));
tab.classList.add('active');
});
});
});
// Global Search Functionality
function GlobalSearch() {
const searchData = {};
const allSearchableModules = [
{ role: 'personas', key: 'personas', title: 'Personas', icon: 'static/appico/File_Person.svg', fields: ['Nombre', 'Region', 'Notas', 'email'] },
{ role: 'materiales', key: 'materiales', title: 'Materiales', icon: 'static/appico/Database.svg', fields: ['Nombre', 'Referencia', 'Ubicacion', 'Notas'] },
{ role: 'supercafe', key: 'supercafe', title: 'SuperCafé', icon: 'static/appico/Coffee.svg', fields: ['Persona', 'Comanda', 'Estado'] },
{ role: 'comedor', key: 'comedor', title: 'Comedor', icon: 'static/appico/Meal.svg', fields: ['Fecha', 'Platos'] },
{ role: 'notas', key: 'notas', title: 'Notas', icon: 'static/appico/Notepad.svg', fields: ['Asunto', 'Contenido', 'Autor'] },
{ role: 'notificaciones', key: 'notificaciones', title: 'Avisos', icon: 'static/appico/Alert_Warning.svg', fields: ['Asunto', 'Mensaje', 'Origen', 'Destino'] },
{ role: 'aulas', key: 'aulas_solicitudes', title: 'Solicitudes de Aulas', icon: 'static/appico/Classroom.svg', fields: ['Asunto', 'Contenido', 'Solicitante'] },
{ role: 'aulas', key: 'aulas_informes', title: 'Informes de Aulas', icon: 'static/appico/Newspaper.svg', fields: ['Asunto', 'Contenido', 'Autor', 'Fecha'] }
];
// Filter modules based on user permissions
const searchableModules = allSearchableModules.filter(module => {
return checkRole(module.role);
});
// Load all data from modules
function loadAllData() {
searchableModules.forEach(module => {
searchData[module.key] = {};
gun.get(TABLE).get(module.key).map().on((data, key) => {
if (!data) return;
function processData(processedData) {
if (processedData && typeof processedData === 'object') {
searchData[module.key][key] = {
_key: key,
_module: module.key,
_title: module.title,
_icon: module.icon,
...processedData
};
}
}
if (typeof data === "string") {
TS_decrypt(data, SECRET, processData);
} else {
processData(data);
}
});
});
}
// Perform search across all modules
function performSearch(searchTerm) {
if (!searchTerm || searchTerm.length < 2) return [];
const results = [];
const searchLower = searchTerm.toLowerCase();
searchableModules.forEach(module => {
const moduleData = searchData[module.key] || {};
Object.values(moduleData).forEach(item => {
if (!item) return;
let relevanceScore = 0;
let matchedFields = [];
// Search in key/ID
if (item._key && item._key.toLowerCase().includes(searchLower)) {
relevanceScore += 10;
matchedFields.push('ID');
}
// Search in configured fields
module.fields.forEach(field => {
const value = item[field];
if (!value) return;
let searchValue = '';
// Handle special field types
if (field === 'Persona' && SC_Personas[value]) {
searchValue = SC_Personas[value].Nombre || '';
} else if (field === 'Comanda' && typeof value === 'string') {
try {
const comandaData = JSON.parse(value);
searchValue = Object.values(comandaData).join(' ');
} catch (e) {
searchValue = value;
}
} else {
searchValue = String(value);
}
if (searchValue.toLowerCase().includes(searchLower)) {
relevanceScore += field === 'Nombre' || field === 'Asunto' ? 5 : 2;
matchedFields.push(field);
}
});
if (relevanceScore > 0) {
results.push({
...item,
_relevance: relevanceScore,
_matchedFields: matchedFields
});
}
});
});
return results.sort((a, b) => b._relevance - a._relevance);
}
// Render search results
function renderResults(results, container) {
if (results.length === 0) {
container.innerHTML = `
<fieldset>
<legend>Sin resultados</legend>
<div>🚫 No se encontraron resultados</div>
<p>Prueba con otros términos de búsqueda o usa filtros diferentes</p>
</fieldset>
`;
return;
}
let html = '';
// Group by module
const groupedResults = {};
results.forEach(result => {
if (!groupedResults[result._module]) {
groupedResults[result._module] = [];
}
groupedResults[result._module].push(result);
});
Object.entries(groupedResults).forEach(([moduleKey, moduleResults]) => {
const module = searchableModules.find(m => m.key === moduleKey);
if (!module) return;
html += `
<fieldset>
<legend>
<img src="${module.icon}" height="20"> ${module.title} (${moduleResults.length})
</legend>
`;
moduleResults.slice(0, 5).forEach(result => {
let title = result.Nombre || result.Asunto || result._key;
let subtitle = '';
// Handle comedor specific display
if (result._module === 'comedor') {
title = result.Fecha ? `Menú del ${result.Fecha.split('-').reverse().join('/')}` : result._key;
if (result.Platos) {
subtitle = `🍽️ ${result.Platos.substring(0, 50)}${result.Platos.length > 50 ? '...' : ''}`;
}
} else {
// Default display for other modules
if (result.Persona && SC_Personas[result.Persona]) {
subtitle = `👤 ${SC_Personas[result.Persona].Nombre}`;
}
if (result.Fecha) {
const fecha = result.Fecha.split('-').reverse().join('/');
subtitle += subtitle ? ` • 📅 ${fecha}` : `📅 ${fecha}`;
}
if (result.Region) {
subtitle += subtitle ? ` • 🌍 ${result.Region}` : `🌍 ${result.Region}`;
}
}
html += `
<button onclick="navigateToResult('${moduleKey}', '${result._key}')" class="button">
<strong>${title}</strong>
${subtitle ? `<br><small>${subtitle}</small>` : ''}
<br><code>📍 ${result._matchedFields.join(', ')}</code>
</button>
`;
});
if (moduleResults.length > 5) {
let moreLink = moduleKey;
if (moduleKey === 'aulas_solicitudes') {
moreLink = 'aulas,solicitudes';
} else if (moduleKey === 'aulas_informes') {
moreLink = 'aulas,informes';
}
html += `
<hr>
<button onclick="setUrlHash('${moreLink}')" class="btn8">
Ver ${moduleResults.length - 5} resultados más en ${module.title}
</button>
`;
}
html += '</fieldset>';
});
container.innerHTML = html;
}
return {
loadAllData,
performSearch,
renderResults,
getAccessibleModules: () => searchableModules
};
}
// Helper function to navigate to search results
function navigateToResult(moduleKey, resultKey) {
switch (moduleKey) {
case 'aulas_solicitudes':
setUrlHash('aulas,solicitudes,' + resultKey);
break;
case 'aulas_informes':
setUrlHash('aulas,informes,' + resultKey);
break;
default:
setUrlHash(moduleKey + ',' + resultKey);
}
}

View File

@@ -62,11 +62,25 @@ function updateConnectionStatus(peerCount) {
window.peerRetryCount = (window.peerRetryCount + 1) % 3;
if (window.peerRetryCount === 0) {
gun.opt({ peers: RELAYS });
// Enhanced peer connection retry
setTimeout(() => {
gun.opt({ peers: RELAYS });
}, 1000);
setTimeout(() => {
gun.opt({ peers: RELAYS });
}, 3000);
}
AtLeastThreePeers = false;
} else {
ConnectionStarted = true;
AtLeastThreePeers = true;
// When we have good connectivity, force a data refresh
if (typeof refreshAllData === 'function') {
setTimeout(refreshAllData, 1000);
}
}
}

View File

@@ -19,6 +19,7 @@
<div class="ribbon-content">
<div class="ribbon-tabs">
<div class="ribbon-tab active" data-tab="modulos">Modulos</div>
<div class="ribbon-tab" data-tab="buscar">🔍 Buscar</div>
<div class="ribbon-tab" data-tab="credenciales">Credenciales</div>
</div>
@@ -29,6 +30,18 @@
</div>
</details>
<!-- Tab: Buscar -->
<details id="tab-buscar">
<summary hidden>Buscar</summary>
<div class="ribbon-panel">
<input type="text" id="quickSearchInput" placeholder="Búsqueda rápida..."
onkeypress="if(event.key==='Enter') document.getElementById('quickSearchBtn').click()">
<button id="quickSearchBtn" onclick="setUrlHash('buscar')" class="btn5">
Buscar
</button>
</div>
</details>
<!-- Tab: Admin -->
<details id="tab-credenciales">
<summary hidden>Credenciales</summary>
@@ -112,6 +125,7 @@
<script src="page/avisos.js"></script>
<script src="page/comedor.js"></script>
<script src="page/notas.js"></script>
<script src="page/buscar.js"></script>
</body>
</html>

253
src/page/buscar.js Normal file
View File

@@ -0,0 +1,253 @@
PAGES.buscar = {
navcss: "btn1",
icon: "static/appico/Chat.svg",
Title: "Buscar",
AccessControl: true,
index: function() {
const searchInput = safeuuid();
const resultsContainer = safeuuid();
const searchButton = safeuuid();
const recentSearches = safeuuid();
const moduleFilter = safeuuid();
container.innerHTML = `
<h1>🔍 Búsqueda Global</h1>
<p>Busca en todos los módulos: personas, materiales, café, comedor, notas y avisos</p>
<fieldset>
<legend>Opciones de búsqueda</legend>
<input type="text" id="${searchInput}"
placeholder="Escribe aquí para buscar..."
onkeypress="if(event.key==='Enter') document.getElementById('${searchButton}').click()">
<select id="${moduleFilter}">
<option value="">Todos los módulos</option>
<!-- Options will be populated dynamically based on user permissions -->
</select>
<button id="${searchButton}" class="btn5">
Buscar
</button>
</fieldset>
<div id="${recentSearches}"></div>
<div id="${resultsContainer}">
<fieldset>
<legend>Resultados</legend>
<div>🔍 Introduce un término de búsqueda para comenzar</div>
<p>Puedes buscar por nombres, referencias, fechas, ubicaciones...</p>
<details>
<summary>💡 Consejos de búsqueda</summary>
<ul>
<li><strong>Busca por nombres:</strong> "María", "García"</li>
<li><strong>Busca por fechas:</strong> "2024-10-01" o "01/10/2024"</li>
<li><strong>Busca por ubicación:</strong> "aula", "laboratorio"</li>
<li><strong>Usa filtros:</strong> selecciona un módulo específico</li>
<li><strong>Atajos de teclado:</strong> Ctrl+F para buscar, Esc para limpiar</li>
</ul>
</details>
</fieldset>
</div>
`;
// Initialize global search
const globalSearch = GlobalSearch();
globalSearch.loadAllData();
// Get accessible modules for the current user
const accessibleModules = globalSearch.getAccessibleModules();
const searchInputEl = document.getElementById(searchInput);
const resultsEl = document.getElementById(resultsContainer);
const searchButtonEl = document.getElementById(searchButton);
const recentSearchesEl = document.getElementById(recentSearches);
const moduleFilterEl = document.getElementById(moduleFilter);
// Populate module filter dropdown with only accessible modules
function populateModuleFilter() {
// Clear existing options except "Todos los módulos"
moduleFilterEl.innerHTML = '<option value="">Todos los módulos</option>';
// Add only accessible modules
accessibleModules.forEach(module => {
const option = document.createElement('option');
option.value = module.key;
option.textContent = `${getModuleIcon(module.key)} ${module.title}`;
moduleFilterEl.appendChild(option);
});
}
// Helper function to get module icons (fallback for older module mappings)
function getModuleIcon(moduleKey) {
const iconMap = {
'personas': '👤',
'materiales': '📦',
'supercafe': '☕',
'comedor': '🍽️',
'avisos': '🔔',
'aulas': '🏫',
'resumen_diario': '📊'
};
return iconMap[moduleKey] || '📋';
}
// Load recent searches from localStorage
function loadRecentSearches() {
const recent = JSON.parse(localStorage.getItem('telesec_recent_searches') || '[]');
if (recent.length > 0) {
recentSearchesEl.innerHTML = `
<fieldset>
<legend>Búsquedas recientes</legend>
${recent.map(term => `
<button onclick="document.getElementById('${searchInput}').value='${term}'; document.getElementById('${searchButton}').click();" class="btn4">
${term}
</button>
`).join('')}
<button onclick="localStorage.removeItem('telesec_recent_searches'); this.parentElement.style.display='none';" class="rojo">
Limpiar
</button>
</fieldset>
`;
}
}
// Populate the module filter dropdown
populateModuleFilter();
// Save search term to recent searches
function saveToRecent(term) {
if (!term || term.length < 2) return;
let recent = JSON.parse(localStorage.getItem('telesec_recent_searches') || '[]');
recent = recent.filter(t => t !== term); // Remove if exists
recent.unshift(term); // Add to beginning
recent = recent.slice(0, 5); // Keep only 5 most recent
localStorage.setItem('telesec_recent_searches', JSON.stringify(recent));
loadRecentSearches();
}
// Perform search
function performSearch() {
const searchTerm = searchInputEl.value.trim();
const selectedModule = moduleFilterEl.value;
if (searchTerm.length < 2) {
resultsEl.innerHTML = `
<fieldset>
<legend>Error</legend>
<div>⚠️ Por favor, introduce al menos 2 caracteres para buscar</div>
</fieldset>
`;
return;
}
// Show loading
resultsEl.innerHTML = `
<fieldset>
<legend>Buscando...</legend>
<div>⏳ Procesando búsqueda...</div>
</fieldset>
`;
// Add small delay to show loading state
setTimeout(() => {
let results = globalSearch.performSearch(searchTerm);
// Filter by module if selected
if (selectedModule) {
results = results.filter(result => result._module === selectedModule);
}
globalSearch.renderResults(results, resultsEl);
saveToRecent(searchTerm);
// Add stats
if (results.length > 0) {
const statsDiv = document.createElement('fieldset');
const legend = document.createElement('legend');
legend.textContent = 'Estadísticas';
statsDiv.appendChild(legend);
let filterText = selectedModule ? ` en ${moduleFilterEl.options[moduleFilterEl.selectedIndex].text}` : '';
const content = document.createElement('div');
content.innerHTML = `📊 Se encontraron <strong>${results.length}</strong> resultados para "<strong>${searchTerm}</strong>"${filterText}`;
statsDiv.appendChild(content);
resultsEl.insertBefore(statsDiv, resultsEl.firstChild);
}
}, 500);
}
// Event listeners
searchButtonEl.onclick = performSearch;
// Filter change listener
moduleFilterEl.onchange = () => {
if (searchInputEl.value.trim().length >= 2) {
performSearch();
}
};
// Auto-search as user types (with debounce)
let searchTimeout;
searchInputEl.oninput = () => {
clearTimeout(searchTimeout);
searchTimeout = setTimeout(() => {
if (searchInputEl.value.trim().length >= 2) {
performSearch();
}
}, 1500);
};
// Focus on search input
searchInputEl.focus();
// Add keyboard shortcuts
document.addEventListener('keydown', function(e) {
// Ctrl+F or Cmd+F to focus search
if ((e.ctrlKey || e.metaKey) && e.key === 'f') {
e.preventDefault();
searchInputEl.focus();
searchInputEl.select();
}
// Escape to clear search
if (e.key === 'Escape') {
searchInputEl.value = '';
searchInputEl.focus();
resultsEl.innerHTML = `
<fieldset>
<legend>Resultados</legend>
<div>🔍 Introduce un término de búsqueda para comenzar</div>
<p>Puedes buscar por nombres, referencias, fechas, ubicaciones...</p>
<details>
<summary>💡 Consejos de búsqueda</summary>
<ul>
<li><strong>Busca por nombres:</strong> "María", "García"</li>
<li><strong>Busca por fechas:</strong> "2024-10-01" o "01/10/2024"</li>
<li><strong>Busca por ubicación:</strong> "aula", "laboratorio"</li>
<li><strong>Usa filtros:</strong> selecciona un módulo específico</li>
<li><strong>Atajos de teclado:</strong> Ctrl+F para buscar, Esc para limpiar</li>
</ul>
</details>
</fieldset>
`;
}
});
// Check for quick search term from header
const quickSearchTerm = sessionStorage.getItem('telesec_quick_search');
if (quickSearchTerm) {
searchInputEl.value = quickSearchTerm;
sessionStorage.removeItem('telesec_quick_search');
// Perform search automatically
setTimeout(performSearch, 100);
}
// Load recent searches
loadRecentSearches();
}
};