GS-2333

alex

2025-11-28 21cfe68a2ac2304d9c034b9d247a61e9861af666

 vue/src/pages/KursDetail.vue

@@ -2,155 +2,195 @@

import {useRoute} from 'vue-router'
import {onMounted, reactive, ref} from "vue"
import {getKurs, getKursItems, getKursTn} from "../lib/api.js"
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(null)
const kursTn = 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
async function init() {

   const dataKursTn = await getKursTn(kursId)
   console.log(dataKursTn)
   kursTn.value = dataKursTn
  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>
      <h1>
         Kurs
         <small>{{ kurs?.title }}</small>
         <!--         <small>{{ user?.firstname }} {{ user?.lastname }}</small>-->
      </h1>
      <p v-if="error">{{ error }}</p>
  <div>
<!--    <pre>{{ kurs }}</pre>-->
    <h1>
      Kurs
      <small>{{ kurs?.title }}</small>
    </h1>
    <p v-if="error">{{ error }}</p>


      <div class="user" v-if="kurs">
    <div class="kurs" v-if="kurs">

         <span>ref_id</span>
         <div>{{ kurs.ref_id }}</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>
        <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>
      <!--      <pre>{{kurs}}</pre>-->


      <h2>
         KursItems
         <small>({{ kursItems?.length }})</small>
      </h2>
      <table>
         <thead>
            <th>parent_id</th>
            <th>ref_id</th>
            <th>obj_id</th>
            <th>title</th>
            <th>type</th>
         </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>{{ item.ref_id }}</td>
               <td>{{ item.obj_id }}</td>
               <td>{{ item.title }}</td>
               <td>{{ item.type }}</td>
            </tr>
         </tbody>
      </table>
      <!--      <pre>{{ kursItems }}</pre>-->


      <h2>
         KursTn
         <small>({{ kursTn?.length }})</small>
      </h2>
      <div style="column-count: 3">
         <table>
            <thead>
               <th>usr_id</th>
               <th>login</th>
               <th>firstname</th>
               <th>lastname</th>
            </thead>
            <tbody>
               <tr v-for="tn in kursTn">
                  <td>{{ tn.usr_id }}</td>
                  <td>{{ tn.login }}</td>
                  <td>{{ tn.firstname }}</td>
                  <td>{{ tn.lastname }}</td>
               </tr>
            </tbody>
         </table>
      <div>
        <span>obj_id</span>
        <div>{{ kurs.obj_id }}</div>
      </div>
      <pre>{{ kursTn }}</pre>

      <!--      <pre>{{ user }}</pre>-->
      <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>

      <!--      <table v-if="user">-->
      <!--         <tbody>-->
      <!--            <tr>-->
      <!--               <td>user_id</td>-->
      <!--               <td>{{user.usr_id}}</td>-->
      <!--               <td>login</td>-->
      <!--               <td>{{user.login}}</td>-->
      <!--            </tr>-->
      <!--            <tr>-->
      <!--               <td>firstname</td>-->
      <!--               <td>{{user.firstname}}</td>-->
      <!--               <td>lastname</td>-->
      <!--               <td>{{user.lastname}}</td>-->
      <!--            </tr>-->
      <!--            <tr>-->
      <!--               <td>usr_id</td>-->
      <!--               <td>{{user.usr_id}}</td>-->
      <!--            </tr>-->
      <!--            <tr>-->
      <!--               <td>usr_id</td>-->
      <!--               <td>{{user.usr_id}}</td>-->
      <!--            </tr>-->
      <!--            <tr>-->
      <!--               <td>usr_id</td>-->
      <!--               <td>{{user.usr_id}}</td>-->
      <!--            </tr>-->
      <!--            <tr>-->
      <!--               <td>usr_id</td>-->
      <!--               <td>{{user.usr_id}}</td>-->
      <!--            </tr>-->
      <div style="grid-column: span 3">
        <span style="">title</span>
        <div style="">{{ kurs.title }}</div>
      </div>

      <!--         </tbody>-->
      <!--      </table>-->
<!--      <div>-->
<!--        <span>description</span>-->
<!--        <div style="grid-column: span 3">{{ kurs.description }}</div>-->
<!--      </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>
<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>