mirror of
https://github.com/frappe/erpnext.git
synced 2026-05-28 01:14:46 +00:00
feat: Added Program Intro Video modal
This commit is contained in:
@@ -9,17 +9,20 @@
|
|||||||
<div v-html="program.description"></div>
|
<div v-html="program.description"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class='text-right p-3'>
|
<div class='text-right p-3'>
|
||||||
|
<button class='btn btn-secondary btn-sm' data-toggle="modal" data-target="#videoModal">Watch Intro</button>
|
||||||
<a-button v-if="enrolled" type="dark" size="sm" :route="programPageRoute">
|
<a-button v-if="enrolled" type="dark" size="sm" :route="programPageRoute">
|
||||||
{{ buttonName }}
|
{{ buttonName }}
|
||||||
</a-button>
|
</a-button>
|
||||||
<a v-else-if="isLogin" class='btn btn-secondary btn-sm' @click="enroll()">{{ enrollButton }}</a>
|
<a v-else-if="isLogin" class='btn btn-secondary btn-sm' @click="enroll()">{{ enrollButton }}</a>
|
||||||
<a v-else class='btn btn-secondary btn-sm' href="/login#signup">Sign Up</a>
|
<a v-else class='btn btn-secondary btn-sm' href="/login#signup">Sign Up</a>
|
||||||
</div>
|
</div>
|
||||||
|
<VideoModal :title="program.program_name" :video="program.intro_video"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import AButton from './Button.vue';
|
import AButton from './Button.vue';
|
||||||
|
import VideoModal from './VideoModal.vue';
|
||||||
export default {
|
export default {
|
||||||
props: ['program', 'enrolled'],
|
props: ['program', 'enrolled'],
|
||||||
name: "ProgramCard",
|
name: "ProgramCard",
|
||||||
@@ -38,7 +41,6 @@ export default {
|
|||||||
lms.call('enroll_in_program', {
|
lms.call('enroll_in_program', {
|
||||||
program_name: this.program.name,
|
program_name: this.program.name,
|
||||||
}).then(data => {
|
}).then(data => {
|
||||||
console.log(data)
|
|
||||||
lms.store.updateEnrolledPrograms()
|
lms.store.updateEnrolledPrograms()
|
||||||
this.$router.push(this.programRoute)
|
this.$router.push(this.programRoute)
|
||||||
})
|
})
|
||||||
@@ -61,7 +63,8 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
AButton
|
AButton,
|
||||||
|
VideoModal
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
40
erpnext/public/js/education/lms/components/VideoModal.vue
Normal file
40
erpnext/public/js/education/lms/components/VideoModal.vue
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
<template>
|
||||||
|
<div class="modal" id="videoModal" tabindex="-1" role="dialog">
|
||||||
|
<div class="modal-dialog" role="document">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title">{{ title }}</h5>
|
||||||
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<div class="embed-responsive embed-responsive-16by9">
|
||||||
|
<iframe class="embed-responsive-item" :src="'https://www.youtube.com/embed/' + videoID"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script type="text/javascript">
|
||||||
|
export default {
|
||||||
|
name: 'VideoModal',
|
||||||
|
props: ['title', 'video'],
|
||||||
|
computed: {
|
||||||
|
videoID() {
|
||||||
|
if (!Array.prototype.last){
|
||||||
|
Array.prototype.last = function(){
|
||||||
|
return this[this.length - 1];
|
||||||
|
};
|
||||||
|
};
|
||||||
|
if (this.video.includes('v=')){
|
||||||
|
return this.video.split('v=')[1].split('&')[0]
|
||||||
|
}
|
||||||
|
else if (this.video.includes('youtu.be')) {
|
||||||
|
return this.video.split('/').last().split('?')[0]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
Reference in New Issue
Block a user