add next stage of destinationcard
This commit is contained in:
SRP-mango
parent
58fcf52cd4
commit
fe568132a1
|
|
@ -2,13 +2,18 @@
|
|||
<v-card
|
||||
class="stick-bottom card-height"
|
||||
width="100%"
|
||||
height="60vh"
|
||||
style="padding-top: 15px; font-weight:bold;"
|
||||
:title="nearestStructureData.display_name"
|
||||
:subtitle="destination.subTitle"
|
||||
:height="cardHeight"
|
||||
style="padding-top: 15px;"
|
||||
>
|
||||
|
||||
<v-list lines="one">
|
||||
<div v-if="!showRoute">
|
||||
<v-list>
|
||||
|
||||
<v-list-item>
|
||||
<v-list-item-title class="title-text">{{nearestStructureData.display_name}}</v-list-item-title>
|
||||
<v-list-item-subtitle class="subtitle-text">{{destination.subTitle}}</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
|
||||
<v-list-item>
|
||||
<template v-slot:prepend>
|
||||
<v-avatar>
|
||||
|
|
@ -29,7 +34,7 @@
|
|||
/>
|
||||
</v-avatar>
|
||||
</template>
|
||||
<v-list-item-title class="text-decoration-underline">{{detial[1].title}}</v-list-item-title>
|
||||
<v-list-item-title class="text-decoration-underline">{{nearestStructureData.lat}} , {{nearestStructureData.lon}}</v-list-item-title>
|
||||
</v-list-item>
|
||||
|
||||
<v-list-item>
|
||||
|
|
@ -49,15 +54,150 @@
|
|||
<v-card-actions class="stick-bottom btnlist-height justify-sa">
|
||||
<v-btn rounded="xl" variant="tonal" width="45vw" height="44px">
|
||||
เพิ่มลงในสถานที่โปรด</v-btn>
|
||||
<v-btn rounded="xl" variant="flat" class="text-white" width="45vw" height="44px" color="#f16322">
|
||||
<v-btn @click="viewRoute" rounded="xl" variant="flat" class="text-white" width="45vw" height="44px" color="#f16322">
|
||||
ดูเส้นทาง</v-btn>
|
||||
</v-card-actions>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div v-else>
|
||||
|
||||
<v-list-item class="d-flex justify-center">
|
||||
<v-btn-toggle
|
||||
class="btn-toggle"
|
||||
mandatory
|
||||
>
|
||||
<v-btn class="btn"><v-icon class="icon-walk"></v-icon></v-btn>
|
||||
<v-btn class="btn"><v-icon class="icon-wheelchair"></v-icon></v-btn>
|
||||
</v-btn-toggle>
|
||||
</v-list-item>
|
||||
|
||||
<v-list-item class="d-flex justify-center">
|
||||
<v-toolbar
|
||||
dense
|
||||
floating
|
||||
style="width: 90vw; background-color: transparent;"
|
||||
>
|
||||
<v-icon
|
||||
style="
|
||||
background-color: transparent;
|
||||
border-radius: 10px;
|
||||
width: 12vw;
|
||||
height: 100%;
|
||||
">
|
||||
<v-icon
|
||||
class="icon-flag"
|
||||
style="background-color: transparent;"
|
||||
>
|
||||
</v-icon>
|
||||
|
||||
</v-icon>
|
||||
|
||||
<v-text-field
|
||||
hide-details
|
||||
prepend-icon="mdi-magnify"
|
||||
style="
|
||||
|
||||
border-radius: 10px;
|
||||
background-color: rgba(230, 230, 230, 1);
|
||||
padding-left: 2vw;"
|
||||
variant="invert-solo"
|
||||
flat
|
||||
></v-text-field>
|
||||
<v-btn
|
||||
hide-details
|
||||
style="
|
||||
background-color: rgba(230, 230, 230, 1);
|
||||
margin-left: 2vw;
|
||||
margin-right: 1vw;
|
||||
border-radius: 10px;
|
||||
height: 86%;"
|
||||
flat
|
||||
>
|
||||
<v-icon class="icon-plus"></v-icon>
|
||||
</v-btn>
|
||||
</v-toolbar>
|
||||
</v-list-item>
|
||||
|
||||
<v-list-item class="d-flex justify-center"
|
||||
style="overflow-x:hidden"
|
||||
>
|
||||
<v-toolbar
|
||||
dense
|
||||
floating
|
||||
style="
|
||||
width: 90vw;
|
||||
background-color: transparent;
|
||||
flex-wrap: nowrap;
|
||||
overflow-y: hidden;"
|
||||
>
|
||||
|
||||
<v-icon
|
||||
style="
|
||||
background-color: transparent;
|
||||
border-radius: 10px;
|
||||
width: 12vw;
|
||||
height: 100%;
|
||||
">
|
||||
<v-icon
|
||||
class="icon-flag"
|
||||
style="background-color: rgba(241, 99, 34, 1);"
|
||||
>
|
||||
</v-icon>
|
||||
|
||||
</v-icon>
|
||||
<v-text-field
|
||||
@click="viewPopup"
|
||||
readonly
|
||||
hide-details
|
||||
prepend-icon="mdi-magnify"
|
||||
style="
|
||||
border-radius: 10px;
|
||||
background-color: rgba(230, 230, 230, 1);
|
||||
padding-left: 2vw;
|
||||
"
|
||||
variant="invert-solo"
|
||||
flat
|
||||
:model-value="nearestStructureData.display_name"
|
||||
>
|
||||
|
||||
</v-text-field>
|
||||
<v-btn
|
||||
hide-details
|
||||
style="
|
||||
background-color: rgba(230, 230, 230, 1);
|
||||
margin-left: 2vw;
|
||||
margin-right: 1vw;
|
||||
border-radius: 10px;
|
||||
height: 86%;
|
||||
"
|
||||
flat
|
||||
>
|
||||
|
||||
<v-icon class="icon-vertical-arrows"></v-icon>
|
||||
</v-btn>
|
||||
</v-toolbar>
|
||||
</v-list-item>
|
||||
|
||||
<v-list-item class="d-flex justify-center">
|
||||
<v-card-text>0 นาที</v-card-text>
|
||||
</v-list-item>
|
||||
|
||||
<v-card-actions class="stick-bottom btnlist-height justify-sa">
|
||||
<v-btn @click="viewPopup" rounded="xl" variant="tonal" width="45vw" height="44px">
|
||||
ย้อนกลับ</v-btn>
|
||||
<v-btn @click="viewRoute" rounded="xl" variant="flat" class="text-white" width="45vw" height="44px" color="#f16322">
|
||||
เริ่มการนำทาง</v-btn>
|
||||
|
||||
</v-card-actions>
|
||||
</div>
|
||||
|
||||
<v-btn
|
||||
@click="closePopup"
|
||||
variant="tonal" icon="mdi-close" style="position: absolute; top: 15px; right: 15px;" />
|
||||
|
||||
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
|
|
@ -65,6 +205,7 @@
|
|||
import findLocation from '../../icons/Material/find-location.svg';
|
||||
import clock from '../../icons/Material/clock.svg';
|
||||
import check from '../../icons/Material/check-round.svg';
|
||||
import DestinationInfoCard from '@/components/DestinationInfoCard.vue';
|
||||
const destination = {
|
||||
title: "อนุสาวรีย์ชัยสมรภูมิ",
|
||||
subTitle: "ราชเทวี , กรุงเทพมหานคร"
|
||||
|
|
@ -97,14 +238,28 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
showPopup: true,
|
||||
showRoute: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
cardHeight() {
|
||||
return this.showRoute ? '45vh' : '60vh';
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
closePopup() {
|
||||
this.showPopup = false;
|
||||
this.onClose();
|
||||
},
|
||||
viewRoute() {
|
||||
this.showRoute = true;
|
||||
},
|
||||
viewPopup(){
|
||||
this.showPopup = true;
|
||||
this.showRoute = false;
|
||||
}
|
||||
},
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -145,5 +300,80 @@ export default {
|
|||
width: 100%;
|
||||
height: 45vh;
|
||||
}
|
||||
|
||||
.title-text
|
||||
{
|
||||
color: rgba(0, 0, 0, 1);
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
letter-spacing: 0px;
|
||||
text-decoration: none;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.sutitle-text{
|
||||
color: rgba(155, 155, 155, 1);
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 1.2;
|
||||
letter-spacing: 0px;
|
||||
text-decoration: none;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.icon-walk {
|
||||
background-color: #000000;
|
||||
-webkit-mask: url(icons/Adwaita/walk.svg) no-repeat center;
|
||||
mask: url(icons/Adwaita/walk.svg) no-repeat center;
|
||||
}
|
||||
.icon-wheelchair {
|
||||
background-color: #000000;
|
||||
-webkit-mask: url(icons/Adwaita/wheelchair.svg) no-repeat center;
|
||||
mask: url(icons/Adwaita/wheelchair.svg) no-repeat center;
|
||||
}
|
||||
.icon-plus {
|
||||
background-color: #000000;
|
||||
-webkit-mask: url(icons/Adwaita/plus.svg) no-repeat center;
|
||||
mask: url(icons/Adwaita/plus.svg) no-repeat center;
|
||||
}
|
||||
.icon-vertical-arrows {
|
||||
background-color: #000000;
|
||||
-webkit-mask: url(icons/Adwaita/vertical-arrows.svg) no-repeat center;
|
||||
mask: url(icons/Adwaita/vertical-arrows.svg) no-repeat center;
|
||||
}
|
||||
.icon-flag {
|
||||
background-color: #000000;
|
||||
-webkit-mask: url(icons/Adwaita/flag.svg) no-repeat center;
|
||||
mask: url(icons/Adwaita/flag.svg) no-repeat center;
|
||||
}
|
||||
|
||||
.btn-toggle
|
||||
{
|
||||
border-radius: 10px;
|
||||
background-color: rgba(230, 230, 230, 1);
|
||||
}
|
||||
|
||||
.btn-toggle .btn
|
||||
{
|
||||
border-radius: 0px;
|
||||
background-color: rgba(230, 230, 230, 1);
|
||||
}
|
||||
|
||||
.v-input__control
|
||||
{
|
||||
|
||||
max-height: 6vh;
|
||||
max-width: 50vw;
|
||||
}
|
||||
|
||||
.v-field__input
|
||||
{
|
||||
/* font-size: 14px; */
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
0
src/iconsets/adwaita.ts
Normal file
0
src/iconsets/adwaita.ts
Normal file
|
|
@ -5,12 +5,6 @@
|
|||
class="router-view"
|
||||
/>
|
||||
|
||||
<!-- <Popup
|
||||
v-if="popupData"
|
||||
:nearestStructureData="popupData"
|
||||
:onClose="closePopup"
|
||||
/> -->
|
||||
|
||||
<DestinationInfoCard
|
||||
class="DestinationInfoCard"
|
||||
v-if="popupData"
|
||||
|
|
@ -121,7 +115,7 @@ const moveToLocation = (result) => {
|
|||
const lon = parseFloat(result.lon);
|
||||
center.value = [lon, lat];
|
||||
showSearchBar.value = false;
|
||||
popupData.value = result; // Set the selected search result as popupData
|
||||
popupData.value = result;
|
||||
};
|
||||
|
||||
const performSearch = async () => {
|
||||
|
|
|
|||
Reference in a new issue