From e7a1743dc7a3660115aeb67714c37d2c2e7581e1 Mon Sep 17 00:00:00 2001
From: alex <alex@alexloehr.net>
Date: Wed, 04 Jun 2025 08:35:57 +0000
Subject: [PATCH] use api everywhere
---
/dev/null | 87 -----------------------------
vue/src/components/Header.vue | 7 +-
vue/src/router.js | 2
vue/src/pages/UserDetail.vue | 14 +---
vue/src/pages/Users.vue | 35 +++++------
vue/src/lib/api.js | 12 ++++
6 files changed, 37 insertions(+), 120 deletions(-)
diff --git a/vue/src/components/Header.vue b/vue/src/components/Header.vue
index 4889214..09d73a9 100644
--- a/vue/src/components/Header.vue
+++ b/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>
diff --git a/vue/src/components/HelloWorld.vue b/vue/src/components/HelloWorld.vue
deleted file mode 100644
index eff59f1..0000000
--- a/vue/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<script setup>
-defineProps({
- msg: {
- type: String,
- required: true,
- },
-})
-</script>
-
-<template>
- <div class="greetings">
- <h1 class="green">{{ msg }}</h1>
- <h3>
- You’ve successfully created a project with
- <a href="https://vite.dev/" target="_blank" rel="noopener">Vite</a> +
- <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
- </h3>
- </div>
-</template>
-
-<style scoped>
-h1 {
- font-weight: 500;
- font-size: 2.6rem;
- position: relative;
- top: -10px;
-}
-
-h3 {
- font-size: 1.2rem;
-}
-
-.greetings h1,
-.greetings h3 {
- text-align: center;
-}
-
-@media (min-width: 1024px) {
- .greetings h1,
- .greetings h3 {
- text-align: left;
- }
-}
-</style>
diff --git a/vue/src/components/TheWelcome.vue b/vue/src/components/TheWelcome.vue
deleted file mode 100644
index fe48afc..0000000
--- a/vue/src/components/TheWelcome.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<script setup>
-import WelcomeItem from './WelcomeItem.vue'
-import DocumentationIcon from './icons/IconDocumentation.vue'
-import ToolingIcon from './icons/IconTooling.vue'
-import EcosystemIcon from './icons/IconEcosystem.vue'
-import CommunityIcon from './icons/IconCommunity.vue'
-import SupportIcon from './icons/IconSupport.vue'
-
-const openReadmeInEditor = () => fetch('/__open-in-editor?file=README.md')
-</script>
-
-<template>
- <WelcomeItem>
- <template #icon>
- <DocumentationIcon />
- </template>
- <template #heading>Documentation</template>
-
- Vue’s
- <a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
- provides you with all information you need to get started.
- </WelcomeItem>
-
- <WelcomeItem>
- <template #icon>
- <ToolingIcon />
- </template>
- <template #heading>Tooling</template>
-
- This project is served and bundled with
- <a href="https://vite.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
- recommended IDE setup is
- <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a>
- +
- <a href="https://github.com/vuejs/language-tools" target="_blank" rel="noopener">Vue - Official</a>. If
- you need to test your components and web pages, check out
- <a href="https://vitest.dev/" target="_blank" rel="noopener">Vitest</a>
- and
- <a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a>
- /
- <a href="https://playwright.dev/" target="_blank" rel="noopener">Playwright</a>.
-
- <br />
-
- More instructions are available in
- <a href="javascript:void(0)" @click="openReadmeInEditor"><code>README.md</code></a
- >.
- </WelcomeItem>
-
- <WelcomeItem>
- <template #icon>
- <EcosystemIcon />
- </template>
- <template #heading>Ecosystem</template>
-
- Get official tools and libraries for your project:
- <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
- <a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
- <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
- <a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
- you need more resources, we suggest paying
- <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
- a visit.
- </WelcomeItem>
-
- <WelcomeItem>
- <template #icon>
- <CommunityIcon />
- </template>
- <template #heading>Community</template>
-
- Got stuck? Ask your question on
- <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>
- (our official Discord server), or
- <a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
- >StackOverflow</a
- >. You should also follow the official
- <a href="https://bsky.app/profile/vuejs.org" target="_blank" rel="noopener">@vuejs.org</a>
- Bluesky account or the
- <a href="https://x.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
- X account for latest news in the Vue world.
- </WelcomeItem>
-
- <WelcomeItem>
- <template #icon>
- <SupportIcon />
- </template>
- <template #heading>Support Vue</template>
-
- As an independent project, Vue relies on community backing for its sustainability. You can help
- us by
- <a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
- </WelcomeItem>
-</template>
diff --git a/vue/src/components/WelcomeItem.vue b/vue/src/components/WelcomeItem.vue
deleted file mode 100644
index 6d7086a..0000000
--- a/vue/src/components/WelcomeItem.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<template>
- <div class="item">
- <i>
- <slot name="icon"></slot>
- </i>
- <div class="details">
- <h3>
- <slot name="heading"></slot>
- </h3>
- <slot></slot>
- </div>
- </div>
-</template>
-
-<style scoped>
-.item {
- margin-top: 2rem;
- display: flex;
- position: relative;
-}
-
-.details {
- flex: 1;
- margin-left: 1rem;
-}
-
-i {
- display: flex;
- place-items: center;
- place-content: center;
- width: 32px;
- height: 32px;
-
- color: var(--color-text);
-}
-
-h3 {
- font-size: 1.2rem;
- font-weight: 500;
- margin-bottom: 0.4rem;
- color: var(--color-heading);
-}
-
-@media (min-width: 1024px) {
- .item {
- margin-top: 0;
- padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
- }
-
- i {
- top: calc(50% - 25px);
- left: -26px;
- position: absolute;
- border: 1px solid var(--color-border);
- background: var(--color-background);
- border-radius: 8px;
- width: 50px;
- height: 50px;
- }
-
- .item:before {
- content: ' ';
- border-left: 1px solid var(--color-border);
- position: absolute;
- left: 0;
- bottom: calc(50% + 25px);
- height: calc(50% - 25px);
- }
-
- .item:after {
- content: ' ';
- border-left: 1px solid var(--color-border);
- position: absolute;
- left: 0;
- top: calc(50% + 25px);
- height: calc(50% - 25px);
- }
-
- .item:first-of-type:before {
- display: none;
- }
-
- .item:last-of-type:after {
- display: none;
- }
-}
-</style>
diff --git a/vue/src/lib/api.js b/vue/src/lib/api.js
index 4c230ba..39c3abb 100644
--- a/vue/src/lib/api.js
+++ b/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()
+}
diff --git a/vue/src/pages/UserDetail.vue b/vue/src/pages/UserDetail.vue
index 997b04d..2b53b8d 100644
--- a/vue/src/pages/UserDetail.vue
+++ b/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}`
- }
+ user.value = data
}
</script>
@@ -31,7 +25,7 @@
<template>
<div>
- <h1>
+ <h1>asdf
User {{ userId }}
<small class="ml-05">{{ user?.firstname }} {{ user?.lastname }}</small>
</h1>
diff --git a/vue/src/pages/Users.vue b/vue/src/pages/Users.vue
index 6aa0a8a..0b3341e 100644
--- a/vue/src/pages/Users.vue
+++ b/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}`
- }
+ Object.assign(users, data)
}
function go (offset) {
@@ -44,7 +41,7 @@
<h1>
ILIAS Users
-<!-- <small>{{users.offset}} - {{users.offset+users.data.length}} von {{users.total}}</small>-->
+ <!-- <small>{{users.offset}} - {{users.offset+users.data.length}} von {{users.total}}</small>-->
</h1>
<p>{{ userId }}</p>
<p v-if="error">{{ error }}</p>
@@ -61,7 +58,7 @@
<th>firstname</th>
<th>lastname</th>
<th>gender</th>
-<!-- <th>email</th>-->
+ <!-- <th>email</th>-->
<th>institution</th>
<th>department</th>
</tr>
@@ -70,22 +67,22 @@
<tr v-for="user in users.data">
<td>
<RouterLink :to="`/ui/user/${user.usr_id}`">
- {{user.usr_id}}
+ {{ user.usr_id }}
</RouterLink>
</td>
- <td>{{user.login}}</td>
- <td>{{user.firstname}}</td>
- <td>{{user.lastname}}</td>
- <td>{{user.gender}}</td>
-<!-- <td>{{ user.email}}</td>-->
- <td>{{user.institution}}</td>
- <td>{{user.department}}</td>
+ <td>{{ user.login }}</td>
+ <td>{{ user.firstname }}</td>
+ <td>{{ user.lastname }}</td>
+ <td>{{ user.gender }}</td>
+ <!-- <td>{{ user.email}}</td>-->
+ <td>{{ user.institution }}</td>
+ <td>{{ user.department }}</td>
</tr>
</tbody>
</table>
</div>
-<!-- <pre>{{ users }}</pre>-->
+ <!-- <pre>{{ users }}</pre>-->
</div>
</template>
diff --git a/vue/src/router.js b/vue/src/router.js
index c8999a0..d5c427c 100644
--- a/vue/src/router.js
+++ b/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 },
--
Gitblit v1.8.0