mirror of
https://gitlab.dit.htwk-leipzig.de/htwk-software/htwkalender.git
synced 2026-01-17 03:52:26 +01:00
92 frontend refinements, clickable logo
This commit is contained in:
survellow
@@ -44,7 +44,7 @@ window.addEventListener("resize", updateMobile);
|
||||
:draggable="false"
|
||||
:header="$t('calendarPreview.preview-long')"
|
||||
class="w-full lg:w-30rem lg:h-auto m-0 lg:m-2"
|
||||
position="bottomright"
|
||||
position="bottomleft"
|
||||
@update:visible="dialogVisible = $event"
|
||||
>
|
||||
<DataTable
|
||||
@@ -52,6 +52,8 @@ window.addEventListener("resize", updateMobile);
|
||||
edit-mode="cell"
|
||||
table-class="editable-cells-table"
|
||||
responsive-layout="scroll"
|
||||
class="w-full"
|
||||
:size="mobilePage ? 'small' : 'large'"
|
||||
>
|
||||
<Column
|
||||
v-for="column in columns"
|
||||
@@ -68,7 +70,7 @@ window.addEventListener("resize", updateMobile);
|
||||
</Dialog>
|
||||
<SpeedDial
|
||||
v-if="previewOn && !dialogVisible"
|
||||
:style="{ position: 'fixed', bottom: '2rem', right: '2rem' }"
|
||||
:style="{ position: 'fixed', bottom: '2rem', left: '2rem' }"
|
||||
>
|
||||
<template #button>
|
||||
<Button
|
||||
|
||||
@@ -1,104 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { computed, ComputedRef, Ref, ref, watch } from "vue";
|
||||
import {
|
||||
fetchCourse,
|
||||
fetchModulesByCourseAndSemester,
|
||||
} from "../api/fetchCourse";
|
||||
import ModuleSelection from "./ModuleSelection.vue";
|
||||
import { Module } from "../model/module.ts";
|
||||
import { useI18n } from "vue-i18n";
|
||||
const { t } = useI18n({ useScope: "global" });
|
||||
|
||||
const courses = async () => {
|
||||
return await fetchCourse();
|
||||
};
|
||||
|
||||
const selectedCourse: Ref<{ name: string }> = ref({ name: "" });
|
||||
const countries: Ref<{ name: string }[]> = ref([]);
|
||||
const semesters: ComputedRef<{ name: string; value: string }[]> = computed(
|
||||
() => [
|
||||
{ name: t("courseSelection.winterSemester"), value: "ws" },
|
||||
{ name: t("courseSelection.summerSemester"), value: "ss" },
|
||||
],
|
||||
);
|
||||
|
||||
const selectedSemester: Ref<{ name: string; value: string }> = ref(
|
||||
semesters.value[0],
|
||||
);
|
||||
|
||||
//if semesters get changed, refresh the selected semester ref with a watcher
|
||||
watch(
|
||||
semesters,
|
||||
(newValue: { name: string; value: string }[]) =>
|
||||
(selectedSemester.value =
|
||||
newValue[selectedSemester.value.value === "ws" ? 0 : 1]),
|
||||
);
|
||||
|
||||
courses().then(
|
||||
(data) =>
|
||||
(countries.value = data.map((course) => {
|
||||
return { name: course };
|
||||
})),
|
||||
);
|
||||
|
||||
const modules: Ref<Module[]> = ref([]);
|
||||
|
||||
async function getModules() {
|
||||
modules.value = await fetchModulesByCourseAndSemester(
|
||||
selectedCourse.value.name,
|
||||
selectedSemester.value.value,
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-column">
|
||||
<div class="flex align-items-center justify-content-center h-4rem m-2">
|
||||
<h3 class="text-4xl">
|
||||
{{ $t("courseSelection.headline") }}
|
||||
<i
|
||||
class="pi pi-calendar vertical-align-baseline"
|
||||
style="font-size: 2rem"
|
||||
></i>
|
||||
</h3>
|
||||
</div>
|
||||
<div
|
||||
class="flex align-items-center justify-content-center h-4rem border-round m-2"
|
||||
>
|
||||
<h5 class="text-2xl">{{ $t("courseSelection.subTitle") }}</h5>
|
||||
</div>
|
||||
<div
|
||||
class="flex align-items-center justify-content-center border-round m-2"
|
||||
>
|
||||
<Dropdown
|
||||
v-model="selectedCourse"
|
||||
:options="countries"
|
||||
class="w-full md:w-25rem mx-2"
|
||||
filter
|
||||
option-label="name"
|
||||
:placeholder="$t('courseSelection.courseDropDown')"
|
||||
:empty-message="$t('courseSelection.noCoursesAvailable')"
|
||||
:auto-filter-focus="true"
|
||||
@change="getModules()"
|
||||
></Dropdown>
|
||||
<Dropdown
|
||||
v-model="selectedSemester"
|
||||
:options="semesters"
|
||||
class="w-full md:w-25rem mx-2"
|
||||
option-label="name"
|
||||
:placeholder="$t('courseSelection.semesterDropDown')"
|
||||
@change="getModules()"
|
||||
></Dropdown>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex align-items-center justify-content-center border-round m-2"
|
||||
>
|
||||
<div class="flex flex-wrap justify-content-center">
|
||||
<div class="flex align-items-center">
|
||||
<ModuleSelection :modules="modules" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -39,15 +39,24 @@ const items = computed(() => [
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Menubar :model="items" class="menubar justify-content-between">
|
||||
<Menubar :model="items" class="menubar justify-content-between flex-wrap">
|
||||
<template #start>
|
||||
<img
|
||||
width="35"
|
||||
height="40"
|
||||
src="../../public/htwk.svg"
|
||||
alt="Logo"
|
||||
class="h-10 w-10 mr-3"
|
||||
/>
|
||||
<router-link v-slot="{ navigate }" :to="`/`" custom>
|
||||
<Button
|
||||
severity="secondary"
|
||||
text
|
||||
class="p-0 mx-2 my-1"
|
||||
@click="navigate"
|
||||
>
|
||||
<img
|
||||
width="35"
|
||||
height="40"
|
||||
src="../../public/htwk.svg"
|
||||
alt="Logo"
|
||||
class="mx-3"
|
||||
/>
|
||||
</Button>
|
||||
</router-link>
|
||||
</template>
|
||||
<template #item="{ item }">
|
||||
<router-link v-slot="{ navigate }" :to="item.route" custom>
|
||||
|
||||
@@ -42,73 +42,65 @@ function nextStep() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-column card-container mx-8 mt-2">
|
||||
<div class="flex align-items-center justify-content-center mb-3">
|
||||
<Button
|
||||
:disabled="store.isEmpty()"
|
||||
class="col-4 justify-content-center"
|
||||
@click="nextStep()"
|
||||
>{{ $t("moduleSelection.nextStep") }}
|
||||
</Button>
|
||||
</div>
|
||||
<div class="flex align-items-center justify-content-center">
|
||||
<DataView :value="modules" data-key="uuid">
|
||||
<template #header>
|
||||
<div class="flex justify-content-between flex-wrap">
|
||||
<div class="flex align-items-center justify-content-center">
|
||||
<h3>
|
||||
{{ $t("moduleSelection.modules") }} -
|
||||
{{ store.countModules() }}
|
||||
</h3>
|
||||
</div>
|
||||
<div class="flex align-items-center justify-content-center">
|
||||
{{ allSelected ? $t('moduleSelection.deselectAll') : $t('moduleSelection.selectAll')}}
|
||||
<InputSwitch
|
||||
class="mx-4"
|
||||
:disabled="modules.length === 0"
|
||||
:model-value="allSelected"
|
||||
@update:model-value="toggleAllModules()"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-column mx-8 mt-2 w-full">
|
||||
<Button
|
||||
:disabled="store.isEmpty()"
|
||||
class="col-12 md:col-4 mb-3 align-self-end"
|
||||
@click="nextStep()"
|
||||
icon="pi pi-arrow-right"
|
||||
:label="$t('moduleSelection.nextStep')"
|
||||
/>
|
||||
<DataView
|
||||
:value="modules"
|
||||
data-key="uuid"
|
||||
:class="
|
||||
[modules.length === 0?
|
||||
['opacity-0', 'pointer-events-none'] :
|
||||
['opacity-100', 'transition-all', 'transition-duration-500', 'transition-ease-in-out']
|
||||
,
|
||||
'w-full']"
|
||||
>
|
||||
<template #header>
|
||||
<div class="flex justify-content-between align-items-center flex-wrap">
|
||||
<h3>
|
||||
{{ $t("moduleSelection.modules") }} -
|
||||
{{ store.countModules() }}
|
||||
</h3>
|
||||
<div class="flex flex-1 align-items-center justify-content-end white-space-nowrap">
|
||||
{{ allSelected ? $t('moduleSelection.deselectAll') : $t('moduleSelection.selectAll')}}
|
||||
<InputSwitch
|
||||
class="mx-4"
|
||||
:disabled="modules.length === 0"
|
||||
:model-value="allSelected"
|
||||
@update:model-value="toggleAllModules()"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template #empty>
|
||||
<p class="p-4 text-2xl font-bold text-900 empty-message">
|
||||
{{ $t("moduleSelection.noModulesAvailable") }}
|
||||
</p>
|
||||
</template>
|
||||
<template #list="slotProps">
|
||||
<div class="col-12">
|
||||
<div
|
||||
class="flex flex-column xl:flex-row xl:align-items-start p-2 gap-4"
|
||||
>
|
||||
<div
|
||||
class="flex flex-column sm:flex-row justify-content-between align-items-center flex-1 gap-4"
|
||||
>
|
||||
<div
|
||||
class="flex flex-column align-items-center justify-content-center sm:align-items-start gap-3"
|
||||
>
|
||||
<p class="text-lg">{{ slotProps.data.name }}</p>
|
||||
</div>
|
||||
<div
|
||||
class="flex sm:flex-column justify-content-center sm:align-items-end gap-3 sm:gap-2"
|
||||
>
|
||||
<ToggleButton
|
||||
class="w-9rem"
|
||||
off-icon="pi pi-times"
|
||||
:off-label="$t('moduleSelection.unselected')"
|
||||
on-icon="pi pi-check"
|
||||
:on-label="$t('moduleSelection.selected')"
|
||||
:model-value="store.hasModule(slotProps.data)"
|
||||
@update:model-value="toggleModule(slotProps.data)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #empty>
|
||||
<p class="p-4 text-2xl font-bold text-900 empty-message">
|
||||
{{ $t("moduleSelection.noModulesAvailable") }}
|
||||
</p>
|
||||
</template>
|
||||
<template #list="slotProps">
|
||||
<div class="col-12">
|
||||
<div
|
||||
class="flex flex-column sm:flex-row justify-content-between align-items-center flex-1 column-gap-4"
|
||||
>
|
||||
<p class="text-lg flex-1 align-self-stretch">{{ slotProps.data.name }}</p>
|
||||
<ToggleButton
|
||||
class="w-9rem align-self-end my-2"
|
||||
off-icon="pi pi-times"
|
||||
:off-label="$t('moduleSelection.unselected')"
|
||||
on-icon="pi pi-check"
|
||||
:on-label="$t('moduleSelection.selected')"
|
||||
:model-value="store.hasModule(slotProps.data)"
|
||||
@update:model-value="toggleModule(slotProps.data)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</DataView>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</DataView>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user