44e236R6">6
+ <ion-buttons slot="start">
|
|
|
7
|
+ <ion-back-button></ion-back-button>
|
|
|
8
|
+ </ion-buttons>
|
|
|
9
|
+ <ion-title>Material Detail</ion-title>
|
|
|
10
|
+ </ion-toolbar>
|
|
|
11
|
+ </ion-header>
|
|
|
12
|
+ <ion-content class='ion-text-wrap'>
|
|
|
13
|
+ <div style="padding:56.25% 0 0 0;position:relative;" v-html="mat.embed" v-if='mat'></div>
|
|
|
14
|
+ <div v-if="mat" class='ion-padding ion-text-wrap'>
|
|
|
15
|
+ <h2 v-if='name'>{{ name }}</h2>
|
|
|
16
|
+ {{ mat }}
|
|
|
17
|
+ </div>
|
|
|
18
|
+ </ion-content>
|
|
|
19
|
+ </ion-page>
|
|
|
20
|
+</template>
|
|
|
21
|
+
|
|
|
22
|
+<script setup lang="ts">
|
|
|
23
|
+import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonNavLink,
|
|
|
24
|
+ IonButton,
|
|
|
25
|
+ IonButtons,
|
|
|
26
|
+ IonBackButton, onIonViewWillEnter, IonRow, IonGrid, IonCol } from '@ionic/vue';
|
|
|
27
|
+import { useRoute } from 'vue-router';
|
|
|
28
|
+import { getMat } from '@/settings';
|
|
|
29
|
+import { ref } from 'vue';
|
|
|
30
|
+import CourseMat from '@/components/CourseMat.vue'
|
|
|
31
|
+
|
|
|
32
|
+const route = useRoute();
|
|
|
33
|
+const { id } = route.params;
|
|
|
34
|
+
|
|
|
35
|
+const mat = ref()
|
|
|
36
|
+const name = ref()
|
|
|
37
|
+onIonViewWillEnter(async () => {
|
|
|
38
|
+ mat.value = await getMat(id)
|
|
|
39
|
+ name.value = mat.value.vimeo_name || mat.value.course_name
|
|
|
40
|
+})
|
|
|
41
|
+</script>
|
|
|
@@ -2,22 +2,36 @@
|
|
2
|
2
|
<ion-page>
|
|
3
|
3
|
<ion-header>
|
|
4
|
4
|
<ion-toolbar>
|
|
5
|
|
- <ion-title>Tab 2</ion-title>
|
|
|
5
|
+ <ion-title>Courses</ion-title>
|
|
6
|
6
|
</ion-toolbar>
|
|
7
|
7
|
</ion-header>
|
|
8
|
8
|
<ion-content :fullscreen="true">
|
|
9
|
9
|
<ion-header collapse="condense">
|
|
10
|
10
|
<ion-toolbar>
|
|
11
|
|
- <ion-title size="large">Tab 2</ion-title>
|
|
|
11
|
+ <ion-title size="large">Courses</ion-title>
|
|
12
|
12
|
</ion-toolbar>
|
|
13
|
13
|
</ion-header>
|
|
14
|
|
-
|
|
15
|
|
- <ExploreContainer name="Tab 2 page" />
|
|
|
14
|
+ <ion-grid>
|
|
|
15
|
+ <ion-row>
|
|
|
16
|
+ <ion-col size="12" size-md="4" size-lg="2" v-for="c in courses">
|
|
|
17
|
+ <Course :course-obj="c" />
|
|
|
18
|
+ </ion-col>
|
|
|
19
|
+ </ion-row>
|
|
|
20
|
+ </ion-grid>
|
|
16
|
21
|
</ion-content>
|
|
17
|
22
|
</ion-page>
|
|
18
|
23
|
</template>
|
|
19
|
24
|
|
|
20
|
25
|
<script setup lang="ts">
|
|
21
|
|
-import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
|
|
22
|
|
-import ExploreContainer from '@/components/ExploreContainer.vue';
|
|
|
26
|
+import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonGrid, IonRow, IonCol, onIonViewWillEnter } from '@ionic/vue';
|
|
|
27
|
+import Course from '@/components/Course.vue';
|
|
|
28
|
+import { ref } from 'vue';
|
|
|
29
|
+
|
|
|
30
|
+import {listCourses} from '@/settings';
|
|
|
31
|
+const courses = ref([])
|
|
|
32
|
+
|
|
|
33
|
+onIonViewWillEnter(async () => {
|
|
|
34
|
+
|
|
|
35
|
+ courses.value = await listCourses()
|
|
|
36
|
+})
|
|
23
|
37
|
</script>
|