big update

ios/App/Podfile

@@ -17,6 +17,7 @@ def capacitor_pods
   pod 'CapacitorKeyboard', :path => '../../node_modules/@capacitor/keyboard'
   pod 'CapacitorPreferences', :path => '../../node_modules/@capacitor/preferences'
   pod 'CapacitorPushNotifications', :path => '../../node_modules/@capacitor/push-notifications'
+  pod 'CapacitorShare', :path => '../../node_modules/@capacitor/share'
   pod 'CapacitorStatusBar', :path => '../../node_modules/@capacitor/status-bar'
   pod 'CodetrixStudioCapacitorGoogleAuth', :path => '../../node_modules/@codetrix-studio/capacitor-google-auth'
 end

ios/App/Podfile.lock

@@ -22,6 +22,8 @@ PODS:
     - Capacitor
   - CapacitorPushNotifications (5.1.0):
     - Capacitor
+  - CapacitorShare (5.0.6):
+    - Capacitor
   - CapacitorStatusBar (5.0.6):
     - Capacitor
   - CodetrixStudioCapacitorGoogleAuth (0.0.1):
@@ -105,6 +107,7 @@ DEPENDENCIES:
   - "CapacitorKeyboard (from `../../node_modules/@capacitor/keyboard`)"
   - "CapacitorPreferences (from `../../node_modules/@capacitor/preferences`)"
   - "CapacitorPushNotifications (from `../../node_modules/@capacitor/push-notifications`)"
+  - "CapacitorShare (from `../../node_modules/@capacitor/share`)"
   - "CapacitorStatusBar (from `../../node_modules/@capacitor/status-bar`)"
   - "CodetrixStudioCapacitorGoogleAuth (from `../../node_modules/@codetrix-studio/capacitor-google-auth`)"
   - Firebase/Messaging
@@ -146,6 +149,8 @@ EXTERNAL SOURCES:
     :path: "../../node_modules/@capacitor/preferences"
   CapacitorPushNotifications:
     :path: "../../node_modules/@capacitor/push-notifications"
+  CapacitorShare:
+    :path: "../../node_modules/@capacitor/share"
   CapacitorStatusBar:
     :path: "../../node_modules/@capacitor/status-bar"
   CodetrixStudioCapacitorGoogleAuth:
@@ -161,6 +166,7 @@ SPEC CHECKSUMS:
   CapacitorKeyboard: b978154b024a5f65e044908e37d15b7de58b9d12
   CapacitorPreferences: f03954bcb0ff09c792909e46bff88e3183c16b10
   CapacitorPushNotifications: b31e326c6e4eb216a622041d6ca21a973f34943f
+  CapacitorShare: cd41743331cb71d217c029de54b681cbd91e0fcc
   CapacitorStatusBar: 565c0a1ebd79bb40d797606a8992b4a105885309
   CodetrixStudioCapacitorGoogleAuth: fcce058390347c1ce5d8ac4764bdf1f5c1ee233b
   FBAEMKit: af2972f39bb0f3f7c45998f435b007833c32ffb2
@@ -180,6 +186,6 @@ SPEC CHECKSUMS:
   nanopb: d4d75c12cd1316f4a64e3c6963f879ecd4b5e0d5
   PromisesObjC: c50d2056b5253dadbd6c2bea79b0674bd5a52fa4
 
-PODFILE CHECKSUM: 13a486d397817692d7e7744cf0c6e77b81469655
+PODFILE CHECKSUM: b5088696bfe6f308f08046e80f0b75910bd6bc77
 
 COCOAPODS: 1.12.1

package-lock.json

@@ -16,14 +16,17 @@
         "@capacitor/keyboard": "5.0.6",
         "@capacitor/preferences": "^5.0.6",
         "@capacitor/push-notifications": "^5.1.0",
+        "@capacitor/share": "^5.0.6",
         "@capacitor/status-bar": "5.0.6",
         "@codetrix-studio/capacitor-google-auth": "^3.3.4",
-        "@ionic/vue": "^7.0.0",
-        "@ionic/vue-router": "^7.0.0",
+        "@ionic/vue": "^7.5.4",
+        "@ionic/vue-router": "^7.5.4",
         "@vimeo/player": "^2.20.1",
         "axios": "^1.6.0",
         "ionicons": "^7.0.0",
+        "marked": "^10.0.0",
         "moment": "^2.29.4",
+        "swiper": "^11.0.3",
         "vue": "^3.2.45",
         "vue-core-video-player": "^0.2.0",
         "vue-router": "^4.1.6",
@@ -1919,6 +1922,14 @@
         "@capacitor/core": "^5.0.0"
       }
     },
+    "node_modules/@capacitor/share": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/@capacitor/share/-/share-5.0.6.tgz",
+      "integrity": "sha512-/dVOW7kcuuD7hWB9Z1drArIpEk+5JCoMnMrAs2c7CLp3q5PeaXNJjTkGr6RJ1OtMhsHyXc6DAFwQ4frFkmZsgw==",
+      "peerDependencies": {
+        "@capacitor/core": "^5.0.0"
+      }
+    },
     "node_modules/@capacitor/status-bar": {
       "version": "5.0.6",
       "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-5.0.6.tgz",
@@ -2467,11 +2478,11 @@
       }
     },
     "node_modules/@ionic/core": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.5.1.tgz",
-      "integrity": "sha512-BnWehjZ3IVGPFLdOZV151VhLsyXzr8d2mIVULqUXil5NHgQf039ScppI0kfrCS+M3zMdqeTmlIK/nq6M+kcQaQ==",
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.5.4.tgz",
+      "integrity": "sha512-rZbKlcVucRTDOK2Woh4CWPePlsXiUt3G9dCUniduKD7WeiuAk0GzfmoM3WXBvcUpkVTUIOrvKHaqd3JJSWEIzg==",
       "dependencies": {
-        "@stencil/core": "^4.5.0",
+        "@stencil/core": "^4.7.1",
         "ionicons": "^7.2.1",
         "tslib": "^2.1.0"
       }
@@ -2637,20 +2648,20 @@
       }
     },
     "node_modules/@ionic/vue": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.5.1.tgz",
-      "integrity": "sha512-nA32DFFOJV5vF60xiz6Df/aE7iPEfCZXMAt+pSJYSYQuoMN6qD9eJUM4g37DZIWtRJdzlRBSZQvGEdPR41CyYg==",
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.5.4.tgz",
+      "integrity": "sha512-DzhD78Yt7Xn9c4iNbWBm9lskx0CBYgIsZwmGJGWFpQAQHJrIRb6M8ozXrIyyBgsMlkw/9dGpmGaauH4pbmwJyw==",
       "dependencies": {
-        "@ionic/core": "7.5.1",
+        "@ionic/core": "7.5.4",
         "ionicons": "^7.0.0"
       }
     },
     "node_modules/@ionic/vue-router": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-7.5.1.tgz",
-      "integrity": "sha512-gXITuq8FUzOSovPgm0AmM49TBJbirdAsLU7MiTmBFoNbkjIT+DRP3oVkp/AbI/CbgctH3j889VjCmYxqwPvH0A==",
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-7.5.4.tgz",
+      "integrity": "sha512-hA8t3KFVMn3kBr4REH0yYQ+UZsk4IN7IvtrDN4OEt3/QqtZ5nAZad+3KZDP5dHJ+ITZ6wdmspN3BlAySzykMng==",
       "dependencies": {
-        "@ionic/vue": "7.5.1"
+        "@ionic/vue": "7.5.4"
       }
     },
     "node_modules/@jest/schemas": {
@@ -2768,9 +2779,9 @@
       "dev": true
     },
     "node_modules/@stencil/core": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.6.0.tgz",
-      "integrity": "sha512-5Y6/fP28aspPDRB+Tz5GuB1jRVGuUEk5/rnyE8ACGcuzEOG+zR0A/IHRJSU3XmCxUlVDKfKoO6St5W84oUCVMA==",
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.7.1.tgz",
+      "integrity": "sha512-KDWA/3qDiABA5LqtHCmTVwORuzgu/YdC0FpSBwVmwlw6K8jUjbTA5JB6Q03da2F+EQlDHOVgbW0TNtHCm54uXQ==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -7261,6 +7272,17 @@
         "node": ">=12"
       }
     },
+    "node_modules/marked": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-10.0.0.tgz",
+      "integrity": "sha512-YiGcYcWj50YrwBgNzFoYhQ1hT6GmQbFG8SksnYJX1z4BXTHSOrz1GB5/Jm2yQvMg4nN1FHP4M6r03R10KrVUiA==",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -8767,6 +8789,24 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/swiper": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.0.3.tgz",
+      "integrity": "sha512-MyV9ooQsriAe2EibeamqewLjgCfSvl2xoyratl6S3ln5BXDL4BzlO6mxcbLMCzQL6Z60b/u0AS/nKrepL0+TAg==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",

package.json

@@ -20,14 +20,17 @@
     "@capacitor/keyboard": "5.0.6",
     "@capacitor/preferences": "^5.0.6",
     "@capacitor/push-notifications": "^5.1.0",
+    "@capacitor/share": "^5.0.6",
     "@capacitor/status-bar": "5.0.6",
     "@codetrix-studio/capacitor-google-auth": "^3.3.4",
-    "@ionic/vue": "^7.0.0",
-    "@ionic/vue-router": "^7.0.0",
+    "@ionic/vue": "^7.5.4",
+    "@ionic/vue-router": "^7.5.4",
     "@vimeo/player": "^2.20.1",
     "axios": "^1.6.0",
     "ionicons": "^7.0.0",
+    "marked": "^10.0.0",
     "moment": "^2.29.4",
+    "swiper": "^11.0.3",
     "vue": "^3.2.45",
     "vue-core-video-player": "^0.2.0",
     "vue-router": "^4.1.6",

src/components/Course.vue

@@ -1,30 +1,34 @@
 <template>
   <ion-card :router-link="'/tabs/course_detail/'+courseObj.id">
-    <img alt="Silhouette of mountains" :src="courseObj.feature_img"  v-if="courseObj.feature_img" />
+    <img alt="Silhouette of mountains" :src="feature_img"  v-if="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 { getTrainers, listCourses, BASE_URL } from '@/composable/settings';
   import { ref, onMounted } from 'vue'
   const props = defineProps({
     courseObj: Object,
   })
-
+  const feature_img  = ref()
   onMounted(() => {
     console.log("--- onmounted ---")
     console.log("name === ", props.courseObj)
+    if( props.courseObj.feature_img && !props.courseObj.feature_img.startsWith('http') ) {
+      feature_img.value = BASE_URL + props.courseObj.feature_img
+    }else {
+      feature_img.value = props.courseObj.feature_img
+    }
   })
+  const truncate = (str) => {
+    return "T "+str
+  }
 </script>
 
 <style scoped>
@@ -32,6 +36,6 @@ import { getTrainers, listCourses } from '@/settings';
   background-color:#f00;
 }
 ion-card-title {
-  font-size:1.5em;
+  font-size:1em;
 }
 </style>

src/components/CourseMat.vue

@@ -14,7 +14,7 @@
 <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 { getTrainers, listCourses } from '@/composable/settings';
   import { ref, onMounted  } from 'vue'
 
   const props = defineProps({

src/components/CourseSchedule.vue

@@ -0,0 +1,47 @@
+<template>
+  <ion-card :router-link="'/tabs/course_detail/'+courseObj.id">
+    <img alt="Silhouette of mountains" :src="feature_img"  v-if="feature_img" />
+    <ion-card-header>
+      <ion-card-title>{{ courseObj.name }}</ion-card-title>
+    </ion-card-header>
+
+     <ion-card-content>
+       {{ fromTime.substring(0, 5) }} - {{ toTime.substring(0,5) }}
+    </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, BASE_URL } from '@/composable/settings';
+  import { ref, onMounted } from 'vue'
+  const props = defineProps({
+    courseObj: Object,
+    fromTime: String, 
+    toTime: String,
+  })
+  const feature_img  = ref()
+  onMounted(() => {
+    console.log("--- onmounted ---")
+    console.log("name === ", props.courseObj)
+    if( props.courseObj.feature_img && !props.courseObj.feature_img.startsWith('http') ) {
+      feature_img.value = BASE_URL + props.courseObj.feature_img
+    }else {
+      feature_img.value = props.courseObj.feature_img
+    }
+  })
+  const truncate = (str) => {
+    return "T "+str
+  }
+</script>
+
+<style scoped>
+#container {
+  background-color:#f00;
+}
+ion-card-title {
+  font-size:1em;
+}
+</style>

src/components/Post.vue

@@ -0,0 +1,40 @@
+<template>
+  <ion-card :router-link="'/tabs/post_detail/'+obj.id">
+    <img alt="Silhouette of mountains" :src="feature_img"  v-if="feature_img" />
+    <ion-card-header>
+      <ion-card-title>{{ obj.name }}</ion-card-title>
+    </ion-card-header>
+
+  </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, BASE_URL } from '@/composable/settings';
+  import { ref, onMounted } from 'vue'
+  const props = defineProps({
+    obj: Object,
+  })
+  const feature_img  = ref()
+  onMounted(() => {
+    console.log("--- onmounted ---")
+    if( props.obj.feature_img && !props.obj.feature_img.startsWith('http') ) {
+      feature_img.value = BASE_URL + props.obj.feature_img
+    }else {
+      feature_img.value = props.obj.feature_img
+    }
+  })
+  const truncate = (str) => {
+    return "T "+str
+  }
+</script>
+
+<style scoped>
+#container {
+  background-color:#f00;
+}
+ion-card-title {
+  font-size:1em;
+}
+</style>

src/components/SearchEngine.vue

@@ -0,0 +1,42 @@
+<template>
+  <ion-searchbar :debounce="1000" @ionInput="handleInput($event)"></ion-searchbar>
+  <ion-list>
+    <template v-for="result in results">
+      <SearchItem :obj="result" />
+    </template>
+  </ion-list>
+
+</template>
+<script setup>
+import { IonItem, IonList, IonSearchbar,IonLabel } from '@ionic/vue';
+import { ref } from 'vue';
+import { searchMat } from '@/composable/settings';
+import SearchItem from '@/components/SearchItem.vue';
+
+ const data = [
+        'Amsterdam',
+        'Buenos Aires',
+        'Cairo',
+        'Geneva',
+        'Hong Kong',
+        'Istanbul',
+        'London',
+        'Madrid',
+        'New York',
+        'Panama City',
+];
+const results = ref();
+const handleInput = async (event) => {
+  console.log("handleInput")
+  console.log(event)
+  const query = event.target.value.toLowerCase();
+  console.log("query = ", query)
+  if(query == "") {
+    results.value = []
+  }else {
+    //results.value = data.filter((d) => d.toLowerCase().indexOf(query) > -1);
+    const r = await searchMat(query)
+    results.value = r.results
+  }
+}
+</script>

src/components/SearchItem.vue

@@ -0,0 +1,36 @@
+<template>
+  <ion-item :router-link="'/tabs/mat_detail/'+obj.id">
+    <ion-thumbnail slot="start">
+      <img alt="Silhouette of mountains" :src="thmb"  v-if="thmb" />
+    </ion-thumbnail>
+    <ion-label>{{ name }} {{ dt }}</ion-label>
+  </ion-item>
+</template>
+
+<script setup>
+  import { IonItem, IonLabel, IonThumbnail } from '@ionic/vue';
+  import { ref, onMounted } from 'vue';
+  import moment from 'moment';
+  
+  const dt = ref()
+  const thmb = ref()
+  const name = ref()
+  
+  const props = defineProps({
+    obj: Object
+  })
+
+  onMounted(() => {
+    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>

src/settings.ts

@@ -51,17 +51,28 @@ export const getTrainers = async () => {
   console.log(data)
   return data.results
 }
-export const listMats = async  () => {
+export const listMats = async  (ids=[]) => {
 
   const token = await Preferences.get({ key: 'token' });
   console.log("token = ", token)
-  const { data } = await axios.get(BASE_URL + "backend/api/mats/?ordering=-id", {
-    headers: { 
-    'Authorization': `Token ${token.value}`
-    }
-  })
-  console.log(data)
-  return data.results
+  console.log("ids ", ids)
+  if( ids.length == 0 ) {
+    const { data } = await axios.get(BASE_URL + "backend/api/mats/?ordering=-id", {
+      headers: { 
+      'Authorization': `Token ${token.value}`
+      }
+    })
+    
+    return data.results
+  }else {
+    const { data } = await axios.get(BASE_URL + "backend/api/mats/?ids="+ids.join(), {
+      headers: { 
+      'Authorization': `Token ${token.value}`
+      }
+    })
+    console.log("results = ", data.results)
+    return data.results
+  }
 }
 export const listCourses = async  () => {
 
@@ -126,3 +137,55 @@ export const listCourseMats = async  (cid) => {
   console.log(data)
   return data
 }
+export const getTodayProgs = async  () => {
+  const token = await Preferences.get({ key: 'token' });
+  console.log("token = ", token)
+  const { data } = await axios.get(BASE_URL + "backend/api/courses/today_progs/", {
+    headers: { 
+    'Authorization': `Token ${token.value}`
+    }
+  })
+  console.log(data)
+  return data
+}
+export const getLive = async  () => {
+  const token = await Preferences.get({ key: 'token' });
+  console.log("token = ", token)
+  const { data } = await axios.get(BASE_URL + "backend/api/scheds/get_live/", {
+    headers: { 
+    'Authorization': `Token ${token.value}`
+    }
+  })
+  console.log(data)
+  return data
+}
+export const getPosts = async (cat) => {
+  const token = await Preferences.get({ key: 'token' });
+  console.log("token = ", token)
+  const { data } = await axios.get(BASE_URL + `backend/api/posts/?category__slug=${cat}&status=active&ordering=-created_at`, {
+    headers: { 
+    'Authorization': `Token ${token.value}`
+    }
+  })
+  return data.results
+}
+export const getPost = async (pid) => {
+  const token = await Preferences.get({ key: 'token' });
+  console.log("token = ", token)
+  const { data } = await axios.get(BASE_URL + `backend/api/posts/${pid}/`, {
+    headers: { 
+    'Authorization': `Token ${token.value}`
+    }
+  })
+  return data
+}
+export const searchMat = async (s) => {
+  const token = await Preferences.get({ key: 'token' });
+  console.log("token = ", token)
+  const { data } = await axios.get(BASE_URL + `backend/api/mats/?search=${s}`, {
+    headers: { 
+    'Authorization': `Token ${token.value}`
+    }
+  })
+  return data
+}

src/router/index.ts

@@ -45,6 +45,16 @@ const routes: Array<RouteRecordRaw> = [
         path: 'mat_detail/:id/',
         name: 'mat_detail', 
         component: () => import('@/views/CourseMatDetailPage.vue')
+      },
+      {
+        path: 'search_page/',
+        name: 'search_page', 
+        component: () => import('@/views/SearchPage.vue')
+      },
+      {
+        path: 'post_detail/:id/',
+        name: 'post_detail', 
+        component: () => import('@/views/PostDetailPage.vue')
       }
     ]
   }

src/views/CourseDetailPage.vue

@@ -18,7 +18,7 @@
       <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" />
+            <CourseMat :obj="c" :course-name="course.name" class='ion-no-margin' />
           </ion-col>
         </ion-row>
       </ion-grid> 
@@ -32,7 +32,7 @@ import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent,   IonNavLink,
     IonButtons,
     IonBackButton, onIonViewWillEnter, IonRow, IonGrid, IonCol } from '@ionic/vue';
 import { useRoute } from 'vue-router';
-import { listCourseMats, getCourse } from '@/settings';
+import { listCourseMats, getCourse } from '@/composable/settings';
 import { ref } from 'vue';
 import CourseMat from '@/components/CourseMat.vue'
 

src/views/CourseMatDetailPage.vue

@@ -13,8 +13,30 @@
       <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> 
+      </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="2" :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>
@@ -23,19 +45,39 @@
 import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent,   IonNavLink,
     IonButton,
     IonButtons,
-    IonBackButton, onIonViewWillEnter, IonRow, IonGrid, IonCol } from '@ionic/vue';
+    IonBackButton, onIonViewWillEnter, IonRow, IonGrid, IonCol, IonItem, IonList, IonAvatar, IonLabel, IonItemDivider} 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 } from '@/settings';
+import { getMat, BASE_URL, listMats } 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()
+
+
 onIonViewWillEnter(async () => {
   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)
 })
 </script>

src/views/PostDetailPage.vue

@@ -0,0 +1,77 @@
+
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button></ion-back-button>
+          </ion-buttons>
+          <ion-title v-if="obj">{{ obj.name }}</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content :fullscreen="true">
+      <ion-header collapse="condense">
+        <ion-toolbar>
+          <ion-title size="large" v-if="obj">{{ obj.name }}</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <div v-html="render_body" class='ion-padding'></div>
+
+       <ion-fab slot="fixed" vertical="bottom" horizontal="end">
+      <ion-fab-button>
+        <ion-icon :icon="shareSocial" @click="socShare"></ion-icon>
+      </ion-fab-button>
+    </ion-fab>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script setup lang="ts">
+
+import { marked } from 'marked';
+import { Share } from '@capacitor/share';
+
+import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent,   IonNavLink,
+    IonButton,
+    IonButtons,
+    IonIcon,
+    IonBackButton, onIonViewWillEnter, IonRow, IonGrid, IonCol,
+    IonFab, IonFabButton } from '@ionic/vue';
+import {
+    chevronDownCircle,
+    chevronForwardCircle,
+    chevronUpCircle,
+    colorPalette,
+    shareSocial, 
+    document,
+    globe,
+  } from 'ionicons/icons';
+
+import { useRoute } from 'vue-router';
+import { listCourseMats, getCourse, getPost} from '@/composable/settings';
+import { ref } from 'vue';
+import CourseMat from '@/components/CourseMat.vue'
+
+const route = useRoute();
+const { id } = route.params;
+
+const obj = ref()
+const render_body = ref()
+
+onIonViewWillEnter(async () => {
+  const post  = await getPost(id)
+  console.log(" post ", post)
+  obj.value = post
+  render_body.value = marked(post.body)
+
+})
+const socShare = async () => {
+  console.log('share social')
+  await Share.share({
+    title: 'See cool stuff',
+    text: 'Really awesome thing you need to see right meow',
+    url: 'http://ionicframework.com/',
+    dialogTitle: 'Share with buddies',
+  });
+}
+</script>

src/views/SearchPage.vue

@@ -0,0 +1,68 @@
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button></ion-back-button>
+        </ion-buttons>
+        <ion-title>
+          Search
+        </ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class='ion-padding'>
+      <ion-searchbar :debounce="1000" @ionInput="handleInput($event)"></ion-searchbar>
+      <ion-list>
+        <template v-for="result in results">
+          <SearchItem :obj="result" />
+        </template>
+        <template v-if="processing">
+            <ion-progress-bar type="indeterminate"></ion-progress-bar>
+
+        </template>
+        <template v-if="is_empty">
+          <h1 class='ion-text-center'>Search not found</h1>
+        </template>
+      </ion-list>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script setup lang="ts">
+import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonButton, onIonViewWillEnter, IonList, IonSearchbar, IonLabel,
+IonItem, IonBackButton, IonProgressBar } from '@ionic/vue';
+import ExploreContainer from '@/components/ExploreContainer.vue';
+import { defineComponent, onMounted } from 'vue';
+import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth';
+import { searchMat } from '@/composable/settings';
+
+import { ref } from 'vue';
+import SearchItem from '@/components/SearchItem.vue';
+
+const results = ref();
+const is_empty = ref(false);
+const processing = ref(false)
+const handleInput = async (event) => {
+  console.log("handleInput")
+  console.log(event)
+  const query = event.target.value.toLowerCase();
+  console.log("query = ", query)
+  is_empty.value = false;
+  if(query == "") {
+    results.value = []
+  }else {
+    //results.value = data.filter((d) => d.toLowerCase().indexOf(query) > -1);
+    processing.value = true;
+    const r = await searchMat(query)
+    processing.value = false;
+
+    results.value = r.results
+    if(r.count == 0 ) {
+      is_empty.value = true;
+    }else {
+      is_empty.value = false;
+    }
+  }
+  //test
+}
+</script>

src/views/Tab1Page.vue

@@ -2,84 +2,95 @@
   <ion-page>
     <ion-header>
       <ion-toolbar>
-        <ion-title>Tab 1</ion-title>
+        <ion-title>TMTLive</ion-title>
+       <ion-buttons slot="end">
+          <ion-button :router-link="'/tabs/search_page/'">
+            <ion-icon slot="icon-only" :icon="search"></ion-icon>
+          </ion-button>
+        </ion-buttons>
       </ion-toolbar>
     </ion-header>
     <ion-content>
       <ion-header collapse="condense">
         <ion-toolbar>
-          <ion-title size="large">Tab 1</ion-title>
+          <ion-title size="large">TMTLive</ion-title>
         </ion-toolbar>
       </ion-header>
+      <template v-if="liveObj && liveObj.result">
+        <div v-html="liveObj.result.embed_html"></div>
+      </template>
+      <div class='ion-padding'>
+      <h2>Today Programs</h2>
+      <swiper :slides-per-view="2" :loop="true" v-if="todays" class='ion-no-margin'>
+      <swiper-slide v-for="m in todays">
+        <CourseSchedule :course-obj="m.course_level.course" :from-time="m.from_time" :to-time='m.to_time'  />
+      </swiper-slide>
+      </swiper>
+      </div>
+      <template v-if="posts">
+        <div class='ion-padding'>
+          <h2>Muaythai Techniques</h2>
+          <swiper :slides-per-view="2"  :loop="true"  class='ion-no-margin'>
+          <swiper-slide v-for="m in posts">
+            <Post :obj="m" />
+          </swiper-slide>
+          </swiper>
+        </div>
+      </template>
+      <template v-if="mats">
+        <h2>Trainings</h2>
       <ion-grid>
+
         <ion-row>
-          <ion-col size="12" size-md="4" size-lg="2">
-            <ion-card>
-              <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/card-media.png" />
-              <ion-card-header>
-                <ion-card-title>Card Title</ion-card-title>
-                <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
-              </ion-card-header>
-
-              <ion-card-content>
-                Here's a small text description for the card content. Nothing more, nothing less.
-              </ion-card-content>
-            </ion-card>
-          </ion-col>
-          <ion-col size="12" size-md="4" size-lg="2">
-            <ion-card>
-              <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/card-media.png" />
-              <ion-card-header>
-                <ion-card-title>Card Title</ion-card-title>
-                <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
-              </ion-card-header>
-
-              <ion-card-content>
-                Here's a small text description for the card content. Nothing more, nothing less.
-              </ion-card-content>
-            </ion-card>
+          <ion-col size="12" size-md="4" size-lg="2" v-for="c in mats">
+            <CourseMat :obj="c" :course-name="c.course_name" class='ion-no-margin' />
           </ion-col>
         </ion-row>
       </ion-grid>
-      {{ token }}
+      </template>
       <ion-button router-link="/tabs/detail/3/" router-direction="forward">Click Me</ion-button>
-      {{ safeUrl }}
-      
+
       <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/880005259?badge=0&amp;autopause=0&amp;quality_selector=1&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Muay Thai Advance"></iframe></div> 
-<!--
-<vue-core-video-player src="https://player.vimeo.com/progressive_redirect/playback/880005259/rendition/720p/file.mp4?loc=external&signature=5ddad1430211b33f65824444a3137fc0ec6fe61183d39997036d2dd3b78654f9"></vue-core-video-player> -->
-
-      Video
-
-
-<div id="made-in-ny" ref='video'></div>
-
-      <ul>
-        <li v-for="(item, index) in items">
-          {{ item.msg }}
-        </li>
-      </ul>
-      <ion-item v-for="t in trainers" :router-link="'/detail/'+t.id">
-        <ion-thumbnail slot="start" v-if="t.photo">
-          <img alt="Silhouette of mountains" :src="t.photo" />
-        </ion-thumbnail>
-        <ion-label class='ion-text-wrap'>{{ t.name }}</ion-label>
-      </ion-item>
-      <ion-icon icon="heart"></ion-icon>
-      <ion-button @click="scrollToBottom">Scroll to Bottom</ion-button>
-      {{ mats }}
+      <!--
+        <vue-core-video-player src="https://player.vimeo.com/progressive_redirect/playback/880005259/rendition/720p/file.mp4?loc=external&signature=5ddad1430211b33f65824444a3137fc0ec6fe61183d39997036d2dd3b78654f9"></vue-core-video-player> -->
+
+        Video
+
+
+        <div id="made-in-ny" ref='video'></div>
+
+        <ul>
+          <li v-for="(item, index) in items">
+            {{ item.msg }}
+          </li>
+        </ul>
+        <ion-item v-for="t in trainers" :router-link="'/detail/'+t.id">
+          <ion-thumbnail slot="start" v-if="t.photo">
+            <img alt="Silhouette of mountains" :src="t.photo" />
+          </ion-thumbnail>
+          <ion-label class='ion-text-wrap'>{{ t.name }}</ion-label>
+        </ion-item>
+        <ion-icon icon="heart"></ion-icon>
+        <ion-button @click="scrollToBottom">Scroll to Bottom</ion-button>
     </ion-content>
   </ion-page>
 </template>
 
 <script setup lang="ts">
 
-import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonIcon, onIonViewWillEnter, IonButton, 
-  onIonViewWillLeave, IonItem, IonLabel, IonThumbnail, IonCol, IonGrid, IonRow, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle  } from '@ionic/vue';
+  import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonIcon, onIonViewWillEnter, IonButton, 
+  onIonViewWillLeave, IonItem, IonLabel, IonThumbnail, IonCol, IonGrid, IonRow, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, onIonViewDidEnter,  IonButtons } from '@ionic/vue';
+
 import ExploreContainer  from '@/components/ExploreContainer.vue';
+import CourseSchedule from '@/components/CourseSchedule.vue'
+import Post from '@/components/Post.vue'
+import CourseMat from '@/components/CourseMat.vue'
+import SearchEngine from '@/components/SearchEngine.vue'
+
 import { CapacitorHttp } from '@capacitor/core';
 import { ref } from 'vue';
-import { TOKEN, getProducts, setToken, getObject, getToken, getTrainers, listMats, storeAPNToken } from '@/settings';
+import { TOKEN, getProducts, setToken, getObject, getToken, getTrainers, listMats, storeAPNToken,
+getTodayProgs, getLive, getPosts} from '@/composable/settings';
 //import VueCoreVideoPlayer from 'vue-core-video-player'
 import { vueVimeoPlayer } from 'vue-vimeo-player'
 
@@ -89,25 +100,39 @@ import { PushNotifications } from '@capacitor/push-notifications';
 
 import Player from '@vimeo/player';
 
+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 { search } from 'ionicons/icons';
+
 const safeUrl = "https://vimeo.com/880005259?share=copy"
 const token = ref()
 const trainers = ref([])
 const mats = ref()
- const scrollToBottom = () => {
-    console.log("scroll")
-    //content.value.$el.scrollToBottom(300);
+const todays = ref()
+const posts = ref()
+const scrollToBottom = () => {
+  console.log("scroll")
+  //content.value.$el.scrollToBottom(300);
+};
+const items = ref([{msg: 'foo'}, {msg: 'bar2'}])
+
+const options = {
+      id: 59777392,
+      width: 640,
+      loop: true
   };
-  const items = ref([{msg: 'foo'}, {msg: 'bar2'}])
-
-  const options = {
-        id: 59777392,
-        width: 640,
-        loop: true
-    };
  //const video = ref(null)
 
   //const player = new Player(video, options);
 
+const modules =  [Autoplay, Keyboard, Pagination, Scrollbar, Zoom]
   onIonViewWillEnter(async () => {
     //console.log("video " ,video)
     //console.log("video id", video.value.id)
@@ -128,16 +153,29 @@ const mats = ref()
     token.value = await getToken()
     trainers.value = await getTrainers()
     mats.value = await listMats()
+    posts.value = await getPosts("muaythai-techniques")
     console.log(" trainers => ", trainers)
 
     GoogleAuth.initialize();
     registerNotifications()
     addListeners()
+
+    todays.value = await getTodayProgs()
   })
 
   onIonViewWillLeave(() => {
     console.log("view will leave")
-  
+
+  })
+
+const liveObj = ref()
+  onIonViewDidEnter(async() => {
+    setInterval( async () => {
+      console.log("did enter")
+      if( liveObj.value == null ||  liveObj.value.result == false ) {
+        liveObj.value = await getLive()
+      }
+    }, 1000)
   })
 
   const doGet = async () => {

src/views/Tab2Page.vue

@@ -13,8 +13,8 @@
       </ion-header>
       <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 size="6" size-md="4" size-lg="2" v-for="c in courses">
+            <Course :course-obj="c" class="ion-no-margin" />
           </ion-col>
         </ion-row>
       </ion-grid>
@@ -27,7 +27,7 @@ import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonGrid, IonRow,
 import Course from '@/components/Course.vue';
 import { ref } from 'vue';
 
-import {listCourses} from '@/settings';
+import {listCourses} from '@/composable/settings';
 const courses = ref([])
 
 onIonViewWillEnter(async () => {