feat: habilitar set completo de APIs de Google Maps y actualizar llaves funcionales para produccion
This commit is contained in:
@ -1,92 +1,136 @@
|
||||
<template>
|
||||
<div class="admin-routes">
|
||||
<div class="admin-routes" :class="{ 'with-map': selectedRoute }">
|
||||
<div class="header">
|
||||
<button class="back-link" @click="router.push('/admin')">← Volver al Panel</button>
|
||||
<h1>Gestionar Rutas</h1>
|
||||
<button class="add-button" @click="createRoute">
|
||||
<button class="back-link" @click="handleBack">← Volver</button>
|
||||
<h1>Gestión de Rutas</h1>
|
||||
<button v-if="!selectedRoute" class="add-button" @click="createRoute">
|
||||
<span class="material-icons">add</span> Nueva Ruta
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Route List -->
|
||||
<div v-if="!selectedRoute" class="route-list">
|
||||
<div v-for="route in routes" :key="route.id" class="route-card" @click="selectRoute(route)">
|
||||
<div class="route-info">
|
||||
<h3>{{ route.name }}</h3>
|
||||
<p>{{ route.origin_city }} → {{ route.destination_city }}</p>
|
||||
<div class="status" :class="route.status">{{ translateStatus(route.status) }}</div>
|
||||
<div class="main-layout">
|
||||
<!-- MAP SIDE (Visible when editing) -->
|
||||
<div v-if="selectedRoute" class="map-container">
|
||||
<div id="route-map" class="route-map"></div>
|
||||
<div class="map-hint">
|
||||
<span class="material-icons">info</span>
|
||||
Haz clic en el mapa para crear una nueva parada o en una existente para añadirla a la ruta.
|
||||
</div>
|
||||
<span class="material-icons">chevron_right</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Single Route Editor -->
|
||||
<div v-else class="route-editor">
|
||||
<div class="editor-header">
|
||||
<button @click="selectedRoute = null">Cerrar</button>
|
||||
<h2>Editar Ruta: {{ selectedRoute.name }}</h2>
|
||||
</div>
|
||||
|
||||
<div class="route-details-form">
|
||||
<div class="form-group">
|
||||
<label>Velocidad Promedio (km/h)</label>
|
||||
<input v-model.number="selectedRoute.average_speed_kmh" @change="updateRouteDetails" type="number" placeholder="ej. 30">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Estado</label>
|
||||
<select v-model="selectedRoute.status" @change="updateRouteDetails">
|
||||
<option value="active">Activa</option>
|
||||
<option value="inactive">Inactiva</option>
|
||||
<option value="maintenance">Mantenimiento</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stops-section">
|
||||
<h3>Paradas y Horarios</h3>
|
||||
<div class="add-stop">
|
||||
<select v-model="newStopId">
|
||||
<option value="">Selecciona una parada para añadir</option>
|
||||
<option v-for="stop in availableStops" :key="stop.id" :value="stop.id">
|
||||
{{ stop.name }}
|
||||
</option>
|
||||
</select>
|
||||
<button @click="addStop" :disabled="!newStopId">Añadir</button>
|
||||
</div>
|
||||
|
||||
<div class="stops-list-editor">
|
||||
<div class="stops-header">
|
||||
<span>#</span>
|
||||
<span>Nombre</span>
|
||||
<span>Espera (min)</span>
|
||||
<span>Llegada</span>
|
||||
<span>Acciones</span>
|
||||
<!-- CONTENT SIDE -->
|
||||
<div class="content-side">
|
||||
<!-- Route List -->
|
||||
<div v-if="!selectedRoute" class="route-list">
|
||||
<div v-for="route in routes" :key="route.id" class="route-card" @click="selectRoute(route)">
|
||||
<div class="route-info">
|
||||
<h3>{{ route.name }}</h3>
|
||||
<p>{{ route.origin_city }} → {{ route.destination_city }}</p>
|
||||
<div class="status" :class="route.status">{{ translateStatus(route.status) }}</div>
|
||||
</div>
|
||||
<span class="material-icons">chevron_right</span>
|
||||
</div>
|
||||
<!-- We use computed enriched stops for display, but need to bind inputs to original array or handle updates -->
|
||||
<div v-for="(stop, index) in routeStops" :key="stop.id" class="stop-item">
|
||||
<span class="stop-order">{{ index + 1 }}</span>
|
||||
<span class="stop-name">{{ stop.name }}</span>
|
||||
<div v-if="routes.length === 0" class="empty-state">No hay rutas registradas.</div>
|
||||
</div>
|
||||
|
||||
<!-- Single Route Editor -->
|
||||
<div v-else class="route-editor">
|
||||
<div class="editor-header">
|
||||
<h2>Editar: {{ selectedRoute.name }}</h2>
|
||||
<div class="editor-actions">
|
||||
<button class="delete-route-btn" @click="deleteRoute">Eliminar Ruta</button>
|
||||
<button class="close-btn" @click="selectedRoute = null">Cerrar</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="editor-scroll">
|
||||
<section class="form-section">
|
||||
<h3>Información Básica</h3>
|
||||
<div class="route-details-form">
|
||||
<div class="form-group">
|
||||
<label>Nombre de la Ruta</label>
|
||||
<input v-model="selectedRoute.name" @change="updateRouteDetails" type="text" placeholder="Ej: Boquete - David">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Origen</label>
|
||||
<input v-model="selectedRoute.origin_city" @change="updateRouteDetails" type="text" placeholder="David">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Destino</label>
|
||||
<input v-model="selectedRoute.destination_city" @change="updateRouteDetails" type="text" placeholder="Boquete">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Velocidad Promedio (km/h)</label>
|
||||
<input v-model.number="selectedRoute.average_speed_kmh" @change="updateRouteDetails" type="number" placeholder="30">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Estado</label>
|
||||
<select v-model="selectedRoute.status" @change="updateRouteDetails">
|
||||
<option value="active">Activa</option>
|
||||
<option value="inactive">Inactiva</option>
|
||||
<option value="maintenance">Mantenimiento</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Color de Línea</label>
|
||||
<input v-model="selectedRoute.color" @change="updateRouteDetails" type="color">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="stop-delay">
|
||||
<input
|
||||
v-model.number="stop.stop_delay_minutes"
|
||||
type="number"
|
||||
min="0"
|
||||
class="delay-input"
|
||||
@change="updateStop(stop)"
|
||||
placeholder="0"
|
||||
>
|
||||
</div>
|
||||
|
||||
<span class="stop-arrival">
|
||||
+{{ Math.round(arrivalTimes[index] || 0) }} min
|
||||
</span>
|
||||
|
||||
<div class="stop-actions">
|
||||
<button @click="moveStop(stop, index, -1)" :disabled="index === 0">↑</button>
|
||||
<button @click="moveStop(stop, index, 1)" :disabled="index === routeStops.length - 1">↓</button>
|
||||
<button @click="removeStop(stop)" class="remove">×</button>
|
||||
</div>
|
||||
<section class="stops-section">
|
||||
<div class="section-header">
|
||||
<h3>Paradas en la Ruta ({{ routeStops.length }})</h3>
|
||||
<button class="save-changes-btn" @click="selectedRoute = null">Guardar Todo</button>
|
||||
</div>
|
||||
|
||||
<div class="add-stop-inline">
|
||||
<select v-model="newStopId">
|
||||
<option value="">Selecciona una parada para añadir...</option>
|
||||
<option v-for="stop in availableStops" :key="stop.id" :value="stop.id">
|
||||
{{ stop.name }}
|
||||
</option>
|
||||
</select>
|
||||
<button @click="addStop" :disabled="!newStopId" class="add-btn">Añadir</button>
|
||||
</div>
|
||||
|
||||
<div class="stops-list-editor">
|
||||
<div v-for="(stop, index) in routeStops" :key="stop.id" class="stop-item">
|
||||
<div class="stop-main">
|
||||
<div class="stop-rank">{{ index + 1 }}</div>
|
||||
<div class="stop-details">
|
||||
<div class="name">{{ stop.name }}</div>
|
||||
<div class="stats">+{{ Math.round(arrivalTimes[index] || 0) }} min</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stop-edit-fields">
|
||||
<div class="input-with-label">
|
||||
<label>Espera (min)</label>
|
||||
<input
|
||||
v-model.number="stop.stop_delay_minutes"
|
||||
type="number"
|
||||
min="0"
|
||||
@change="updateStop(stop)"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stop-controls">
|
||||
<button class="move-btn" @click="moveStop(stop, index, -1)" :disabled="index === 0">
|
||||
<span class="material-icons">expand_less</span>
|
||||
</button>
|
||||
<button class="move-btn" @click="moveStop(stop, index, 1)" :disabled="index === routeStops.length - 1">
|
||||
<span class="material-icons">expand_more</span>
|
||||
</button>
|
||||
<button class="remove-btn" @click="removeStop(stop)">
|
||||
<span class="material-icons">close</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="routeStops.length === 0" class="no-stops">
|
||||
No hay paradas en esta ruta. Usa el mapa o el buscador superior.
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -95,23 +139,31 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import { ref, onMounted, computed, watch, nextTick } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
const router = useRouter()
|
||||
import { routesService } from '@/services/routesService'
|
||||
import { busStopsService } from '@/services/busStopsService'
|
||||
import { useGoogleMaps } from '@/composables/useGoogleMaps'
|
||||
import type { Route, BusStop } from '@/types'
|
||||
|
||||
const router = useRouter()
|
||||
const routes = ref<Route[]>([])
|
||||
const allStops = ref<BusStop[]>([])
|
||||
const selectedRoute = ref<Route | null>(null)
|
||||
const routeStops = ref<BusStop[]>([])
|
||||
const newStopId = ref('')
|
||||
|
||||
// Map integration
|
||||
const { initMap, addNumberedMarker, addMarker, addPolyline, clearAllOverlays, isLoaded: mapsLoaded, map: gmap } = useGoogleMaps()
|
||||
|
||||
onMounted(async () => {
|
||||
await loadInitialData()
|
||||
})
|
||||
|
||||
async function loadInitialData() {
|
||||
routes.value = await routesService.getAllRoutes()
|
||||
allStops.value = await busStopsService.getAllBusStops()
|
||||
})
|
||||
}
|
||||
|
||||
const availableStops = computed(() => {
|
||||
const currentIds = new Set(routeStops.value.map((s: BusStop) => s.id))
|
||||
@ -120,473 +172,349 @@ const availableStops = computed(() => {
|
||||
|
||||
const arrivalTimes = computed(() => {
|
||||
if (!selectedRoute.value || !routeStops.value.length) return []
|
||||
|
||||
// speed is in km/h. Convert to km/min = speed / 60
|
||||
const speed = selectedRoute.value.average_speed_kmh || 30 // default 30km/h
|
||||
const speed = selectedRoute.value.average_speed_kmh || 30
|
||||
const speedKmPerMin = speed / 60
|
||||
|
||||
const times: number[] = []
|
||||
let currentTime = 0 // minutes from start
|
||||
|
||||
// First stop is at 0
|
||||
let currentTime = 0
|
||||
times.push(0)
|
||||
|
||||
for (let i = 1; i < routeStops.value.length; i++) {
|
||||
const prev = routeStops.value[i-1]
|
||||
const curr = routeStops.value[i]
|
||||
|
||||
if (!prev || !curr) continue
|
||||
|
||||
// Add delay of previous stop
|
||||
if (!prev || !curr) continue;
|
||||
currentTime += (prev.stop_delay_minutes || 0)
|
||||
|
||||
// Calculate travel time
|
||||
const dist = haversineDistance(prev.latitude, prev.longitude, curr.latitude, curr.longitude)
|
||||
const travelTime = dist / speedKmPerMin
|
||||
|
||||
currentTime += travelTime
|
||||
const dist = calculateDistance(prev.latitude, prev.longitude, curr.latitude, curr.longitude)
|
||||
currentTime += (dist / speedKmPerMin)
|
||||
times.push(currentTime)
|
||||
}
|
||||
|
||||
return times
|
||||
})
|
||||
|
||||
// Haversine formula for distance in km
|
||||
function haversineDistance(lat1: number, lon1: number, lat2: number, lon2: number) {
|
||||
const R = 6371; // Radius of the earth in km
|
||||
const dLat = deg2rad(lat2 - lat1);
|
||||
const dLon = deg2rad(lon2 - lon1);
|
||||
const a =
|
||||
Math.sin(dLat/2) * Math.sin(dLat/2) +
|
||||
Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) *
|
||||
Math.sin(dLon/2) * Math.sin(dLon/2)
|
||||
;
|
||||
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
|
||||
const d = R * c; // Distance in km
|
||||
return d;
|
||||
}
|
||||
|
||||
function deg2rad(deg: number) {
|
||||
return deg * (Math.PI/180)
|
||||
}
|
||||
|
||||
function translateStatus(status: string) {
|
||||
const statuses: Record<string, string> = {
|
||||
'active': 'Activa',
|
||||
'inactive': 'Inactiva',
|
||||
'maintenance': 'Mantenimiento'
|
||||
// Watchers for Map Rendering
|
||||
watch([selectedRoute, mapsLoaded], ([route, loaded]) => {
|
||||
if (route && loaded) {
|
||||
nextTick(() => {
|
||||
initRouteMap()
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
// Update map when stops change
|
||||
watch(routeStops, () => {
|
||||
if (selectedRoute.value) updateMapOverlays()
|
||||
}, { deep: true })
|
||||
|
||||
async function initRouteMap() {
|
||||
initMap('route-map', { lat: 8.4284, lng: -82.4309 }, 13)
|
||||
|
||||
// Add Click listener to Create New Stops
|
||||
if (gmap.value) {
|
||||
gmap.value.addListener('click', async (e: any) => {
|
||||
const lat = e.latLng.lat()
|
||||
const lng = e.latLng.lng()
|
||||
|
||||
const name = prompt('Crear nueva parada en este punto? Introduce el nombre:')
|
||||
if (name) {
|
||||
try {
|
||||
const newStop = await busStopsService.createBusStop({
|
||||
name,
|
||||
latitude: lat,
|
||||
longitude: lng,
|
||||
stop_type: 'regular',
|
||||
has_shelter: false,
|
||||
has_seating: false,
|
||||
is_accessible: true,
|
||||
city: selectedRoute.value?.origin_city || 'David'
|
||||
})
|
||||
// Refetch all stops
|
||||
allStops.value = await busStopsService.getAllBusStops()
|
||||
// Add to current route
|
||||
await addExistingStop(newStop.id)
|
||||
} catch (err) {
|
||||
alert('Error creando parada')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
updateMapOverlays()
|
||||
}
|
||||
|
||||
function updateMapOverlays() {
|
||||
clearAllOverlays()
|
||||
|
||||
// 1. Draw Polyline
|
||||
if (routeStops.value.length > 1) {
|
||||
const path = routeStops.value.map(s => ({ lat: s.latitude, lng: s.longitude }))
|
||||
addPolyline(path)
|
||||
}
|
||||
|
||||
// 2. Add Route Markers (Yellow Numbered)
|
||||
routeStops.value.forEach((stop, index) => {
|
||||
addNumberedMarker(
|
||||
{ lat: stop.latitude, lng: stop.longitude },
|
||||
index + 1,
|
||||
stop.name
|
||||
)
|
||||
})
|
||||
|
||||
// 3. Add Available Markers (Small Gray Dots)
|
||||
availableStops.value.forEach(stop => {
|
||||
const marker = addMarker(
|
||||
{ lat: stop.latitude, lng: stop.longitude },
|
||||
{
|
||||
title: stop.name,
|
||||
icon: {
|
||||
path: google.maps.SymbolPath.CIRCLE,
|
||||
scale: 6,
|
||||
fillColor: '#666',
|
||||
fillOpacity: 0.8,
|
||||
strokeWeight: 1,
|
||||
strokeColor: '#fff'
|
||||
}
|
||||
}
|
||||
)
|
||||
if (marker) {
|
||||
marker.addListener('click', () => {
|
||||
addExistingStop(stop.id)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// Actions
|
||||
function handleBack() {
|
||||
if (selectedRoute.value) {
|
||||
selectedRoute.value = null
|
||||
} else {
|
||||
router.push('/admin')
|
||||
}
|
||||
return statuses[status] || status
|
||||
}
|
||||
|
||||
async function createRoute() {
|
||||
const name = prompt("Introduce el nombre de la ruta")
|
||||
if (name) {
|
||||
await routesService.createRoute({
|
||||
name,
|
||||
origin_city: 'David',
|
||||
destination_city: 'Boquete',
|
||||
status: 'active',
|
||||
color: '#000000',
|
||||
direction: 'outbound'
|
||||
})
|
||||
routes.value = await routesService.getAllRoutes()
|
||||
}
|
||||
const name = prompt("Nombre de la nueva ruta:")
|
||||
if (!name) return
|
||||
const route = await routesService.createRoute({
|
||||
name,
|
||||
origin_city: 'David',
|
||||
destination_city: 'Boquete',
|
||||
status: 'active',
|
||||
color: '#FEE715',
|
||||
direction: 'outbound'
|
||||
})
|
||||
routes.value = await routesService.getAllRoutes()
|
||||
selectRoute(route)
|
||||
}
|
||||
|
||||
async function selectRoute(route: Route) {
|
||||
selectedRoute.value = route
|
||||
// Ensure route object is reactive for editing (ref is reactive, passing obj by ref is fine)
|
||||
routeStops.value = await routesService.getRouteStops(route.id)
|
||||
}
|
||||
|
||||
async function updateRouteDetails() {
|
||||
if (!selectedRoute.value) return
|
||||
try {
|
||||
await routesService.updateRoute(selectedRoute.value.id, {
|
||||
average_speed_kmh: selectedRoute.value.average_speed_kmh,
|
||||
status: selectedRoute.value.status
|
||||
})
|
||||
} catch (e) {
|
||||
alert('Error al actualizar la ruta')
|
||||
await routesService.updateRoute(selectedRoute.value.id, {
|
||||
name: selectedRoute.value.name,
|
||||
origin_city: selectedRoute.value.origin_city,
|
||||
destination_city: selectedRoute.value.destination_city,
|
||||
average_speed_kmh: selectedRoute.value.average_speed_kmh,
|
||||
status: selectedRoute.value.status,
|
||||
color: selectedRoute.value.color
|
||||
})
|
||||
}
|
||||
|
||||
async function addStop() {
|
||||
if (newStopId.value) {
|
||||
await addExistingStop(newStopId.value)
|
||||
newStopId.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
async function addExistingStop(stopId: string) {
|
||||
if (!selectedRoute.value) return
|
||||
await routesService.addStopToRoute(selectedRoute.value.id, {
|
||||
stop_id: stopId,
|
||||
stop_order: routeStops.value.length + 1
|
||||
})
|
||||
routeStops.value = await routesService.getRouteStops(selectedRoute.value.id)
|
||||
}
|
||||
|
||||
async function updateStop(stop: BusStop) {
|
||||
if (!selectedRoute.value) return
|
||||
try {
|
||||
await routesService.updateRouteStop(selectedRoute.value.id, stop.id, {
|
||||
stop_delay_minutes: stop.stop_delay_minutes || 0
|
||||
})
|
||||
} catch (e) {
|
||||
alert('Error al actualizar el retraso de la parada')
|
||||
}
|
||||
}
|
||||
|
||||
async function addStop() {
|
||||
if (!selectedRoute.value || !newStopId.value) return
|
||||
try {
|
||||
await routesService.addStopToRoute(selectedRoute.value.id, {
|
||||
stop_id: newStopId.value,
|
||||
stop_order: routeStops.value.length + 1
|
||||
})
|
||||
routeStops.value = await routesService.getRouteStops(selectedRoute.value.id)
|
||||
newStopId.value = ''
|
||||
} catch (e) {
|
||||
alert('Error al añadir parada')
|
||||
}
|
||||
await routesService.updateRouteStop(selectedRoute.value.id, stop.id, {
|
||||
stop_delay_minutes: stop.stop_delay_minutes || 0
|
||||
})
|
||||
}
|
||||
|
||||
async function moveStop(stop: BusStop, index: number, direction: number) {
|
||||
if (!selectedRoute.value) return
|
||||
const newOrder = index + 1 + direction
|
||||
try {
|
||||
await routesService.updateRouteStop(selectedRoute.value.id, stop.id, {
|
||||
stop_order: newOrder
|
||||
})
|
||||
await routesService.updateRouteStop(selectedRoute.value.id, stop.id, {
|
||||
stop_order: index + 1 + direction
|
||||
})
|
||||
routeStops.value = await routesService.getRouteStops(selectedRoute.value.id)
|
||||
}
|
||||
|
||||
async function removeStop(stop: BusStop) {
|
||||
if (!selectedRoute.value) return
|
||||
if (confirm(`Borrar ${stop.name} de la ruta?`)) {
|
||||
await routesService.removeStopFromRoute(selectedRoute.value.id, stop.id)
|
||||
routeStops.value = await routesService.getRouteStops(selectedRoute.value.id)
|
||||
} catch (e) {
|
||||
alert('Error al mover parada')
|
||||
}
|
||||
}
|
||||
|
||||
async function removeStop(_stop: BusStop) {
|
||||
alert('Borrar no implementado aún')
|
||||
async function deleteRoute() {
|
||||
if (!selectedRoute.value) return
|
||||
if (confirm(`Estás SEGURO de que quieres eliminar la ruta ${selectedRoute.value.name}? Esta acción es permanente.`)) {
|
||||
await routesService.deleteRoute(selectedRoute.value.id)
|
||||
selectedRoute.value = null
|
||||
routes.value = await routesService.getAllRoutes()
|
||||
}
|
||||
}
|
||||
|
||||
function calculateDistance(lat1: number, lon1: number, lat2: number, lon2: number) {
|
||||
const R = 6371
|
||||
const dLat = (lat2 - lat1) * Math.PI / 180
|
||||
const dLon = (lon2 - lon1) * Math.PI / 180
|
||||
const a = Math.sin(dLat/2) * Math.sin(dLat/2) + Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * Math.sin(dLon/2) * Math.sin(dLon/2)
|
||||
return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a))
|
||||
}
|
||||
|
||||
function translateStatus(s: string) {
|
||||
return { active: 'Activa', inactive: 'Inactiva', maintenance: 'Mantenimiento' }[s] || s
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.admin-routes {
|
||||
padding: 32px 24px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 24px;
|
||||
background: #0f172a;
|
||||
min-height: 100vh;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 48px;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
background: var(--hover-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
color: var(--text-primary);
|
||||
padding: 12px 20px;
|
||||
border-radius: 14px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.back-link:hover {
|
||||
background: var(--active-bg);
|
||||
border-color: var(--active-color);
|
||||
color: var(--active-color);
|
||||
transform: translateX(-4px);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(1.5rem, 4vw, 2.5rem);
|
||||
font-weight: 900;
|
||||
margin: 0;
|
||||
background: linear-gradient(135deg, #fee715 0%, #facc15 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
letter-spacing: -0.04em;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.add-button {
|
||||
background: linear-gradient(135deg, #fee715 0%, #facc15 100%);
|
||||
color: #101820;
|
||||
border: none;
|
||||
padding: 12px 24px;
|
||||
border-radius: 14px;
|
||||
font-weight: 900;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow: 0 10px 20px rgba(254, 231, 21, 0.15);
|
||||
}
|
||||
|
||||
.add-button:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 15px 30px rgba(254, 231, 21, 0.25);
|
||||
}
|
||||
|
||||
.add-button .material-icons {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* Route List */
|
||||
.route-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.route-card {
|
||||
background: var(--card-bg);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border-radius: 24px;
|
||||
padding: 24px;
|
||||
border: 1px solid var(--border-color);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.route-card:hover {
|
||||
transform: translateY(-8px);
|
||||
border-color: var(--active-color);
|
||||
box-shadow: 0 20px 40px rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
.route-info h3 {
|
||||
margin: 0 0 8px;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 900;
|
||||
color: var(--text-primary);
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.route-info p {
|
||||
margin: 0 0 16px;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status {
|
||||
display: inline-flex;
|
||||
padding: 6px 12px;
|
||||
border-radius: 10px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.status.active { background: rgba(34, 197, 94, 0.1); color: #4ade80; border: 1px solid rgba(34, 197, 94, 0.2); }
|
||||
.status.inactive { background: rgba(239, 68, 68, 0.1); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.2); }
|
||||
.status.maintenance { background: rgba(245, 158, 11, 0.1); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.2); }
|
||||
|
||||
.route-card .material-icons {
|
||||
color: var(--text-secondary);
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.route-card:hover .material-icons {
|
||||
color: var(--active-color);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
/* Editor Styles */
|
||||
.route-editor {
|
||||
background: var(--card-bg);
|
||||
backdrop-filter: blur(16px);
|
||||
border-radius: 32px;
|
||||
padding: 40px;
|
||||
border: 1px solid var(--border-color);
|
||||
animation: slideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.editor-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.editor-header h2 {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 900;
|
||||
color: var(--text-primary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.editor-header button {
|
||||
background: var(--hover-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
color: var(--text-primary);
|
||||
padding: 10px 20px;
|
||||
border-radius: 12px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.editor-header button:hover {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
color: #f87171;
|
||||
border-color: #f87171;
|
||||
}
|
||||
|
||||
.route-details-form {
|
||||
background: var(--bg-secondary);
|
||||
padding: 24px;
|
||||
border-radius: 20px;
|
||||
margin-bottom: 40px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 24px;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 800;
|
||||
color: var(--active-color);
|
||||
margin-bottom: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.form-group input, .form-group select {
|
||||
width: 100%;
|
||||
padding: 14px 18px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 14px;
|
||||
color: var(--text-primary);
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
outline: none;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.form-group input:focus, .form-group select:focus {
|
||||
border-color: var(--active-color);
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.stops-section h3 {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 900;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.add-stop {
|
||||
h1 { font-size: 1.5rem; font-weight: 800; color: #FEE715; margin: 0; }
|
||||
|
||||
.back-link {
|
||||
background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
|
||||
color: white; padding: 8px 16px; border-radius: 8px; cursor: pointer;
|
||||
}
|
||||
|
||||
.add-button {
|
||||
background: #FEE715; color: #101820; border: none; padding: 10px 20px;
|
||||
border-radius: 10px; font-weight: 800; cursor: pointer; display: flex; align-items: center; gap: 8px;
|
||||
}
|
||||
|
||||
.main-layout {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-bottom: 32px;
|
||||
gap: 24px;
|
||||
height: calc(100vh - 100px);
|
||||
}
|
||||
|
||||
.add-stop select { flex: 1; }
|
||||
|
||||
.add-stop button {
|
||||
background: var(--active-color);
|
||||
color: #101820;
|
||||
border: none;
|
||||
padding: 0 24px;
|
||||
border-radius: 14px;
|
||||
font-weight: 900;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
.map-container {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.add-stop button:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
.route-map { width: 100%; height: 100%; }
|
||||
|
||||
.stops-list-editor {
|
||||
.map-hint {
|
||||
position: absolute; bottom: 16px; left: 16px; right: 16px;
|
||||
background: rgba(0,0,0,0.8); backdrop-filter: blur(8px);
|
||||
padding: 12px; border-radius: 12px; color: #94a3b8; font-size: 0.8rem;
|
||||
display: flex; align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.content-side {
|
||||
width: 400px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.stops-header {
|
||||
display: grid;
|
||||
grid-template-columns: 60px 1fr 120px 120px 150px;
|
||||
padding: 12px 24px;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 800;
|
||||
font-size: 0.8rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
.with-map .content-side { width: 45%; }
|
||||
@media (max-width: 1000px) {
|
||||
.main-layout { flex-direction: column; height: auto; }
|
||||
.content-side { width: 100% !important; }
|
||||
.map-container { height: 400px; order: -1; }
|
||||
}
|
||||
|
||||
/* Route List */
|
||||
.route-list { display: flex; flex-direction: column; gap: 12px; height: 100%; }
|
||||
.route-card {
|
||||
background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1);
|
||||
padding: 16px; border-radius: 16px; cursor: pointer; display: flex;
|
||||
justify-content: space-between; align-items: center; transition: all 0.2s;
|
||||
}
|
||||
.route-card:hover { border-color: #FEE715; background: rgba(254,231,21,0.05); }
|
||||
.route-info h3 { margin: 0; font-size: 1.1rem; }
|
||||
.route-info p { margin: 4px 0 10px; color: #94a3b8; font-size: 0.85rem; }
|
||||
.status { font-size: 0.7rem; font-weight: 800; padding: 4px 8px; border-radius: 6px; width: fit-content; text-transform: uppercase; }
|
||||
.status.active { background: rgba(34, 197, 94, 0.1); color: #4ade80; }
|
||||
.status.inactive { background: rgba(239, 68, 68, 0.1); color: #f87171; }
|
||||
|
||||
/* Editor View */
|
||||
.route-editor {
|
||||
background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1);
|
||||
border-radius: 20px; height: 100%; display: flex; flex-direction: column; overflow: hidden;
|
||||
}
|
||||
|
||||
.editor-header { padding: 20px; border-bottom: 1px solid rgba(255,255,255,0.1); }
|
||||
.editor-header h2 { margin: 0 0 12px; font-size: 1.25rem; font-weight: 800; }
|
||||
.editor-actions { display: flex; gap: 10px; }
|
||||
.close-btn { background: #334155; color: white; border: none; padding: 6px 16px; border-radius: 8px; cursor: pointer; }
|
||||
.delete-route-btn { background: rgba(239, 68, 68, 0.1); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.2); padding: 6px 16px; border-radius: 8px; cursor: pointer; }
|
||||
|
||||
.editor-scroll { flex: 1; overflow-y: auto; padding: 20px; }
|
||||
|
||||
.form-section { margin-bottom: 32px; }
|
||||
.form-section h3 { font-size: 0.9rem; text-transform: uppercase; color: #FEE715; margin-bottom: 16px; letter-spacing: 0.05em; }
|
||||
|
||||
.route-details-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
|
||||
.form-group { display: flex; flex-direction: column; gap: 6px; }
|
||||
.form-group label { font-size: 0.75rem; color: #94a3b8; font-weight: 700; }
|
||||
.form-group input, .form-group select {
|
||||
background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 10px; color: white; font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
|
||||
.save-changes-btn { background: #FEE715; color: #101820; border: none; padding: 8px 16px; border-radius: 8px; font-weight: 800; cursor: pointer; }
|
||||
|
||||
.add-stop-inline { display: flex; gap: 8px; margin-bottom: 20px; }
|
||||
.add-stop-inline select { flex: 1; background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 10px; color: white; }
|
||||
.add-btn { background: #334155; color: white; border: none; padding: 0 16px; border-radius: 8px; cursor: pointer; }
|
||||
|
||||
.stops-list-editor { display: flex; flex-direction: column; gap: 8px; }
|
||||
.stop-item {
|
||||
display: grid;
|
||||
grid-template-columns: 60px 1fr 120px 120px 150px;
|
||||
align-items: center;
|
||||
padding: 20px 24px;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 20px;
|
||||
gap: 16px;
|
||||
border: 1px solid var(--border-color);
|
||||
transition: all 0.3s;
|
||||
background: #1e293b; border: 1px solid #334155; border-radius: 12px; padding: 12px;
|
||||
display: flex; align-items: center; justify-content: space-between; gap: 12px;
|
||||
}
|
||||
.stop-main { display: flex; align-items: center; gap: 12px; flex: 1; }
|
||||
.stop-rank { width: 28px; height: 28px; background: #FEE715; color: #101820; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 0.8rem; }
|
||||
.stop-details .name { font-weight: 700; font-size: 0.9rem; }
|
||||
.stop-details .stats { font-size: 0.75rem; color: #94a3b8; margin-top: 2px; }
|
||||
|
||||
.stop-item:hover {
|
||||
border-color: var(--active-color);
|
||||
transform: translateX(8px);
|
||||
.stop-edit-fields { display: flex; gap: 12px; }
|
||||
.input-with-label { display: flex; flex-direction: column; gap: 2px; }
|
||||
.input-with-label label { font-size: 0.6rem; color: #64748b; text-transform: uppercase; font-weight: 800; }
|
||||
.input-with-label input { width: 60px; background: #0f172a; border: 1px solid #334155; padding: 4px 6px; border-radius: 4px; color: white; text-align: center; }
|
||||
|
||||
.stop-controls { display: flex; gap: 4px; }
|
||||
.move-btn, .remove-btn {
|
||||
width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
|
||||
border-radius: 6px; cursor: pointer; border: none; color: #94a3b8; background: transparent; transition: all 0.2s;
|
||||
}
|
||||
.move-btn:hover:not(:disabled) { background: rgba(255,255,255,0.05); color: #FEE715; }
|
||||
.remove-btn:hover { background: rgba(239, 68, 68, 0.1); color: #f87171; }
|
||||
.move-btn:disabled { opacity: 0.3; cursor: not-allowed; }
|
||||
|
||||
.stop-order { font-weight: 900; color: var(--active-color); font-size: 1.1rem; }
|
||||
.stop-name { font-weight: 700; color: var(--text-primary); }
|
||||
.stop-arrival { font-weight: 800; color: var(--text-secondary); }
|
||||
|
||||
.delay-input {
|
||||
width: 80px !important;
|
||||
padding: 8px 12px !important;
|
||||
}
|
||||
|
||||
.stop-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.stop-actions button {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--border-color);
|
||||
background: var(--hover-bg);
|
||||
color: var(--text-primary);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.stop-actions button:hover:not(:disabled) {
|
||||
background: var(--active-color);
|
||||
color: #101820;
|
||||
border-color: var(--active-color);
|
||||
}
|
||||
|
||||
.stop-actions button.remove:hover {
|
||||
background: #f87171;
|
||||
border-color: #f87171;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.header { flex-direction: column; align-items: stretch; text-align: center; }
|
||||
.back-link { justify-content: center; }
|
||||
.add-button { justify-content: center; }
|
||||
.route-details-form { grid-template-columns: 1fr; }
|
||||
.stops-header { display: none; }
|
||||
.stop-item { grid-template-columns: 1fr; text-align: center; justify-items: center; }
|
||||
.stop-actions { margin-top: 12px; }
|
||||
}
|
||||
.no-stops { text-align: center; padding: 40px; color: #64748b; font-style: italic; border: 1px dashed #334155; border-radius: 12px; }
|
||||
.empty-state { text-align: center; padding: 40px; color: #64748b; }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user