quirinecker/dayplanner
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

backend auth is now working

Browse Source
This commit is contained in:
quirinecker
2025-07-07 17:48:53 +02:00
parent c8d1241580
commit 7b2ccd47f4
7 changed files with 216 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
web/pages/index.vue
View File

@@ -5,21 +5,33 @@ import MainContent from '~/components/ui/MainContent.vue';
import Sidebar from '~/components/ui/Sidebar.vue';
import { Event, type SerializableEvent } from '~/utils/event';
const {$socket} = useNuxtApp()
const { $socket } = useNuxtApp()
const auth = useAuth()
const date = ref<DateTime>(DateTime.now())
const events = ref<Event[]>([])
const tasks = ref<Task[]>([])
const draggedTask = ref<DraggedTask | undefined>(undefined)
async function fetchData<T>(path: string) {
const requestHeaders = useRequestHeaders(["cookie"]);
if (import.meta.client) {
return axios.get<T[]>(path, await getAuthHeader()).then(res => res.data)
} else {
return axios.get<T[]>(path, {
headers: requestHeaders,
}).then(res => res.data);
}
}
const { data: eventsResponse, refresh: refreshEvent } = await useAsyncData<SerializableEvent[]>(
'events',
() => axios.get<SerializableEvent[]>('/events').then(res => res.data)
() => fetchData('/events')
);
const { data: tasksResponse, refresh: refreshTask } = await useAsyncData<SerializableTask[]>(
'tasks',
() => axios.get<SerializableTask[]>('/tasks').then(res => res.data)
() => fetchData('/tasks')
);
onMounted(() => {
@@ -33,15 +45,23 @@ onMounted(() => {
})
})
async function getAuthHeader() {
return {
'headers': {
'Authorization': `Bearer ${await auth.getToken.value()}`
}
}
}
async function postEvent(event: Event) {
console.log('posting Event')
await axios.post('/events', event.toSerializable())
await axios.post('/events', event.toSerializable(), await getAuthHeader())
$socket.emit('change')
}
async function postTask(task: Task) {
console.log('posting Task')
const createdTask = await axios.post<SerializableTask>('/tasks', task)
const createdTask = await axios.post<SerializableTask>('/tasks', task, await getAuthHeader())
console.log(createdTask)
task.id = createdTask.data.id
$socket.emit('change')
@@ -49,28 +69,28 @@ async function postTask(task: Task) {
async function deleteEvent(id: number) {
console.log('deleting Event')
await axios.delete(`/events/${id}`)
await axios.delete(`/events/${id}`, await getAuthHeader())
await refreshTask()
$socket.emit('change')
}
async function deleteTask(id: number) {
console.log('deleting Task')
await axios.delete(`/tasks/${id}`)
await axios.delete(`/tasks/${id}`, await getAuthHeader())
await refreshTask()
$socket.emit('change')
}
async function putEvent(event: Event) {
console.log('editing event')
await axios.put(`/events/${event.id}`, event)
await axios.put(`/events/${event.id}`, event, await getAuthHeader())
await refreshTask()
$socket.emit('change')
}
async function putTask(task: Task) {
console.log('editing task')
await axios.put(`/tasks/${task.id}`, task)
await axios.put(`/tasks/${task.id}`, task, await getAuthHeader())
await refreshTask()
$socket.emit('change')
}
@@ -84,9 +104,10 @@ function scheduleTask(task: Task) {
<template>
<div class="h-screen w-screen p-4 flex flex-row gap-5">
<Sidebar v-if="tasks !== null" v-model:tasks="tasks" v-model:date="date" @create-task="postTask"
@delete-task="deleteTask" @schedule-task="scheduleTask" @edit-task="putTask"/>
@delete-task="deleteTask" @schedule-task="scheduleTask" @edit-task="putTask" />
<MainContent v-if="events !== null" v-model:events="events" v-model:date="date"
v-model:dragged-task="draggedTask" v-model:tasks="tasks" @create-event="postEvent" @edit-task="putTask" @edit-event="putEvent" @delete-event="deleteEvent" @delete-task="deleteTask"/>
v-model:dragged-task="draggedTask" v-model:tasks="tasks" @create-event="postEvent" @edit-task="putTask"
@edit-event="putEvent" @delete-event="deleteEvent" @delete-task="deleteTask" />
</div>
</template>