From cb2fae58778beb53ab3fbe7e3c7dca757a01ed20 Mon Sep 17 00:00:00 2001
From: Hangzhi Yu <hangzhi@protonmail.com>
Date: Wed, 27 Mar 2024 20:00:55 +0100
Subject: [PATCH] Add status icon for documentations
---
.../documentation/Documentation.vue | 3 +
.../documentation/DocumentationStatus.vue | 104 ++++++++++++++++++
.../apps/alsijil/frontend/messages/de.json | 8 ++
.../apps/alsijil/frontend/messages/en.json | 8 ++
4 files changed, 123 insertions(+)
create mode 100644 aleksis/apps/alsijil/frontend/components/coursebook/documentation/DocumentationStatus.vue
diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/documentation/Documentation.vue b/aleksis/apps/alsijil/frontend/components/coursebook/documentation/Documentation.vue
index 694829654..93ebd0a02 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 000000000..d9c3950e4
--- /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 0e1f88d2b..586d59fef 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 ccca66a4d..68a3290e6 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": {
--
GitLab