mirror of
https://gitlab.dit.htwk-leipzig.de/htwk-software/htwkalender-pwa.git
synced 2025-08-03 18:29:16 +02:00
fixed frontend (format, lint, build)
This commit is contained in:
masterElmar
60
.idea/workspace.xml
generated
60
.idea/workspace.xml
generated
@@ -6,6 +6,46 @@
|
||||
<component name="ChangeListManager">
|
||||
<list default="true" id="81c34cb9-5538-45c5-b693-4f8a6bed15c4" name="Changes" comment="added missing idea files">
|
||||
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/frontend/.eslintrc.cjs" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/.eslintrc.cjs" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/frontend/.prettierrc.json" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/.prettierrc.json" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/frontend/README.md" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/README.md" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/frontend/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/index.html" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/frontend/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/package-lock.json" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/frontend/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/package.json" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/frontend/src/App.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/App.vue" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/frontend/src/api/createFeed.ts" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/api/createFeed.ts" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/frontend/src/api/fetchCourse.ts" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/api/fetchCourse.ts" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/frontend/src/api/fetchModule.ts" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/api/fetchModule.ts" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/frontend/src/api/fetchRoom.ts" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/api/fetchRoom.ts" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/frontend/src/api/loadCalendar.ts" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/api/loadCalendar.ts" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/frontend/src/components/AdditionalModules.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/AdditionalModules.vue" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/frontend/src/components/CalendarLink.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/CalendarLink.vue" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/frontend/src/components/CourseSelection.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/CourseSelection.vue" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/frontend/src/components/FaqPage.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/FaqPage.vue" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/frontend/src/components/ImprintPage.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/ImprintPage.vue" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/frontend/src/components/MenuBar.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/MenuBar.vue" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/frontend/src/components/ModuleInformation.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/ModuleInformation.vue" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/frontend/src/components/ModuleSelection.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/ModuleSelection.vue" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/frontend/src/components/ModuleTemplateDialog.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/ModuleTemplateDialog.vue" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/frontend/src/components/PrivacyPolicy.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/PrivacyPolicy.vue" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/frontend/src/components/RenameModules.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/RenameModules.vue" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/frontend/src/components/RoomFinder.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/RoomFinder.vue" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/frontend/src/components/RoomOccupation.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/RoomOccupation.vue" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/frontend/src/components/editCalendar/EditAdditionalModules.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/editCalendar/EditAdditionalModules.vue" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/frontend/src/components/editCalendar/EditModules.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/editCalendar/EditModules.vue" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/frontend/src/main.ts" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/main.ts" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/frontend/src/model/calendar.ts" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/model/calendar.ts" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/frontend/src/model/event.ts" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/model/event.ts" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/frontend/src/model/module.ts" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/model/module.ts" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/frontend/src/router/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/router/index.ts" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/frontend/src/store/moduleStore.ts" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/store/moduleStore.ts" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/frontend/src/store/tokenStore.ts" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/store/tokenStore.ts" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/frontend/src/style.css" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/style.css" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/frontend/src/view/editCalendarView.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/view/editCalendarView.vue" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/frontend/src/vite-env.d.ts" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/vite-env.d.ts" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/frontend/tsconfig.json" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/tsconfig.json" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/frontend/tsconfig.node.json" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/tsconfig.node.json" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/frontend/vite.config.ts" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/vite.config.ts" afterDir="false" />
|
||||
</list>
|
||||
<option name="SHOW_DIALOG" value="false" />
|
||||
<option name="HIGHLIGHT_CONFLICTS" value="true" />
|
||||
@@ -69,7 +109,7 @@
|
||||
"RunOnceActivity.go.migrated.go.modules.settings": "true",
|
||||
"RunOnceActivity.go.modules.automatic.dependencies.download": "true",
|
||||
"WebServerToolWindowFactoryState": "false",
|
||||
"git-widget-placeholder": "10-roomfinder",
|
||||
"git-widget-placeholder": "main",
|
||||
"go.import.settings.migrated": "true",
|
||||
"ignore.virus.scanning.warn.message": "true",
|
||||
"jdk.selected.JAVA_MODULE": "20",
|
||||
@@ -79,7 +119,7 @@
|
||||
"node.js.selected.package.eslint": "(autodetect)",
|
||||
"node.js.selected.package.tslint": "(autodetect)",
|
||||
"nodejs_package_manager_path": "npm",
|
||||
"prettierjs.PrettierConfiguration.Package": "C:\\Users\\masterelmar\\GolandProjects\\htwk-planner\\frontend\\node_modules\\prettier",
|
||||
"prettierjs.PrettierConfiguration.Package": "C:\\Users\\masterelmar\\project\\htwkalender\\frontend\\node_modules\\prettier",
|
||||
"project.structure.last.edited": "Modules",
|
||||
"project.structure.proportion": "0.0",
|
||||
"project.structure.side.proportion": "0.42068964",
|
||||
@@ -138,6 +178,8 @@
|
||||
<workItem from="1697823365338" duration="611000" />
|
||||
<workItem from="1697823990507" duration="315000" />
|
||||
<workItem from="1698862050509" duration="64000" />
|
||||
<workItem from="1698873056958" duration="5000" />
|
||||
<workItem from="1698873376316" duration="726000" />
|
||||
</task>
|
||||
<servers />
|
||||
</component>
|
||||
@@ -149,7 +191,19 @@
|
||||
<map>
|
||||
<entry key="MAIN">
|
||||
<value>
|
||||
<State />
|
||||
<State>
|
||||
<option name="FILTERS">
|
||||
<map>
|
||||
<entry key="branch">
|
||||
<value>
|
||||
<list>
|
||||
<option value="main" />
|
||||
</list>
|
||||
</value>
|
||||
</entry>
|
||||
</map>
|
||||
</option>
|
||||
</State>
|
||||
</value>
|
||||
</entry>
|
||||
</map>
|
||||
|
||||
@@ -33,6 +33,7 @@ export async function fetchModulesByCourseAndSemester(
|
||||
module.name,
|
||||
module.prof,
|
||||
semester,
|
||||
false,
|
||||
module.events,
|
||||
),
|
||||
),
|
||||
@@ -57,6 +58,7 @@ export async function fetchAllModules(): Promise<Module[]> {
|
||||
module.name,
|
||||
module.prof,
|
||||
module.semester,
|
||||
false,
|
||||
module.events,
|
||||
),
|
||||
);
|
||||
|
||||
@@ -22,6 +22,7 @@ export async function fetchModule(module: Module): Promise<Module> {
|
||||
module.name,
|
||||
module.prof,
|
||||
module.semester,
|
||||
false,
|
||||
module.events,
|
||||
),
|
||||
);
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import {Event} from "../model/event.ts";
|
||||
import { Event } from "../model/event.ts";
|
||||
|
||||
export async function fetchRoom(): Promise<string[]> {
|
||||
const rooms: string[] = [];
|
||||
@@ -13,24 +13,26 @@ export async function fetchRoom(): Promise<string[]> {
|
||||
}
|
||||
|
||||
export async function fetchEventsByRoomAndDuration(
|
||||
room: string,
|
||||
from_date: string,
|
||||
to_date: string,
|
||||
room: string,
|
||||
from_date: string,
|
||||
to_date: string,
|
||||
): Promise<Event[]> {
|
||||
const events: Event[] = [];
|
||||
await fetch("/api/schedule?room=" + room + "&from=" + from_date + "&to=" + to_date)
|
||||
.then((response) => {
|
||||
console.log(response);
|
||||
return response.json();
|
||||
})
|
||||
.then((eventsResponse) => {
|
||||
console.log("Response:", eventsResponse);
|
||||
eventsResponse.forEach((event: Event) =>
|
||||
events.push(event));
|
||||
}).catch((error) => {
|
||||
console.log("Error fetching events: ", error);
|
||||
return null;
|
||||
})
|
||||
console.log("occupations: ", events);
|
||||
return events;
|
||||
}
|
||||
const events: Event[] = [];
|
||||
await fetch(
|
||||
"/api/schedule?room=" + room + "&from=" + from_date + "&to=" + to_date,
|
||||
)
|
||||
.then((response) => {
|
||||
console.log(response);
|
||||
return response.json();
|
||||
})
|
||||
.then((eventsResponse) => {
|
||||
console.log("Response:", eventsResponse);
|
||||
eventsResponse.forEach((event: Event) => events.push(event));
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log("Error fetching events: ", error);
|
||||
return null;
|
||||
});
|
||||
console.log("occupations: ", events);
|
||||
return events;
|
||||
}
|
||||
|
||||
@@ -4,13 +4,21 @@ import { Ref, ref } from "vue";
|
||||
const helpVisible: Ref<boolean> = ref(false);
|
||||
|
||||
const placeholders = ref([
|
||||
{ placeholder: "%t", description: "Event Type", examples: "V = Vorlesung, S = Seminar, P = Praktikum/Prüfung" },
|
||||
{ placeholder: "%p", description: "Mandatory", examples: "w = optional, p = mandatory" },
|
||||
{
|
||||
placeholder: "%t",
|
||||
description: "Event Type",
|
||||
examples: "V = Vorlesung, S = Seminar, P = Praktikum/Prüfung",
|
||||
},
|
||||
{
|
||||
placeholder: "%p",
|
||||
description: "Mandatory",
|
||||
examples: "w = optional, p = mandatory",
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Button
|
||||
<Button
|
||||
icon="pi pi-info"
|
||||
class="m-2 small-button"
|
||||
severity="help"
|
||||
@@ -18,36 +26,30 @@ const placeholders = ref([
|
||||
outlined
|
||||
size="large"
|
||||
aria-label="Help"
|
||||
@click="helpVisible = true" />
|
||||
<Dialog
|
||||
v-model:visible="helpVisible"
|
||||
header="Module configuration"
|
||||
>
|
||||
@click="helpVisible = true"
|
||||
/>
|
||||
<Dialog v-model:visible="helpVisible" header="Module configuration">
|
||||
<p>
|
||||
Here you can rename your modules to your liking. This will be the name
|
||||
of the event in your calendar.
|
||||
Here you can rename your modules to your liking. This will be the name of
|
||||
the event in your calendar.
|
||||
</p>
|
||||
<p>
|
||||
You can use the following placeholders in your module names:
|
||||
</p>
|
||||
<DataTable
|
||||
:value="placeholders"
|
||||
>
|
||||
<p>You can use the following placeholders in your module names:</p>
|
||||
<DataTable :value="placeholders">
|
||||
<Column field="placeholder" header="Placeholder"></Column>
|
||||
<Column field="description" header="Description"></Column>
|
||||
<Column field="examples" header="Examples"></Column>
|
||||
</DataTable>
|
||||
<p>
|
||||
Additionally, you can toggle notifications for each module.
|
||||
If you do so, you will be notified 15 minutes before the event starts.
|
||||
Additionally, you can toggle notifications for each module. If you do so,
|
||||
you will be notified 15 minutes before the event starts.
|
||||
</p>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.small-button.p-button {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
padding: 0;
|
||||
}
|
||||
.small-button.p-button {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -18,7 +18,7 @@ const tableData = ref(
|
||||
const columns = ref([
|
||||
{ field: "Course", header: "Course" },
|
||||
{ field: "Module", header: "Module" },
|
||||
{ field: "Reminder", header: "Reminder"}
|
||||
{ field: "Reminder", header: "Reminder" },
|
||||
]);
|
||||
|
||||
async function finalStep() {
|
||||
@@ -43,11 +43,18 @@ async function finalStep() {
|
||||
>
|
||||
<template #header>
|
||||
<div class="flex align-items-center justify-content-end">
|
||||
Enable all notifications:
|
||||
Enable all notifications:
|
||||
<InputSwitch
|
||||
class="mx-4"
|
||||
:model-value="tableData.reduce((acc, curr) => acc && curr.Module.reminder, true)"
|
||||
@update:model-value="tableData.forEach((module) => module.Module.reminder = $event)"
|
||||
:model-value="
|
||||
tableData.reduce(
|
||||
(acc, curr) => acc && curr.Module.reminder,
|
||||
true,
|
||||
)
|
||||
"
|
||||
@update:model-value="
|
||||
tableData.forEach((module) => (module.Module.reminder = $event))
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -63,15 +70,15 @@ async function finalStep() {
|
||||
<template v-if="field === 'Module'">
|
||||
{{ data[field].userDefinedName }}
|
||||
</template>
|
||||
<template v-else-if="field === 'Reminder'" class="align-content-center">
|
||||
<Button
|
||||
<template v-else-if="field === 'Reminder'">
|
||||
<Button
|
||||
:icon="data.Module.reminder ? 'pi pi-bell' : 'pi pi-times'"
|
||||
:severity="data.Module.reminder ? 'warning' : 'secondary'"
|
||||
rounded
|
||||
outlined
|
||||
class="small-button"
|
||||
@click = "data.Module.reminder = !data.Module.reminder"
|
||||
></Button>
|
||||
@click="data.Module.reminder = !data.Module.reminder"
|
||||
></Button>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ data[field] }}
|
||||
@@ -91,14 +98,14 @@ async function finalStep() {
|
||||
v-model="data.Module.reminder"
|
||||
class="align-self-center"
|
||||
/>-->
|
||||
<Button
|
||||
<Button
|
||||
:icon="data.Module.reminder ? 'pi pi-bell' : 'pi pi-times'"
|
||||
:severity="data.Module.reminder ? 'warning' : 'secondary'"
|
||||
rounded
|
||||
outlined
|
||||
class="small-button"
|
||||
@click = "data.Module.reminder = !data.Module.reminder"
|
||||
></Button>
|
||||
@click="data.Module.reminder = !data.Module.reminder"
|
||||
></Button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div>{{ data[field] }}</div>
|
||||
@@ -115,9 +122,9 @@ async function finalStep() {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.small-button.p-button {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
padding: 0;
|
||||
}
|
||||
.small-button.p-button {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
<script lang="ts" setup>
|
||||
|
||||
import {Ref, ref} from "vue";
|
||||
import {fetchRoom} from "../api/fetchRoom.ts";
|
||||
import { Ref, ref } from "vue";
|
||||
import { fetchRoom } from "../api/fetchRoom.ts";
|
||||
import RoomOccupation from "./RoomOccupation.vue";
|
||||
|
||||
const rooms = async () => {
|
||||
@@ -9,13 +8,13 @@ const rooms = async () => {
|
||||
};
|
||||
|
||||
const roomsList: Ref<{ name: string }[]> = ref([]);
|
||||
const selectedRoom: Ref<{ name: string }> = ref({name: ""});
|
||||
const selectedRoom: Ref<{ name: string }> = ref({ name: "" });
|
||||
|
||||
rooms().then(
|
||||
(data) =>
|
||||
(roomsList.value = data.map((room) => {
|
||||
return {name: room};
|
||||
})),
|
||||
(data) =>
|
||||
(roomsList.value = data.map((room) => {
|
||||
return { name: room };
|
||||
})),
|
||||
);
|
||||
</script>
|
||||
|
||||
@@ -25,26 +24,24 @@ rooms().then(
|
||||
<h3 class="text-4xl">Raumfinder</h3>
|
||||
</div>
|
||||
<div
|
||||
class="flex align-items-center justify-content-center h-4rem border-round m-2"
|
||||
class="flex align-items-center justify-content-center h-4rem border-round m-2"
|
||||
>
|
||||
<h5 class="text-2xl">Please select a room</h5>
|
||||
</div>
|
||||
<div
|
||||
class="flex align-items-center justify-content-center border-round m-2"
|
||||
class="flex align-items-center justify-content-center border-round m-2"
|
||||
>
|
||||
<Dropdown
|
||||
v-model="selectedRoom"
|
||||
:options="roomsList"
|
||||
class="w-full md:w-25rem mx-2"
|
||||
filter
|
||||
option-label="name"
|
||||
placeholder="Select a Room"
|
||||
v-model="selectedRoom"
|
||||
:options="roomsList"
|
||||
class="w-full md:w-25rem mx-2"
|
||||
filter
|
||||
option-label="name"
|
||||
placeholder="Select a Room"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="m-6"
|
||||
>
|
||||
<RoomOccupation :room="selectedRoom.name"/>
|
||||
<div class="m-6">
|
||||
<RoomOccupation :room="selectedRoom.name" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<script lang="ts" setup>
|
||||
import FullCalendar from '@fullcalendar/vue3'
|
||||
import dayGridPlugin from '@fullcalendar/daygrid'
|
||||
import interactionPlugin from '@fullcalendar/interaction'
|
||||
import timeGridPlugin from '@fullcalendar/timegrid'
|
||||
import {computed, ref, Ref, watch} from "vue";
|
||||
import {CalendarOptions, EventInput} from "@fullcalendar/core";
|
||||
import {fetchEventsByRoomAndDuration} from "../api/fetchRoom.ts";
|
||||
import FullCalendar from "@fullcalendar/vue3";
|
||||
import dayGridPlugin from "@fullcalendar/daygrid";
|
||||
import interactionPlugin from "@fullcalendar/interaction";
|
||||
import timeGridPlugin from "@fullcalendar/timegrid";
|
||||
import { computed, ref, Ref, watch } from "vue";
|
||||
import { CalendarOptions, EventInput } from "@fullcalendar/core";
|
||||
import { fetchEventsByRoomAndDuration } from "../api/fetchRoom.ts";
|
||||
|
||||
const props = defineProps({
|
||||
room: {
|
||||
@@ -26,114 +26,112 @@ const occupations: Ref<CalenderEvent[]> = ref([]);
|
||||
|
||||
const selectedRoom = computed(() => props.room);
|
||||
|
||||
watch(selectedRoom, (_newValue: string) => {
|
||||
watch(selectedRoom, () => {
|
||||
getOccupation();
|
||||
});
|
||||
|
||||
const fullCalendar = ref<InstanceType<typeof FullCalendar>>()
|
||||
const fullCalendar = ref<InstanceType<typeof FullCalendar>>();
|
||||
|
||||
async function getOccupation() {
|
||||
if (selectedRoom.value === "") {
|
||||
return;
|
||||
}
|
||||
const events = await fetchEventsByRoomAndDuration(
|
||||
selectedRoom.value,
|
||||
currentDateFrom.value,
|
||||
currentDateTo.value
|
||||
selectedRoom.value,
|
||||
currentDateFrom.value,
|
||||
currentDateTo.value,
|
||||
);
|
||||
occupations.value = events.map((event, index) => {
|
||||
return {
|
||||
id: index,
|
||||
start: event.start.replace(/\s\+\d{4}\s\w+$/, '').replace(' ', 'T'),
|
||||
end: event.end.replace(/\s\+\d{4}\s\w+$/, '').replace(' ', 'T')
|
||||
start: event.start.replace(/\s\+\d{4}\s\w+$/, "").replace(" ", "T"),
|
||||
end: event.end.replace(/\s\+\d{4}\s\w+$/, "").replace(" ", "T"),
|
||||
};
|
||||
});
|
||||
|
||||
let calendar = fullCalendar.value?.getApi()
|
||||
calendar?.refetchEvents()
|
||||
const calendar = fullCalendar.value?.getApi();
|
||||
calendar?.refetchEvents();
|
||||
}
|
||||
|
||||
|
||||
const calendarOptions: CalendarOptions = {
|
||||
plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
|
||||
initialView: 'week',
|
||||
dayHeaderFormat: {weekday: 'short', omitCommas: true},
|
||||
slotDuration: "00:15:00",
|
||||
eventTimeFormat: {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
hour12: false
|
||||
},
|
||||
views: {
|
||||
week: {
|
||||
type: 'timeGrid',
|
||||
slotLabelFormat: {
|
||||
hour: 'numeric',
|
||||
minute: '2-digit',
|
||||
omitZeroMinute: false,
|
||||
meridiem: false,
|
||||
hour12: false
|
||||
},
|
||||
dateAlignment: "week",
|
||||
titleFormat: {month: 'short', day: 'numeric'},
|
||||
slotMinTime: "06:00:00",
|
||||
slotMaxTime: "22:00:00",
|
||||
|
||||
duration: {days: 7},
|
||||
firstDay: 1,
|
||||
allDaySlot: false,
|
||||
hiddenDays: [0]
|
||||
const calendarOptions: CalendarOptions = {
|
||||
plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
|
||||
initialView: "week",
|
||||
dayHeaderFormat: { weekday: "short", omitCommas: true },
|
||||
slotDuration: "00:15:00",
|
||||
eventTimeFormat: {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
hour12: false,
|
||||
},
|
||||
views: {
|
||||
week: {
|
||||
type: "timeGrid",
|
||||
slotLabelFormat: {
|
||||
hour: "numeric",
|
||||
minute: "2-digit",
|
||||
omitZeroMinute: false,
|
||||
meridiem: false,
|
||||
hour12: false,
|
||||
},
|
||||
Day: {
|
||||
type: 'timeGrid',
|
||||
slotLabelFormat: {
|
||||
hour: 'numeric',
|
||||
minute: '2-digit',
|
||||
omitZeroMinute: false,
|
||||
meridiem: false,
|
||||
hour12: false
|
||||
},
|
||||
titleFormat: {month: 'short', day: 'numeric'},
|
||||
slotMinTime: "06:00:00",
|
||||
slotMaxTime: "22:00:00",
|
||||
duration: {days: 1},
|
||||
allDaySlot: false,
|
||||
hiddenDays: [0]
|
||||
},
|
||||
},
|
||||
headerToolbar: {
|
||||
end: 'prev,next today',
|
||||
center: 'title',
|
||||
start: 'week,Day'
|
||||
},
|
||||
dateAlignment: "week",
|
||||
titleFormat: { month: "short", day: "numeric" },
|
||||
slotMinTime: "06:00:00",
|
||||
slotMaxTime: "22:00:00",
|
||||
|
||||
datesSet: function (dateInfo) {
|
||||
const view = dateInfo.view;
|
||||
const offset = (new Date()).getTimezoneOffset();
|
||||
const startDate = new Date(view.activeStart.getTime() - (offset*60*1000));
|
||||
const endDate = new Date(view.activeEnd.getTime() - (offset*60*1000));
|
||||
currentDateFrom.value = startDate.toISOString().split('T')[0]
|
||||
currentDateTo.value = endDate.toISOString().split('T')[0]
|
||||
getOccupation();
|
||||
duration: { days: 7 },
|
||||
firstDay: 1,
|
||||
allDaySlot: false,
|
||||
hiddenDays: [0],
|
||||
},
|
||||
events: function(_info, successCallback, failureCallback) {
|
||||
if (occupations.value.length === 0){
|
||||
failureCallback(new Error("no events"))
|
||||
}else{
|
||||
successCallback(
|
||||
occupations.value.map((event) => {
|
||||
return {
|
||||
id: event.id.toString(),
|
||||
start: event.start,
|
||||
end: event.end,
|
||||
} as EventInput;
|
||||
})
|
||||
)
|
||||
}
|
||||
Day: {
|
||||
type: "timeGrid",
|
||||
slotLabelFormat: {
|
||||
hour: "numeric",
|
||||
minute: "2-digit",
|
||||
omitZeroMinute: false,
|
||||
meridiem: false,
|
||||
hour12: false,
|
||||
},
|
||||
titleFormat: { month: "short", day: "numeric" },
|
||||
slotMinTime: "06:00:00",
|
||||
slotMaxTime: "22:00:00",
|
||||
duration: { days: 1 },
|
||||
allDaySlot: false,
|
||||
hiddenDays: [0],
|
||||
},
|
||||
},
|
||||
headerToolbar: {
|
||||
end: "prev,next today",
|
||||
center: "title",
|
||||
start: "week,Day",
|
||||
},
|
||||
|
||||
datesSet: function (dateInfo) {
|
||||
const view = dateInfo.view;
|
||||
const offset = new Date().getTimezoneOffset();
|
||||
const startDate = new Date(view.activeStart.getTime() - offset * 60 * 1000);
|
||||
const endDate = new Date(view.activeEnd.getTime() - offset * 60 * 1000);
|
||||
currentDateFrom.value = startDate.toISOString().split("T")[0];
|
||||
currentDateTo.value = endDate.toISOString().split("T")[0];
|
||||
getOccupation();
|
||||
},
|
||||
events: function (_info, successCallback, failureCallback) {
|
||||
if (occupations.value.length === 0) {
|
||||
failureCallback(new Error("no events"));
|
||||
} else {
|
||||
successCallback(
|
||||
occupations.value.map((event) => {
|
||||
return {
|
||||
id: event.id.toString(),
|
||||
start: event.start,
|
||||
end: event.end,
|
||||
} as EventInput;
|
||||
}),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<FullCalendar ref="fullCalendar" :options="calendarOptions"/>
|
||||
</template>
|
||||
<FullCalendar ref="fullCalendar" :options="calendarOptions" />
|
||||
</template>
|
||||
|
||||
@@ -37,23 +37,22 @@ const ModuleInformation = defineAsyncComponent(
|
||||
);
|
||||
|
||||
async function showInfo(module: Module) {
|
||||
await fetchModule(module).then((data) => {
|
||||
module.value = data;
|
||||
});
|
||||
dialog.open(ModuleInformation, {
|
||||
props: {
|
||||
style: {
|
||||
width: "50vw",
|
||||
await fetchModule(module).then((data: Module) => {
|
||||
dialog.open(ModuleInformation, {
|
||||
props: {
|
||||
style: {
|
||||
width: "50vw",
|
||||
},
|
||||
breakpoints: {
|
||||
"960px": "75vw",
|
||||
"640px": "90vw",
|
||||
},
|
||||
modal: true,
|
||||
},
|
||||
breakpoints: {
|
||||
"960px": "75vw",
|
||||
"640px": "90vw",
|
||||
data: {
|
||||
module: data,
|
||||
},
|
||||
modal: true,
|
||||
},
|
||||
data: {
|
||||
module: module,
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -20,7 +20,7 @@ const tableData = computed(() =>
|
||||
const columns = ref([
|
||||
{ field: "Course", header: "Course" },
|
||||
{ field: "Module", header: "Module" },
|
||||
{ field: "Reminder", header: "Reminder"}
|
||||
{ field: "Reminder", header: "Reminder" },
|
||||
]);
|
||||
|
||||
const fetchedModules = async () => {
|
||||
@@ -64,11 +64,18 @@ async function finalStep() {
|
||||
>
|
||||
<template #header>
|
||||
<div class="flex align-items-center justify-content-end">
|
||||
Enable all notifications:
|
||||
Enable all notifications:
|
||||
<InputSwitch
|
||||
class="mx-4"
|
||||
:model-value="tableData.reduce((acc, curr) => acc && curr.Module.reminder, true)"
|
||||
@update:model-value="tableData.forEach((module) => module.Module.reminder = $event)"
|
||||
:model-value="
|
||||
tableData.reduce(
|
||||
(acc, curr) => acc && curr.Module.reminder,
|
||||
true,
|
||||
)
|
||||
"
|
||||
@update:model-value="
|
||||
tableData.forEach((module) => (module.Module.reminder = $event))
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -84,15 +91,15 @@ async function finalStep() {
|
||||
<template v-if="field === 'Module'">
|
||||
{{ data[field].userDefinedName }}
|
||||
</template>
|
||||
<template v-else-if="field === 'Reminder'" class="align-content-center">
|
||||
<Button
|
||||
<template v-else-if="field === 'Reminder'">
|
||||
<Button
|
||||
:icon="data.Module.reminder ? 'pi pi-bell' : 'pi pi-times'"
|
||||
:severity="data.Module.reminder ? 'warning' : 'secondary'"
|
||||
rounded
|
||||
outlined
|
||||
class="small-button"
|
||||
@click = "data.Module.reminder = !data.Module.reminder"
|
||||
></Button>
|
||||
@click="data.Module.reminder = !data.Module.reminder"
|
||||
></Button>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ data[field] }}
|
||||
@@ -108,14 +115,14 @@ async function finalStep() {
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="field === 'Reminder'">
|
||||
<Button
|
||||
<Button
|
||||
:icon="data.Module.reminder ? 'pi pi-bell' : 'pi pi-times'"
|
||||
:severity="data.Module.reminder ? 'warning' : 'secondary'"
|
||||
rounded
|
||||
outlined
|
||||
class="small-button"
|
||||
@click = "data.Module.reminder = !data.Module.reminder"
|
||||
></Button>
|
||||
@click="data.Module.reminder = !data.Module.reminder"
|
||||
></Button>
|
||||
</template>
|
||||
</template>
|
||||
</Column>
|
||||
@@ -143,9 +150,9 @@ async function finalStep() {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.small-button.p-button {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
padding: 0;
|
||||
}
|
||||
.small-button.p-button {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user