diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/documentation/Documentation.vue b/aleksis/apps/alsijil/frontend/components/coursebook/documentation/Documentation.vue index 6948296541858b246dcb6463a5918ff63d9f2265..93ebd0a024facdace0665c6636945a9875a613e2 100644 --- a/aleksis/apps/alsijil/frontend/components/coursebook/documentation/Documentation.vue +++ b/aleksis/apps/alsijil/frontend/components/coursebook/documentation/Documentation.vue @@ -10,6 +10,7 @@ class="full-width d-flex flex-column align-stretch pa-2" :class="{ 'flex-md-row': compact }" > + <documentation-status v-if="compact" v-bind="documentationPartProps" /> <lesson-information v-if="compact" :class="{ 'flex-110': !$vuetify.breakpoint.mobile }" v-bind="documentationPartProps" /> <lesson-summary :class="{ 'flex-110': compact && !$vuetify.breakpoint.mobile }" @@ -34,6 +35,7 @@ </template> <script> +import DocumentationStatus from "./DocumentationStatus.vue"; import LessonInformation from "./LessonInformation.vue"; import LessonSummary from "./LessonSummary.vue"; import LessonNotes from "./LessonNotes.vue"; @@ -48,6 +50,7 @@ import documentationPartMixin from "./documentationPartMixin"; export default { name: "Documentation", components: { + DocumentationStatus, LessonInformation, LessonSummary, LessonNotes, diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/documentation/DocumentationStatus.vue b/aleksis/apps/alsijil/frontend/components/coursebook/documentation/DocumentationStatus.vue new file mode 100644 index 0000000000000000000000000000000000000000..d9c3950e40ff821fdc3cdd3df4b54382b35ecd41 --- /dev/null +++ b/aleksis/apps/alsijil/frontend/components/coursebook/documentation/DocumentationStatus.vue @@ -0,0 +1,104 @@ +<template> + <v-tooltip bottom> + <template v-slot:activator="{ on, attrs }"> + <v-icon :color="currentStatus?.color" class="mr-md-4" v-on="on" v-bind="attrs">{{ currentStatus?.icon }}</v-icon> + </template> + <span>{{ currentStatus?.text }}</span> + </v-tooltip> +</template> + +<script> +import documentationPartMixin from "./documentationPartMixin"; + +import { DateTime } from "luxon"; + +export default { + name: "DocumentationStatus", + mixins: [documentationPartMixin], + data() { + return { + statusChoices: [ + { + name: "available", + text: this.$t("alsijil.coursebook.status.available"), + icon: "$success", + color: "success", + }, + { + name: "missing", + text: this.$t("alsijil.coursebook.status.missing"), + icon: "$warning", + color: "error", + }, + { + name: "running", + text: this.$t("alsijil.coursebook.status.running"), + icon: "mdi-play-outline", + color: "warning", + }, + { + name: "substitution", + text: this.$t("alsijil.coursebook.status.substitution"), + icon: "$info", + color: "warning", + }, + { + name: "cancelled", + text: this.$t("alsijil.coursebook.status.cancelled"), + icon: "$cancel", + color: "error", + }, + { + name: "pending", + text: this.$t("alsijil.coursebook.status.pending"), + icon: "mdi-clipboard-clock-outline", + color: "blue", + }, + ], + statusTimeout: null, + currentStatusName: "", + }; + }, + computed: { + currentStatus() { + return this.statusChoices.find((s) => s.name === this.currentStatusName); + }, + documentationDateTimeStart() { + return DateTime.fromISO(this.documentation.datetimeStart); + }, + documentationDateTimeEnd() { + return DateTime.fromISO(this.documentation.datetimeEnd); + }, + }, + methods: { + updateStatus() { + if (!this.documentation.id.startsWith("DUMMY")) { + this.currentStatusName = "available"; + } else { + if (DateTime.now() > this.documentationDateTimeEnd) { + this.currentStatusName = "missing"; + } else if (DateTime.now() > this.documentationDateTimeStart && DateTime.now() < this.documentationDateTimeEnd) { + this.currentStatusName = "running"; + } else { + if (this.documentation?.lessonEvent.amends) { + if (this.documentation.lessonEvent.amends.cancelled) { + this.currentStatusName = "cancelled"; + } else { + this.currentStatusName = "substitution"; + } + } else { + this.currentStatusName = "pending"; + } + } + } + }, + }, + mounted() { + this.updateStatus(); + this.statusTimeout = setTimeout(this.updateStatus, this.documentationDateTimeStart.diff(DateTime.now(), "seconds").toObject().seconds); + }, + beforeDestroy() { + clearTimeout(this.statusTimeout); + }, +} +</script> diff --git a/aleksis/apps/alsijil/frontend/messages/de.json b/aleksis/apps/alsijil/frontend/messages/de.json index 0e1f88d2bb9afb3a3672f89d38b35f760d885fe1..586d59fefd034f6008b4ca16c3844d56e0925d3a 100644 --- a/aleksis/apps/alsijil/frontend/messages/de.json +++ b/aleksis/apps/alsijil/frontend/messages/de.json @@ -36,6 +36,14 @@ "menu_title": "Kursbuch", "page_title": "Kursbuch für {name}", "title_plural": "Kursbuch", + "status": { + "available": "Kursbucheintrag vorhanden", + "missing": "Kursbucheintrag fehlt", + "running": "Stunde läuft", + "substitution": "Vertretungsstunde", + "cancelled": "Stunde fällt aus", + "pending": "Stunde in der Zukunft" + }, "summary": { "topic": "Thema", "homework": { diff --git a/aleksis/apps/alsijil/frontend/messages/en.json b/aleksis/apps/alsijil/frontend/messages/en.json index ccca66a4d66489a1568513cdfb3a03d1c8166eae..68a3290e6e293307a0294dca198a5d81d36faf29 100644 --- a/aleksis/apps/alsijil/frontend/messages/en.json +++ b/aleksis/apps/alsijil/frontend/messages/en.json @@ -36,6 +36,14 @@ "menu_title": "Coursebook", "page_title": "Coursebook for {name}", "title_plural": "Coursebook", + "status": { + "available": "Documentation available", + "missing": "Documentation missing", + "running": "Lesson running", + "substitution": "Substitution lesson", + "cancelled": "Lesson cancelled", + "pending": "Lesson pending" + }, "summary": { "topic": "Topic", "homework": {