Update: Coscine maintenance banner

coscine/issues#2500

src/components/banner/Maintenance.vue

@@ -6,15 +6,18 @@
     variant="warning"
     @dismissed="saveVisibility"
   >
-    <i18n :path="messagePath" tag="p">
-      <template #link>
-        <a
-          :href="maintenance.url ? maintenance.url : undefined"
-          target="_blank"
-          >{{ $t("banner.maintenance.moreInformation") }}</a
-        >
-      </template>
-    </i18n>
+    <p>
+      <span class="font-weight-bold">
+        {{ `${messageType}${$t("banner.separator")}`}}
+      </span>
+      {{ messageBody }}
+      <span v-if="maintenance.url">
+        {{ $t("banner.maintenance.linkText") }}
+        <a :href="maintenance.url" target="_blank"
+          >{{ $t("banner.maintenance.moreInformation") }}
+        </a>
+      </span>
+    </p>
   </b-alert>
 </template>
 
@@ -30,12 +33,6 @@ export default defineComponent({
     return { mainStore };
   },
 
-  data() {
-    return {
-      messagePath: "",
-    };
-  },
-
   computed: {
     maintenance(): MaintenanceReturnObject {
       return this.mainStore.coscine.banner.maintenance;
@@ -48,41 +45,69 @@ export default defineComponent({
       );
     },
     show(): boolean {
-      return this.visibility && this.maintenance.type ? true : false;
+      return this.visibility && this.maintenance.type && this.maintenance.body
+        ? true
+        : false;
     },
-  },
-
-  watch: {
-    maintenance() {
-      this.messagePath = this.createNotificationText();
+    locale(): string {
+      return this.$root.$i18n.locale;
     },
-  },
+    messageBody(): string | undefined {
+      const notificationText = this.createNotificationText()?.trim();
+      // empty texts
+      if (!notificationText) {
+        return this.$t("banner.maintenance.notificationDefaultText").toString();
+      }
 
-  methods: {
-    saveVisibility() {
-      this.mainStore.coscine.banner.maintenanceVisibility =
-        this.mainStore.coscine.banner.dateString;
+      const languageSpecificNotificationTexts = notificationText.split("//");
+      if (languageSpecificNotificationTexts?.length === 1) {
+        return languageSpecificNotificationTexts[0];
+      }
+
+      return this.$root.$i18n.locale === "de"
+        ? languageSpecificNotificationTexts[1]
+        : languageSpecificNotificationTexts[0];
     },
-    createNotificationText(): string {
-      if (this.maintenance && this.maintenance.type) {
+    messageType(): string {
+      if (this.maintenance.type) {
         switch (this.maintenance.type) {
           case "Eingriff":
-            return "banner.maintenance.notificationDeployment";
+            return this.$t("banner.maintenance.type.intervention").toString();
           case "Störung":
-            return "banner.maintenance.notificationMaintenance";
+            return this.$t("banner.maintenance.type.disturbance").toString();
           case "Teilstörung":
-            return "banner.maintenance.notificationPartiaMulfunction";
+            return this.$t(
+              "banner.maintenance.type.partialDisturbance"
+            ).toString();
           case "Unterbrechung":
-            return "banner.maintenance.notificationInteruption";
+            return this.$t("banner.maintenance.type.interruption").toString();
           case "eingeschränkt betriebsfähig":
-            return "banner.maintenance.notificationLimitedOperability";
+            return this.$t(
+              "banner.maintenance.type.limitedOperation"
+            ).toString();
           case "Wartung":
-            return "banner.maintenance.notificationMaintenance";
+            return this.$t("banner.maintenance.type.maintenance").toString();
           case "Teilwartung":
-            return "banner.maintenance.notificationPartialMaintenance";
+            return this.$t(
+              "banner.maintenance.type.partialMaintenance"
+            ).toString();
           default:
-            return "banner.maintenance.notificationDefaultText";
+            return this.$t("banner.maintenance.type.maintenance").toString();
         }
+      } else {
+        return this.$t("banner.maintenance.type.maintenance").toString();
+      }
+    },
+  },
+
+  methods: {
+    saveVisibility() {
+      this.mainStore.coscine.banner.maintenanceVisibility =
+        this.mainStore.coscine.banner.dateString;
+    },
+    createNotificationText(): string | undefined {
+      if (this.maintenance && this.maintenance.body) {
+        return this.maintenance.body;
       } else {
         return "";
       }