<script setup>
|
|
import {useRoute} from 'vue-router'
|
import {onMounted, reactive, ref} from "vue"
|
import {getKurs, getKursItems, getKursTn, getKursTnByRole, iliasBase, routerBase} from "../lib/api.js"
|
import LinkExtern from "../components/LinkExtern.vue"
|
import dayjs from "dayjs"
|
|
const route = useRoute()
|
const kursId = route.params.kursId
|
const kurs = ref(null)
|
const kursItems = ref(null)
|
const kursTn = ref(null)
|
const kursTnByRolle = ref(null)
|
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 aaa = import.meta.env.VITE_TST
|
|
</script>
|
|
<template>
|
|
<div>
|
<h1>
|
Kurs
|
<small>{{ kurs?.title }}</small>
|
</h1>
|
<p v-if="error">{{ error }}</p>
|
|
|
<div class="user" v-if="kurs">
|
|
<span>ref_id</span>
|
<div>
|
<a :href="`${iliasBase}/goto.php?target=${kurs.type}_${kurs.ref_id}`" target="_blank">
|
{{ kurs.ref_id }}
|
<LinkExtern />
|
</a>
|
</div>
|
|
<span>obj_id</span>
|
<div>{{ kurs.obj_id }}</div>
|
|
<span style="margin-top: 1em;">title</span>
|
<div style="grid-column: span 3; margin-top: 1em">{{ kurs.title }}</div>
|
|
<span>description</span>
|
<div style="grid-column: span 3">{{ kurs.description }}</div>
|
|
</div>
|
|
<h2>
|
KursItems
|
<small>({{ kursItems?.length }})</small>
|
</h2>
|
<table>
|
<thead>
|
<tr>
|
<th>parent_id</th>
|
<th>ref_id</th>
|
<th>obj_id</th>
|
<th>title</th>
|
<th>type</th>
|
</tr>
|
</thead>
|
<tbody>
|
<!-- TODO verlinken auf Ziel in ILAS | goto.php?target=crs_ID -->
|
<tr v-for="item in kursItems">
|
<td>{{ item.parent_id }}</td>
|
<td>
|
<a :href="`${iliasBase}/goto.php?target=${item.type}_${item.ref_id}`" target="_blank">
|
{{ item.ref_id }}
|
<LinkExtern />
|
</a>
|
</td>
|
<td>{{ item.obj_id }}</td>
|
<td>{{ item.title }}</td>
|
<td>{{ item.type }}</td>
|
</tr>
|
</tbody>
|
</table>
|
|
<!-- <div :style="{columns: kursTn?.length > 16 ? 1 : 1}">-->
|
<div id="teilnehmer">
|
<div>
|
<h2>KursTn by Members <small>({{ kursTn?.length }})</small></h2>
|
<table>
|
<thead>
|
<tr>
|
<th>usr_id</th>
|
<th>login</th>
|
<th>firstname</th>
|
<th>lastname</th>
|
<th>passed</th>
|
<th>status</th>
|
<th>status_changed</th>
|
</tr>
|
</thead>
|
<tbody>
|
<tr v-for="tn in kursTn">
|
<td>
|
<RouterLink :to="`${routerBase}/ui/user/${tn.usr_id}`">{{ tn.usr_id }}</RouterLink>
|
</td>
|
<td>{{ tn.login }}</td>
|
<td>{{ tn.firstname }}</td>
|
<td>{{ tn.lastname }}</td>
|
<td>{{ tn.passed }}</td>
|
<td>{{ tn.status }}</td>
|
<td>{{ dayjs(tn.status_changed).format("DD.MM.YYYY HH:mm:ss") }}</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
|
<div>
|
<h2>KursTnByRole <small>({{ kursTnByRolle?.length }})</small></h2>
|
<table>
|
<thead>
|
<tr>
|
<th>role_id</th>
|
<th>usr_id</th>
|
<th>firstname</th>
|
<th>lastname</th>
|
</tr>
|
</thead>
|
<tbody>
|
<tr v-for="tn in kursTnByRolle">
|
<td>{{ tn.role_id }}</td>
|
<td>
|
<RouterLink :to="`${routerBase}/ui/user/${tn.usr_id}`">{{ tn.usr_id }}</RouterLink>
|
</td>
|
<td>{{ tn.firstname }}</td>
|
<td>{{ tn.lastname }}</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style scoped lang="stylus">
|
|
#teilnehmer
|
display flex;
|
gap 2em
|
|
</style>
|
