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.
69 lines
1.7 KiB
69 lines
1.7 KiB
<template>
|
|
<div
|
|
class=""
|
|
>
|
|
<div class="flex flex-col flex-center">
|
|
<div class="p-9 rounded-xl shadow-lg border border-gray-300">
|
|
<a :href="goToCourseTool(course, tool)" class="">
|
|
<v-icon
|
|
:icon="tool.tool.icon"
|
|
size="48px"
|
|
class="font-extrabold text-transparent bg-clip-text bg-gradient-to-br from-blue-400 to-blue-600"
|
|
/>
|
|
<!-- <img-->
|
|
<!-- :alt="tool.tool.name"-->
|
|
<!-- :src="'/img/tools/' + tool.tool.name + '.png'"-->
|
|
<!-- class="w-24 h-24 object-contain"-->
|
|
<!-- />-->
|
|
</a>
|
|
</div>
|
|
|
|
<div class="flex flex-row gap-2 font-bold text-gray-500 pt-3">
|
|
<a
|
|
:href="goToCourseTool(course, tool)"
|
|
>
|
|
<!-- {{ tool.ctool.nameToTranslate }} -->
|
|
{{ tool.tool.nameToShow }}
|
|
</a>
|
|
|
|
<button v-if="isCurrentTeacher && changeVisibility" @click="changeVisibility(course, tool)">
|
|
<FontAwesomeIcon
|
|
v-if="tool.ctool.resourceNode.resourceLinks[0].visibility === 2"
|
|
icon="eye" size="lg"
|
|
/>
|
|
<FontAwesomeIcon
|
|
v-else
|
|
icon="eye-slash"
|
|
size="lg"
|
|
/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import {mapGetters} from "vuex";
|
|
|
|
export default {
|
|
name: 'CourseToolList',
|
|
props: {
|
|
course: Object,
|
|
tool: Object,
|
|
goToCourseTool: {
|
|
type: Function,
|
|
required: true
|
|
},
|
|
changeVisibility: {
|
|
type: Function,
|
|
required: false
|
|
},
|
|
},
|
|
computed: {
|
|
...mapGetters({
|
|
'isCurrentTeacher': 'security/isCurrentTeacher',
|
|
}),
|
|
},
|
|
};
|
|
</script>
|
|
|