feature: display infoWheelchair in dest card

This commit is contained in:
SRP-mango 2023-12-09 23:03:53 +07:00
parent c5a5efbf01
commit cb211c9b77

View file

@ -16,19 +16,17 @@
<v-list-item>
<template v-slot:prepend>
<v-avatar>
<img :src="detial[0].icon"
class="iconCheck"
/>
<img :src="wheelchairIcon" :class="wheelchairIconClass"/>
</v-avatar>
</template>
<v-list-item-title class="textCheck">{{detial[0].title}}</v-list-item-title>
<v-list-item-subtitle ><a href="https://wiki.openstreetmap.org/wiki/Key:wheelchair" class="knowMore">{{detial[0].subtitle}}</a></v-list-item-subtitle>
<v-list-item-title :class="wheelchairTextColorClass">{{ wheelchairAccessText }}</v-list-item-title>
<v-list-item-subtitle ><a href="https://wiki.openstreetmap.org/wiki/Key:wheelchair" class="knowMore">เรยนรเพมเต</a></v-list-item-subtitle>
</v-list-item>
<v-list-item>
<template v-slot:prepend>
<v-avatar>
<img :src="detial[1].icon"
<img :src="findLocation"
class="icon"
/>
</v-avatar>
@ -36,16 +34,16 @@
<v-list-item-title class="text-decoration-underline">{{nearestStructureData.lon}} , {{nearestStructureData.lat}}</v-list-item-title>
</v-list-item>
<v-list-item>
<!-- <v-list-item>
<template v-slot:prepend>
<v-avatar>
<img :src="detial[2].icon"
<img :src="clock"
class="icon"
/>
</v-avatar>
</template>
<v-list-item-title class="text-decoration-underline">{{nearestStructureData.infoWheelchair}}</v-list-item-title>
</v-list-item>
</v-list-item> -->
</v-list>
@ -204,28 +202,30 @@
import findLocation from '../../icons/Material/find-location.svg';
import clock from '../../icons/Material/clock.svg';
import check from '../../icons/Material/check-round.svg';
import cross from '../../icons/Material/cross.svg';
// import DestinationInfoCard from '@/components/DestinationInfoCard.vue';
// const destination = {
// title: "",
// subTitle: " , "
// }
const detial = [
{
icon: check,
subtitle: 'เรียนรู้เพิ่มเติม',
title: 'Unrestricted Wheelchair access',
},
{
icon: findLocation,
subtitle: '',
title: '13.76493, 100.53828',
},
{
icon: clock,
subtitle: '',
title: 'Mo-Su 11:30-22:00',
},
]
// const detial = [
// {
// icon: check,
// subtitle: '',
// title: 'Unrestricted Wheelchair access',
// },
// {
// icon: findLocation,
// subtitle: '',
// title: '13.76493, 100.53828',
// },
// {
// icon: clock,
// subtitle: '',
// title: 'Mo-Su 11:30-22:00',
// },
// ]
</script>
<script>
@ -235,19 +235,19 @@ export default {
nearestStructureData: Object,
onClose: Function,
infoWheelchair: String
},
data() {
return {
showPopup: true,
showRoute: false,
userLocation: null,
isLocationRequested: false,
isLocationRequested: false,
};
},
computed: {
cardHeight() {
return this.showRoute ? '45vh' : '60vh';
return this.showRoute ? '45vh' : '50vh';
},
formattedLocation() {
if (this.isLocationRequested && !this.userLocation) {
@ -257,6 +257,60 @@ export default {
}
return 'Location not available';
},
//icon
wheelchairIcon() {
switch(this.nearestStructureData.infoWheelchair) {
case 'yes':
return check;
case 'limited':
return check;
case 'no':
return cross;
default:
return cross;
}
},
//icon-color
wheelchairIconClass() {
// return this.nearestStructureData.infoWheelchair === 'limited' ? 'iconCheckLimited' : 'iconCheck';
switch(this.nearestStructureData.infoWheelchair) {
case 'limited':
return 'iconCheckLimited';
case 'no':
return 'iconCheckNo';
default:
return 'iconCheck';
}
},
//text
wheelchairAccessText() {
switch(this.nearestStructureData.infoWheelchair) {
case 'yes':
return 'Unrestricted Wheelchair access';
case 'limited':
return 'Limited Wheelchair access';
case 'no':
return 'No Wheelchair access';
default:
return 'Wheelchair access information not available';
}
},
//text-color
wheelchairTextColorClass() {
switch(this.nearestStructureData.infoWheelchair) {
case 'limited':
return 'textColorLimited';
case 'no':
return 'textColorNo';
default:
return 'textColorDefault';
}
}
},
methods: {
closePopup() {
@ -452,6 +506,7 @@ export default {
mask: url(icons/Adwaita/flag.svg) no-repeat center;
}
.btn-toggle
{
border-radius: 10px;
@ -476,5 +531,33 @@ export default {
padding: 0;
}
/* .iconCheck {
background-color: #26a269;
} */
.iconCheckLimited {
width: 30px;
height: 30px;
filter: invert(67%) sepia(20%) saturate(6000%) hue-rotate(2deg) brightness(100%) contrast(101%);
}
.iconCheckNo {
width: 30px;
height: 30px;
filter: invert(20%) sepia(100%) saturate(7500%) hue-rotate(360deg) brightness(90%) contrast(85%);
}
.textColorLimited {
filter: invert(67%) sepia(20%) saturate(6000%) hue-rotate(2deg) brightness(100%) contrast(101%);
}
.textColorNo {
filter: invert(20%) sepia(100%) saturate(7500%) hue-rotate(360deg) brightness(90%) contrast(85%);
}
.textColorDefault {
filter: invert(55%) sepia(39%) saturate(601%) hue-rotate(73deg) brightness(97%) contrast(98%);
}
</style>