<script setup>
|
|
import {useRoute} from 'vue-router'
|
import {onMounted, reactive, ref} from "vue"
|
import {
|
getKurs,
|
getKursItems, getKursLp,
|
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 LP ${kursId} | globus-ilias-rest`
|
|
const kurs = ref(null)
|
const kursLp = ref(null)
|
const error = ref(null)
|
|
onMounted(init)
|
|
/////////////////////////////////////////////////////////////////////////
|
|
|
async function init() {
|
|
const dataKurs = await getKurs(kursId)
|
console.log(dataKurs)
|
kurs.value = dataKurs
|
|
const dataKursLp = await getKursLp(kursId)
|
console.log({dataKursLp})
|
kursLp.value = dataKursLp
|
// kursLp.value = [...dataKursLp,...dataKursLp,...dataKursLp]
|
}
|
|
</script>
|
|
<template>
|
|
<div>
|
|
<p id="status-info">
|
<strong>Status</strong>
|
<span>0 = noch nicht bearbeitet</span>
|
<span>1 = in Bearbeitung</span>
|
<span>2 = bestanden</span>
|
<span>3 = nicht bestanden</span>
|
</p>
|
|
|
<h1>
|
Kurs LP
|
<small>
|
<RouterLink :to="`${routerBase}/ui/kurs/${kurs?.ref_id}`">
|
{{ kurs?.title }}
|
</RouterLink>
|
</small>
|
</h1>
|
|
<p>Der Kurs Lernfortschritt (LP) wird u.a. aus der Tabelle <code>ut_lp_marks</code> gelesen.</p>
|
|
<p v-if="error">{{ error }}</p>
|
|
<br>
|
|
<div class="kurs-lp" v-if="kursLp">
|
|
<!-- <pre>{{ kursLp }}</pre>-->
|
|
<table class="w100p">
|
<thead>
|
<tr>
|
<!-- <th>ref_id</th>-->
|
<!-- <th>obj_id</th>-->
|
<!-- <th>title</th>-->
|
<th>usr_id</th>
|
<th>login</th>
|
<th>firstname</th>
|
<th>lastname</th>
|
<!-- <th>passed</th>-->
|
<th>status</th>
|
<th>status_changed</th>
|
<th>status_overwrite</th>
|
</tr>
|
</thead>
|
<tbody>
|
<tr v-for="item in kursLp">
|
<!-- <td>{{ item.ref_id }}</td>-->
|
<!-- <td>{{ item.obj_id }}</td>-->
|
<!-- <td>{{item.title}}</td>-->
|
<td>
|
<RouterLink :to="`${routerBase}/ui/user/${item.usr_id}`">
|
{{ item.usr_id }}
|
</RouterLink>
|
</td>
|
<td>{{ item.login }}</td>
|
<td>{{ item.firstname }}</td>
|
<td>{{ item.lastname }}</td>
|
<!-- <td>{{ item.passed }}</td>-->
|
<td>{{ item.status }}</td>
|
<td>{{ dayjs(item.status_changed).format("DD.MM.YYYY HH:mm:ss") }}</td>
|
<td>{{ item.status_overwrite }}</td>
|
</tr>
|
</tbody>
|
</table>
|
|
|
</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
|
|
#status-info
|
//position absolute;
|
//right 0
|
//top 0
|
font-size 85%
|
float right
|
display flex
|
flex-direction column
|
gap .33em
|
padding .33em
|
background-color #eeeeee;
|
|
|
|
</style>
|
