use api everywhere

alex

2025-06-04 e7a1743dc7a3660115aeb67714c37d2c2e7581e1

use api everywhere

 vue/src/components/Header.vue

@@ -1,6 +1,7 @@
<script setup>

import {apiTokenValid, deleteApiToken} from "../lib/api"
import {apiTokenValid, deleteApiToken, routerBase} from "../lib/api"

</script>

<template>
@@ -8,8 +9,8 @@
   <div class="header">
      <div>Globus-ILIAS-REST</div>
      <div>|</div>
      <RouterLink :to="`/ui/user`">Users</RouterLink>
      <RouterLink :to="`/ui/kurs`">Courses</RouterLink>
      <RouterLink :to="`${routerBase}/ui/user`">Users</RouterLink>
      <RouterLink :to="`${routerBase}/ui/kurs`">Courses</RouterLink>
      <div style="flex-grow: 1" />
      <div v-if="apiTokenValid">
         <button type="button" @click="deleteApiToken()">logout</button>

 vue/src/components/HelloWorld.vue

File was deleted

 vue/src/components/TheWelcome.vue

File was deleted

 vue/src/components/WelcomeItem.vue

File was deleted

 vue/src/lib/api.js

@@ -16,6 +16,7 @@

export const apiBase = import.meta.env.VITE_API_BASE
export const iliasBase = import.meta.env.VITE_ILIAS_BASE
export const routerBase = import.meta.env.VITE_ROUTER_BASE

/////// KURS ////////////////////////////////////////////////////////////////

@@ -34,3 +35,14 @@
   return await resKurs.json()
}

/////// USER ////////////////////////////////////////////////////////////////

export async function getUsers (offset, limit) {
   const res = await fetch(`${apiBase}/users?offset=${offset}&limit=${limit}&token=${apiToken.value}`)
   return res.json()
}

export async function getUser (userId) {
   const res = await fetch(`${apiBase}/user/userid/${userId}?token=${apiToken.value}`)
   return await res.json()
}

 vue/src/pages/UserDetail.vue

@@ -2,7 +2,7 @@

import {useRoute} from 'vue-router'
import {onMounted, reactive, ref} from "vue"
import {iliasBase} from "../lib/api"
import {getUser, iliasBase} from "../lib/api"
import LinkExtern from "../components/LinkExtern.vue"

const route = useRoute()
@@ -15,15 +15,9 @@
/////////////////////////////////////////////////////////////////////////

async function init () {
   const res = await fetch(`/api/user/userid/${userId}?token=jiuGfr432898D90290kjfsldkfn3hh8F`)
   const data = await res.json()
   const data = await getUser(userId)
   console.log(data)
   if (res.status === 200) {
      user.value = data
   }
   else {
      error.value = `ERROR: ${res.status}`
   }
}

</script>
@@ -31,7 +25,7 @@
<template>

   <div>
      <h1>
      <h1>asdf
         User {{ userId }}
         <small class="ml-05">{{ user?.firstname }} {{ user?.lastname }}</small>
      </h1>

 vue/src/pages/Users.vue

@@ -3,6 +3,7 @@
import {onMounted, reactive, ref} from "vue"
import {useRoute} from "vue-router"
import Pagination from "../components/Pagination.vue"
import {getUsers} from "@/lib/api"

const route = useRoute()
const userId = route.params.userId
@@ -20,15 +21,11 @@
/////////////////////////////////////////////////////////////////////////

async function init (offset = 0) {
   const res = await fetch(`/api/users?offset=${offset}&limit=${limit}&token=jiuGfr432898D90290kjfsldkfn3hh8F`)
   const data = await res.json()
   // const res = await fetch(`/api/users?offset=${offset}&limit=${limit}&token=jiuGfr432898D90290kjfsldkfn3hh8F`)
   // const data = await res.json()
   const data = await getUsers(offset, limit)
   console.log(data)
   if (res.status === 200) {
      Object.assign(users,data)
   }
   else {
      error.value = `ERROR: ${res.status}`
   }
}

function go (offset) {

 vue/src/router.js

@@ -10,7 +10,7 @@


const routes = [
   { path: `/`, redirect: "/user" },
   { path: `/`, redirect: "/ui/user" },
   { path: `/ui/user`, component: Users },
   { path: `/ui/user/:userId`, component: UserDetail },
   { path: `/ui/kurs`, component: Kurse },