little-lines/frontend
Archived
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases 2 Activity

toggle search bar

Browse source
This commit is contained in:
SRP-mango 2023-09-15 01:36:47 +07:00
parent e7356b3c3c
commit cab24874f7
1 changed files with 27 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/views/Home.vue
View file

@ -20,6 +20,7 @@
v-model="searchQuery" v-model="searchQuery"
@keyup.enter="performSearch" @keyup.enter="performSearch"
@input="performSearch" @input="performSearch"
@click="toggleSearchBar()"
density="compact" density="compact"
variant="solo" variant="solo"
prepend-inner-icon="mdi-magnify" prepend-inner-icon="mdi-magnify"
@ -37,13 +38,28 @@
</v-layout> </v-layout>
<div v-if="!hideSearchResults && searchResults.length > 0" class="search-results"> <!-- <div v-if="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> -->
<v-list v-if="searchResults.length > 0 && !showSearchBar" class="search-results">
<v-list-item
v-for="result in searchResults"
:key="result.place_id"
@click="moveToLocation(result),toggleSearchBar()"
>
<v-list-item-icon>
<v-icon>mdi-map-marker</v-icon>
</v-list-item-icon>
{{ result.display_name }}
</v-list-item>
</v-list>
<!-- <map/> --> <!-- <map/> -->
<ol-map <ol-map
:loadTilesWhileAnimating="true" :loadTilesWhileAnimating="true"
@ -91,14 +107,16 @@ const popupData = ref(null);
const searchQuery = ref(""); const searchQuery = ref("");
const searchResults = ref([]); const searchResults = ref([]);
const showSearchBar = ref(false); const showSearchBar = ref(false);
const hideSearchResults = ref(true);
const toggleSearchBar = () => {
showSearchBar.value = !showSearchBar.value;
};
const moveToLocation = (result) => { const moveToLocation = (result) => {
const lat = parseFloat(result.lat); const lat = parseFloat(result.lat);
const lon = parseFloat(result.lon); const lon = parseFloat(result.lon);
center.value = [lon, lat]; center.value = [lon, lat];
hideSearchResults.value = true; showSearchBar.value = false;
}; };
const performSearch = async () => { const performSearch = async () => {
@ -108,8 +126,6 @@ const performSearch = async () => {
); );
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);
} }