65 lines
1.7 KiB
Vue
65 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import { useAssignmentStore } from "@/stores/assignmentStore";
|
|
import { useCourseSessionsStore } from "@/stores/courseSessions";
|
|
import type {
|
|
Assignment,
|
|
CourseSessionAssignmentDetails,
|
|
LearningContent,
|
|
} from "@/types";
|
|
import * as log from "loglevel";
|
|
import { onMounted, reactive } from "vue";
|
|
|
|
const assignmentStore = useAssignmentStore();
|
|
|
|
interface State {
|
|
assignment: Assignment | undefined;
|
|
courseSessionAssignmentDetails: CourseSessionAssignmentDetails | undefined;
|
|
}
|
|
|
|
const state: State = reactive({
|
|
assignment: undefined,
|
|
courseSessionAssignmentDetails: undefined,
|
|
});
|
|
|
|
const props = defineProps<{
|
|
assignmentId: number;
|
|
learningContent: LearningContent;
|
|
}>();
|
|
|
|
onMounted(async () => {
|
|
log.debug("AssignmentView mounted", props.assignmentId, props.learningContent);
|
|
|
|
const courseSessionsStore = useCourseSessionsStore();
|
|
|
|
try {
|
|
state.assignment = await assignmentStore.loadAssignment(props.assignmentId);
|
|
state.courseSessionAssignmentDetails = courseSessionsStore.findAssignmentDetails(
|
|
props.learningContent.id
|
|
);
|
|
} catch (error) {
|
|
log.error(error);
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container-medium">
|
|
<div v-if="state.assignment" class="lg:mt-12">
|
|
<h2>Einleitung</h2>
|
|
|
|
<h3 class="mt-8">Ausgangslage</h3>
|
|
<p>{{ state.assignment.starting_position }}</p>
|
|
|
|
<h3 class="mt-8">Abgabetermin</h3>
|
|
<p v-if="state.courseSessionAssignmentDetails">
|
|
{{ state.courseSessionAssignmentDetails }}
|
|
</p>
|
|
<p v-else>Keine Abgabedaten erfasst für diese Durchführung</p>
|
|
|
|
<pre class="mt-16">
|
|
{{ state.assignment }}
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</template>
|