44 lines
1.7 KiB
HTML
44 lines
1.7 KiB
HTML
<div id="map"></div>
|
|
|
|
<div class="map-loading" *ngIf="isLoading">
|
|
<div class="spinner"></div>
|
|
<p>Cargando ruta...</p>
|
|
</div>
|
|
|
|
<div class="detail-sidebar" *ngIf="routeData">
|
|
<div class="sidebar-brand">
|
|
<img src="GLM_completo.png" alt="GomezLee Marketing" class="sidebar-logo" />
|
|
</div>
|
|
<div class="sidebar-header">
|
|
<button type="button" class="back-btn" (click)="goBack()">
|
|
<i class="pi pi-arrow-left"></i> Volver
|
|
</button>
|
|
<div class="detail-title">
|
|
<h2>{{ routeData.json.nombre_usuario }} → {{ routeData.json.nombre_pdv }}</h2>
|
|
<span class="badge">{{ routeData.json.dia }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<section class="info-card">
|
|
<h3>Información de la ruta</h3>
|
|
<dl class="info-list">
|
|
<div><dt>Usuario</dt><dd>{{ routeData.json.nombre_usuario }}</dd></div>
|
|
<div><dt>PDV</dt><dd>{{ routeData.json.nombre_pdv }}</dd></div>
|
|
<div><dt>Día</dt><dd>{{ routeData.json.dia }}</dd></div>
|
|
<div><dt>Orden</dt><dd>{{ visitOrder }} de {{ totalStops }}</dd></div>
|
|
<div><dt>Origen del tramo</dt><dd>{{ segmentOriginName }}</dd></div>
|
|
<div><dt>Distancia</dt><dd>{{ routeData.json.distancia }} km</dd></div>
|
|
<div><dt>Duración</dt><dd>{{ (routeData.json.horas_desplazamiento * 60).toFixed(0) }} min</dd></div>
|
|
<div><dt>Horas trabajo</dt><dd>{{ routeData.json.horas_trabajo }}</dd></div>
|
|
</dl>
|
|
</section>
|
|
|
|
<section class="info-card">
|
|
<h3>Coordenadas</h3>
|
|
<dl class="info-list">
|
|
<div><dt>Usuario (lat, lng)</dt><dd>{{ routeData.json.latitud_usuario }}, {{ routeData.json.longitud_usuario }}</dd></div>
|
|
<div><dt>PDV (lat, lng)</dt><dd>{{ routeData.json.latitud_pdv }}, {{ routeData.json.longitud_pdv }}</dd></div>
|
|
</dl>
|
|
</section>
|
|
</div>
|