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

This commit is contained in:
NekoVari 2023-09-30 12:06:35 +07:00
commit 2ebc4f571d
3 changed files with 50 additions and 19 deletions

View file

@ -1,16 +1,10 @@
<template> <template>
<v-img
class="image"
src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg"
cover
></v-img>
<v-card <v-card
class="stick-bottom card-height" class="stick-bottom card-height"
width="100%" width="100%"
height="60vh" height="60vh"
style="padding-top: 15px; font-weight:bold;" style="padding-top: 15px; font-weight:bold;"
:title="destination.title" :title="nearestStructureData.display_name"
:subtitle="destination.subTitle" :subtitle="destination.subTitle"
> >
@ -59,7 +53,9 @@
เสนทาง</v-btn> เสนทาง</v-btn>
</v-card-actions> </v-card-actions>
<v-btn :to="{name: 'favorite'}" variant="tonal" icon="mdi-close" style="position: absolute; top: 15px; right: 15px;" /> <v-btn
@click="closePopup"
variant="tonal" icon="mdi-close" style="position: absolute; top: 15px; right: 15px;" />
</v-card> </v-card>
@ -92,6 +88,26 @@ const detial = [
] ]
</script> </script>
<script>
export default {
props: {
nearestStructureData: Object,
onClose: Function,
},
data() {
return {
showPopup: true,
};
},
methods: {
closePopup() {
this.showPopup = false;
this.onClose();
},
},
};
</script>
<style> <style>
.stick-bottom { .stick-bottom {
position: fixed; position: fixed;

View file

@ -8,6 +8,9 @@
</template> </template>
<script> <script>
import DestinationInfoCard from '@/components/DestinationInfoCard.vue';
export default { export default {
props: { props: {
nearestStructureData: Object, nearestStructureData: Object,

View file

@ -1,12 +1,24 @@
<template> <template>
<div id="app"> <div id="app">
<router-view /> <router-view
<Popup class="router-view"
/>
<!-- <Popup
v-if="popupData" v-if="popupData"
:nearestStructureData="popupData" :nearestStructureData="popupData"
:onClose="closePopup" :onClose="closePopup"
/> -->
<DestinationInfoCard
class="DestinationInfoCard"
v-if="popupData"
:nearestStructureData="popupData"
:onClose="closePopup"
/> />
</div> </div>
<!-- <searchbar/> --> <!-- <searchbar/> -->
@ -38,15 +50,6 @@
</v-layout> </v-layout>
<!-- <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> -->
<v-list v-if="searchResults.length > 0 && !showSearchBar" class="search-results"> <v-list v-if="searchResults.length > 0 && !showSearchBar" class="search-results">
<v-list-item <v-list-item
v-for="result in searchResults" v-for="result in searchResults"
@ -95,6 +98,7 @@ import searchbar from '@/components/searchbar.vue';
import Popup from "@/components/Popup.vue"; // Import the Popup componen import Popup from "@/components/Popup.vue"; // Import the Popup componen
import { ref } from "vue"; import { ref } from "vue";
import axios from "axios"; import axios from "axios";
import DestinationInfoCard from '@/components/DestinationInfoCard.vue';
const center = ref([100.538611, 13.764722]); const center = ref([100.538611, 13.764722]);
const projection = ref("EPSG:4326"); const projection = ref("EPSG:4326");
@ -189,4 +193,12 @@ const closePopup = () => {
.search-results li:hover { .search-results li:hover {
background-color: #f0f0f0; background-color: #f0f0f0;
} }
.router-view{
z-index: -15;
}
.DestinationInfoCard{
z-index: 15;
}
</style> </style>