read more

package-lock.json

         "axios": "^1.6.0",
         "axios-cache-interceptor": "^1.3.2",
         "axios-extensions": "^3.1.6",
+        "human-number": "^2.0.4",
+        "humanize-plus": "^1.8.2",
         "ionicons": "^7.0.0",
         "marked": "^10.0.0",
         "moment": "^2.29.4",
+        "pluralize": "^8.0.0",
         "swiper": "^11.0.3",
         "vue": "^3.2.45",
         "vue-core-video-player": "^0.2.0",
+        "vue-read-more": "^1.1.1",
         "vue-router": "^4.1.6",
         "vue-vimeo-player": "^1.1.2"
       },
         "node": ">= 6"
       }
     },
+    "node_modules/human-number": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/human-number/-/human-number-2.0.4.tgz",
+      "integrity": "sha512-OENvA941poJU1VGR6s5Nf/GpYNPE+81lmHkIVLO9FgiyHxB+BSlVOJV3lnItk5tfHzcEbZv3kTQrzpZK0+ExRA==",
+      "dependencies": {
+        "round-to": "~5.0.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/human-signals": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
         "node": ">=8.12.0"
       }
     },
+    "node_modules/humanize-plus": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/humanize-plus/-/humanize-plus-1.8.2.tgz",
+      "integrity": "sha512-jaLeQyyzjjINGv7O9JJegjsaUcWjSj/1dcXvLEgU3pGdqCdP1PiC/uwr+saJXhTNBHZtmKnmpXyazgh+eceRxA==",
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
         "node": ">=10.4.0"
       }
     },
+    "node_modules/pluralize": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/pluralize/-/pluralize-8.0.0.tgz",
+      "integrity": "sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/round-to": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/round-to/-/round-to-5.0.0.tgz",
+      "integrity": "sha512-i4+Ntwmo5kY7UWWFSDEVN3RjT2PX1FqkZ9iCcAO3sKML3Ady9NgsjM/HLdYKUAnrxK4IlSvXzpBMDvMHZQALRQ==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/rrweb-cssom": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz",
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "dev": true
     },
+    "node_modules/vue-read-more": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/vue-read-more/-/vue-read-more-1.1.1.tgz",
+      "integrity": "sha512-FFv0y5Pg1763fsLo6MA5RSpibThNEoJG6teSRH+rRIQe8O0LAeU4juEn6MRHZN0qOwtXOlbOjO8oit7YSd1NcA=="
+    },
     "node_modules/vue-router": {
       "version": "4.2.5",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.2.5.tgz",

package.json

     "axios": "^1.6.0",
     "axios-cache-interceptor": "^1.3.2",
     "axios-extensions": "^3.1.6",
+    "human-number": "^2.0.4",
+    "humanize-plus": "^1.8.2",
     "ionicons": "^7.0.0",
     "marked": "^10.0.0",
     "moment": "^2.29.4",
+    "pluralize": "^8.0.0",
     "swiper": "^11.0.3",
     "vue": "^3.2.45",
     "vue-core-video-player": "^0.2.0",
+    "vue-read-more": "^1.1.1",
     "vue-router": "^4.1.6",
     "vue-vimeo-player": "^1.1.2"
   },

src/components/CourseMat.vue

 <template>
-  <ion-card :router-link="'/tabs/mat_detail/'+obj.id">
-    <ion-img alt="Silhouette of mountains" :src="thmb"  v-if="thmb" class="img_16_9"/>
-    <ion-card-header>
+  <ion-card >
+    <ion-img  :router-link="'/tabs/mat_detail/'+obj.id" alt="Silhouette of mountains" :src="thmb"  v-if="thmb" class="img_16_9"/>
+    <ion-card-header :router-link="'/tabs/mat_detail/'+obj.id">
       <ion-card-title>{{ name }}</ion-card-title>
     </ion-card-header>
 
-    <ion-card-content class='ion-text-wrap'>
+    <ion-card-content class='ion-text-wrap ion-no-padding ion-padding-horizontal' :router-link="'/tabs/mat_detail/'+obj.id">
       {{ dt }}
     </ion-card-content>
+    <ion-button fill="clear" @click="likeMatClick"><ion-icon :icon="heart" :color="isLike ? 'danger' : 'medium'  "></ion-icon> 
+      <template v-if="obj.total_likes > 0">
+        &nbsp;&nbsp;
+      {{  Humanize.compactInteger(obj.total_likes, 1) }} {{ pluralize('Like', obj.total_likes) }}
+      </template>
+    </ion-button>
   </ion-card>
 </template>
 
 <script setup lang="ts">
-  import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonIcon, onIonViewWillEnter, IonCard, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCardContent, IonImg } from '@ionic/vue';
+  import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonIcon, onIonViewWillEnter, IonCard, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCardContent, IonImg, IonButton } from '@ionic/vue';
   import moment from 'moment'
-import { getTrainers, listCourses } from '@/composable/settings';
+  import { getTrainers, listCourses, isLogin, getPref, likeMat } from '@/composable/settings';
   import { ref, onMounted  } from 'vue'
+  import { heart } from 'ionicons/icons';
+  import pluralize from 'pluralize';
+  import Humanize from 'humanize-plus/dist/humanize';
 
   const props = defineProps({
     obj: Object,
   const dt = ref()
   const thmb = ref()
   const name = ref()
-
-  onMounted(() => {
+  let pref = null
+  const isLike = ref(false)
+  onMounted(async() => {
     console.log("--- onmounted ---")
     console.log("name === ", props.obj)
+
     const obj = props.obj
+    if(await isLogin()) {
+      pref = await getPref()
+      console.debug(" pref = ", pref)
+      for(const m of pref.mat_likes) {
+        if(obj.id == m.id) {
+          isLike.value = true
+          break
+        }
+      }
+    }
     let temp  = obj.display_datetime || obj.vimeo_created || obj.created_at 
     dt.value = moment(temp).format('LLL'); 
 
     }
     name.value = obj.vimeo_name || props.courseName
   })
-  
+  const likeMatClick = async() => {
+    console.debug(props.obj)
+    pref = await likeMat(props.obj.id)
+    console.debug(pref)
+    isLike.value = false
+    for(const m of pref.mat_likes) {
+      if(props.obj.id == m.id) {
+        isLike.value = true
+        props.obj.total_likes += 1
+        break
+      }
+    }
+    if(isLike.value == false) {
+      props.obj.total_likes -= 1
+    }
+  } 
 </script>
 
 <style scoped>

src/composable/settings.ts

 
 export const TOKEN = '173cb9e357a861abd91e8008fab9246e0cc116af'
 //export const BASE_URL = 'http://192.168.1.35:8020/'
-export const BASE_URL = 'http://localhost:8020/'
-//export const BASE_URL = 'https://www.tigermuaythai.live/'
+//export const BASE_URL = 'http://localhost:8020/'
+export const BASE_URL = 'https://www.tigermuaythai.live/'
 
 //const axios = setupCache(Axios); 
 //
   console.info(data)
   return data
 }
+export const likeMat = async (cid) => {
+  const token = await Preferences.get({ key: 'token' });
+  console.log("token = ", token)
+  const { data } = await axios.get(BASE_URL + `backend/api/profiles/like_mat/?cid=${cid}`, {
+    headers: { 
+    'Authorization': `Token ${token.value}`
+    }
+  })
+  console.info(data)
+  return data
+}

src/views/CourseDetailPage.vue

           <ion-title size="large" v-if="course">{{ course.name }}</ion-title>
         </ion-toolbar>
       </ion-header>
+        <ion-img :src="course.feature_img" v-if="course" />
         <template v-if="processing">
             <ion-progress-bar type="indeterminate" class='ion-margin-vertical'></ion-progress-bar>
         </template>
+        <read-more class='ion-padding' v-if="render_body" more-str="read more" :text="render_body" link="#" less-str="read less" max-chars="200"></read-more>
+
+      <h1 class='ion-padding'>Trainings</h1>
       <ion-grid>
         <ion-row>
           <ion-col size="12" size-md="4" size-lg="2" v-for="c in mats">
     </ion-content>
   </ion-page>
 </template>
-
 <script setup lang="ts">
 import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent,   IonNavLink,
     IonButton,
     IonButtons,
     IonBackButton, onIonViewWillEnter, IonRow, IonGrid, IonCol, IonProgressBar,  IonInfiniteScroll,
-    IonInfiniteScrollContent, InfiniteScrollCustomEvent  } from '@ionic/vue';
+    IonInfiniteScrollContent, InfiniteScrollCustomEvent, IonImg  } from '@ionic/vue';
 import { useRoute } from 'vue-router';
 import { listCourseMats, getCourse, listCourseMatsByLevel, callUrl} from '@/composable/settings';
 import { ref } from 'vue';
 import CourseMat from '@/components/CourseMat.vue'
+import { marked } from 'marked';
+import ReadMore from 'vue-read-more/components/ReadMoreComponent.vue';
 
 const route = useRoute();
 const { id } = route.params;
 const course = ref()
 let next_url = null
 const processing = ref(false)
+const render_body = ref()
+
 onIonViewWillEnter(async () => {
   course.value = await getCourse(id)
+  render_body.value = marked(course.value.body)
   processing.value = true
   listCourseMatsByLevel(course.value.clevels).then( (data) => { 
     mats.value = data.results;
     }
   };
 </script>
+
+<style>
+ion-title {
+  font-size:1.5rem;
+}
+#readmore {
+  display:block;
+  width:100%;
+  text-align:center;
+  text-transform:capitalize;
+  text-decoration:none;
+  font-weight:bold;
+  background-color:#ccc;
+  padding:0.5rem 0;
+  color:#333;
+}
+</style>