81 lines
2.3 KiB
Vue
81 lines
2.3 KiB
Vue
<template>
|
|
<div class="ride-map" :style="{ height: mapHeight }">
|
|
<!-- Loading -->
|
|
<div v-if="loading" class="ride-map__loading">
|
|
<q-spinner color="primary" size="48px" />
|
|
<span>Caricamento mappa...</span>
|
|
</div>
|
|
|
|
<!-- Mappa Leaflet -->
|
|
<div ref="mapContainer" class="ride-map__container"></div>
|
|
|
|
<!-- Controlli -->
|
|
<div class="ride-map__controls">
|
|
<q-btn
|
|
round
|
|
color="white"
|
|
text-color="dark"
|
|
icon="my_location"
|
|
size="sm"
|
|
@click="centerOnUser"
|
|
>
|
|
<q-tooltip>La mia posizione</q-tooltip>
|
|
</q-btn>
|
|
|
|
<q-btn
|
|
round
|
|
color="white"
|
|
text-color="dark"
|
|
icon="zoom_out_map"
|
|
size="sm"
|
|
@click="fitBounds"
|
|
>
|
|
<q-tooltip>Mostra tutto il percorso</q-tooltip>
|
|
</q-btn>
|
|
|
|
<q-btn
|
|
v-if="showFullscreenButton"
|
|
round
|
|
color="white"
|
|
text-color="dark"
|
|
:icon="isFullscreen ? 'fullscreen_exit' : 'fullscreen'"
|
|
size="sm"
|
|
@click="toggleFullscreen"
|
|
>
|
|
<q-tooltip>{{ isFullscreen ? 'Esci' : 'Schermo intero' }}</q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
|
|
<!-- Info percorso -->
|
|
<div v-if="routeInfo && showRouteInfo" class="ride-map__route-info">
|
|
<div class="ride-map__route-info-item">
|
|
<q-icon name="route" size="18px" />
|
|
<span>{{ routeInfo.distance }} km</span>
|
|
</div>
|
|
<div class="ride-map__route-info-item">
|
|
<q-icon name="schedule" size="18px" />
|
|
<span>{{ formattedDuration }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Legenda -->
|
|
<div v-if="showLegend" class="ride-map__legend">
|
|
<div class="ride-map__legend-item">
|
|
<div class="ride-map__legend-marker ride-map__legend-marker--start"></div>
|
|
<span>Partenza</span>
|
|
</div>
|
|
<div class="ride-map__legend-item">
|
|
<div class="ride-map__legend-marker ride-map__legend-marker--end"></div>
|
|
<span>Arrivo</span>
|
|
</div>
|
|
<div v-if="waypoints.length > 0" class="ride-map__legend-item">
|
|
<div class="ride-map__legend-marker ride-map__legend-marker--waypoint"></div>
|
|
<span>Tappe</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" src="./RideMap.ts" />
|
|
<style lang="scss" src="./RideMap.scss" />
|