index.html•16.6 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Organization Selector</title>
<style>
/* Basic Reset & Defaults */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
line-height: 1.6; background-color: #f4f7f6; color: #333; padding: 1rem;
}
/* App Layout */
.app-container {
max-width: 1200px; margin: 2rem auto; padding: 1rem; background-color: #fff;
border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
h1 { text-align: center; margin-bottom: 1.5rem; color: #2c3e50; }
/* Search Area */
.controls-container { /* Keep wrapper for potential future controls */
margin-bottom: 2rem;
}
.search-container {
position: relative; /* For spinner */
}
.search-container label { /* Optional: Add label */
display: block; margin-bottom: 0.4rem; font-weight: bold;
font-size: 0.9rem; color: #555;
}
#search-input {
width: 100%; padding: 0.75rem 1rem; font-size: 1rem; border: 1px solid #ccc;
border-radius: 6px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.06);
}
#search-input:focus { outline: none; border-color: #3498db; box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2); }
#search-spinner {
position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px;
border: 3px solid rgba(0, 0, 0, 0.1); border-left-color: #3498db; border-radius: 50%;
animation: spin 1s linear infinite; display: none;
}
/* Adjust spinner position if label is added */
.search-container label + #search-input + #search-spinner {
top: calc(50% + 10px); /* Approx vertical center relative to input */
}
@keyframes spin { to { transform: translateY(-50%) rotate(360deg); } }
/* Results Grid (styling same as before) */
#results-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; min-height: 100px; }
.tile { background-color: #ffffff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 1.25rem; cursor: pointer; transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; box-shadow: 0 1px 3px rgba(0,0,0,0.05); display: flex; flex-direction: column; justify-content: space-between; }
.tile:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.tile h3 { font-size: 1.1rem; margin-bottom: 0.5rem; color: #3498db; word-break: break-word; }
.tile p { font-size: 0.9rem; color: #555; margin-bottom: 0.3rem; word-break: break-word; }
.tile .provider-info { font-style: italic; color: #777; font-size: 0.85rem; }
.tile .location-info { font-weight: bold; color: #444; font-size: 0.85rem; }
/* Modal Styles (same as before) */
.modal-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); display: flex; justify-content: center; align-items: center; z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s 0.3s linear; }
.modal-backdrop.visible { opacity: 1; visibility: visible; transition: opacity 0.3s ease; }
.modal { background-color: #fff; padding: 2rem; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); max-width: 500px; width: 90%; transform: scale(0.9); transition: transform 0.3s ease; }
.modal-backdrop.visible .modal { transform: scale(1.0); }
.modal h2 { margin-top: 0; margin-bottom: 1rem; color: #2c3e50; }
#modal-details p { margin-bottom: 0.5rem; color: #333; } #modal-details strong { color: #555; }
#modal-details ul { list-style: none; padding-left: 0; margin-top: 0.5rem;} #modal-details li { margin-bottom: 0.25rem; font-size: 0.9em; color: #444;}
.modal-actions { margin-top: 1.5rem; display: flex; justify-content: flex-end; gap: 0.75rem; }
.modal-button { padding: 0.6rem 1.2rem; font-size: 0.95rem; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.2s ease; }
.modal-button.connect { background-color: #2ecc71; color: white; } .modal-button.connect:hover { background-color: #27ae60; }
.modal-button.cancel { background-color: #e74c3c; color: white; } .modal-button.cancel:hover { background-color: #c0392b; }
/* Utility */
.status-message { grid-column: 1 / -1; text-align: center; color: #777; font-style: italic; padding: 2rem; }
#initial-loading-message { text-align: center; padding: 2rem; color: #555; font-size: 1.1em; }
</style>
</head>
<body>
<div class="app-container">
<h1>Select Your Organization</h1>
<div id="initial-loading-message">Loading data...</div>
<div class="controls-container" id="controls-container">
<div class="search-container">
<!-- <label for="search-input">Search Organizations</label> -->
<input type="search" id="search-input" placeholder="Search by name, provider, city, state, zip..." disabled>
<div id="search-spinner"></div>
</div>
</div>
<div id="results-container" style="display: none;"> <!-- Initially hidden -->
<!-- Results populated by JS -->
</div>
</div>
<!-- Modal Structure (same as before) -->
<div id="modal-backdrop" class="modal-backdrop">
<div id="modal" class="modal">
<h2 id="modal-title">Confirm Selection</h2>
<div id="modal-details"></div>
<div class="modal-actions">
<button id="modal-cancel" class="modal-button cancel">Cancel</button>
<button id="modal-connect" class="modal-button connect">Connect</button>
</div>
</div>
</div>
<script>
// DOM Element References
const searchInput = document.getElementById('search-input');
const searchSpinner = document.getElementById('search-spinner');
const resultsContainer = document.getElementById('results-container');
const modalBackdrop = document.getElementById('modal-backdrop');
const modal = document.getElementById('modal');
const modalTitle = document.getElementById('modal-title');
const modalDetails = document.getElementById('modal-details');
const modalCancel = document.getElementById('modal-cancel');
const modalConnect = document.getElementById('modal-connect');
const initialLoadingMessage = document.getElementById('initial-loading-message');
const controlsContainer = document.getElementById('controls-container'); // Keep reference if needed later
// Application State
let allItems = []; // To store all items from epic.json
let selectedItem = null; // Item selected for the modal
let currentRenderAbortController = null;
let debounceTimer = null;
// Configuration (same as before)
const RENDER_CHUNK_SIZE = 50;
const RENDER_DELAY = 0;
const DEBOUNCE_DELAY = 300;
// --- Rendering Functions (createTileElement, renderItemsInChunks - same as before) ---
function createTileElement(item) { /* ... same as previous version ... */
const tile = document.createElement('div');
tile.className = 'tile';
let detailsHTML = `<h3>${item.displayName}</h3>`;
detailsHTML += `<p class="provider-info">Data Provider: ${item.brandName}</p>`;
if (item.itemType === 'facility') {
const locationParts = [item.city, item.state, item.postalCode].filter(Boolean);
if (locationParts.length > 0) {
detailsHTML += `<p class="location-info">Location: ${locationParts.join(', ')}</p>`;
}
}
tile.innerHTML = detailsHTML;
tile.addEventListener('click', () => showModal(item));
return tile;
}
function renderItemsInChunks(itemsToRender) { /* ... same core logic as previous version ... */
if (currentRenderAbortController) { currentRenderAbortController.abort(); }
currentRenderAbortController = new AbortController();
const signal = currentRenderAbortController.signal;
resultsContainer.innerHTML = '';
if (itemsToRender.length === 0) {
resultsContainer.innerHTML = '<p class="status-message">No matching organizations found.</p>';
searchSpinner.style.display = 'none'; return;
}
let currentIndex = 0;
const fragment = document.createDocumentFragment();
function renderNextChunk() {
if (signal.aborted) { searchSpinner.style.display = 'none'; return; }
searchSpinner.style.display = 'block';
const endTime = performance.now() + 16; let chunkCount = 0;
while (performance.now() < endTime && currentIndex < itemsToRender.length) {
fragment.appendChild(createTileElement(itemsToRender[currentIndex]));
currentIndex++; chunkCount++; if(chunkCount >= RENDER_CHUNK_SIZE) break;
}
resultsContainer.appendChild(fragment);
if (currentIndex < itemsToRender.length) { setTimeout(renderNextChunk, RENDER_DELAY); }
else { searchSpinner.style.display = 'none'; currentRenderAbortController = null; }
}
renderNextChunk();
}
// --- Text Search (NEW 'AND' LOGIC with TOKENIZATION) ---
// Helper to safely get lowercase string or empty string
const safeLower = (str) => (str ? String(str).toLowerCase() : '');
function handleSearch() {
const searchTerm = searchInput.value.toLowerCase().trim();
// Split search term into tokens (words). Filter out empty strings resulting from multiple spaces/commas.
const searchTokens = searchTerm.split(/[\s,]+/).filter(token => token.length > 0);
searchSpinner.style.display = 'block';
// Filter all items based on the tokens
const filteredItems = searchTokens.length === 0
? allItems // Show all if no search tokens
: allItems.filter(item => {
// Check if *every* token matches *at least one* relevant field in the item
return searchTokens.every(token => {
// List of fields to check for each token
const fieldsToSearch = [
safeLower(item.displayName),
safeLower(item.brandName), // Data Provider name
safeLower(item.city),
safeLower(item.state),
safeLower(item.postalCode)
];
// Does *any* field include the current token?
return fieldsToSearch.some(fieldValue => fieldValue.includes(token));
});
});
// Render the filtered results in chunks
renderItemsInChunks(filteredItems);
}
const debouncedSearchHandler = debounce(handleSearch, DEBOUNCE_DELAY);
// --- Modal Functions (showModal, hideModal, handleConnect - same as before) ---
function showModal(item) { /* ... same as previous version ... */
if (currentRenderAbortController) { return; } selectedItem = item;
modalTitle.textContent = `Connect to ${item.displayName}?`;
let detailsHTML = `<p><strong>Display Name:</strong> ${item.displayName}</p>`;
detailsHTML += `<p><strong>Data Provider:</strong> ${item.brandName}</p>`;
if (item.itemType === 'facility') {
const locationParts = [item.city, item.state, item.postalCode].filter(Boolean);
if (locationParts.length > 0) { detailsHTML += `<p><strong>Location:</strong> ${locationParts.join(', ')}</p>`; }
}
if (item.endpoints && item.endpoints.length > 0) {
detailsHTML += `<p><strong>Endpoints:</strong></p><ul>`;
item.endpoints.forEach(ep => { detailsHTML += `<li>${ep.url}${ep.name ? ` (${ep.name})` : ''}</li>`; });
detailsHTML += `</ul>`;
} else { detailsHTML += `<p><strong>Endpoints:</strong> None found</p>`; }
modalDetails.innerHTML = detailsHTML; modalBackdrop.classList.add('visible');
}
function hideModal() { /* ... same as previous version ... */
modalBackdrop.classList.remove('visible'); selectedItem = null;
}
function handleConnect() { /* ... same as previous version ... */
if (selectedItem) {
console.log("--- Connect Button Clicked ---");
console.log("Display Name:", selectedItem.displayName); console.log("Data Provider:", selectedItem.brandName);
console.log("Item Type:", selectedItem.itemType);
if(selectedItem.city || selectedItem.state || selectedItem.postalCode) { console.log("Location:", [selectedItem.city, selectedItem.state, selectedItem.postalCode].filter(Boolean).join(', ')); }
console.log("Endpoints:", selectedItem.endpoints); console.log("Full Selected Item Object:", selectedItem);
console.log("--- End Selection Details ---");
} else { console.error("Connect clicked but no item was selected."); }
hideModal();
}
// --- Debounce Function (same as before) ---
function debounce(func, delay) { /* ... same as previous version ... */
return function(...args) {
searchSpinner.style.display = 'block'; clearTimeout(debounceTimer);
debounceTimer = setTimeout(() => { func.apply(this, args); }, delay);
};
}
// --- Fetch Data and Initialize (Modified) ---
async function fetchDataAndInitialize() {
initialLoadingMessage.textContent = 'Loading organizations data...';
resultsContainer.style.display = 'none'; // Ensure hidden
searchInput.disabled = true; // Keep disabled until data loaded
try {
const response = await fetch('./epic.json');
if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); }
const data = await response.json();
if (data && Array.isArray(data.items)) {
allItems = data.items;
initialLoadingMessage.style.display = 'none'; // Hide loading message
resultsContainer.style.display = 'grid'; // Show results container
searchInput.disabled = false; // Enable search input
renderItemsInChunks(allItems); // Render the initial full list
} else { throw new Error("Invalid data structure in epic.json"); }
} catch (error) {
console.error("Failed to load or parse organizations:", error);
initialLoadingMessage.textContent = `Error loading organizations. Please try again later. (${error.message})`;
initialLoadingMessage.style.color = 'red';
resultsContainer.style.display = 'none'; // Keep hidden on error
searchInput.disabled = true; // Keep disabled on error
} finally {
searchSpinner.style.display = 'none';
}
}
// --- Event Listeners ---
document.addEventListener('DOMContentLoaded', fetchDataAndInitialize);
// REMOVED: stateSelect listener
searchInput.addEventListener('input', debouncedSearchHandler);
modalCancel.addEventListener('click', hideModal);
modalConnect.addEventListener('click', handleConnect);
modalBackdrop.addEventListener('click', (event) => { if (event.target === modalBackdrop) { hideModal(); } });
</script>
</body>
</html>