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

Merge branch 'main' of gitlab.com:openKMITL/micromobility-navigation

Browse source
This commit is contained in:
NekoVari 2023-09-22 12:58:31 +07:00
parent 6646748b58 cab24874f7
commit 54caf6d3ef
1 changed files with 46 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
src/views/Home.vue
View file

@ -14,30 +14,52 @@
<v-app-bar scroll-threshold="0"
class="mx-auto px-auto"
>
<div class="flex-grow-1">
<v-text-field
v-model="searchQuery"
@keyup.enter="performSearch"
@input="performSearch"
@click="toggleSearchBar()"
density="compact"
variant="solo"
prepend-inner-icon="mdi-magnify"
single-line
hide-details
></v-text-field>
<v-btn icon>
</div>
<v-btn icon @click="showSearchBar = !showSearchBar">
<v-icon>mdi-crosshairs-gps</v-icon>
</v-btn>
</v-app-bar>
</v-layout>
<div v-if="searchResults.length > 0" class="search-results">
<!-- <div v-if="searchResults.length > 0" class="search-results">
<ul>
<li v-for="result in searchResults" :key="result.place_id" @click="moveToLocation(result)">
{{ result.display_name }}
</li>
</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/> -->
<ol-map
:loadTilesWhileAnimating="true"
@ -84,14 +106,17 @@ const popupData = ref(null);
//search
const searchQuery = ref("");
const searchResults = ref([]);
const showSearchBar = ref(false);
const toggleSearchBar = () => {
showSearchBar.value = !showSearchBar.value;
};
const moveToLocation = (result) => {
// Extract latitude and longitude from the selected result
const lat = parseFloat(result.lat);
const lon = parseFloat(result.lon);
// Update the center coordinates to move the camera to the selected location
center.value = [lon, lat];
showSearchBar.value = false;
};
const performSearch = async () => {
@ -100,14 +125,12 @@ const performSearch = async () => {
`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);
} catch (error) {
console.error("Error fetching search results:", error);
}
};
//Show API
const handleMapClick = async event => {
const clickedCoordinate = event.coordinate;