add next stage of destinationcard

This commit is contained in:
SRP-mango 2023-11-23 01:39:14 +07:00
parent 58fcf52cd4
commit fe568132a1
3 changed files with 240 additions and 16 deletions

View file

@ -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>
<v-btn
</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
View file

View 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 () => {