Add status icon for documentations

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,

aleksis/apps/alsijil/frontend/components/coursebook/documentation/DocumentationStatus.vue

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

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": {

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": {