socket io

web/pages/index.vue

@@ -5,17 +5,19 @@ 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 date = ref<DateTime>(DateTime.now())
 const events = ref<Event[]>([])
 const tasks = ref<Task[]>([])
 const draggedTask = ref<DraggedTask | undefined>(undefined)
 
-const { data: eventsResponse } = await useAsyncData<SerializableEvent[]>(
+const { data: eventsResponse, refresh: refreshEvent } = await useAsyncData<SerializableEvent[]>(
 	'events',
 	() => axios.get<SerializableEvent[]>('/events').then(res => res.data)
 );
 
-const { data: tasksResponse, refresh } = await useAsyncData<SerializableTask[]>(
+const { data: tasksResponse, refresh: refreshTask } = await useAsyncData<SerializableTask[]>(
 	'tasks',
 	() => axios.get<SerializableTask[]>('/tasks').then(res => res.data)
 );
@@ -23,11 +25,18 @@ const { data: tasksResponse, refresh } = await useAsyncData<SerializableTask[]>(
 onMounted(() => {
 	events.value = eventsResponse.value?.map(Event.fromSerializable) ?? []
 	tasks.value = tasksResponse.value?.map(Task.fromSerializable) ?? []
+	$socket.on('change', async () => {
+		console.log("change socket")
+		location.reload()
+		//await refreshEvent()
+		//await refreshTask()
+	})
 })
 
 async function postEvent(event: Event) {
 	console.log('posting Event')
 	await axios.post('/events', event.toSerializable())
+	$socket.emit('change')
 }
 
 async function postTask(task: Task) {
@@ -35,30 +44,35 @@ async function postTask(task: Task) {
 	const createdTask = await axios.post<SerializableTask>('/tasks', task)
 	console.log(createdTask)
 	task.id = createdTask.data.id
+	$socket.emit('change')
 }
 
 async function deleteEvent(id: number) {
 	console.log('deleting Event')
 	await axios.delete(`/events/${id}`)
-	await refresh()
+	await refreshTask()
+	$socket.emit('change')
 }
 
 async function deleteTask(id: number) {
 	console.log('deleting Task')
 	await axios.delete(`/tasks/${id}`)
-	await refresh()
+	await refreshTask()
+	$socket.emit('change')
 }
 
 async function putEvent(event: Event) {
 	console.log('editing event')
 	await axios.put(`/events/${event.id}`, event)
-	await refresh()
+	await refreshTask()
+	$socket.emit('change')
 }
 
 async function putTask(task: Task) {
 	console.log('editing task')
 	await axios.put(`/tasks/${task.id}`, task)
-	await refresh()
+	await refreshTask()
+	$socket.emit('change')
 }
 
 function scheduleTask(task: Task) {