little-lines/frontend
1
0
Fork 0
mirror of https://gitlab.com/little-lines/frontend.git synced 2024-11-22 12:16:53 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

hide search bar after search

Browse source
This commit is contained in:
SRP-mango 2023-09-14 23:57:18 +07:00
parent 6646748b58
commit e7356b3c3c
1 changed files with 30 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
src/views/Home.vue
View file

@ -14,30 +14,36 @@
<v-app-bar scroll-threshold="0" <v-app-bar scroll-threshold="0"
class="mx-auto px-auto" class="mx-auto px-auto"
> >
<v-text-field
v-model="searchQuery" <div class="flex-grow-1">
@keyup.enter="performSearch" <v-text-field
@input="performSearch" v-model="searchQuery"
density="compact" @keyup.enter="performSearch"
variant="solo" @input="performSearch"
prepend-inner-icon="mdi-magnify" density="compact"
single-line variant="solo"
hide-details prepend-inner-icon="mdi-magnify"
></v-text-field> single-line
<v-btn icon> hide-details
></v-text-field>
</div>
<v-btn icon @click="showSearchBar = !showSearchBar">
<v-icon>mdi-crosshairs-gps</v-icon> <v-icon>mdi-crosshairs-gps</v-icon>
</v-btn> </v-btn>
</v-app-bar> </v-app-bar>
</v-layout> </v-layout>
<div v-if="searchResults.length > 0" class="search-results"> <div v-if="!hideSearchResults && searchResults.length > 0" class="search-results">
<ul> <ul>
<li v-for="result in searchResults" :key="result.place_id" @click="moveToLocation(result)"> <li v-for="result in searchResults" :key="result.place_id" @click="moveToLocation(result)">
{{ result.display_name }} {{ result.display_name }}
</li> </li>
</ul> </ul>
</div> </div>
<!-- <map/> --> <!-- <map/> -->
<ol-map <ol-map
:loadTilesWhileAnimating="true" :loadTilesWhileAnimating="true"
@ -84,14 +90,15 @@ const popupData = ref(null);
//search //search
const searchQuery = ref(""); const searchQuery = ref("");
const searchResults = ref([]); const searchResults = ref([]);
const showSearchBar = ref(false);
const hideSearchResults = ref(true);
const moveToLocation = (result) => { const moveToLocation = (result) => {
// Extract latitude and longitude from the selected result
const lat = parseFloat(result.lat); const lat = parseFloat(result.lat);
const lon = parseFloat(result.lon); const lon = parseFloat(result.lon);
// Update the center coordinates to move the camera to the selected location
center.value = [lon, lat]; center.value = [lon, lat];
hideSearchResults.value = true;
}; };
const performSearch = async () => { const performSearch = async () => {
@ -100,14 +107,14 @@ const performSearch = async () => {
`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(searchQuery.value)}` `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(searchQuery.value)}`
); );
// Process the search results and limit to, let's say, 5 results
searchResults.value = response.data.slice(0, 5); searchResults.value = response.data.slice(0, 5);
hideSearchResults.value = false;
} catch (error) { } catch (error) {
console.error("Error fetching search results:", error); console.error("Error fetching search results:", error);
} }
}; };
//Show API //Show API
const handleMapClick = async event => { const handleMapClick = async event => {
const clickedCoordinate = event.coordinate; const clickedCoordinate = event.coordinate;