feature: display infoWheelchair in dest card

src/components/DestinationInfoCard.vue

@@ -16,19 +16,17 @@
       <v-list-item>
         <template v-slot:prepend>
           <v-avatar>
-            <img :src="detial[0].icon" 
+            <img :src="wheelchairIcon" :class="wheelchairIconClass"/>
-            class="iconCheck"
-            />
           </v-avatar>
         </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>
         <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 = [
+// 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>
@@ -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>