web: implemented Server State (Schmackofatz)
This commit is contained in:
parent
b7fc25b3da
commit
613b6a9314
8 changed files with 67 additions and 33 deletions
1
web/.env.example
Normal file
1
web/.env.example
Normal file
|
|
@ -0,0 +1 @@
|
|||
VITE_BACKEND_URL=
|
||||
1
web/.gitignore
vendored
1
web/.gitignore
vendored
|
|
@ -6,6 +6,7 @@ components.d.ts
|
|||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
.env
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Welcome to Vuetify 3</title>
|
||||
<title>From TURBOMANN™ & Konsorten</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -1,22 +1,14 @@
|
|||
<template>
|
||||
<div class="root">
|
||||
<h2>{{ props.licenseGroupName }}:</h2>
|
||||
<li>
|
||||
<li v-for="license in licenses" :key="license.id">
|
||||
<ListViewElement
|
||||
licenseName="Jetbrains Ultimate 2024.2.1"
|
||||
licenseKey="321z8321789"
|
||||
startDate="12.12.2020"
|
||||
endDate="13.12.2021"
|
||||
:amount=undefined
|
||||
notes="No notes"
|
||||
/>
|
||||
<ListViewElement
|
||||
licenseName="Mockup 2"
|
||||
licenseKey="XXXX-XXXX-XXXX-XXXX-XXXX-XXXX-XXXX-XXXX-XXXX"
|
||||
startDate=""
|
||||
endDate=""
|
||||
:amount=1
|
||||
notes="No notes"
|
||||
:licenseName="license.name"
|
||||
:licenseKey="license.key"
|
||||
startDate="license.start"
|
||||
endDate="license.end"
|
||||
:amount=license.amount
|
||||
notes="license.notes"
|
||||
/>
|
||||
</li>
|
||||
<!-- <ListViewElement
|
||||
|
|
@ -35,10 +27,16 @@
|
|||
<script setup lang="ts">
|
||||
import ListViewElement from './ListViewElement.vue'
|
||||
|
||||
const props = defineProps({
|
||||
licenseGroupName: String
|
||||
interface License {
|
||||
name: string;
|
||||
id: string;
|
||||
start?: Date,
|
||||
end?: Date,
|
||||
key: string,
|
||||
amount?: number,
|
||||
}
|
||||
|
||||
})
|
||||
const props = defineProps<{ licenseGroupName: string, licenses: License[]}>()
|
||||
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<template>
|
||||
<template>
|
||||
<div>
|
||||
<v-toolbar color="main" dark prominent>
|
||||
<img src="../assets/turbologo.svg" alt="logo" class="logo" width="75" />
|
||||
|
|
@ -150,7 +150,7 @@ import {
|
|||
function handlelogout() {
|
||||
console.log("logout");
|
||||
store.setToken(null);
|
||||
}
|
||||
}
|
||||
|
||||
async function submit(event: SubmitEventPromise) {
|
||||
const result = await event;
|
||||
|
|
|
|||
|
|
@ -2,11 +2,13 @@
|
|||
<div>
|
||||
<HeaderBar />
|
||||
<div class="ma-8">
|
||||
<li>
|
||||
<CategoryContainer licenseGroupName="Jetbrains Ultimate" />
|
||||
<CategoryContainer licenseGroupName="Microsoft" />
|
||||
<CategoryContainer licenseGroupName="Willy Wonker Online Movie" />
|
||||
</li>
|
||||
<div v-if="isPending">Loading...</div>
|
||||
<div v-else-if="isError">Error: {{ error?.message }}</div>
|
||||
<ul v-else-if="data">
|
||||
<li v-for="group in data" :key="group.id">
|
||||
<CategoryContainer :licenseGroupName="group.name" :licenses="group.licenses" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -14,10 +16,40 @@
|
|||
<script setup lang="ts">
|
||||
import HeaderBar from "./HeaderBar.vue";
|
||||
import CategoryContainer from "./CategoryContainer.vue";
|
||||
import { useQuery } from "@tanstack/vue-query";
|
||||
import axios from "axios";
|
||||
import { store } from "@/store";
|
||||
|
||||
interface LicenseGroup {
|
||||
id: string,
|
||||
name: string,
|
||||
licenses: License[]
|
||||
}
|
||||
|
||||
interface License {
|
||||
name: string;
|
||||
id: string;
|
||||
start?: Date,
|
||||
end?: Date,
|
||||
key: string,
|
||||
amount?: number,
|
||||
}
|
||||
|
||||
const {isPending, isError, data, error} = useQuery({
|
||||
queryKey: ["licenses"],
|
||||
queryFn: async () => {
|
||||
const res = await axios.get<LicenseGroup[]>(import.meta.env.VITE_BACKEND_URL + "/licenses", {
|
||||
headers: {
|
||||
Authorization: `Bearer ${store.token}`
|
||||
}
|
||||
})
|
||||
return res.data
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
li {
|
||||
li, ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -41,12 +41,12 @@ const password = ref("");
|
|||
async function login() {
|
||||
try {
|
||||
const response = await axios.post<string>(
|
||||
"http://localhost:8080/api/v1/auth/login",
|
||||
import.meta.env.VITE_BACKEND_URL + "/auth/login",
|
||||
{ email: email.value, password: password.value }
|
||||
);
|
||||
if (response.status === 200) {
|
||||
store.setToken(response.data);
|
||||
} else {
|
||||
} else {
|
||||
alert("Invalid Credentials");
|
||||
}
|
||||
} catch (err) {
|
||||
|
|
|
|||
|
|
@ -5,11 +5,13 @@
|
|||
*/
|
||||
|
||||
// Plugins
|
||||
import vuetify from './vuetify'
|
||||
import { VueQueryPlugin } from "@tanstack/vue-query";
|
||||
import vuetify from "./vuetify";
|
||||
|
||||
// Types
|
||||
import type { App } from 'vue'
|
||||
import type { App } from "vue";
|
||||
|
||||
export function registerPlugins (app: App) {
|
||||
app.use(vuetify)
|
||||
export function registerPlugins(app: App) {
|
||||
app.use(vuetify);
|
||||
app.use(VueQueryPlugin);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue