Shiloh/brotherton-erpnext
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Added Program Intro Video modal

Browse Source
This commit is contained in:
scmmishra 2019-03-28 12:20:24 +05:30
parent 233db67451
commit 9bfe3a0315
2 changed files with 46 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
erpnext/public/js/education/lms/components/ProgramCard.vue
View File

@ -9,17 +9,20 @@
<div v-html="program.description"></div>
</div>
<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">
{{ buttonName }}
{{ buttonName }}
</a-button>
<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>
</div>
<VideoModal :title="program.program_name" :video="program.intro_video"/>
</div>
</div>
</template>
<script>
import AButton from './Button.vue';
import VideoModal from './VideoModal.vue';
export default {
props: ['program', 'enrolled'],
name: "ProgramCard",
@ -38,7 +41,6 @@ export default {
lms.call('enroll_in_program', {
program_name: this.program.name,
}).then(data => {
console.log(data)
lms.store.updateEnrolledPrograms()
this.$router.push(this.programRoute)
})
@ -61,7 +63,8 @@ export default {
}
},
components: {
AButton
AButton,
VideoModal
}
};
</script>

40
erpnext/public/js/education/lms/components/VideoModal.vue Normal file
View 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">&times;</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>