frontend/src/components/DestinationInfoCard.vue

<template>
  <v-card 
  class="stick-bottom card-height"
  width="100%"
  :height="cardHeight"
  style="padding-top: 15px;"
  >

  <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>
        <template v-slot:prepend>
          <v-avatar>
            <img :src="detial[0].icon" 
            class="iconCheck"
            />
          </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>

      <v-list-item>
        <template v-slot:prepend>
          <v-avatar>
            <img :src="detial[1].icon" 
            class="icon"
            />
          </v-avatar>
        </template>
        <v-list-item-title class="text-decoration-underline">{{nearestStructureData.lat}} , {{nearestStructureData.lon}}</v-list-item-title>
      </v-list-item>

      <v-list-item>
        <template v-slot:prepend>
          <v-avatar>
            <img :src="detial[2].icon" 
            class="icon"
            />
          </v-avatar>
        </template>
        <v-list-item-title>{{detial[2].title}}</v-list-item-title>
      </v-list-item>


    </v-list>

    <v-card-actions class="stick-bottom btnlist-height justify-sa">
      <v-btn 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>


  <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 
    @click="closePopup"
    variant="tonal" icon="mdi-close" style="position: absolute; top: 15px; right: 15px;" />

  </v-card>
</template>
  
<script setup>
import findLocation from '../../icons/Material/find-location.svg';
import clock from '../../icons/Material/clock.svg';
import check from '../../icons/Material/check-round.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',
  },
]
</script>

<script>
export default {
  props: {
    nearestStructureData: Object,
    onClose: Function,
  },
  data() {
    return {
      showPopup: true,
      showRoute: false,
    };
  },
  computed: {
    cardHeight() {
      return this.showRoute ? '45vh' : '60vh';
    },
  },
  methods: {
    closePopup() {
      this.showPopup = false;
      this.onClose();
    },
    viewRoute() {
    this.showRoute = true;
    },
    viewPopup(){
    this.showPopup = true;
    this.showRoute = false;
    }
  },
  
};
</script>

<style>
.stick-bottom {
  position: fixed;
  bottom: 0;
}

.btnlist-height {
  height: 25%;
  width: 100%;
}

.v-card-actions.justify-sa {
  display: flex;
  justify-content: space-around;
}

.text-white {
  color: white;
}

.icon, .iconCheck {
  width: 30px;
  height: 30px;
}

.iconCheck, .textCheck {
  filter: invert(55%) sepia(39%) saturate(601%) hue-rotate(73deg) brightness(97%) contrast(98%);
}

.knowMore {
  filter: invert(67%) sepia(85%) saturate(5663%) hue-rotate(8deg) brightness(100%) contrast(101%);
}

.image { 
  width: 100%;
  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>