Tab2

package-lock.json

@@ -23,6 +23,7 @@
         "@vimeo/player": "^2.20.1",
         "axios": "^1.6.0",
         "ionicons": "^7.0.0",
+        "moment": "^2.29.4",
         "vue": "^3.2.45",
         "vue-core-video-player": "^0.2.0",
         "vue-router": "^4.1.6",
@@ -7399,6 +7400,14 @@
         "ufo": "^1.3.0"
       }
     },
+    "node_modules/moment": {
+      "version": "2.29.4",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",

package.json

@@ -27,6 +27,7 @@
     "@vimeo/player": "^2.20.1",
     "axios": "^1.6.0",
     "ionicons": "^7.0.0",
+    "moment": "^2.29.4",
     "vue": "^3.2.45",
     "vue-core-video-player": "^0.2.0",
     "vue-router": "^4.1.6",

src/components/Course.vue

@@ -0,0 +1,37 @@
+<template>
+  <ion-card :router-link="'/tabs/course_detail/'+courseObj.id">
+    <img alt="Silhouette of mountains" :src="courseObj.feature_img"  v-if="courseObj.feature_img" />
+    <ion-card-header>
+      <ion-card-title>{{ courseObj.name }}</ion-card-title>
+      <ion-card-subtitle>{{ courseObj.description }}</ion-card-subtitle>
+    </ion-card-header>
+
+    <ion-card-content class='ion-text-wrap'>
+      {{ courseObj.description }}
+    </ion-card-content>
+  </ion-card>
+</template>
+
+<script setup lang="ts">
+  import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonIcon, onIonViewWillEnter, IonCard, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCardContent } from '@ionic/vue';
+
+import { getTrainers, listCourses } from '@/settings';
+  import { ref, onMounted } from 'vue'
+  const props = defineProps({
+    courseObj: Object,
+  })
+
+  onMounted(() => {
+    console.log("--- onmounted ---")
+    console.log("name === ", props.courseObj)
+  })
+</script>
+
+<style scoped>
+#container {
+  background-color:#f00;
+}
+ion-card-title {
+  font-size:1.5em;
+}
+</style>

src/components/CourseMat.vue

@@ -0,0 +1,53 @@
+<template>
+  <ion-card :router-link="'/tabs/mat_detail/'+obj.id">
+    <img alt="Silhouette of mountains" :src="thmb"  v-if="thmb" />
+    <ion-card-header>
+      <ion-card-title>{{ name }}</ion-card-title>
+    </ion-card-header>
+
+    <ion-card-content class='ion-text-wrap'>
+      {{ dt }}
+    </ion-card-content>
+  </ion-card>
+</template>
+
+<script setup lang="ts">
+  import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonIcon, onIonViewWillEnter, IonCard, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCardContent } from '@ionic/vue';
+  import moment from 'moment'
+import { getTrainers, listCourses } from '@/settings';
+  import { ref, onMounted  } from 'vue'
+
+  const props = defineProps({
+    obj: Object,
+    courseName: String,
+  })
+
+  const dt = ref()
+  const thmb = ref()
+  const name = ref()
+
+  onMounted(() => {
+    console.log("--- onmounted ---")
+    console.log("name === ", props.obj)
+    const obj = props.obj
+    let temp  = obj.display_datetime || obj.vimeo_created || obj.created_at 
+    dt.value = moment(temp).format('LLL'); 
+
+    if( obj.gifs && obj.gifs.length > 0 ) {
+      thmb.value = obj.gifs[0].sizes[2].link
+    }else {
+      thmb.value = obj.course_image
+    }
+    name.value = obj.vimeo_name || props.courseName
+  })
+  
+</script>
+
+<style scoped>
+#container {
+  background-color:#f00;
+}
+ion-card-title {
+  font-size:1.5em;
+}
+</style>

src/router/index.ts

@@ -35,6 +35,16 @@ const routes: Array<RouteRecordRaw> = [
         path: 'detail/:id/',
         name: 'Detail', 
         component: () => import('@/views/DetailPage.vue')
+      },
+      {
+        path: 'course_detail/:id/',
+        name: 'course_detail', 
+        component: () => import('@/views/CourseDetailPage.vue')
+      },
+      {
+        path: 'mat_detail/:id/',
+        name: 'mat_detail', 
+        component: () => import('@/views/CourseMatDetailPage.vue')
       }
     ]
   }

src/settings.ts

@@ -63,6 +63,42 @@ export const listMats = async  () => {
   console.log(data)
   return data.results
 }
+export const listCourses = async  () => {
+
+  const token = await Preferences.get({ key: 'token' });
+  console.log("token = ", token)
+  const { data } = await axios.get(BASE_URL + "backend/api/courses/?limit=1000&ordering=-id&status=active", {
+    headers: { 
+    'Authorization': `Token ${token.value}`
+    }
+  })
+  console.log(data)
+  return data.results
+}
+export const getCourse = async  (pk) => {
+
+  const token = await Preferences.get({ key: 'token' });
+  console.log("token = ", token)
+  const { data } = await axios.get(BASE_URL + "backend/api/courses/"+pk+"/", {
+    headers: { 
+    'Authorization': `Token ${token.value}`
+    }
+  })
+  console.log(data)
+  return data
+}
+export const getMat = async(pk) => {
+
+  const token = await Preferences.get({ key: 'token' });
+  console.log("token = ", token)
+  const { data } = await axios.get(BASE_URL + `backend/api/mats/${pk}/`, {
+    headers: { 
+    'Authorization': `Token ${token.value}`
+    }
+  })
+  console.log(data)
+  return data
+}
 
 export const storeAPNToken = async (device_token) => {
   
@@ -77,3 +113,16 @@ export const storeAPNToken = async (device_token) => {
   console.log(data)
   return data
 }
+
+
+export const listCourseMats = async  (cid) => {
+  const token = await Preferences.get({ key: 'token' });
+  console.log("token = ", token)
+  const { data } = await axios.get(BASE_URL + "backend/api/courses/"+cid+"/mats/?limit=100", {
+    headers: { 
+    'Authorization': `Token ${token.value}`
+    }
+  })
+  console.log(data)
+  return data
+}

src/views/CourseDetailPage.vue

@@ -0,0 +1,48 @@
+
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button></ion-back-button>
+          </ion-buttons>
+          <ion-title v-if="course">{{ course.name }}</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content :fullscreen="true">
+      <ion-header collapse="condense">
+        <ion-toolbar>
+          <ion-title size="large" v-if="course">{{ course.name }}</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-grid>
+        <ion-row>
+          <ion-col size="12" size-md="4" size-lg="2" v-for="c in mats">
+            <CourseMat :obj="c" :course-name="course.name" />
+          </ion-col>
+        </ion-row>
+      </ion-grid> 
+    </ion-content>
+  </ion-page>
+</template>
+
+<script setup lang="ts">
+import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent,   IonNavLink,
+    IonButton,
+    IonButtons,
+    IonBackButton, onIonViewWillEnter, IonRow, IonGrid, IonCol } from '@ionic/vue';
+import { useRoute } from 'vue-router';
+import { listCourseMats, getCourse } from '@/settings';
+import { ref } from 'vue';
+import CourseMat from '@/components/CourseMat.vue'
+
+const route = useRoute();
+const { id } = route.params;
+
+const mats = ref([])
+const course = ref()
+onIonViewWillEnter(async () => {
+  course.value = await getCourse(id)
+  mats.value = await listCourseMats(id)
+})
+</script>

src/views/CourseMatDetailPage.vue

@@ -0,0 +1,41 @@
+
+<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>
+        {{ mat }}
+      </div> 
+    </ion-content>
+  </ion-page>
+</template>
+
+<script setup lang="ts">
+import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent,   IonNavLink,
+    IonButton,
+    IonButtons,
+    IonBackButton, onIonViewWillEnter, IonRow, IonGrid, IonCol } from '@ionic/vue';
+import { useRoute } from 'vue-router';
+import { getMat } from '@/settings';
+import { ref } from 'vue';
+import CourseMat from '@/components/CourseMat.vue'
+
+const route = useRoute();
+const { id } = route.params;
+
+const mat = ref()
+const name = ref()
+onIonViewWillEnter(async () => {
+  mat.value = await getMat(id)
+  name.value = mat.value.vimeo_name || mat.value.course_name
+})
+</script>

src/views/Tab2Page.vue

@@ -2,22 +2,36 @@
   <ion-page>
     <ion-header>
       <ion-toolbar>
-        <ion-title>Tab 2</ion-title>
+        <ion-title>Courses</ion-title>
       </ion-toolbar>
     </ion-header>
     <ion-content :fullscreen="true">
       <ion-header collapse="condense">
         <ion-toolbar>
-          <ion-title size="large">Tab 2</ion-title>
+          <ion-title size="large">Courses</ion-title>
         </ion-toolbar>
       </ion-header>
-
-      <ExploreContainer name="Tab 2 page" />
+      <ion-grid>
+        <ion-row>
+          <ion-col size="12" size-md="4" size-lg="2" v-for="c in courses">
+            <Course :course-obj="c" />
+          </ion-col>
+        </ion-row>
+      </ion-grid>
     </ion-content>
   </ion-page>
 </template>
 
 <script setup lang="ts">
-import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
-import ExploreContainer from '@/components/ExploreContainer.vue';
+import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonGrid, IonRow, IonCol, onIonViewWillEnter } from '@ionic/vue';
+import Course from '@/components/Course.vue';
+import { ref } from 'vue';
+
+import {listCourses} from '@/settings';
+const courses = ref([])
+
+onIonViewWillEnter(async () => {
+
+  courses.value = await listCourses()
+})
 </script>