mirror of
https://gitlab.com/little-lines/frontend.git
synced 2024-11-21 19:36:53 +00:00
feature: display infoWheelchair in dest card
This commit is contained in:
SRP-mango
parent
c5a5efbf01
commit
cb211c9b77
1 changed files with 112 additions and 29 deletions
|
|
@ -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>
|
||||
|
||||
Loading…
Reference in a new issue