adding page KursDetail.vue

alex

2025-06-03 efd853c8fed86d89dbb9da7613241fb5c806eb33

adding page KursDetail.vue

 package-lock.json

@@ -9,6 +9,7 @@
      "version": "0.1",
      "dependencies": {
        "@fastify/static": "^8.2.0",
        "@vueuse/core": "^13.3.0",
        "fastify": "^5.3.3",
        "lodash": "^4.17.21",
        "mysql2": "^3.14.1",
@@ -1636,6 +1637,12 @@
      "dev": true,
      "license": "MIT"
    },
    "node_modules/@types/web-bluetooth": {
      "version": "0.0.21",
      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
      "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==",
      "license": "MIT"
    },
    "node_modules/@vitejs/plugin-vue": {
      "version": "5.2.4",
      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.2.4.tgz",
@@ -1872,6 +1879,44 @@
      "integrity": "sha512-c/0fWy3Jw6Z8L9FmTyYfkpM5zklnqqa9+a6dz3DvONRKW2NEbh46BP0FHuLFSWi2TnQEtp91Z6zOWNrU6QiyPg==",
      "license": "MIT"
    },
    "node_modules/@vueuse/core": {
      "version": "13.3.0",
      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-13.3.0.tgz",
      "integrity": "sha512-uYRz5oEfebHCoRhK4moXFM3NSCd5vu2XMLOq/Riz5FdqZMy2RvBtazdtL3gEcmDyqkztDe9ZP/zymObMIbiYSg==",
      "license": "MIT",
      "dependencies": {
        "@types/web-bluetooth": "^0.0.21",
        "@vueuse/metadata": "13.3.0",
        "@vueuse/shared": "13.3.0"
      },
      "funding": {
        "url": "https://github.com/sponsors/antfu"
      },
      "peerDependencies": {
        "vue": "^3.5.0"
      }
    },
    "node_modules/@vueuse/metadata": {
      "version": "13.3.0",
      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-13.3.0.tgz",
      "integrity": "sha512-42IzJIOYCKIb0Yjv1JfaKpx8JlCiTmtCWrPxt7Ja6Wzoq0h79+YVXmBV03N966KEmDEESTbp5R/qO3AB5BDnGw==",
      "license": "MIT",
      "funding": {
        "url": "https://github.com/sponsors/antfu"
      }
    },
    "node_modules/@vueuse/shared": {
      "version": "13.3.0",
      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-13.3.0.tgz",
      "integrity": "sha512-L1QKsF0Eg9tiZSFXTgodYnu0Rsa2P0En2LuLrIs/jgrkyiDuJSsPZK+tx+wU0mMsYHUYEjNsuE41uqqkuR8VhA==",
      "license": "MIT",
      "funding": {
        "url": "https://github.com/sponsors/antfu"
      },
      "peerDependencies": {
        "vue": "^3.5.0"
      }
    },
    "node_modules/abstract-logging": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/abstract-logging/-/abstract-logging-2.0.1.tgz",

 package.json

@@ -13,6 +13,7 @@
  },
  "dependencies": {
    "@fastify/static": "^8.2.0",
    "@vueuse/core": "^13.3.0",
    "fastify": "^5.3.3",
    "lodash": "^4.17.21",
    "mysql2": "^3.14.1",

 vue/src/pages/KursDetail.vue

New file
@@ -0,0 +1,129 @@
<script setup>

import {useRoute} from 'vue-router'
import {onMounted, reactive, ref} from "vue"

const route = useRoute()
const kursId = route.params.kursId
const kurs = ref(null)
const kursItems = ref(null)
const kursTn = ref(null)
const error = ref(null)

onMounted(init)

/////////////////////////////////////////////////////////////////////////

async function init () {
   let resKurs = await fetch(`/api/kurs/${kursId}?token=jiuGfr432898D90290kjfsldkfn3hh8F`)
   let dataKurs = await resKurs.json()
   console.log(dataKurs)
   kurs.value = dataKurs

   let resKursItems = await fetch(`/api/kurs/items/${kursId}?token=jiuGfr432898D90290kjfsldkfn3hh8F`)
   let dataKursItems = await resKursItems.json()
   console.log(dataKursItems)
   kursItems.value = dataKursItems

   let resKursTn = await fetch(`/api/kurs/teilnehmer/${kursId}?token=jiuGfr432898D90290kjfsldkfn3hh8F`)
   let dataKursTn = await resKursTn.json()
   console.log(dataKursTn)
   kursTn.value = dataKursTn

}

</script>

<template>

   <div>
      <h1>
         Kurs {{ kursId }}
<!--         <small>{{ user?.firstname }} {{ user?.lastname }}</small>-->
      </h1>
      <p v-if="error">{{ error }}</p>

      <h2>Kurs</h2>
      <pre>{{kurs}}</pre>
      <h2>KursItems</h2>
      <pre>{{kursItems}}</pre>
      <h2>KursTn</h2>
      <pre>{{kursTn}}</pre>

<!--      <pre>{{ user }}</pre>-->

<!--      <div class="user" v-if="user">-->
<!--         <span>usr_id</span>-->
<!--         <div>{{ user.usr_id }}</div>-->

<!--         <span>login</span>-->
<!--         <div>{{ user.login }}</div>-->

<!--         <span>firstname</span>-->
<!--         <div>{{ user.firstname }}</div>-->

<!--         <span>lastname</span>-->
<!--         <div>{{ user.lastname }}</div>-->

<!--         <span>gender</span>-->
<!--         <div>{{ user.gender }}</div>-->

<!--         <span>email</span>-->
<!--         <div>{{ user.email }}</div>-->

<!--         <span>Markt</span>-->
<!--         <div>{{ user.Markt }}</div>-->

<!--         <span>Marktnummer</span>-->
<!--         <div>{{ user.Marktnummer }}</div>-->

<!--         <span>Personalnummer</span>-->
<!--         <div>{{ user.Personalnummer }}</div>-->

<!--         <span>department</span>-->
<!--         <div>{{ user.department }}</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>-->

      <!--         </tbody>-->
      <!--      </table>-->

   </div>

</template>

<style scoped>

</style>

 vue/src/pages/Kurse.vue

File was renamed from vue/src/pages/Courses.vue
@@ -56,7 +56,7 @@
            <tbody>
               <tr v-for="kurs in kurse">
                  <td>
                     <RouterLink :to="`/ui/user/${kurs.usr_id}`">
                     <RouterLink :to="`/ui/kurs/${kurs.ref_id}`">
                        {{kurs.ref_id}}
                     </RouterLink>
                  </td>

 vue/src/router.js

@@ -5,13 +5,15 @@

import Users from './pages/Users.vue'
import UserDetail from './pages/UserDetail.vue'
import Courses from './pages/Courses.vue'
import Kurse from './pages/Kurse.vue'
import KursDetail from './pages/KursDetail.vue'

const routes = [
   { path: '/', redirect: "/user" },
   { path: '/ui/user', component: Users },
   { path: '/ui/user/:userId', component: UserDetail },
   { path: '/ui/course', component: Courses },
   { path: '/ui/kurs', component: Kurse },
   { path: '/ui/kurs/:kursId', component: KursDetail },
]

const router = createRouter({