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 <v-card
class="stick-bottom card-height" class="stick-bottom card-height"
width="100%" width="100%"
height="60vh" :height="cardHeight"
style="padding-top: 15px; font-weight:bold;" style="padding-top: 15px;"
:title="nearestStructureData.display_name"
:subtitle="destination.subTitle"
> >
<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> <v-list-item>
<template v-slot:prepend> <template v-slot:prepend>
<v-avatar> <v-avatar>
@ -29,7 +34,7 @@
/> />
</v-avatar> </v-avatar>
</template> </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>
<v-list-item> <v-list-item>
@ -49,15 +54,150 @@
<v-card-actions class="stick-bottom btnlist-height justify-sa"> <v-card-actions class="stick-bottom btnlist-height justify-sa">
<v-btn rounded="xl" variant="tonal" width="45vw" height="44px"> <v-btn rounded="xl" variant="tonal" width="45vw" height="44px">
เพมลงในสถานทโปรด</v-btn> เพมลงในสถานทโปรด</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-btn>
</v-card-actions> </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 <v-btn
@click="closePopup" @click="closePopup"
variant="tonal" icon="mdi-close" style="position: absolute; top: 15px; right: 15px;" /> variant="tonal" icon="mdi-close" style="position: absolute; top: 15px; right: 15px;" />
</v-card> </v-card>
</template> </template>
@ -65,6 +205,7 @@
import findLocation from '../../icons/Material/find-location.svg'; import findLocation from '../../icons/Material/find-location.svg';
import clock from '../../icons/Material/clock.svg'; import clock from '../../icons/Material/clock.svg';
import check from '../../icons/Material/check-round.svg'; import check from '../../icons/Material/check-round.svg';
import DestinationInfoCard from '@/components/DestinationInfoCard.vue';
const destination = { const destination = {
title: "อนุสาวรีย์ชัยสมรภูมิ", title: "อนุสาวรีย์ชัยสมรภูมิ",
subTitle: "ราชเทวี , กรุงเทพมหานคร" subTitle: "ราชเทวี , กรุงเทพมหานคร"
@ -97,14 +238,28 @@ export default {
data() { data() {
return { return {
showPopup: true, showPopup: true,
showRoute: false,
}; };
}, },
computed: {
cardHeight() {
return this.showRoute ? '45vh' : '60vh';
},
},
methods: { methods: {
closePopup() { closePopup() {
this.showPopup = false; this.showPopup = false;
this.onClose(); this.onClose();
}, },
viewRoute() {
this.showRoute = true;
}, },
viewPopup(){
this.showPopup = true;
this.showRoute = false;
}
},
}; };
</script> </script>
@ -145,5 +300,80 @@ export default {
width: 100%; width: 100%;
height: 45vh; 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> </style>

0
src/iconsets/adwaita.ts Normal file
View file

View file

@ -5,12 +5,6 @@
class="router-view" class="router-view"
/> />
<!-- <Popup
v-if="popupData"
:nearestStructureData="popupData"
:onClose="closePopup"
/> -->
<DestinationInfoCard <DestinationInfoCard
class="DestinationInfoCard" class="DestinationInfoCard"
v-if="popupData" v-if="popupData"
@ -121,7 +115,7 @@ const moveToLocation = (result) => {
const lon = parseFloat(result.lon); const lon = parseFloat(result.lon);
center.value = [lon, lat]; center.value = [lon, lat];
showSearchBar.value = false; showSearchBar.value = false;
popupData.value = result; // Set the selected search result as popupData popupData.value = result;
}; };
const performSearch = async () => { const performSearch = async () => {