<script setup>
|
|
import {useRoute} from 'vue-router'
|
import {onMounted, reactive, ref} from "vue"
|
import {
|
getKurs,
|
getKursItems,
|
getKursRoles,
|
getKursTn,
|
getKursTnByRole,
|
iliasBase,
|
popcornBase, routerBase,
|
} from "../lib/api.js"
|
import LinkExtern from "../components/LinkExtern.vue"
|
import dayjs from "dayjs"
|
import KursItems from '../components/KursItems.vue'
|
import KursRoles from '../components/KursRoles.vue'
|
import KursMembers from '../components/KursMembers.vue'
|
import KursTnByRole from '../components/KursTnByRole.vue'
|
|
const route = useRoute()
|
const kursId = route.params.kursId
|
document.title = `Kurs ${kursId} | globus-ilias-rest`
|
|
const kurs = ref(null)
|
const kursItems = ref([])
|
const kursTn = ref([])
|
const kursTnByRolle = ref([])
|
const kursRoles = ref([])
|
const error = ref(null)
|
|
onMounted(init)
|
|
/////////////////////////////////////////////////////////////////////////
|
|
|
async function init() {
|
|
const dataKurs = await getKurs(kursId)
|
console.log(dataKurs)
|
kurs.value = dataKurs
|
|
const dataKursItems = await getKursItems(kursId)
|
console.log(dataKursItems)
|
kursItems.value = dataKursItems
|
|
const dataKursTn = await getKursTn(kursId)
|
console.log(dataKursTn)
|
kursTn.value = dataKursTn
|
|
const dataKursTnByRolle = await getKursTnByRole(kursId)
|
console.log(dataKursTnByRolle)
|
kursTnByRolle.value = dataKursTnByRolle
|
|
const dataKursRoles = await getKursRoles(kursId)
|
console.log(dataKursRoles)
|
kursRoles.value = dataKursRoles
|
|
}
|
|
const aaa = import.meta.env.VITE_TST
|
|
</script>
|
|
<template>
|
|
<div>
|
<!-- <pre>{{ kurs }}</pre>-->
|
<h1>
|
Kurs
|
<small>{{ kurs?.title }}</small>
|
</h1>
|
<p v-if="error">{{ error }}</p>
|
|
|
<div class="kurs" v-if="kurs">
|
|
|
<div>
|
<span>ref_id</span>
|
<div>
|
<a :href="`${iliasBase}/goto.php?target=${kurs.type}_${kurs.ref_id}`" target="_blank">
|
{{ kurs.ref_id }}
|
<LinkExtern/>
|
</a>
|
</div>
|
</div>
|
|
<div>
|
<span>obj_id</span>
|
<div>{{ kurs.obj_id }}</div>
|
</div>
|
|
<div>
|
<span>offline</span>
|
<div :class="{red:kurs.offline===1,green:kurs.offline===0}">
|
{{ kurs.offline }}
|
</div>
|
</div>
|
|
<div class="text-right">
|
<div style="display:block; text-align:right;">
|
<a :href="`${popcornBase}/anmeldungen?query=iliasId:${kurs.ref_id}&terminFilter=alle`" target="_blank">
|
Search in 🍿
|
</a>
|
</div>
|
</div>
|
|
<div style="grid-column: span 3">
|
<span style="">title</span>
|
<div style="">{{ kurs.title }}</div>
|
</div>
|
|
<!-- <div>-->
|
<!-- <span>description</span>-->
|
<!-- <div style="grid-column: span 3">{{ kurs.description }}</div>-->
|
<!-- </div>-->
|
|
<div>
|
<span>Learning Progress</span>
|
<div>
|
<RouterLink :to="`${routerBase}/ui/kurs/${kurs?.ref_id}/lp`">
|
LP {{ kurs?.ref_id }}
|
</RouterLink>
|
</div>
|
</div>
|
|
</div>
|
|
<div class="cols">
|
|
<div>
|
<h2>KursItems <small>({{ kursItems?.length }})</small></h2>
|
<KursItems :kursItems="kursItems"/>
|
</div>
|
|
<div>
|
<h2>KursRoles <small>({{ kursRoles?.length }})</small></h2>
|
<KursRoles :kursRoles="kursRoles"/>
|
</div>
|
|
</div>
|
|
<div class="cols">
|
<div>
|
<h2>KursTn by Members <small>({{ kursTn?.length }})</small></h2>
|
<KursMembers :kursTn="kursTn"/>
|
</div>
|
|
<div>
|
<h2>KursTnByRole <small>({{ kursTnByRolle?.length }})</small></h2>
|
<KursTnByRole :kursTnByRolle="kursTnByRolle"/>
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style scoped lang="stylus">
|
|
.cols
|
display flex;
|
gap 2em
|
|
.kurs
|
padding 1em
|
border 1px solid #aaa
|
border-radius .33em
|
box-shadow 1px 1px 3px #333 inset, 1px 1px 100px #ddd inset
|
display flex
|
flex-direction column
|
display grid;
|
grid-template-columns 1fr 1fr 1fr 1fr
|
gap 1em
|
|
span
|
font-variant small-caps
|
font-size 85%
|
color #555
|
|
& > *
|
display flex
|
flex 1 0 auto
|
justify-content start
|
//border 4px solid orange
|
align-items baseline
|
gap .66em
|
|
& > *
|
display flex
|
flex-direction row
|
gap .33em
|
|
</style>
|
