- Parte 3 : Viaggi

- Chat

src/modules/viaggi/components/ride/RideMap.vue

@@ -0,0 +1,80 @@
+<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" />