Create and load an update indicator component

aleksis/apps/alsijil/static/js/vue/alsijil/LoadComponents.js

+import UpdateIndicator from "../components/alsijil/UpdateIndicator.js";
 import PersonalNotes from "../components/alsijil/PersonalNotes.js";
 import LessonDocumentation from "../components/alsijil/LessonDocumentation.js";
 import CourseBook from '../components/alsijil/CourseBook.js'
 
+Vue.component(UpdateIndicator.name, UpdateIndicator);
 Vue.component(PersonalNotes.name, PersonalNotes);
 Vue.component(LessonDocumentation.name, LessonDocumentation);
 Vue.component(CourseBook.name, CourseBook);
\ No newline at end of file

aleksis/apps/alsijil/static/js/vue/components/alsijil/UpdateIndicator.js

+import {ERROR, SAVED, UPDATING, CHANGES} from "../../alsijil/UpdateStatuses.js";
+
+export default {
+    created() {
+        this.ERROR = ERROR;
+        this.SAVED = SAVED;
+        this.UPDATING = UPDATING;
+        this.CHANGES = CHANGES;
+    },
+    name: "update-indicator",
+    emits: ["manual-update"],
+    props: ["status"],
+    computed: {
+        text() {
+            switch (this.status) {
+                case SAVED:
+                    return this.$root.django.gettext("All changes are processed.");
+                case UPDATING:
+                    return this.$root.django.gettext("Changes are being synced.");
+                case CHANGES:
+                    return this.$root.django.gettext("You have unsaved changes. Click to save immediately.");
+                default:
+                    return this.$root.django.gettext("There has been an error processing the latest changes.");
+            }
+        },
+        color() {
+            switch (this.status) {
+                case SAVED:
+                    return "success";
+                case CHANGES:
+                    return "secondary";
+                case UPDATING:
+                    return "secondary";
+                default:
+                    return "error";
+            }
+        },
+        icon() {
+            switch (this.status) {
+                case SAVED:
+                    return "mdi-check-circle-outline";
+                case CHANGES:
+                    return "mdi-dots-horizontal";
+                default:
+                    return "mdi-alert-outline";
+            }
+        }
+    },
+    template: `
+    <v-tooltip bottom>
+      <template v-slot:activator="{ on, attrs }">
+        <div
+            v-bind="attrs"
+            v-on="on"
+        >
+          <v-icon
+            v-if="status !== UPDATING"
+            @click="() => {status === SAVED ? null : $emit('manual-update')}"
+            :color="color"
+          >
+            {{ icon }}
+          </v-icon>
+          <v-progress-circular
+            v-else
+            indeterminate
+            :color="color"
+          ></v-progress-circular>
+        </div>
+      </template>
+      <span>{{ text }}</span>
+    </v-tooltip>
+    `,
+}
\ No newline at end of file