TMTApp/src/views/CourseMatDet...

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
          <ion-buttons slot="start">
            <ion-back-button></ion-back-button>
          </ion-buttons>
          <ion-title>Material Detail</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class='ion-text-wrap'>
      
      <div style="padding:56.25% 0 0 0;position:relative;" v-html="mat.embed" v-if='mat'></div>
      <div v-if="mat" class='ion-padding ion-text-wrap'>
        <h2 v-if='name'>{{ name }}</h2>
      </div>
      <template v-if="mat">
        <ion-item-divider>
          <ion-label>Trainners</ion-label>
        </ion-item-divider> 
        <ion-list>
          <ion-item v-for="m in mat.trainers">
            <ion-avatar aria-hidden="true" slot="start">
              <img  :src="BASE_URL+m.photo"  v-if="m.photo"/>
            </ion-avatar>
            <ion-label>{{ m.name }}</ion-label>
          </ion-item>
        </ion-list>
        <ion-item-divider class='ion-margin-vertical'>
          <ion-label>Related Trainings</ion-label>
        </ion-item-divider> 
      <swiper :slides-per-view="1" :loop="true" v-if="mats" class='ion-no-margin'>

      <swiper-slide v-for="m in mats">
        <CourseMat :obj="m" :course-name="mat.course_name" />
      </swiper-slide>
      </swiper>
      </template>

    </ion-content>
  </ion-page>
</template>

<script setup lang="ts">
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent,   IonNavLink,
    IonButton,
    IonButtons,
    IonBackButton, onIonViewWillEnter, onIonViewDidLeave, IonRow, IonGrid, IonCol, IonItem, IonList, IonAvatar, IonLabel, IonItemDivider,
    useIonRouter } from '@ionic/vue';

import { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper/modules';
import { Swiper, SwiperSlide } from 'swiper/vue';


import 'swiper/css';
import 'swiper/css/autoplay';
import 'swiper/css/keyboard';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
import 'swiper/css/zoom';
import '@ionic/vue/css/ionic-swiper.css';

import { useRoute } from 'vue-router';
import { getMat, BASE_URL, listMats, isLogin} from '@/composable/settings';
import { ref } from 'vue';
import CourseMat from '@/components/CourseMat.vue'

const route = useRoute();
const { id } = route.params;

const modules =  [Autoplay, Keyboard, Pagination, Scrollbar, Zoom]

const mat = ref()
const name = ref()
const mats = ref()

const ionRouter = useIonRouter();

onIonViewWillEnter(async () => {
  const rl  = await isLogin()
  if( rl == false ) {
    ionRouter.navigate('/tabs/tab4', 'forward', 'replace');
  }
  mat.value = await getMat(id)
  console.log(mat.value)
  name.value = mat.value.vimeo_name || mat.value.course_name
  mats.value  = await listMats(mat.value.related_mats)

})
onIonViewDidLeave(async () => {
  mat.value.embed = null; 
})

</script>

<style scoped>
#post_slide {
   aspect-ratio:4/3 auto;
}
.img_16_9 {
  width:480px;
  height:270px;
  object-fit:cover;
}
.swiper-slide {
  width: 90% !important;
	&:last-child {
	  width: 100% !important;
	}
}
</style>