Widget Listy Sklepów Medycznych

<div class="filters-container mb-3">
    <select id="scope-filter" class="form-select">
        <option value="">Wszystkie zakresy NFZ</option>
        <option value="AS">Aparaty słuchowe</option>
        <option value="PO">Produkty ortopedyczne</option>
        <option value="SP">Środki pomocnicze</option>
        <option value="SO">Szkła okularowe</option>
    </select>
    <input type="range" id="radius-slider" min="5" max="100" value="20" class="form-range">
    <span id="radius-display">20 km</span>
</div>
<div id="dynamic-shops-list" style="height: 500px;"></div>

<script>
const baseConfig = {
    latitude: 50.0647,
    longitude: 19.9449,
    theme: 'medical'
};

let currentConfig = { ...baseConfig };

// Funkcja odświeżania listy
function refreshShopsList() {
    EZWMShopsLoader.loadShopsList('dynamic-shops-list', currentConfig);
}

// Obsługa zmiany zakresu NFZ
document.getElementById('scope-filter').addEventListener('change', function(e) {
    currentConfig.zakresSwiadczenia = e.target.value || null;
    refreshShopsList();
});

// Obsługa zmiany promienia
document.getElementById('radius-slider').addEventListener('input', function(e) {
    const radius = parseInt(e.target.value);
    currentConfig.promieniWyszukiwania = radius;
    document.getElementById('radius-display').textContent = radius + ' km';
    
    // Debounce dla lepszej wydajności
    clearTimeout(window.radiusTimeout);
    window.radiusTimeout = setTimeout(refreshShopsList, 500);
});

// Inicjalizacja
refreshShopsList();
</script>

<div class="row">
    <div class="col-md-8">
        <div id="synchronized-map" style="height: 400px;"></div>
    </div>
    <div class="col-md-4">
        <div id="synchronized-list" style="height: 400px;"></div>
    </div>
</div>

<script>
const syncConfig = {
    latitude: 50.0647,
    longitude: 19.9449,
    theme: 'medical',
    promieniWyszukiwania: 25,
    limitSklepow: 15
};

// Załaduj oba widgety z tą samą konfiguracją
Promise.all([
    EZWMMapLoader.loadMap('synchronized-map', syncConfig),
    EZWMShopsLoader.loadShopsList('synchronized-list', syncConfig)
]).then(() => {
    console.log('Oba widgety zostały załadowane i zsynchronizowane');
});

// Funkcja do aktualizacji obu widgetów jednocześnie
function updateBothWidgets(newConfig) {
    const finalConfig = { ...syncConfig, ...newConfig };
    
    EZWMMapLoader.loadMap('synchronized-map', finalConfig);
    EZWMShopsLoader.loadShopsList('synchronized-list', finalConfig);
}

// Przykład użycia - zmiana lokalizacji dla obu widgetów
function changeLocation(lat, lng) {
    updateBothWidgets({
        latitude: lat,
        longitude: lng
    });
}
</script>

<div id="cached-shops-list" style="height: 400px;"></div>
<button id="refresh-btn" class="btn btn-primary mt-2">Odśwież dane</button>

<script>
class ShopsListManager {
    constructor(containerId) {
        this.containerId = containerId;
        this.cache = new Map();
        this.cacheTimeout = 5 * 60 * 1000; // 5 minut
    }
    
    generateCacheKey(config) {
        return JSON.stringify({
            lat: config.latitude.toFixed(4),
            lng: config.longitude.toFixed(4),
            radius: config.promieniWyszukiwania,
            scope: config.zakresSwiadczenia,
            limit: config.limitSklepow
        });
    }
    
    async loadShops(config) {
        const cacheKey = this.generateCacheKey(config);
        const cached = this.cache.get(cacheKey);
        
        // Sprawdź cache
        if (cached && (Date.now() - cached.timestamp) < this.cacheTimeout) {
            console.log('Używam danych z cache');
            return cached.success;
        }
        
        // Załaduj świeże dane
        console.log('Ładuję świeże dane...');
        const success = await EZWMShopsLoader.loadShopsList(this.containerId, config);
        
        // Zapisz w cache
        this.cache.set(cacheKey, {
            success: success,
            timestamp: Date.now()
        });
        
        return success;
    }
    
    clearCache() {
        this.cache.clear();
        console.log('Cache wyczyszczony');
    }
}

// Użycie
const shopsManager = new ShopsListManager('cached-shops-list');

const config = {
    latitude: 50.0647,
    longitude: 19.9449,
    theme: 'default',
    promieniWyszukiwania: 20,
    limitSklepow: 12
};

// Załaduj dane (z cache lub świeże)
shopsManager.loadShops(config);

// Przycisk odświeżania
document.getElementById('refresh-btn').addEventListener('click', function() {
    shopsManager.clearCache();
    shopsManager.loadShops(config);
});
</script>