From 951966febb19bad7a8581393fe09ee34909cc621 Mon Sep 17 00:00:00 2001
From: alex <alex@alexloehr.net>
Date: Thu, 23 Oct 2025 11:55:44 +0000
Subject: [PATCH] GS-2375
---
vue/src/pages/KursDetail.vue | 185 ++++++++++++++++++++++-----------------------
1 files changed, 91 insertions(+), 94 deletions(-)
diff --git a/vue/src/pages/KursDetail.vue b/vue/src/pages/KursDetail.vue
index 54d88ac..38b4841 100644
--- a/vue/src/pages/KursDetail.vue
+++ b/vue/src/pages/KursDetail.vue
@@ -2,23 +2,40 @@
import {useRoute} from 'vue-router'
import {onMounted, reactive, ref} from "vue"
-import {getKurs, getKursItems, getKursTn, getKursTnByRole, iliasBase, routerBase} from "../lib/api.js"
+import {
+ getKurs,
+ getKursItems,
+ getKursRoles,
+ getKursTn,
+ getKursTnByRole,
+ iliasBase,
+ popcornBase,
+} 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(null)
-const kursTn = ref(null)
-const kursTnByRolle = 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
@@ -34,6 +51,10 @@
const dataKursTnByRolle = await getKursTnByRole(kursId)
console.log(dataKursTnByRolle)
kursTnByRolle.value = dataKursTnByRolle
+
+ const dataKursRoles = await getKursRoles(kursId)
+ console.log(dataKursRoles)
+ kursRoles.value = dataKursRoles
}
@@ -51,112 +72,72 @@
<p v-if="error">{{ error }}</p>
- <div class="user" v-if="kurs">
+ <div class="kurs" 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 />
+ <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" style="grid-column: span 1; justify-content: flex-end">
+ <a :href="`${popcornBase}/anmeldungen?query=iliasId:${kurs.ref_id}&terminFilter=alle`" target="_blank">
+ Search in 🍿
</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>
+ <div style="grid-column: span 2">
+ <span style="">title</span>
+ <div style="">{{ kurs.title }}</div>
+ </div>
- <span>description</span>
- <div style="grid-column: span 3">{{ kurs.description }}</div>
+ <div style="grid-column: span 2;">
+ <span>description</span>
+ <div style="grid-column: span 3">{{ kurs.description }}</div>
+ </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 class="cols">
- <!-- <div :style="{columns: kursTn?.length > 16 ? 1 : 1}">-->
- <div id="teilnehmer">
+ <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>
- <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>
+ <KursMembers :kursTn="kursTn" />
</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>
+ <KursTnByRole :kursTnByRolle="kursTnByRolle" />
</div>
</div>
@@ -167,8 +148,24 @@
<style scoped lang="stylus">
-#teilnehmer
+.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 grid;
+ grid-template-columns 1fr 1fr 1fr 1fr
+ gap 1em
+ span
+ font-variant small-caps
+ color #555
+ &>*
+ display flex
+ gap 1em
+
+
</style>
--
Gitblit v1.8.0