audiobookshelf/client/components/cards/NotificationCard.vue

<template>
  <div class="w-full border border-white/10 rounded-xl p-4 my-2" :class="notification.enabled ? 'bg-primary/25' : 'bg-error/5'">
    <div class="flex flex-wrap items-center">
      <p class="text-base md:text-lg font-semibold pr-4">{{ eventName }}</p>
      <div class="grow" />

      <ui-btn v-if="eventName === 'onTest' && notification.enabled" :loading="testing" small class="mr-2" @click.stop="fireTestEventAndSucceed">{{ this.$strings.ButtonFireOnTest }}</ui-btn>
      <ui-btn v-if="eventName === 'onTest' && notification.enabled" :loading="testing" small class="mr-2" color="bg-red-600" @click.stop="fireTestEventAndFail">{{ this.$strings.ButtonFireAndFail }}</ui-btn>
      <!-- <ui-btn v-if="eventName === 'onTest' && notification.enabled" :loading="testing" small class="mr-2" @click.stop="rapidFireTestEvents">Rapid Fire</ui-btn> -->
      <ui-btn v-else-if="notification.enabled" :loading="sendingTest" small class="mr-2" @click.stop="sendTestClick">{{ this.$strings.ButtonTest }}</ui-btn>
      <ui-btn v-else :loading="enabling" small color="bg-success" class="mr-2" @click="enableNotification">{{ this.$strings.ButtonEnable }}</ui-btn>

      <ui-icon-btn :size="7" icon-font-size="1.1rem" icon="edit" class="mr-2" @click="editNotification" />
      <ui-icon-btn bg-color="bg-error" :size="7" icon-font-size="1.2rem" icon="delete" @click="deleteNotificationClick" />
    </div>
    <div class="pt-4">
      <p class="text-gray-300 text-xs md:text-sm mb-2">{{ notification.urls.join(', ') }}</p>

      <p v-if="lastFiredAt && lastAttemptFailed" class="text-red-300 text-xs">Last attempt failed {{ $dateDistanceFromNow(lastFiredAt) }} ({{ numConsecutiveFailedAttempts }} attempt{{ numConsecutiveFailedAttempts === 1 ? '' : 's' }})</p>
      <p v-else-if="lastFiredAt" class="text-gray-400 text-xs">Last fired {{ $dateDistanceFromNow(lastFiredAt) }}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    notification: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      sendingTest: false,
      enabling: false,
      deleting: false,
      testing: false
    }
  },
  computed: {
    eventName() {
      return this.notification ? this.notification.eventName : null
    },
    lastFiredAt() {
      return this.notification ? this.notification.lastFiredAt : null
    },
    lastAttemptFailed() {
      return this.notification ? this.notification.lastAttemptFailed : null
    },
    numConsecutiveFailedAttempts() {
      return this.notification ? this.notification.numConsecutiveFailedAttempts : null
    }
  },
  methods: {
    // For testing using the onTest event
    fireTestEventAndFail() {
      this.fireTestEvent(true)
    },
    fireTestEventAndSucceed() {
      this.fireTestEvent(false)
    },
    fireTestEvent(intentionallyFail = false) {
      this.testing = true
      this.$axios
        .$get(`/api/notifications/test?fail=${intentionallyFail ? 1 : 0}`)
        .then(() => {
          this.$toast.success(this.$strings.ToastNotificationTestTriggerSuccess)
        })
        .catch((error) => {
          console.error('Failed', error)
          const errorMsg = error.response ? error.response.data : null
          this.$toast.error(`Failed: ${errorMsg}` || this.$strings.ToastNotificationTestTriggerFailed)
        })
        .finally(() => {
          this.testing = false
        })
    },
    rapidFireTestEvents() {
      this.testing = true
      var numFired = 0
      var interval = setInterval(() => {
        this.fireTestEvent()
        numFired++
        if (numFired > 25) {
          this.testing = false
          clearInterval(interval)
        }
      }, 100)
    },
    // End testing functions
    sendTestClick() {
      const payload = {
        message: this.$strings.MessageConfirmNotificationTestTrigger,
        callback: (confirmed) => {
          if (confirmed) {
            this.sendTest()
          }
        },
        type: 'yesNo'
      }
      this.$store.commit('globals/setConfirmPrompt', payload)
    },
    sendTest() {
      this.sendingTest = true
      this.$axios
        .$get(`/api/notifications/${this.notification.id}/test`)
        .then(() => {
          this.$toast.success(this.$strings.ToastNotificationTestTriggerSuccess)
        })
        .catch((error) => {
          console.error('Failed', error)
          const errorMsg = error.response ? error.response.data : null
          this.$toast.error(`Failed: ${errorMsg}` || this.$strings.ToastNotificationTestTriggerFailed)
        })
        .finally(() => {
          this.sendingTest = false
        })
    },
    enableNotification() {
      this.enabling = true
      const payload = {
        id: this.notification.id,
        enabled: true
      }
      this.$axios
        .$patch(`/api/notifications/${this.notification.id}`, payload)
        .then((updatedSettings) => {
          this.$emit('update', updatedSettings)
        })
        .catch((error) => {
          console.error('Failed to update notification', error)
          this.$toast.error(this.$strings.ToastFailedToUpdate)
        })
        .finally(() => {
          this.enabling = false
        })
    },
    deleteNotificationClick() {
      const payload = {
        message: this.$strings.MessageConfirmDeleteNotification,
        callback: (confirmed) => {
          if (confirmed) {
            this.deleteNotification()
          }
        },
        type: 'yesNo'
      }
      this.$store.commit('globals/setConfirmPrompt', payload)
    },
    deleteNotification() {
      this.deleting = true
      this.$axios
        .$delete(`/api/notifications/${this.notification.id}`)
        .then((updatedSettings) => {
          this.$emit('update', updatedSettings)
        })
        .catch((error) => {
          console.error('Failed', error)
          this.$toast.error(this.$strings.ToastNotificationDeleteFailed)
        })
        .finally(() => {
          this.deleting = false
        })
    },
    editNotification() {
      this.$emit('edit', this.notification)
    }
  },
  mounted() {}
}
</script>