mirror of
https://gitlab.com/little-lines/frontend.git
synced 2024-11-22 05:56:51 +00:00
Merge branch 'main' of gitlab.com:openKMITL/little-lines/frontend
This commit is contained in:
commit
d833cf1ea9
2 changed files with 122 additions and 26 deletions
|
@ -16,19 +16,17 @@
|
||||||
<v-list-item>
|
<v-list-item>
|
||||||
<template v-slot:prepend>
|
<template v-slot:prepend>
|
||||||
<v-avatar>
|
<v-avatar>
|
||||||
<img :src="detial[0].icon"
|
<img :src="wheelchairIcon" :class="wheelchairIconClass"/>
|
||||||
class="iconCheck"
|
|
||||||
/>
|
|
||||||
</v-avatar>
|
</v-avatar>
|
||||||
</template>
|
</template>
|
||||||
<v-list-item-title class="textCheck">{{detial[0].title}}</v-list-item-title>
|
<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">{{detial[0].subtitle}}</a></v-list-item-subtitle>
|
<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>
|
||||||
|
|
||||||
<v-list-item>
|
<v-list-item>
|
||||||
<template v-slot:prepend>
|
<template v-slot:prepend>
|
||||||
<v-avatar>
|
<v-avatar>
|
||||||
<img :src="detial[1].icon"
|
<img :src="findLocation"
|
||||||
class="icon"
|
class="icon"
|
||||||
/>
|
/>
|
||||||
</v-avatar>
|
</v-avatar>
|
||||||
|
@ -36,6 +34,17 @@
|
||||||
<v-list-item-title class="text-decoration-underline">{{nearestStructureData.lon}} , {{nearestStructureData.lat}}</v-list-item-title>
|
<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="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>
|
</v-list>
|
||||||
|
|
||||||
<v-card-actions class="stick-bottom btnlist-height justify-sa">
|
<v-card-actions class="stick-bottom btnlist-height justify-sa">
|
||||||
|
@ -193,28 +202,30 @@
|
||||||
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 cross from '../../icons/Material/cross.svg';
|
||||||
|
|
||||||
// import DestinationInfoCard from '@/components/DestinationInfoCard.vue';
|
// import DestinationInfoCard from '@/components/DestinationInfoCard.vue';
|
||||||
// const destination = {
|
// const destination = {
|
||||||
// title: "อนุสาวรีย์ชัยสมรภูมิ",
|
// title: "อนุสาวรีย์ชัยสมรภูมิ",
|
||||||
// subTitle: "ราชเทวี , กรุงเทพมหานคร"
|
// subTitle: "ราชเทวี , กรุงเทพมหานคร"
|
||||||
// }
|
// }
|
||||||
const detial = [
|
// const detial = [
|
||||||
{
|
// {
|
||||||
icon: check,
|
// icon: check,
|
||||||
subtitle: 'เรียนรู้เพิ่มเติม',
|
// subtitle: 'เรียนรู้เพิ่มเติม',
|
||||||
title: 'Unrestricted Wheelchair access',
|
// title: 'Unrestricted Wheelchair access',
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
icon: findLocation,
|
// icon: findLocation,
|
||||||
subtitle: '',
|
// subtitle: '',
|
||||||
title: '13.76493, 100.53828',
|
// title: '13.76493, 100.53828',
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
icon: clock,
|
// icon: clock,
|
||||||
subtitle: '',
|
// subtitle: '',
|
||||||
title: 'Mo-Su 11:30-22:00',
|
// title: 'Mo-Su 11:30-22:00',
|
||||||
},
|
// },
|
||||||
]
|
// ]
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
@ -223,18 +234,20 @@ export default {
|
||||||
props: {
|
props: {
|
||||||
nearestStructureData: Object,
|
nearestStructureData: Object,
|
||||||
onClose: Function,
|
onClose: Function,
|
||||||
|
infoWheelchair: String
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
showPopup: true,
|
showPopup: true,
|
||||||
showRoute: false,
|
showRoute: false,
|
||||||
userLocation: null,
|
userLocation: null,
|
||||||
isLocationRequested: false,
|
isLocationRequested: false,
|
||||||
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
cardHeight() {
|
cardHeight() {
|
||||||
return this.showRoute ? '45vh' : '60vh';
|
return this.showRoute ? '45vh' : '50vh';
|
||||||
},
|
},
|
||||||
formattedLocation() {
|
formattedLocation() {
|
||||||
if (this.isLocationRequested && !this.userLocation) {
|
if (this.isLocationRequested && !this.userLocation) {
|
||||||
|
@ -244,6 +257,60 @@ export default {
|
||||||
}
|
}
|
||||||
return 'Location not available';
|
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: {
|
methods: {
|
||||||
closePopup() {
|
closePopup() {
|
||||||
|
@ -439,6 +506,7 @@ export default {
|
||||||
mask: url(icons/Adwaita/flag.svg) no-repeat center;
|
mask: url(icons/Adwaita/flag.svg) no-repeat center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.btn-toggle
|
.btn-toggle
|
||||||
{
|
{
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
@ -463,5 +531,33 @@ export default {
|
||||||
padding: 0;
|
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>
|
</style>
|
||||||
|
|
|
@ -201,7 +201,7 @@ out;`;
|
||||||
|
|
||||||
nearestStructureData = {
|
nearestStructureData = {
|
||||||
...nearestStructureData,
|
...nearestStructureData,
|
||||||
infoWheelchair: infoWheelchair.value
|
infoWheelchair: infoWheelchair
|
||||||
}
|
}
|
||||||
//infoWheelchair can null,yes,no
|
//infoWheelchair can null,yes,no
|
||||||
popupData.value = nearestStructureData; // Show popup
|
popupData.value = nearestStructureData; // Show popup
|
||||||
|
|
Loading…
Reference in a new issue