You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
329 lines
9.4 KiB
329 lines
9.4 KiB
<template>
|
|
<div v-if="course" class="grid gap-4">
|
|
<div class="flex flex-row justify-between border-b-2 border-gray-200 ">
|
|
<div class="line-clamp-1 text-2xl font-bold">
|
|
{{ course.title }}
|
|
<span v-if="session">
|
|
({{ session.name }})
|
|
</span>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="flex flex-row" v-if="isCurrentTeacher && course">
|
|
<a class="btn btn--info mr-2 text-xs">
|
|
<v-icon icon="mdi-eye" class="pr-2" />
|
|
{{ $t('See as student') }}
|
|
</a>
|
|
|
|
<div class="relative">
|
|
<!-- shadow rounded-full-->
|
|
<button
|
|
@click="dropdownOpen = !dropdownOpen"
|
|
class="relative z-10 block h-8 w-8 overflow-hidden focus:outline-none"
|
|
>
|
|
<v-icon>mdi-cog</v-icon>
|
|
</button>
|
|
|
|
<div
|
|
v-show="dropdownOpen"
|
|
@click="dropdownOpen = false"
|
|
class="fixed inset-0 h-full w-full z-10"
|
|
></div>
|
|
|
|
<div
|
|
v-show="dropdownOpen"
|
|
class="absolute right-0 mt-2 py-2 w-48 bg-white rounded-md shadow-xl z-20"
|
|
>
|
|
<q-list dense>
|
|
<!-- <q-item replace :to="'/main/messages/index.php'" clickable class="">-->
|
|
<!-- <q-item-section>Inbox</q-item-section>-->
|
|
<!-- </q-item>-->
|
|
<q-item
|
|
:href="goToCourseTool(course, tool)"
|
|
tag="a"
|
|
class=""
|
|
v-for="tool in tools.admin"
|
|
>
|
|
<q-item-section>
|
|
{{ $t(tool.tool.nameToShow) }}
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="isCurrentTeacher"
|
|
class="bg-gradient-to-r from-gray-100 to-gray-50 flex flex-col rounded-md text-center p-2"
|
|
>
|
|
<div v-if="intro" class="p-10 text-center">
|
|
<span v-html="intro.introText" />
|
|
|
|
<div v-if="createInSession">
|
|
<button
|
|
v-if="introTool"
|
|
class="mt-2 btn btn--info"
|
|
@click="addIntro(course, introTool)"
|
|
>
|
|
<v-icon>mdi-plus</v-icon>
|
|
{{ $t('Course introduction') }}
|
|
</button>
|
|
</div>
|
|
<div v-else>
|
|
<button
|
|
class="mt-2 btn btn--info"
|
|
@click="updateIntro(intro)"
|
|
>
|
|
<v-icon>mdi-pencil</v-icon>
|
|
{{ $t('Update') }}
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
<div v-else>
|
|
<div>
|
|
<v-icon
|
|
icon="mdi-book-open-page-variant"
|
|
size="72px"
|
|
class="font-extrabold text-transparent bg-clip-text bg-gradient-to-br from-ch-primary to-ch-primary-light"
|
|
/>
|
|
</div>
|
|
|
|
<div class="mt-2 font-bold">
|
|
{{ $t("You don't have any course content yet.") }}
|
|
</div>
|
|
|
|
<div v-if="introTool">
|
|
{{ $t('Add a course introduction to display to your students.') }}
|
|
</div>
|
|
|
|
<button
|
|
v-if="introTool"
|
|
class="mt-2 btn btn--info"
|
|
@click="addIntro(course, introTool)"
|
|
>
|
|
<v-icon>mdi-plus</v-icon>
|
|
{{ $t('Course introduction') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div v-else>
|
|
<div v-if="intro" class="p-10 text-center">
|
|
<span v-html="intro.introText" />
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="isCurrentTeacher && course" class="flex justify-between border-b-2 border-gray-200">
|
|
<div class="text-h6 font-bold">
|
|
{{ $t('Tools') }}
|
|
</div>
|
|
<!-- <div>-->
|
|
<!-- <v-icon>-->
|
|
<!-- mdi-format-paint-->
|
|
<!-- </v-icon>-->
|
|
<!-- Customize-->
|
|
<!-- </div>-->
|
|
</div>
|
|
|
|
<div
|
|
class="grid gap-5 grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-6"
|
|
>
|
|
<CourseToolList
|
|
v-for="tool in tools.authoring"
|
|
:course="course"
|
|
:tool="tool"
|
|
:go-to-course-tool="goToCourseTool"
|
|
:change-visibility="changeVisibility"
|
|
:go-to-setting-course-tool="goToSettingCourseTool"
|
|
/>
|
|
|
|
<CourseToolList
|
|
v-for="tool in tools.interaction"
|
|
:course="course"
|
|
:tool="tool"
|
|
:go-to-course-tool="goToCourseTool"
|
|
:change-visibility="changeVisibility"
|
|
:go-to-setting-course-tool="goToSettingCourseTool"
|
|
/>
|
|
|
|
<CourseToolList
|
|
v-for="tool in tools.plugin"
|
|
:course="course"
|
|
:tool="tool"
|
|
:go-to-course-tool="goToCourseTool"
|
|
:change-visibility="changeVisibility"
|
|
:go-to-setting-course-tool="goToSettingCourseTool"
|
|
/>
|
|
|
|
<ShortCutList
|
|
v-for="shortcut in shortcuts"
|
|
:shortcut="shortcut"
|
|
:go-to-short-cut="goToShortCut"
|
|
:change-visibility="changeVisibility"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Loading from '../../components/Loading.vue';
|
|
import Toolbar from '../../components/Toolbar.vue';
|
|
import CourseToolList from '../../components/course/CourseToolList.vue';
|
|
import ShortCutList from '../../components/course/ShortCutList.vue';
|
|
|
|
import isEmpty from "lodash/isEmpty";
|
|
import {useRoute, useRouter} from 'vue-router'
|
|
import axios from "axios";
|
|
import {ENTRYPOINT} from '../../config/entrypoint';
|
|
import {computed, onMounted, reactive, toRefs} from 'vue'
|
|
import {mapGetters, useStore} from "vuex";
|
|
import translateHtml from '../../../js/translatehtml.js';
|
|
|
|
export default {
|
|
name: 'Home',
|
|
servicePrefix: 'Courses',
|
|
components: {
|
|
Loading,
|
|
Toolbar,
|
|
CourseToolList,
|
|
ShortCutList
|
|
},
|
|
setup() {
|
|
const state = reactive({
|
|
course: [],
|
|
session: [],
|
|
tools: [],
|
|
shortcuts: [],
|
|
dropdownOpen: false,
|
|
intro: null,
|
|
introTool: null,
|
|
createInSession: false,
|
|
goToCourseTool,
|
|
changeVisibility,
|
|
goToSettingCourseTool,
|
|
goToShortCut,
|
|
addIntro,
|
|
updateIntro
|
|
});
|
|
const route = useRoute()
|
|
const store = useStore();
|
|
const router = useRouter();
|
|
|
|
let courseId = route.params.id;
|
|
let sessionId = route.query.sid ?? 0;
|
|
|
|
// Remove the course session state.
|
|
store.dispatch('session/cleanSession');
|
|
|
|
axios.get(ENTRYPOINT + '../course/' + courseId + '/home.json?sid=' + sessionId).then(response => {
|
|
state.course = response.data.course;
|
|
state.session = response.data.session;
|
|
state.tools = response.data.tools;
|
|
state.shortcuts = response.data.shortcuts;
|
|
getIntro();
|
|
}).catch(function (error) {
|
|
console.log(error);
|
|
});
|
|
|
|
async function getIntro() {
|
|
// Searching for the CTool called 'course_homepage'.
|
|
let introTool = state.course.tools.find(element => element.name === 'course_homepage');
|
|
|
|
if (!isEmpty(introTool)) {
|
|
state.introTool = introTool;
|
|
|
|
// Search CToolIntro for this
|
|
const filter = {
|
|
courseTool: introTool.iid,
|
|
cid: courseId,
|
|
};
|
|
|
|
store.dispatch('ctoolintro/findAll', filter).then(response => {
|
|
if (!isEmpty(response)) {
|
|
// first item
|
|
state.intro = response[0];
|
|
translateHtml();
|
|
}
|
|
});
|
|
|
|
if (!isEmpty(sessionId)) {
|
|
state.createInSession = true;
|
|
const filter = {
|
|
courseTool: introTool.iid,
|
|
cid: courseId,
|
|
sid: sessionId,
|
|
};
|
|
|
|
store.dispatch('ctoolintro/findAll', filter).then(response => {
|
|
if (!isEmpty(response)) {
|
|
state.createInSession = false;
|
|
state.intro = response[0];
|
|
translateHtml();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
function addIntro(course, introTool) {
|
|
return router.push({
|
|
name: 'ToolIntroCreate',
|
|
params: {'courseTool': introTool.iid },
|
|
query: {
|
|
'cid': courseId,
|
|
'sid': sessionId,
|
|
'parentResourceNodeId': course.resourceNode.id
|
|
}
|
|
});
|
|
}
|
|
|
|
function updateIntro(intro) {
|
|
return router.push({
|
|
name: 'ToolIntroUpdate',
|
|
params: {'id': intro['@id'] },
|
|
query: {
|
|
'cid': courseId,
|
|
'sid': sessionId,
|
|
'id': intro['@id']
|
|
}
|
|
});
|
|
}
|
|
|
|
function goToSettingCourseTool(course, tool) {
|
|
return '/course/' + courseId + '/settings/' + tool.tool.name + '?sid=' + sessionId;
|
|
}
|
|
|
|
function goToCourseTool(course, tool) {
|
|
return '/course/' + courseId + '/tool/' + tool.tool.name + '?sid=' + sessionId;
|
|
}
|
|
|
|
function goToShortCut(shortcut) {
|
|
const url = new URLSearchParams('?')
|
|
|
|
url.append('cid', courseId);
|
|
url.append('sid', sessionId);
|
|
|
|
return shortcut.url + '?' + url;
|
|
}
|
|
|
|
function changeVisibility(course, tool) {
|
|
axios.post(ENTRYPOINT + '../r/course_tool/links/' + tool.ctool.resourceNode.id + '/change_visibility').then(response => {
|
|
if (response.data.ok) {
|
|
tool.ctool.resourceNode.resourceLinks[0].visibility = response.data.visibility;
|
|
}
|
|
}).catch(function (error) {
|
|
console.log(error);
|
|
});
|
|
}
|
|
|
|
return toRefs(state);
|
|
},
|
|
computed: {
|
|
...mapGetters({
|
|
'isCurrentTeacher': 'security/isCurrentTeacher',
|
|
}),
|
|
},
|
|
};
|
|
</script>
|
|
|