183 lines
6.5 KiB
HTML
183 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Mapa Cobertura Red Móvil 4G/5G</title>
|
|
|
|
<link href="https://unpkg.com/maplibre-gl@3.6.0/dist/maplibre-gl.css" rel="stylesheet" />
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
|
|
<!-- {# cdn manejo csv #} -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.4.1/papaparse.min.js"></script>
|
|
|
|
<!-- {# estilos css #} -->
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/index/tooltip.css') }}">
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/index/notifications.css') }}">
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/index/loading.css') }}">
|
|
<link rel="stylesheet" href="{{url_for('static', filename='css/index/index.css')}}">
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="map"></div>
|
|
|
|
|
|
<!-- FORMULARIO MEJORADO CON COLLAPSE -->
|
|
<div id="pin-form">
|
|
<!-- COLLAPSE PRINCIPAL DEL FORMULARIO -->
|
|
<input type="checkbox" id="collapse-toggle" />
|
|
|
|
<!-- CABECERA COLAPSABLE -->
|
|
<label for="collapse-toggle" class="form-header collapsible-header">
|
|
<div class="header-left">
|
|
<i class="fas fa-map-pin"></i>
|
|
<strong>Marcadores</strong>
|
|
</div>
|
|
<div class="header-right">
|
|
<i class="fas fa-chevron-down collapse-icon" id="collapse-icon" style="color: white !important;"></i>
|
|
</div>
|
|
</label>
|
|
|
|
<!-- CONTENIDO COLAPSABLE -->
|
|
<div class="collapsible-content">
|
|
|
|
<!-- COLLAPSE 1: Formulario de carga unitaria -->
|
|
<div class="collapse-section">
|
|
<input type="checkbox" id="collapse-toggle-1" />
|
|
<label for="collapse-toggle-1" class="collapse-header">
|
|
<span><i class="fa-solid fa-location-crosshairs"></i> Carga Individual</span>
|
|
<i class="fas fa-chevron-down collapse-icon"></i>
|
|
</label>
|
|
<div class="collapse-content">
|
|
|
|
<div class="form-group">
|
|
<label for="pin-label">Etiqueta</label>
|
|
<input type="text" id="pin-label" class="form-input" placeholder="Ej. Sitio A, Torre B, etc." />
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="pin-lat">Latitud</label>
|
|
<input type="number" id="pin-lat" class="form-input" step="0.0001" placeholder="19.3818" />
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="pin-lng">Longitud</label>
|
|
<input type="number" id="pin-lng" class="form-input" step="0.0001" placeholder="-99.1766" />
|
|
</div>
|
|
|
|
<button id="add-pin" type="button" class="button-primary">
|
|
<i class="fas fa-plus-circle"></i> Colocar Marcador
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- COLLAPSE 2: Carga masiva -->
|
|
<div class="collapse-section">
|
|
<input type="checkbox" id="collapse-toggle-2" />
|
|
<label for="collapse-toggle-2" class="collapse-header">
|
|
<span><i class="fa-solid fa-file-csv"></i> Carga Masiva Marcadores</span>
|
|
<i class="fas fa-chevron-down collapse-icon"></i>
|
|
</label>
|
|
<div class="collapse-content">
|
|
<div class="csv-section">
|
|
|
|
<div class="tooltip">
|
|
<i class="fas fa-info-circle" style="color: #1976d2; font-size: 0.9rem;"></i>
|
|
<span class="tooltip-text">El archivo CSV debe contener columnas: etiqueta, latitud (eje. 19.3818), longitud (eje. -99.1766 ). Use la
|
|
plantilla como referencia.</span>
|
|
</div>
|
|
<a href="{{url_for('download_file', filename='template_coordenadas_pines.csv')}}" class="button-secondary">
|
|
<i class="fas fa-download"></i> Descargar Plantilla
|
|
</a>
|
|
|
|
<input type="file" id="csv-file" class="csv-file-input" accept=".csv" />
|
|
<label for="csv-file" class="file-upload-label">
|
|
<i class="fas fa-upload"></i> Subir Plantilla
|
|
</label>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- COLLAPSE 3: Descarga de capas -->
|
|
<div class="collapse-section">
|
|
<input type="checkbox" id="collapse-toggle-3" />
|
|
<label for="collapse-toggle-3" class="collapse-header">
|
|
<span><i class="fa-regular fa-map"></i> Descarga de Capas</span>
|
|
<i class="fas fa-chevron-down collapse-icon"></i>
|
|
</label>
|
|
<div class="collapse-content">
|
|
<div style="padding: 16px;">
|
|
<a href="{{url_for('download_file', filename='hex_mapa2025-10-01_2025-12-14.gpkg')}}" class="button-secondary">
|
|
Descargar Capa de Cobertura (gpkg)
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<!-- SECCIÓN NO COLAPSABLE: Estado seleccionado -->
|
|
<div class="active-state-section">
|
|
<div class="form-group" style="padding: 0; margin: 0;">
|
|
<label style="color: #9b2226; font-weight: 600;">Estado seleccionado:</label>
|
|
<span id="nombre-estado-activo" style="font-weight: bold; color: #9b2226;">
|
|
Ninguno
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- INDICADOR DE CARGA -->
|
|
<div id="loading-indicator" class="loading-indicator">
|
|
<div class="loading-spinner"></div>
|
|
<div class="loading-text">Cargando datos...</div>
|
|
</div>
|
|
|
|
|
|
<!-- NOTIFICACIÓN (se añadirá dinámicamente) -->
|
|
<div id="notification-area"></div>
|
|
|
|
<!-- {# CDN map libre #} -->
|
|
<script src="https://unpkg.com/maplibre-gl@3.6.0/dist/maplibre-gl.js"></script>
|
|
|
|
<!-- {# 1.- database hexagonos cobertura #} -->
|
|
<script src="{{url_for('static', filename='js/index/01_cobertura.js')}}"></script>
|
|
|
|
<!-- {# 2.- poligonos estados #} -->
|
|
<script src="{{url_for('static', filename='js/index/02_edos-poligonos.js')}}" type="module"></script>
|
|
|
|
<!-- carga de pines unitarios -->
|
|
<script src="{{url_for('static', filename='js/index/03_carga_pin_unitarios.js')}}" type="module"></script>
|
|
|
|
<!-- carga de pines masivos -->
|
|
<script src="{{url_for('static', filename='js/index/04_carga_pines_masivo.js')}}" type="module"></script>
|
|
|
|
<!-- {# Inicialización del mapa #} -->
|
|
<!-- <script src="{{ url_for('static', filename='js/index/map-init.js') }}"></script> -->
|
|
|
|
<!-- {# collapse #} -->
|
|
<!-- <script src="{{ url_for('static', filename='js/index/05_collapse.js') }}" type="module"></script> -->
|
|
|
|
|
|
|
|
</body>
|
|
|
|
</html> |