Hanzo_Dev/SIB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: simplify route search to show only route list

Browse Source
This commit is contained in:
Johan Samudio
2026-02-27 23:49:47 -05:00
parent cc92b93709
commit f5f0fbc41d
1 changed files with 34 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

207
frontend/src/views/MapView.vue
View File

@ -99,6 +99,7 @@ function selectStopFromSearch(stop: BusStop) {
function openUberSearch() {
showUberSearch.value = true;
showRoutesToggle.value = true; // Forzar que al abrir estemos en modo rutas
}
function closeUberSearch() {
@ -852,8 +853,8 @@ async function calculateWalkingPath(origin: { lat: number, lng: number }, target
class="uber-search-trigger"
@click="openUberSearch"
>
<span class="material-icons search-icon">search</span>
<span class="trigger-text">¿A dónde vamos?</span>
<span class="material-icons search-icon">directions_bus</span>
<span class="trigger-text">Ver Rutas</span>
</div>
</div>
@ -865,102 +866,46 @@ async function calculateWalkingPath(origin: { lat: number, lng: number }, target
<button class="back-btn" @click="closeUberSearch">
<span class="material-icons">arrow_back</span>
</button>
<div class="search-title">Planear viaje</div>
<div class="search-title">Rutas Disponibles</div>
</div>
<div class="search-inputs-wrapper">
<div class="location-line">
<div class="dot-origin"></div>
<div class="line"></div>
<div class="dot-dest"></div>
</div>
<div class="inputs-column">
<div class="input-group">
<input
v-model="originQuery"
type="text"
placeholder="Mi ubicación"
class="uber-input"
readonly
>
</div>
<div class="input-group">
<input
v-model="destinationQuery"
type="text"
placeholder="¿A dónde vamos?"
class="uber-input focusable"
autofocus
@focus="onInputFocus"
@blur="onInputBlur"
>
<button v-if="destinationQuery" @click="destinationQuery = ''" class="clear-btn">
<span class="material-icons">close</span>
</button>
</div>
</div>
</div>
<div class="search-options">
<label class="route-toggle">
<input type="checkbox" v-model="showRoutesToggle">
<span>Ver Rutas</span>
</label>
<!-- Inputs and Toggle removed per request -->
<div class="search-actions-header">
<button
v-if="routeStore.selectedRouteId || markers.length > 0"
class="clear-map-btn"
@click="clearAllMapData"
>
<span class="material-icons">layers_clear</span>
<span class="material-icons text-sm">layers_clear</span>
Limpiar Mapa
</button>
</div>
<!-- Results -->
<div class="uber-results">
<!-- Bus Stop Results -->
<template v-if="!showRoutesToggle">
<div
v-for="stop in filteredSearchResults"
:key="stop.id"
class="uber-result-item"
@click="selectStopFromSearch(stop)"
>
<div class="result-icon">
<span class="material-icons">directions_bus</span>
</div>
<div class="result-content">
<div class="result-name">{{ stop.name }}</div>
<div class="result-address">Parada de Autobús</div>
</div>
<span class="material-icons check-icon">chevron_right</span>
<div class="uber-results custom-scrollbar">
<!-- Listado simplificado de rutas -->
<div
v-for="route in routeStore.allRoutes"
:key="route.id"
class="uber-result-item"
:class="{ 'selected-route': route.id === routeStore.selectedRouteId }"
@click="selectRouteAndClose(route.id, route.name)"
>
<div class="result-icon">
<span class="material-icons">directions_bus</span>
</div>
</template>
<!-- Routes List -->
<template v-else>
<div
v-for="route in routeStore.allRoutes"
:key="route.id"
class="uber-result-item"
:class="{ 'selected-route': route.id === routeStore.selectedRouteId }"
@click="selectRouteAndClose(route.id, route.name)"
>
<div class="result-icon">
<span class="material-icons">route</span>
</div>
<div class="result-info">
<div class="result-name">{{ route.name }}</div>
<div class="result-address">Ruta de transporte público</div>
</div>
<span v-if="route.id === routeStore.selectedRouteId" class="material-icons check-icon">check_circle</span>
<div class="result-content">
<div class="result-name">{{ route.name }}</div>
<div class="result-address">Ruta de Autobús</div>
</div>
</template>
</div>
</div>
<span class="material-icons check-icon">
{{ route.id === routeStore.selectedRouteId ? 'check_circle' : 'chevron_right' }}
</span>
</div>
</div> <!-- Fin uber-results -->
</div> <!-- Fin uber-search-panel -->
</Transition>
</div>
</div> <!-- Fin uber-search-container -->
<!-- Offers Bottom Sheet -->
<Transition name="sheet-slide">
@ -1588,79 +1533,12 @@ async function calculateWalkingPath(origin: { lat: number, lng: number }, target
letter-spacing: -0.02em;
}
.search-inputs-wrapper {
.search-actions-header {
display: flex;
gap: 16px;
background: var(--bg-secondary);
padding: 14px;
border-radius: 16px;
margin-bottom: 12px;
border: 1px solid var(--border-color);
}
.location-line {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 15px;
}
.dot-origin {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--active-color);
box-shadow: 0 0 10px var(--active-color);
}
.line {
width: 2px;
height: 45px;
background: linear-gradient(to bottom, var(--active-color), var(--border-color));
margin: 4px 0;
}
.dot-dest {
width: 10px;
height: 10px;
border-radius: 2px;
background: #fff;
}
.inputs-column {
flex: 1;
display: flex;
flex-direction: column;
gap: 16px;
}
.input-group {
position: relative;
display: flex;
align-items: center;
}
.uber-input {
width: 100%;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border-color);
padding: 12px 16px;
border-radius: 12px;
font-size: 1rem;
color: var(--text-primary);
}
.uber-input:focus {
background: rgba(255, 255, 255, 0.07);
border-color: var(--active-color);
box-shadow: 0 0 0 4px rgba(254, 231, 21, 0.1);
}
.search-options {
padding: 12px 0;
border-top: 1px solid var(--border-color);
display: flex;
justify-content: space-between;
align-items: center;
justify-content: flex-end;
padding: 8px 0 16px;
border-bottom: 1px solid var(--border-color);
margin-bottom: 8px;
}
.clear-map-btn {
@ -1689,24 +1567,7 @@ async function calculateWalkingPath(origin: { lat: number, lng: number }, target
}
.clear-map-btn .material-icons {
font-size: 20px;
}
.route-toggle {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
font-weight: 700;
color: var(--text-primary);
font-size: 1rem;
}
.route-toggle input {
width: 20px;
height: 20px;
cursor: pointer;
accent-color: var(--active-color);
font-size: 18px;
}
.uber-results {