crowd-funder-for-time-pwa/src/components/TopMessage.vue

<template>
  <div class="text-center text-red-500">{{ message }}</div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-facing-decorator";

import { AppString, NotificationIface } from "@/constants/app";
import { db } from "@/db/index";
import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";

@Component
export default class TopMessage extends Vue {
  $notify!: (notification: NotificationIface, timeout?: number) => void;

  @Prop selected = "";

  message = "";

  async mounted() {
    try {
      await db.open();

      const settings = await db.settings.get(MASTER_SETTINGS_KEY);
      if (
        settings?.warnIfTestServer &&
        settings.apiServer !== AppString.PROD_ENDORSER_API_SERVER
      ) {
        const didPrefix = settings.activeDid?.slice(11, 15);
        this.message = "You're linked to a non-prod server, user " + didPrefix;
      } else if (
        settings?.warnIfProdServer &&
        settings.apiServer === AppString.PROD_ENDORSER_API_SERVER
      ) {
        const didPrefix = settings.activeDid?.slice(11, 15);
        this.message =
          "You're linked to the production server, user " + didPrefix;
      }
    } catch (err: unknown) {
      this.$notify(
        {
          group: "alert",
          type: "danger",
          title: "Error Detecting Server",
          text: JSON.stringify(err),
        },
        -1,
      );
    }
  }
}
</script>