fixed frontend (format, lint, build)

This commit is contained in:
masterElmar
2023-11-01 22:31:12 +01:00
parent a8dce8207b
commit 0fc6e249d2
10 changed files with 277 additions and 208 deletions

60
.idea/workspace.xml generated
View File

@@ -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>

View File

@@ -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,
),
);

View File

@@ -22,6 +22,7 @@ export async function fetchModule(module: Module): Promise<Module> {
module.name,
module.prof,
module.semester,
false,
module.events,
),
);

View File

@@ -18,19 +18,21 @@ export async function fetchEventsByRoomAndDuration(
to_date: string,
): Promise<Event[]> {
const events: Event[] = [];
await fetch("/api/schedule?room=" + room + "&from=" + from_date + "&to=" + to_date)
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) => {
eventsResponse.forEach((event: Event) => events.push(event));
})
.catch((error) => {
console.log("Error fetching events: ", error);
return null;
})
});
console.log("occupations: ", events);
return events;
}

View File

@@ -4,8 +4,16 @@ 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>
@@ -18,28 +26,22 @@ 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>

View File

@@ -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() {
@@ -46,8 +46,15 @@ async function finalStep() {
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,7 +70,7 @@ async function finalStep() {
<template v-if="field === 'Module'">
{{ data[field].userDefinedName }}
</template>
<template v-else-if="field === 'Reminder'" class="align-content-center">
<template v-else-if="field === 'Reminder'">
<Button
:icon="data.Module.reminder ? 'pi pi-bell' : 'pi pi-times'"
:severity="data.Module.reminder ? 'warning' : 'secondary'"

View File

@@ -1,5 +1,4 @@
<script lang="ts" setup>
import { Ref, ref } from "vue";
import { fetchRoom } from "../api/fetchRoom.ts";
import RoomOccupation from "./RoomOccupation.vue";
@@ -41,9 +40,7 @@ rooms().then(
placeholder="Select a Room"
/>
</div>
<div
class="m-6"
>
<div class="m-6">
<RoomOccupation :room="selectedRoom.name" />
</div>
</div>

View File

@@ -1,8 +1,8 @@
<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 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";
@@ -26,11 +26,11 @@ 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 === "") {
@@ -39,86 +39,85 @@ async function getOccupation() {
const events = await fetchEventsByRoomAndDuration(
selectedRoom.value,
currentDateFrom.value,
currentDateTo.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},
initialView: "week",
dayHeaderFormat: { weekday: "short", omitCommas: true },
slotDuration: "00:15:00",
eventTimeFormat: {
hour: "2-digit",
minute: "2-digit",
hour12: false
hour12: false,
},
views: {
week: {
type: 'timeGrid',
type: "timeGrid",
slotLabelFormat: {
hour: 'numeric',
minute: '2-digit',
hour: "numeric",
minute: "2-digit",
omitZeroMinute: false,
meridiem: false,
hour12: false
hour12: false,
},
dateAlignment: "week",
titleFormat: {month: 'short', day: 'numeric'},
titleFormat: { month: "short", day: "numeric" },
slotMinTime: "06:00:00",
slotMaxTime: "22:00:00",
duration: { days: 7 },
firstDay: 1,
allDaySlot: false,
hiddenDays: [0]
hiddenDays: [0],
},
Day: {
type: 'timeGrid',
type: "timeGrid",
slotLabelFormat: {
hour: 'numeric',
minute: '2-digit',
hour: "numeric",
minute: "2-digit",
omitZeroMinute: false,
meridiem: false,
hour12: false
hour12: false,
},
titleFormat: {month: 'short', day: 'numeric'},
titleFormat: { month: "short", day: "numeric" },
slotMinTime: "06:00:00",
slotMaxTime: "22:00:00",
duration: { days: 1 },
allDaySlot: false,
hiddenDays: [0]
hiddenDays: [0],
},
},
headerToolbar: {
end: 'prev,next today',
center: 'title',
start: 'week,Day'
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]
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"))
failureCallback(new Error("no events"));
} else {
successCallback(
occupations.value.map((event) => {
@@ -127,12 +126,11 @@ async function getOccupation() {
start: event.start,
end: event.end,
} as EventInput;
})
)
}),
);
}
}
}
},
};
</script>
<template>
<FullCalendar ref="fullCalendar" :options="calendarOptions" />

View File

@@ -37,9 +37,7 @@ const ModuleInformation = defineAsyncComponent(
);
async function showInfo(module: Module) {
await fetchModule(module).then((data) => {
module.value = data;
});
await fetchModule(module).then((data: Module) => {
dialog.open(ModuleInformation, {
props: {
style: {
@@ -52,9 +50,10 @@ async function showInfo(module: Module) {
modal: true,
},
data: {
module: module,
module: data,
},
});
});
}
const display = (module: Module) => module.name + " (" + module.course + ")";

View File

@@ -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 () => {
@@ -67,8 +67,15 @@ async function finalStep() {
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,7 +91,7 @@ async function finalStep() {
<template v-if="field === 'Module'">
{{ data[field].userDefinedName }}
</template>
<template v-else-if="field === 'Reminder'" class="align-content-center">
<template v-else-if="field === 'Reminder'">
<Button
:icon="data.Module.reminder ? 'pi pi-bell' : 'pi pi-times'"
:severity="data.Module.reminder ? 'warning' : 'secondary'"