Escribe el nombre de una estaci\xF3n, su n\xFAmero de permiso CRE o su ID para filtrar los resultados en tiempo real.
Atajo de teclado: presiona / desde cualquier pantalla para enfocar la b\xFAsqueda.
TipPuedes buscar por permiso CRE completo, por ejemplo: PL/6005/EXP/ES/2015
Fichas de estaciones
Vista en cuadr\xEDcula con todas las estaciones. Cada ficha muestra el permiso CRE, nombre, y precios de Regular, Premium y Di\xE9sel.
Al hacer clic en una ficha se expanden los detalles: coordenadas GPS (bot\xF3n para ir al mapa), e historial de precios de los \xFAltimos 30 d\xEDas.
NuevoEl bot\xF3n GPS en cada ficha lleva directo al mapa centrado en esa estaci\xF3n.
Mapa interactivo
Vista de mapa con 14,744 estaciones como marcadores. Los marcadores se agrupan en clusters al alejar el zoom.
Usa el slider de zoom o la rueda del rat\xF3n. El pin azul indica tu ubicaci\xF3n actual cuando el filtro de cercan\xEDa est\xE1 activo.
TipEn el mapa, al hacer clic en un marcador aparece un popup con precios y enlace a Google Maps.
Cerca de m\xED
Filtra las estaciones m\xE1s cercanas a tu ubicaci\xF3n. Selecciona el radio en km (5, 10 o 15 km) y activa el bot\xF3n.
Las fichas y el mapa se actualizan mostrando solo las estaciones dentro del radio. Las fichas se ordenan de m\xE1s cercana a m\xE1s lejana.
GPSTu ubicaci\xF3n se actualiza autom\xE1ticamente si te mueves \u2014 el filtro es din\xE1mico.
Mi Estaci\xF3n
Selecciona tu estaci\xF3n principal (bot\xF3n \u2605 en cualquier ficha) y hasta 10 estaciones competidoras (bot\xF3n +).
El panel muestra una tabla comparativa de precios. El precio m\xE1s bajo lleva badge verde \u2713 y el m\xE1s alto badge rojo \u2191.
CuentaTu selecci\xF3n se guarda por cuenta \u2014 cada usuario administrador tiene su propia configuraci\xF3n.
Mi Panel
Acceso a la administraci\xF3n de tu cuenta seg\xFAn tu rol:
\u2022 Superadmin \u2192 acceso al panel completo de precios y usuarios \u2022 Administrador \u2192 gestiona hasta 3 sub-usuarios de tu cuenta \u2022 Usuario \u2192 cambia tu contrase\xF1a
Sesi\xF3nEl bot\xF3n rojo Salir cierra tu sesi\xF3n. La sesi\xF3n expira autom\xE1ticamente tras 5 minutos de inactividad.
Configura tu estaci\xF3n principal
A\xFAn no has seleccionado tu estaci\xF3n principal. Ve a Fichas, busca tu estaci\xF3n y toca \u2605 para marcarla.
});
document.getElementById('btnRetry').addEventListener('click', init);
// \u2500\u2500 Geolocalizaci\xF3n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
var GEO_KM = 15; // distancia fija
var geoBtn = document.getElementById('geoBtn');
var mapGeoBtn = document.getElementById('mapGeoBtn');
var geoKmSel = document.getElementById('geoKmSel');
var mapGeoKm = document.getElementById('mapGeoKm');
function getGeoKm() {
var sel = document.getElementById('geoKmSel') || document.getElementById('mapGeoKm');
return sel ? parseInt(sel.value, 10) : GEO_KM;
}
function syncGeoKm(val) {
var s1 = document.getElementById('geoKmSel');
var s2 = document.getElementById('mapGeoKm');
if (s1) s1.value = val;
if (s2) s2.value = val;
if (s1) s1.classList.toggle('active', !!userCoords);
if (s2) s2.classList.toggle('active', !!userCoords);
}
document.addEventListener('change', function(e) {
if (e.target.id === 'geoKmSel' || e.target.id === 'mapGeoKm') {
syncGeoKm(e.target.value);
if (userCoords) {
applyFilter();
if (activeView === 'map') renderMapMarkers();
}
}
});
// Funci\xF3n compartida: activar/desactivar geolocalizaci\xF3n
function toggleGeo(onActivate, onDeactivate, onError) {
if (userCoords) {
userCoords = null;
if (onDeactivate) onDeactivate();
return;
}
if (!navigator.geolocation) { toast('Tu navegador no soporta geolocalizaci\xF3n'); return; }
geoBtn.classList.add('loading');
mapGeoBtn.textContent = 'Localizando...';
navigator.geolocation.watchPosition(
function(pos) {
var isFirst = !userCoords;
userCoords = { lat: pos.coords.latitude, lon: pos.coords.longitude };
if (isFirst) {
geoBtn.classList.remove('loading');
if (onActivate) onActivate();
} else {
// Live update: refresh filter + move user pin
applyFilter();
if (activeView === 'map' && userMarker && mapInst) {
userMarker.setLatLng([userCoords.lat, userCoords.lon]);
document.getElementById('mapGeoCount').textContent = (filtered.length || 0).toLocaleString() + ' estaciones';
}
}
},
function(err) {
geoBtn.classList.remove('loading');
mapGeoBtn.textContent = 'Cerca de m\xED';
if (onError) onError(err);
toast(err.code === 1 ? 'Permiso de ubicaci\xF3n denegado' : 'No se pudo obtener la ubicaci\xF3n');
},
{ enableHighAccuracy: true, timeout: 15000, maximumAge: 5000 }
);
}
function syncGeoBtns() {
var active = !!userCoords;
// Bot\xF3n en controles de fichas
geoBtn.classList.toggle('active', active);
geoBtn.innerHTML = active
? ' ' + getGeoKm() + ' km \u2715'
: ' Cerca de m\xED (15 km)';
// Bot\xF3n en panel del mapa
mapGeoBtn.classList.toggle('active', active);
mapGeoBtn.textContent = active ? getGeoKm() + ' km \u2715' : 'Cerca de m\xED';
}
geoBtn.addEventListener('click', function() {
toggleGeo(
function() { syncGeoBtns(); applyFilter(); if (activeView === 'map') renderMapMarkers(); },
function() { syncGeoBtns(); applyFilter(); if (activeView === 'map') { mapInst && mapInst.setView([23.6, -102.5], 5); renderMapMarkers(); } },
function() { syncGeoBtns(); }
);
});
mapGeoBtn.addEventListener('click', function() {
toggleGeo(
function() { syncGeoBtns(); applyFilter(); renderMapMarkers(); },
function() { syncGeoBtns(); applyFilter(); mapInst && mapInst.setView([23.6, -102.5], 5); renderMapMarkers(); },
function() { syncGeoBtns(); }
);
});
// Botones de zoom del mapa
var mapZoomSlider = document.getElementById('mapZoomSlider');
var mapZoomVal = document.getElementById('mapZoomVal');
mapZoomSlider.addEventListener('input', function() {
var z = parseInt(this.value, 10);
mapZoomVal.textContent = 'Zoom ' + z;
if (mapInst) mapInst.setZoom(z);
});
var mapZoomSynced = false;
function syncMapZoom() {
if (!mapInst || mapZoomSynced) return;
mapZoomSynced = true;
mapInst.on('zoomend', function() {
var z = mapInst.getZoom();
mapZoomSlider.value = z;
mapZoomVal.textContent = 'Zoom ' + z;
});
}
// Bot\xF3n refresh dentro del panel del mapa
document.getElementById('mapRefBtn').addEventListener('click', function() {
var btn = this;
btn.textContent = 'Actualizando...';
btn.style.opacity = '.6';
document.getElementById('btnRef').click();
setTimeout(function() {
btn.textContent = 'Actualizar mapa';
btn.style.opacity = '1';
}, 2000);
});
document.addEventListener('keydown', function(e) {
if (e.key === '/' && document.activeElement.tagName !== 'INPUT') {
e.preventDefault(); document.getElementById('searchIn').focus();
}
});
// \u2500\u2500 Mi Estacion \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
var MI_KEY = 'gx_mi_v2'; // base key \u2014 actual key set in getMiKey()
var miData = { main: null, competitors: [] };
function getMiKey() {
// Per-account key so each admin account has isolated Mi Estacion config
var acct = (mySession && mySession.accountNo) ? mySession.accountNo : '';
return acct ? MI_KEY + '_' + acct : MI_KEY;
}
function loadMi() {
var key = getMiKey();
try { miData = JSON.parse(localStorage.getItem(key) || '{"main":null,"competitors":[]}'); }
catch(e) { miData = { main: null, competitors: [] }; }
if (!miData.competitors) miData.competitors = [];
if (mySession && mySession.accountNo) {
fetch('https://gasolinasmx.com/api/my/mi-config').then(function(r){return r.json();}).then(function(d){
if (d.ok && d.data && d.data.main) {
window._pendingMiKV = d.data;
localStorage.setItem(GUIDE_KEY, 'skip');
if (!miData.main) {
miData.main = d.data.main;
miData.competitors = d.data.competitors || [];
localStorage.setItem(getMiKey(), JSON.stringify(miData));
if (typeof renderMi === 'function') renderMi();
if (typeof applyFilter === 'function') applyFilter();
}
}
}).catch(function(){});
}
}
function saveMi() {
// Sub-users (role='user') cannot modify Mi Estacion
if (mySession && mySession.role === 'user') return;
localStorage.setItem(getMiKey(), JSON.stringify(miData));
// Sync to KV so cron can read Mi Estacion for alerts
syncMiEstacionToKV();
}
function setMain(id) {
if (mySession && mySession.role === 'user') { toast('Mi Estaci\xF3n es de solo lectura'); return; }
miData.main = (miData.main === id) ? null : id;
// Remove from competitors if set as main
miData.competitors = miData.competitors.filter(function(c){ return c !== id; });
saveMi();
// Re-render cards (only update badges, not full re-render)
updateSelBadges();
}
function setComp(id) {
if (mySession && mySession.role === 'user') { toast('Mi Estaci\xF3n es de solo lectura'); return; }
var idx = miData.competitors.indexOf(id);
if (idx !== -1) {
miData.competitors.splice(idx, 1);
} else {
if (miData.competitors.length >= 10) {
toast('M\xE1ximo 10 estaciones competidoras');
return;
}
if (miData.main === id) {
toast('Esta estaci\xF3n ya es tu principal');
return;
}
miData.competitors.push(id);
}
saveMi();
updateSelBadges();
}
function updateSelBadges() {
// Update all visible cards without re-rendering
var cards = document.querySelectorAll('.card');
for (var i = 0; i < cards.length; i++) {
var cid = cards[i].id.replace('c-', '');
var btnM = cards[i].querySelector('.sel-main');
var btnC = cards[i].querySelector('.sel-comp');
if (btnM) btnM.className = 'sel-main' + (miData.main === cid ? ' on' : '');
if (btnC) btnC.className = 'sel-comp' + (miData.competitors.indexOf(cid) !== -1 ? ' on' : '');
}
// Refresh Mi Estacion view if visible
if (activeView === 'mi') renderMi();
}
function getMiById(id) {
for (var i = 0; i < all.length; i++) if (all[i].id === id) return all[i];
return null;
}
function fmtPrice(v) {
return v !== null ? '$' + v.toFixed(2) : '\u2014';
}
function priceDiff(a, b) {
if (a === null || b === null) return '';
var d = b - a; // positive = competitor more expensive
if (Math.abs(d) < 0.005) return '=';
var sign = d > 0 ? '+' : '';
var cls = d > 0 ? 'cmp-diff-pos' : 'cmp-diff-neg'; // pos = comp more expensive (good for main)
return '' + sign + '$' + Math.abs(d).toFixed(2) + '';
}
function renderMi() {
var el = document.getElementById('miContent');
var mainSt = miData.main ? getMiById(miData.main) : null;
var comps = miData.competitors.map(getMiById).filter(Boolean);
if (!mainSt && !comps.length) {
el.innerHTML = '
' +
'' +
'
Sin estaciones seleccionadas
' +
'
En las fichas usa ★ para marcar tu estaci\xF3n principal y + para agregar hasta 10 competidoras.
' +
'
';
return;
}
var html = '';
// \u2500\u2500 Main station card \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
if (mainSt) {
var mn = cleanName(mainSt.name) || mainSt.name || 'Estaci\xF3n ' + mainSt.id;
html += '
' +
'
' +
'Mi Estaci\xF3n Principal
' +
'
' + (mainSt.cre_id || '\u2014') + '
' +
'
' + mn + '
' +
'
' +
(mainSt.regular !== null ? '
Regular$' + mainSt.regular.toFixed(2) + '
' : '') +
(mainSt.premium !== null ? '
Premium$' + mainSt.premium.toFixed(2) + '
' : '') +
(mainSt.diesel !== null ? '
Diésel$' + mainSt.diesel.toFixed(2) + '
' : '') +
'
' +
'' +
'
';
}
// \u2500\u2500 Comparison table \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
if (comps.length) {
html += '
' +
'
' +
'Comparativo de precios
' +
'
' +
'
' +
'
Estaci\xF3n
' +
'
Regular
' +
(mainSt ? '
Dif.
' : '') +
'
Premium
' +
(mainSt ? '
Dif.
' : '') +
'
Di\xE9sel
' +
(mainSt ? '
Dif.
' : '') +
'
';
// Compute per-fuel winners (min=green, max=red) across all stations
var allSts = (mainSt ? [mainSt] : []).concat(comps);
function fuelRange(key) {
var vals = allSts.map(function(s){ return s[key]; }).filter(function(v){ return v !== null; });
if (vals.length < 2) return { min: null, max: null };
return { min: Math.min.apply(null,vals), max: Math.max.apply(null,vals) };
}
var wR = fuelRange('regular'), wP = fuelRange('premium'), wD = fuelRange('diesel');
function priceCell(val, w) {
if (val === null) return fmtPrice(val);
var badge = '';
if (w.min !== null && Math.abs(val - w.min) < 0.005)
badge = '\u2713';
else if (w.max !== null && Math.abs(val - w.max) < 0.005)
badge = '\u2191';
return '$' + val.toFixed(2) + badge + '';
}
// Main row
if (mainSt) {
html += '
