axios cache

package-lock.json

         "@ionic/vue-router": "^7.5.4",
         "@vimeo/player": "^2.20.1",
         "axios": "^1.6.0",
+        "axios-cache-interceptor": "^1.3.2",
+        "axios-extensions": "^3.1.6",
         "ionicons": "^7.0.0",
         "marked": "^10.0.0",
         "moment": "^2.29.4",
         "proxy-from-env": "^1.1.0"
       }
     },
+    "node_modules/axios-cache-interceptor": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/axios-cache-interceptor/-/axios-cache-interceptor-1.3.2.tgz",
+      "integrity": "sha512-FNy4/IKvFYVswpPS09j3H9OUzcXSuxQ93wYxCKnogHbjCRE9nDQ/lukgjyuJqMIk3Yao51qQI/zPbMRNQu4JJw==",
+      "dependencies": {
+        "cache-parser": "^1.2.4",
+        "fast-defer": "^1.1.7",
+        "object-code": "^1.3.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/arthurfiorette/axios-cache-interceptor?sponsor=1"
+      },
+      "peerDependencies": {
+        "axios": "^1"
+      }
+    },
+    "node_modules/axios-extensions": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/axios-extensions/-/axios-extensions-3.1.6.tgz",
+      "integrity": "sha512-CmwMYxxAw4DcQDJ7/2Iv4GJj1Ao48lJEPieycgZQH6m1KcYZqf9zm2HM/CsULqheCpYxZbiGrCfZf5tVjXqoLg==",
+      "dependencies": {
+        "lru-cache": "^7.14.0",
+        "tslib": "^2.1.0",
+        "util": "^0.12.3"
+      },
+      "peerDependencies": {
+        "axios": "*"
+      }
+    },
+    "node_modules/axios-extensions/node_modules/lru-cache": {
+      "version": "7.18.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.18.3.tgz",
+      "integrity": "sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/axios/node_modules/form-data": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
         "node": ">=8"
       }
     },
+    "node_modules/cache-parser": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/cache-parser/-/cache-parser-1.2.4.tgz",
+      "integrity": "sha512-O0KwuHuJnbHUrghHi2kGp0SxnWSIBXTYt7M8WVhW0kbPRUNUKoE/Of6e1rRD6AAxmfxFunKnt90yEK09D+sc5g=="
+    },
     "node_modules/cachedir": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/cachedir/-/cachedir-2.4.0.tgz",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
+    "node_modules/fast-defer": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/fast-defer/-/fast-defer-1.1.8.tgz",
+      "integrity": "sha512-lEJeOH5VL5R09j6AA0D4Uvq7AgsHw0dAImQQ+F3iSyHZuAxyQfWobsagGpTcOPvJr3urmKRHrs+Gs9hV+/Qm/Q=="
+    },
     "node_modules/fast-glob": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
         "@stencil/core": "^4.0.3"
       }
     },
+    "node_modules/is-arguments": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
+      "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-array-buffer": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.2.tgz",
         "node": ">=8"
       }
     },
+    "node_modules/is-generator-function": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz",
+      "integrity": "sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==",
+      "dependencies": {
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ==",
       "dev": true
     },
+    "node_modules/object-code": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/object-code/-/object-code-1.3.0.tgz",
+      "integrity": "sha512-PLplgvzuFhSPBuTX/mtaXEnU3c6g7qKflVVQbV9VWEnV/34iKeAX1jeDNCKq1OgGlsnkA/NjldCzTbHxa7Wj4A=="
+    },
     "node_modules/object-inspect": {
       "version": "1.13.1",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/util": {
+      "version": "0.12.5",
+      "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",
+      "integrity": "sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "is-arguments": "^1.0.4",
+        "is-generator-function": "^1.0.7",
+        "is-typed-array": "^1.1.3",
+        "which-typed-array": "^1.1.2"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",

package.json

     "@ionic/vue-router": "^7.5.4",
     "@vimeo/player": "^2.20.1",
     "axios": "^1.6.0",
+    "axios-cache-interceptor": "^1.3.2",
+    "axios-extensions": "^3.1.6",
     "ionicons": "^7.0.0",
     "marked": "^10.0.0",
     "moment": "^2.29.4",

src/components/CourseMat.vue

 <template>
   <ion-card :router-link="'/tabs/mat_detail/'+obj.id">
-    <img alt="Silhouette of mountains" :src="thmb"  v-if="thmb" />
+    <ion-img alt="Silhouette of mountains" :src="thmb"  v-if="thmb" style='width:100%' />
     <ion-card-header>
       <ion-card-title>{{ name }}</ion-card-title>
     </ion-card-header>
 </template>
 
 <script setup lang="ts">
-  import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonIcon, onIonViewWillEnter, IonCard, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCardContent } from '@ionic/vue';
+  import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonIcon, onIonViewWillEnter, IonCard, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCardContent, IonImg } from '@ionic/vue';
   import moment from 'moment'
 import { getTrainers, listCourses } from '@/composable/settings';
   import { ref, onMounted  } from 'vue'
     dt.value = moment(temp).format('LLL'); 
 
     if( obj.gifs && obj.gifs.length > 0 ) {
-      thmb.value = obj.gifs[0].sizes[2].link
+      console.log(obj.gifs)
+      if(obj.gifs[0].sizes.length > 2 ) {
+        thmb.value = obj.gifs[0].sizes[2].link
+      }else {
+        thmb.value = obj.gifs[0].sizes[0].link
+      }
     }else {
       thmb.value = obj.course_image
     }

src/components/Post.vue

 <template>
-  <ion-card :router-link="'/tabs/post_detail/'+obj.id">
-    <img alt="Silhouette of mountains" :src="feature_img"  v-if="feature_img" />
+  <ion-card :router-link="'/tabs/post_detail/'+obj.id" >
+    <img alt="Silhouette of mountains" :src="feature_img"  v-if="feature_img" class='img-crop'/>
     <ion-card-header>
       <ion-card-title>{{ obj.name }}</ion-card-title>
     </ion-card-header>
 ion-card-title {
   font-size:1em;
 }
+.img-crop {
+   aspect-ratio: 4/3 auto;
+}
 </style>

src/composable/settings.ts

 import { CapacitorHttp } from '@capacitor/core';
-import axios from "axios";
+import Axios from "axios";
+import { setupCache } from 'axios-cache-interceptor';
+
 
 import { Preferences } from '@capacitor/preferences';
 
 
 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 = 'http://localhost:8020/'
+export const BASE_URL = 'https://www.tigermuaythai.live/'
+
+const axios = setupCache(Axios); 
+
 export const getProducts = async () => {
   console.log("Get Products")
   const { data } = await axios.get("https://yesno.wtf/api");
 
   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", {
+  const { data } = await axios.get(BASE_URL + "backend/api/courses/?ordering=-id&status=active", {
     headers: { 
     'Authorization': `Token ${token.value}`
     }
 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", {
+  const { data } = await axios.get(BASE_URL + "backend/api/courses/"+cid+"/mats/", {
     headers: { 
     'Authorization': `Token ${token.value}`
     }
   console.log(data)
   return data
 }
-export const getTodayProgs = async  () => {
+export const getTodayProgs = async  (day=null) => {
   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
+  if(day) {
+    const { data } = await axios.get(BASE_URL + `backend/api/courses/today_progs/?day=${day}`, {
+      headers: { 
+      'Authorization': `Token ${token.value}`
+      }
+    })
+    console.log(data)
+    return data
+  }else {
+    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' });

src/views/CourseDetailPage.vue

 const mats = ref([])
 const course = ref()
 onIonViewWillEnter(async () => {
-  course.value = await getCourse(id)
-  mats.value = await listCourseMats(id)
+  getCourse(id).then( (data) => course.value = data )
+  listCourseMats(id).then( (data) => mats.value = data )
 })
 </script>

src/views/Tab1Page.vue

       <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">
+          <swiper :slides-per-view="2"  :loop="true"  class='ion-no-margin' id="post_slide">
+          <swiper-slide v-for="m in posts" class='ion-no-padding'>
             <Post :obj="m" />
           </swiper-slide>
           </swiper>
         </div>
       </template>
       <template v-if="mats">
-        <h2>Trainings</h2>
+        <h2 class='ion-padding-start'>Trainings</h2>
       <ion-grid>
 
         <ion-row>
     //console.log('u ', u)
 
     token.value = await getToken()
-    trainers.value = await getTrainers()
-    mats.value = await listMats()
-    posts.value = await getPosts("muaythai-techniques")
+    getTrainers().then( (data) => {
+      trainers.value = data
+    })
+    listMats().then( (data) => {
+      mats.value = data
+    })
+    getPosts("muaythai-techniques").then( (data) => {
+      posts.value = data   
+    })
     console.log(" trainers => ", trainers)
 
     GoogleAuth.initialize();
     registerNotifications()
     addListeners()
 
-    todays.value = await getTodayProgs()
+    getTodayProgs().then( (data) => {
+      todays.value = data
+    })
   })
 
   onIonViewWillLeave(() => {
       if( liveObj.value == null ||  liveObj.value.result == false ) {
         liveObj.value = await getLive()
       }
-    }, 1000)
+    }, 10000)
   })
 
   const doGet = async () => {
   console.log('delivered notifications', notificationList);
 }
 </script>
+
+<style scoped>
+#post_slide {
+   aspect-ratio: 16/9 auto;
+}
+</style>

src/views/Tab3Page.vue

   <ion-page>
     <ion-header>
       <ion-toolbar>
-        <ion-title>Tab 3</ion-title>
+        <ion-title>Schedule</ion-title>
       </ion-toolbar>
     </ion-header>
-    <ion-content :fullscreen="true">
-      <ion-header collapse="condense">
-        <ion-toolbar>
-          <ion-title size="large">Tab 3</ion-title>
-        </ion-toolbar>
-      </ion-header>
-
-      <ExploreContainer name="Tab 3 page" />
+    <ion-content>
+      <div class='ion-padding' v-if="today">
+      <ion-segment :scrollable="true" :value="today">
+        <ion-segment-button value="mon" @click="changeDay($event)">
+          Mon
+        </ion-segment-button>
+        <ion-segment-button value="tue" @click="changeDay($event)">
+          Tue
+        </ion-segment-button>
+        <ion-segment-button value="wed" @click="changeDay($event)">
+          Wed
+        </ion-segment-button>
+        <ion-segment-button value="thu" @click="changeDay($event)">
+          Thu
+        </ion-segment-button>
+        <ion-segment-button value="fri" @click="changeDay($event)">
+          Fri
+        </ion-segment-button>
+        <ion-segment-button value="sat" @click="changeDay($event)">
+          Sat
+        </ion-segment-button>
+        <ion-segment-button value="sun" @click="changeDay($event)">
+          Sun
+        </ion-segment-button>
+      </ion-segment>
+      </div>
+      <ion-grid> 
+        <ion-row>
+      <template v-if="today == 'mon'">
+        <ion-col size="12" size-md="4" v-for="c in mon">
+          <CourseSchedule :course-obj="c.course_level.course" :from-time="c.from_time" :to-time="c.to_time" class='ion-no-margin ion-margin-bottom' />
+        </ion-col> 
+      </template>
+      <template v-if="today == 'tue'">
+        <ion-col size="12" size-md="4" v-for="c in tue">
+          <CourseSchedule :course-obj="c.course_level.course" :from-time="c.from_time" :to-time="c.to_time" class='ion-no-margin ion-margin-bottom' />
+        </ion-col> 
+      </template>
+      <template v-if="today == 'wed'">
+        <ion-col size="12" size-md="4" v-for="c in wed">
+          <CourseSchedule :course-obj="c.course_level.course" :from-time="c.from_time" :to-time="c.to_time" class='ion-no-margin ion-margin-bottom' />
+        </ion-col> 
+      </template>
+      <template v-if="today == 'thu'">
+        <ion-col size="12" size-md="4" v-for="c in thu">
+          <CourseSchedule :course-obj="c.course_level.course" :from-time="c.from_time" :to-time="c.to_time" class='ion-no-margin ion-margin-bottom' />
+        </ion-col> 
+      </template>
+      <template v-if="today == 'fri'">
+        <ion-col size="12" size-md="4" v-for="c in fri">
+          <CourseSchedule :course-obj="c.course_level.course" :from-time="c.from_time" :to-time="c.to_time" class='ion-no-margin ion-margin-bottom' />
+        </ion-col> 
+      </template>
+      <template v-if="today == 'sat'">
+        <ion-col size="12" size-md="4" v-for="c in sat">
+          <CourseSchedule :course-obj="c.course_level.course" :from-time="c.from_time" :to-time="c.to_time" class='ion-no-margin ion-margin-bottom' />
+        </ion-col> 
+      </template>
+      <template v-if="today == 'sun'">
+        <ion-col size="12" size-md="4" v-for="c in sun">
+          <CourseSchedule :course-obj="c.course_level.course" :from-time="c.from_time" :to-time="c.to_time" class='ion-no-margin ion-margin-bottom' />
+        </ion-col> 
+      </template>
+        </ion-row>
+      </ion-grid>
     </ion-content>
   </ion-page>
 </template>
 
 <script setup lang="ts">
-import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
+import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonIcon, IonSegment, IonSegmentButton, onIonViewWillEnter, IonGrid, 
+IonRow, IonCol } from '@ionic/vue';
+import { home, heart, pin, star, call, globe, basket, barbell, trash, person } from 'ionicons/icons';
 import ExploreContainer from '@/components/ExploreContainer.vue';
+import CourseSchedule from '@/components/CourseSchedule.vue';
+import { ref } from 'vue';
+
+import { getTodayProgs } from '@/composable/settings';
+
+const today = ref()
+const weekday = ["sun","mon","tue","wed","thu","fri","sat"];
+const mon = ref()
+const tue = ref()
+const wed = ref()
+const thu = ref()
+const fri = ref()
+const sat = ref()
+const sun = ref()
+
+onIonViewWillEnter( async () => {
+  const d = new Date();
+  console.log(" d ", d.getDay())
+  today.value = weekday[d.getDay()];
+  mon.value = await getTodayProgs("mon")
+  tue.value = await getTodayProgs("tue")
+  wed.value = await getTodayProgs("wed")
+  thu.value = await getTodayProgs("thu")
+  fri.value = await getTodayProgs("fri")
+  sat.value = await getTodayProgs("sat")
+  sun.value = await getTodayProgs("sun")
+
+  
+  //today.value = 'mon';
+})
+
+const changeDay = (e) => {
+  today.value = e.target.value
+}
 </script>