Refactor shuttle and route management: price separation, premium preview design, and simplified route creation form
This commit is contained in:
@ -18,11 +18,14 @@ async def get_shuttles(
|
||||
destination: Optional[str] = Query(None),
|
||||
company_name: Optional[str] = Query(None),
|
||||
trip_type: Optional[str] = Query(None),
|
||||
is_active: bool = Query(True),
|
||||
is_active: Optional[bool] = Query(None),
|
||||
session: Session = Depends(get_session)
|
||||
):
|
||||
"""Get all shuttles with optional filters."""
|
||||
statement = select(Shuttle).where(Shuttle.is_active == is_active)
|
||||
statement = select(Shuttle)
|
||||
|
||||
if is_active is not None:
|
||||
statement = statement.where(Shuttle.is_active == is_active)
|
||||
|
||||
if origin:
|
||||
statement = statement.where(Shuttle.origin.contains(origin))
|
||||
@ -159,3 +162,21 @@ async def delete_shuttle(
|
||||
session.delete(db_shuttle)
|
||||
session.commit()
|
||||
return {"ok": True}
|
||||
|
||||
@router.patch("/{shuttle_id}/status")
|
||||
async def update_shuttle_status(
|
||||
shuttle_id: UUID,
|
||||
is_active: bool = Query(...),
|
||||
session: Session = Depends(get_session),
|
||||
_: bool = Depends(get_current_admin)
|
||||
):
|
||||
"""Update shuttle active status (Admin only)."""
|
||||
db_shuttle = session.get(Shuttle, shuttle_id)
|
||||
if not db_shuttle:
|
||||
raise HTTPException(status_code=404, detail="Shuttle not found")
|
||||
|
||||
db_shuttle.is_active = is_active
|
||||
session.add(db_shuttle)
|
||||
session.commit()
|
||||
session.refresh(db_shuttle)
|
||||
return db_shuttle
|
||||
|
||||
@ -42,13 +42,13 @@
|
||||
<span class="material-icons">shield_person</span>
|
||||
<span class="link-text">Panel Control</span>
|
||||
</div>
|
||||
<div v-if="authStore.isDriver" class="sidebar-link" @click="navigateTo('/driver')">
|
||||
<div v-if="authStore.isDriver && !authStore.isAdmin" class="sidebar-link" @click="navigateTo('/driver')">
|
||||
<span class="material-icons">minor_crash</span>
|
||||
<span class="link-text">Taxi Panel</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-group">
|
||||
<div v-if="!authStore.isAdmin" class="sidebar-group">
|
||||
<div class="group-label">OPERACIONES</div>
|
||||
<div class="sidebar-link" @click="navigateTo('/favorites')">
|
||||
<span class="material-icons">favorite</span>
|
||||
@ -65,7 +65,7 @@
|
||||
<span class="link-text">{{ themeStore.isDarkMode ? 'Modo Claro' : 'Modo Oscuro' }}</span>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-group">
|
||||
<div v-if="!authStore.isAdmin" class="sidebar-group">
|
||||
<div class="group-label">SOPORTE</div>
|
||||
<div class="sidebar-link report-link-solid" @click="openReportModal">
|
||||
<span class="material-icons">report_problem</span>
|
||||
|
||||
@ -20,8 +20,39 @@
|
||||
|
||||
<!-- CONTENT SIDE -->
|
||||
<div class="content-side">
|
||||
<!-- Route List -->
|
||||
<!-- Route List & Create Form -->
|
||||
<div v-if="!selectedRoute" class="route-list">
|
||||
<!-- Create Form (Simplified) -->
|
||||
<div v-if="isCreating" class="create-route-form nexus-glass">
|
||||
<div class="form-header">
|
||||
<span class="material-icons">route</span>
|
||||
<h3>Nueva Ruta</h3>
|
||||
</div>
|
||||
|
||||
<div class="form-body">
|
||||
<div class="form-group">
|
||||
<label>Punto de Salida</label>
|
||||
<input v-model="newRouteForm.origin" type="text" placeholder="Ej: David">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Punto de Llegada</label>
|
||||
<input v-model="newRouteForm.destination" type="text" placeholder="Ej: Boquete">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Nombre de Ruta (Auto)</label>
|
||||
<input :value="computedRouteName" disabled type="text" placeholder="Salida - Llegada">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-footer">
|
||||
<button class="cancel-btn" @click="isCreating = false">Cancelar</button>
|
||||
<button class="save-btn" :disabled="!isFormValid" @click="confirmCreateRoute">
|
||||
<span class="material-icons">save</span> Guardar Ruta
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Existing List -->
|
||||
<div v-for="route in routes" :key="route.id" class="route-card" @click="selectRoute(route)">
|
||||
<div class="route-info">
|
||||
<h3>{{ route.name }}</h3>
|
||||
@ -30,7 +61,7 @@
|
||||
</div>
|
||||
<span class="material-icons">chevron_right</span>
|
||||
</div>
|
||||
<div v-if="routes.length === 0" class="empty-state">No hay rutas registradas.</div>
|
||||
<div v-if="routes.length === 0 && !isCreating" class="empty-state">No hay rutas registradas.</div>
|
||||
</div>
|
||||
|
||||
<!-- Single Route Editor -->
|
||||
@ -152,6 +183,20 @@ const allStops = ref<BusStop[]>([])
|
||||
const selectedRoute = ref<Route | null>(null)
|
||||
const routeStops = ref<BusStop[]>([])
|
||||
const newStopId = ref('')
|
||||
const isCreating = ref(false)
|
||||
const newRouteForm = ref({
|
||||
origin: '',
|
||||
destination: ''
|
||||
})
|
||||
|
||||
const computedRouteName = computed(() => {
|
||||
if (!newRouteForm.value.origin || !newRouteForm.value.destination) return ''
|
||||
return `${newRouteForm.value.origin} - ${newRouteForm.value.destination}`
|
||||
})
|
||||
|
||||
const isFormValid = computed(() => {
|
||||
return newRouteForm.value.origin.trim() !== '' && newRouteForm.value.destination.trim() !== ''
|
||||
})
|
||||
|
||||
// Map integration
|
||||
const { initMap, addNumberedMarker, addMarker, addPolyline, clearAllOverlays, isLoaded: mapsLoaded, map: gmap } = useGoogleMaps()
|
||||
@ -291,19 +336,22 @@ function handleBack() {
|
||||
}
|
||||
|
||||
async function createRoute() {
|
||||
const name = prompt("Nombre de la nueva ruta:")
|
||||
if (!name) return
|
||||
isCreating.value = true
|
||||
newRouteForm.value = { origin: '', destination: '' }
|
||||
}
|
||||
|
||||
async function confirmCreateRoute() {
|
||||
try {
|
||||
const route = await routesService.createRoute({
|
||||
name,
|
||||
origin_city: 'David',
|
||||
destination_city: 'Boquete',
|
||||
await routesService.createRoute({
|
||||
name: computedRouteName.value,
|
||||
origin_city: newRouteForm.value.origin,
|
||||
destination_city: newRouteForm.value.destination,
|
||||
status: 'active',
|
||||
color: '#FEE715',
|
||||
direction: 'outbound'
|
||||
})
|
||||
routes.value = await routesService.getAllRoutes()
|
||||
selectRoute(route)
|
||||
isCreating.value = false
|
||||
} catch (err: any) {
|
||||
console.error('Error creating route:', err)
|
||||
alert('No se pudo crear la ruta: ' + (err.response?.data?.detail || err.message))
|
||||
@ -480,6 +528,74 @@ h1 { font-size: 1.5rem; font-weight: 800; color: #FEE715; margin: 0; }
|
||||
.status.active { background: rgba(34, 197, 94, 0.1); color: #4ade80; }
|
||||
.status.inactive { background: rgba(239, 68, 68, 0.1); color: #f87171; }
|
||||
|
||||
/* Nexus Create Form */
|
||||
.create-route-form {
|
||||
margin-bottom: 24px;
|
||||
padding: 24px;
|
||||
border-radius: 20px;
|
||||
background: rgba(30, 41, 59, 0.5);
|
||||
}
|
||||
|
||||
.nexus-glass {
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.form-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
color: #FEE715;
|
||||
}
|
||||
|
||||
.form-header h3 {
|
||||
margin: 0;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.form-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.form-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
background: transparent;
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
border-radius: 10px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
background: #FEE715;
|
||||
color: #101820;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 10px;
|
||||
font-weight: 800;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.save-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Editor View */
|
||||
.route-editor {
|
||||
background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1);
|
||||
|
||||
@ -209,62 +209,85 @@ async function saveShuttle() {
|
||||
<h2>Previsualización en Directo</h2>
|
||||
</div>
|
||||
|
||||
<div class="preview-container">
|
||||
<!-- LA TARJETA TAL CUAL LA IMAGEN DEL USUARIO -->
|
||||
<div class="shuttle-card-preview" :style="{ backgroundImage: `url(${shuttleForm.image_url})` }">
|
||||
<div class="card-header">
|
||||
<div class="company-badge">
|
||||
<span class="material-icons">business</span>
|
||||
{{ shuttleForm.company_name }}
|
||||
</div>
|
||||
<div class="price-badge-top">
|
||||
${{ shuttleForm.price_per_person }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="route-display">
|
||||
<span class="city">{{ shuttleForm.origin }}</span>
|
||||
<span class="material-icons arrow">arrow_forward</span>
|
||||
<span class="city">{{ shuttleForm.destination }}</span>
|
||||
</div>
|
||||
|
||||
<div class="vehicle-tag">
|
||||
<span class="material-icons">directions_bus</span>
|
||||
{{ shuttleForm.vehicle_type }}
|
||||
</div>
|
||||
|
||||
<div class="card-details-box">
|
||||
<div class="detail-item">
|
||||
<span class="material-icons icon-yellow">schedule</span>
|
||||
<div class="texts">
|
||||
<span class="label">DURACIÓN ESTIMADA</span>
|
||||
<span class="val">{{ shuttleForm.estimated_duration }}</span>
|
||||
<!-- PREVIEW PANEL -->
|
||||
<div class="shuttle-card-preview" :class="{ expanded: true }" :style="{ backgroundImage: `url(${previewImageUrl})` }">
|
||||
<div class="shuttle-main-info">
|
||||
<div class="shuttle-header-mini">
|
||||
<div class="company-badge">
|
||||
<span class="material-icons">business</span>
|
||||
{{ shuttleForm.company_name }}
|
||||
</div>
|
||||
<div class="price-pill">
|
||||
<span class="currency">$</span>
|
||||
<span class="amount">{{ shuttleForm.price_per_person }}</span>
|
||||
<span class="price-pill-label">/p</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<span class="material-icons icon-yellow">calendar_today</span>
|
||||
<div class="texts">
|
||||
<span class="label">SALIDAS</span>
|
||||
<span class="val">{{ shuttleForm.departure_times }}</span>
|
||||
|
||||
<div class="shuttle-route-compact">
|
||||
<span class="route-text">{{ shuttleForm.origin }}</span>
|
||||
<span class="material-icons route-arrow">arrow_forward</span>
|
||||
<span class="route-text">{{ shuttleForm.destination }}</span>
|
||||
</div>
|
||||
|
||||
<div class="shuttle-tags">
|
||||
<div class="vehicle-tag-mini">
|
||||
<span class="material-icons">directions_bus</span>
|
||||
{{ shuttleForm.vehicle_type }}
|
||||
</div>
|
||||
<div class="expand-indicator">
|
||||
<span class="material-icons">expand_less</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-footer-preview">
|
||||
<div class="price-info">
|
||||
<span class="main-price">${{ shuttleForm.price_per_person }} <small>por persona</small></span>
|
||||
<div class="lang-indicator" v-if="shuttleForm.english_speaking">
|
||||
<span class="material-icons">g_translate</span>
|
||||
ENGLISH
|
||||
<!-- EXPANDED CONTENT PREVIEW -->
|
||||
<div class="shuttle-details">
|
||||
<div class="shuttle-separator"></div>
|
||||
|
||||
<div class="shuttle-body">
|
||||
<div class="info-row">
|
||||
<span class="material-icons">schedule</span>
|
||||
<div>
|
||||
<p class="label">DURACIÓN ESTIMADA</p>
|
||||
<p class="value">{{ shuttleForm.estimated_duration }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="material-icons">event</span>
|
||||
<div>
|
||||
<p class="label">SALIDAS</p>
|
||||
<p class="value">{{ shuttleForm.departure_times }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-row" v-if="shuttleForm.english_speaking">
|
||||
<span class="material-icons">g_translate</span>
|
||||
<div>
|
||||
<p class="label">IDIOMA</p>
|
||||
<p class="value">Español · English</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact-actions">
|
||||
<div class="mini-contact-btn phone">
|
||||
<span class="material-icons">phone</span>
|
||||
|
||||
<!-- Precios prominentes -->
|
||||
<div class="price-block">
|
||||
<div class="price-row-main">
|
||||
<span class="price-amount-big">${{ shuttleForm.price_per_person }}</span>
|
||||
<span class="price-label-big">por persona</span>
|
||||
</div>
|
||||
<div class="mini-contact-btn wa">
|
||||
<div class="price-row-secondary" v-if="shuttleForm.price_private_trip">
|
||||
<span class="material-icons price-icon-secondary">directions_car</span>
|
||||
<span class="price-amount-secondary">${{ shuttleForm.price_private_trip }}</span>
|
||||
<span class="price-label-secondary">viaje privado</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Botones de contacto -->
|
||||
<div class="contact-buttons-preview">
|
||||
<button class="btn-whatsapp-preview">
|
||||
<span class="material-icons">chat</span>
|
||||
</div>
|
||||
WhatsApp
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -486,18 +509,17 @@ async function saveShuttle() {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* SHUTTLE PREVIEW CARD STYLES */
|
||||
/* SHUTTLE PREVIEW CARD PREMIUM STYLES */
|
||||
.shuttle-card-preview {
|
||||
width: 100%;
|
||||
aspect-ratio: 1.2;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255,255,255,0.12);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
border-radius: 24px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20px;
|
||||
box-shadow: 0 30px 60px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
@ -505,125 +527,214 @@ async function saveShuttle() {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.4) 100%);
|
||||
background: linear-gradient(
|
||||
to top,
|
||||
rgba(0, 0, 0, 0.93) 0%,
|
||||
rgba(0, 0, 0, 0.65) 55%,
|
||||
rgba(0, 0, 0, 0.30) 100%
|
||||
);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.card-header, .route-display, .vehicle-tag, .card-details-box, .card-footer-preview {
|
||||
.shuttle-card-preview.expanded {
|
||||
border: 2px solid #FEE715;
|
||||
}
|
||||
|
||||
.shuttle-card-preview.expanded::before {
|
||||
background: linear-gradient(
|
||||
to top,
|
||||
rgba(0, 0, 0, 0.97) 0%,
|
||||
rgba(0, 0, 0, 0.80) 45%,
|
||||
rgba(0, 0, 0, 0.40) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.shuttle-main-info,
|
||||
.shuttle-details {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 18px 20px;
|
||||
}
|
||||
|
||||
.company-badge {
|
||||
background: rgba(254, 231, 21, 0.2);
|
||||
backdrop-filter: blur(8px);
|
||||
color: #fee715;
|
||||
padding: 6px 12px;
|
||||
border-radius: 8px;
|
||||
display: inline-flex;
|
||||
.shuttle-main-info {
|
||||
padding-bottom: 14px;
|
||||
}
|
||||
|
||||
.shuttle-header-mini {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.shuttle-card-preview .company-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 0.8rem;
|
||||
background: rgba(0, 0, 0, 0.60);
|
||||
color: #FEE715;
|
||||
padding: 5px 11px;
|
||||
border-radius: 10px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 800;
|
||||
border: 1px solid rgba(254, 231, 21, 0.3);
|
||||
border: 1px solid rgba(254, 231, 21, 0.45);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.price-badge-top {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background: #fee715;
|
||||
.price-pill {
|
||||
background: #FEE715;
|
||||
color: #101820;
|
||||
padding: 8px 16px;
|
||||
border-radius: 12px;
|
||||
padding: 5px 11px;
|
||||
border-radius: 10px;
|
||||
font-weight: 900;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.route-display {
|
||||
margin-top: 20px;
|
||||
font-size: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 900;
|
||||
align-items: baseline;
|
||||
gap: 1px;
|
||||
box-shadow: 0 4px 12px rgba(254, 231, 21, 0.35);
|
||||
}
|
||||
|
||||
.route-display .arrow {
|
||||
color: #fee715;
|
||||
}
|
||||
.price-pill .currency { font-size: 0.8rem; }
|
||||
.price-pill .amount { font-size: 1rem; }
|
||||
.price-pill-label { font-size: 0.7rem; font-weight: 700; opacity: 0.75; }
|
||||
|
||||
.vehicle-tag {
|
||||
margin-top: 12px;
|
||||
background: rgba(0,0,0,0.6);
|
||||
padding: 8px 16px;
|
||||
border-radius: 12px;
|
||||
display: inline-flex;
|
||||
.shuttle-route-compact {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
width: fit-content;
|
||||
font-weight: 700;
|
||||
font-size: 0.9rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 900;
|
||||
color: #ffffff;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.card-details-box {
|
||||
margin-top: auto;
|
||||
margin-bottom: 20px;
|
||||
.route-arrow {
|
||||
color: #FEE715;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.shuttle-tags {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.vehicle-tag-mini {
|
||||
padding: 5px 10px;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border-radius: 8px;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: #ffffff;
|
||||
border: 1px solid rgba(255, 255, 255, 0.20);
|
||||
}
|
||||
|
||||
.vehicle-tag-mini .material-icons { font-size: 15px; color: #FEE715; }
|
||||
.expand-indicator { color: #FEE715; }
|
||||
|
||||
.shuttle-separator {
|
||||
height: 1px;
|
||||
background: linear-gradient(to right, transparent, rgba(255,255,255,0.25), transparent);
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
|
||||
.shuttle-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
gap: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
.info-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.icon-yellow { color: #fee715; font-size: 20px; }
|
||||
.info-row .material-icons { color: #FEE715; font-size: 22px; }
|
||||
|
||||
.lang-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
background: rgba(254, 231, 21, 0.2);
|
||||
color: #fee715;
|
||||
padding: 2px 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 0.6rem;
|
||||
font-weight: 800;
|
||||
margin-top: 4px;
|
||||
width: fit-content;
|
||||
.info-row .label {
|
||||
font-size: 0.65rem;
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.lang-indicator .material-icons { font-size: 10px; }
|
||||
.info-row .value {
|
||||
font-size: 0.95rem;
|
||||
color: #ffffff;
|
||||
margin: 2px 0 0;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.card-footer-preview {
|
||||
.price-block {
|
||||
padding: 14px 0;
|
||||
border-top: 1px solid rgba(255,255,255,0.08);
|
||||
border-bottom: 1px solid rgba(255,255,255,0.08);
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.price-row-main {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.price-amount-big {
|
||||
font-size: 2rem;
|
||||
font-weight: 900;
|
||||
color: #FEE715;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.price-label-big {
|
||||
font-size: 0.85rem;
|
||||
color: rgba(255,255,255,0.75);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.price-row-secondary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.price-icon-secondary { font-size: 16px; color: rgba(255,255,255,0.55); }
|
||||
.price-amount-secondary { font-size: 1rem; font-weight: 800; color: rgba(255,255,255,0.85); }
|
||||
.price-label-secondary { font-size: 0.75rem; color: rgba(255,255,255,0.5); }
|
||||
|
||||
.contact-buttons-preview {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.contact-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.mini-contact-btn {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 16px;
|
||||
.btn-whatsapp-preview {
|
||||
width: 100%;
|
||||
background: #25d366;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 14px;
|
||||
border-radius: 12px;
|
||||
font-weight: 800;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s;
|
||||
gap: 8px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.mini-contact-btn.phone { background: rgba(255,255,255,0.1); color: white; border: 1px solid rgba(255,255,255,0.2); }
|
||||
.mini-contact-btn.wa { background: #25d366; color: white; box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3); }
|
||||
|
||||
.mini-contact-btn .material-icons { font-size: 24px; }
|
||||
.preview-hint {
|
||||
text-align: center;
|
||||
color: #94a3b8;
|
||||
font-size: 0.85rem;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.toggle-container {
|
||||
display: flex;
|
||||
@ -677,13 +788,6 @@ async function saveShuttle() {
|
||||
.nexus-switch input:checked + .slider { background-color: #fee715; }
|
||||
.nexus-switch input:checked + .slider:before { transform: translateX(20px); background-color: #101820; }
|
||||
|
||||
.preview-hint {
|
||||
text-align: center;
|
||||
color: #94a3b8;
|
||||
font-size: 0.85rem;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.message {
|
||||
text-align: center;
|
||||
padding: 12px;
|
||||
|
||||
@ -1,19 +1,21 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch, computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { couponsService } from '@/services/couponsService'
|
||||
import { businessService } from '@/services/businessService'
|
||||
import { couponsService } from '@/services/couponsService'
|
||||
import { shuttlesService } from '@/services/shuttlesService'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import { API_URL } from '@/services/apiClient'
|
||||
import type { Coupon, Business } from '@/types'
|
||||
import type { Coupon, Business, Shuttle } from '@/types'
|
||||
|
||||
const route = useRoute()
|
||||
const authStore = useAuthStore()
|
||||
|
||||
// State
|
||||
const activeTab = ref<'promotions' | 'businesses'>('promotions')
|
||||
const activeTab = ref<'promotions' | 'businesses' | 'shuttles'>('promotions')
|
||||
const coupons = ref<Coupon[]>([])
|
||||
const businesses = ref<Business[]>([])
|
||||
const shuttles = ref<Shuttle[]>([])
|
||||
const isLoading = ref(true)
|
||||
const searchQuery = ref('')
|
||||
const categoryFilter = ref('Todas')
|
||||
@ -61,7 +63,7 @@ const currentBusiness = ref<Partial<Business>>({
|
||||
const userName = localStorage.getItem('user_name') || 'Promotor'
|
||||
|
||||
onMounted(async () => {
|
||||
await Promise.all([loadCoupons(), loadBusinesses()])
|
||||
await Promise.all([loadCoupons(), loadBusinesses(), loadShuttles()])
|
||||
checkHash()
|
||||
})
|
||||
|
||||
@ -70,6 +72,8 @@ watch(() => route.hash, () => checkHash())
|
||||
function checkHash() {
|
||||
if (route.hash === '#businesses') {
|
||||
activeTab.value = 'businesses'
|
||||
} else if (route.hash === '#shuttles') {
|
||||
activeTab.value = 'shuttles'
|
||||
} else {
|
||||
activeTab.value = 'promotions'
|
||||
}
|
||||
@ -85,6 +89,16 @@ const filteredCoupons = computed(() => {
|
||||
})
|
||||
})
|
||||
|
||||
const filteredShuttles = computed(() => {
|
||||
return shuttles.value.filter(s => {
|
||||
const matchesSearch = s.route_name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
|
||||
(s.company_name?.toLowerCase().includes(searchQuery.value.toLowerCase()) ?? false) ||
|
||||
s.origin.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
|
||||
s.destination.toLowerCase().includes(searchQuery.value.toLowerCase())
|
||||
return matchesSearch
|
||||
})
|
||||
})
|
||||
|
||||
const filteredBusinesses = computed(() => {
|
||||
return businesses.value.filter(b => {
|
||||
const matchesSearch = b.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
|
||||
@ -115,6 +129,49 @@ async function loadBusinesses() {
|
||||
}
|
||||
}
|
||||
|
||||
async function loadShuttles() {
|
||||
try {
|
||||
shuttles.value = await shuttlesService.getAllShuttles()
|
||||
} catch (e) {
|
||||
console.error('Failed to load shuttles', e)
|
||||
}
|
||||
}
|
||||
|
||||
// Shuttle Methods
|
||||
async function toggleShuttleStatus(shuttle: Shuttle) {
|
||||
try {
|
||||
const token = localStorage.getItem('auth_token')
|
||||
const response = await fetch(`${API_URL}/api/shuttles/${shuttle.id}/status?is_active=${!shuttle.is_active}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Authorization': `Bearer ${token}` }
|
||||
})
|
||||
if (response.ok) {
|
||||
await loadShuttles()
|
||||
}
|
||||
} catch (e) {
|
||||
alert('Error al actualizar estado del shuttle')
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteShuttle(id: string) {
|
||||
if (confirm('¿Estás seguro de eliminar este transporte turístico?')) {
|
||||
try {
|
||||
const token = localStorage.getItem('auth_token')
|
||||
const response = await fetch(`${API_URL}/api/shuttles/${id}`, {
|
||||
method: 'DELETE',
|
||||
headers: { 'Authorization': `Bearer ${token}` }
|
||||
})
|
||||
if (response.ok) {
|
||||
await loadShuttles()
|
||||
} else {
|
||||
alert('No se pudo eliminar el shuttle')
|
||||
}
|
||||
} catch (e) {
|
||||
alert('Error al eliminar shuttle')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Business Methods
|
||||
function openCreateBusinessModal() {
|
||||
isEditingBusiness.value = false
|
||||
@ -316,17 +373,32 @@ async function toggleCouponStatus(coupon: Coupon) {
|
||||
<button :class="['tab-btn', { active: activeTab === 'businesses' }]" @click="activeTab = 'businesses'">
|
||||
Mis Negocios
|
||||
</button>
|
||||
<button :class="['tab-btn', { active: activeTab === 'shuttles' }]" @click="activeTab = 'shuttles'">
|
||||
Viajes Turísticos
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="tabs-actions">
|
||||
<div class="stats-header">
|
||||
<div class="stat-mini">
|
||||
<div class="stat-value">{{ coupons.length }}</div>
|
||||
<div class="stat-label">Total Cupones</div>
|
||||
<div v-if="activeTab === 'promotions'" class="stats-group">
|
||||
<div class="stat-mini">
|
||||
<div class="stat-value">{{ coupons.length }}</div>
|
||||
<div class="stat-label">Total Cupones</div>
|
||||
</div>
|
||||
<div class="stat-mini">
|
||||
<div class="stat-value active">{{ coupons.filter(c => c.is_active).length }}</div>
|
||||
<div class="stat-label">Activos</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-mini">
|
||||
<div class="stat-value active">{{ coupons.filter(c => c.is_active).length }}</div>
|
||||
<div class="stat-label">Activos</div>
|
||||
<div v-else-if="activeTab === 'shuttles'" class="stats-group">
|
||||
<div class="stat-mini">
|
||||
<div class="stat-value">{{ shuttles.length }}</div>
|
||||
<div class="stat-label">Total Shuttles</div>
|
||||
</div>
|
||||
<div class="stat-mini">
|
||||
<div class="stat-value active">{{ shuttles.filter(s => s.is_active).length }}</div>
|
||||
<div class="stat-label">Activos</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -338,6 +410,10 @@ async function toggleCouponStatus(coupon: Coupon) {
|
||||
<span class="material-icons">add</span>
|
||||
Nuevo Negocio
|
||||
</button>
|
||||
<button v-if="activeTab === 'shuttles'" class="primary-btn" @click="$router.push('/admin/shuttles')">
|
||||
<span class="material-icons">rocket_launch</span>
|
||||
Nuevo Shuttle
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -345,7 +421,7 @@ async function toggleCouponStatus(coupon: Coupon) {
|
||||
<div class="search-filter-bar">
|
||||
<div class="search-box">
|
||||
<span class="material-icons">search</span>
|
||||
<input v-model="searchQuery" type="text" :placeholder="activeTab === 'promotions' ? 'Buscar promoción...' : 'Buscar negocio...'">
|
||||
<input v-model="searchQuery" type="text" :placeholder="activeTab === 'promotions' ? 'Buscar promoción...' : (activeTab === 'businesses' ? 'Buscar negocio...' : 'Buscar shuttle...')">
|
||||
</div>
|
||||
<div class="filter-box">
|
||||
<span class="material-icons">filter_alt</span>
|
||||
@ -478,6 +554,64 @@ async function toggleCouponStatus(coupon: Coupon) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Shuttles Tab -->
|
||||
<div v-if="activeTab === 'shuttles'">
|
||||
<div v-if="shuttles.length === 0" class="empty-state">
|
||||
<span class="material-icons">directions_bus</span>
|
||||
<p>No hay shuttles turísticos registrados.</p>
|
||||
</div>
|
||||
<div v-else class="table-card">
|
||||
<table class="coupons-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Ruta / Empresa</th>
|
||||
<th class="text-center">Tipo Vehículo</th>
|
||||
<th class="text-center">Precio (Persona)</th>
|
||||
<th class="text-center">Estado</th>
|
||||
<th class="text-center">Acciones</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="shuttle in filteredShuttles" :key="shuttle.id">
|
||||
<td>
|
||||
<div class="title-cell">
|
||||
<div class="coupon-header-cell">
|
||||
<img :src="getImageUrl(shuttle.image_url)" class="coupon-mini-img" />
|
||||
<div>
|
||||
<strong>{{ shuttle.route_name }}</strong>
|
||||
<div class="business-tag">
|
||||
<span class="material-icons">business</span>
|
||||
{{ shuttle.company_name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center"><span class="badge">{{ shuttle.vehicle_type }}</span></td>
|
||||
<td class="text-center">
|
||||
<span class="discount-label">${{ shuttle.price_per_person }}</span>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<button
|
||||
:class="['status-toggle', { active: shuttle.is_active }]"
|
||||
@click="toggleShuttleStatus(shuttle)"
|
||||
>
|
||||
{{ shuttle.is_active ? 'Activo' : 'Inactivo' }}
|
||||
</button>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<div class="action-buttons justify-center">
|
||||
<button class="icon-btn delete" @click="deleteShuttle(shuttle.id)">
|
||||
<span class="material-icons">delete</span>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Coupon Modal -->
|
||||
|
||||
Reference in New Issue
Block a user