ytptube/ui/pages/notifications.vue

<style scoped>
table.is-fixed {
  table-layout: fixed;
}

div.table-container {
  overflow: hidden;
}

div.is-centered {
  justify-content: center;
}
</style>

<template>
  <div>
    <div class="mt-1 columns is-multiline">
      <div class="column is-12 is-clearfix is-unselectable">
        <span class="title is-4">
          <span class="icon-text">
            <span class="icon"><i class="fa-solid fa-paper-plane" /></span>
            <span>Notifications</span>
          </span>
        </span>
        <div class="is-pulled-right" v-if="!toggleForm">
          <div class="field is-grouped">
            <p class="control">
              <button class="button is-primary" @click="resetForm(false); toggleForm = true"
                v-tooltip="'Add new notification target.'">
                <span class="icon"><i class="fas fa-add"></i></span>
              </button>
            </p>
            <p class="control" v-if="notifications.length > 0">
              <button class="button is-warning" @click="sendTest" v-tooltip="'Send test notification.'"
                :class="{ 'is-loading': isLoading }" :disabled="!socket.isConnected || isLoading">
                <span class="icon"><i class="fas fa-paper-plane"></i></span>
              </button>
            </p>
            <p class="control" v-if="notifications.length > 0">
              <button class="button is-info" @click="reloadContent" :class="{ 'is-loading': isLoading }"
                :disabled="!socket.isConnected || isLoading || notifications.length < 1">
                <span class="icon"><i class="fas fa-refresh"></i></span>
              </button>
            </p>
          </div>
        </div>
        <div class="is-hidden-mobile">
          <span class="subtitle">
            Send notifications to your servers based on specified events.
          </span>
        </div>
      </div>

      <div class="column is-12" v-if="toggleForm">
        <NotificationForm :addInProgress="addInProgress" :reference="targetRef" :item="target"
          @cancel="resetForm(true);" @submit="updateItem" :allowedEvents="allowedEvents" />
      </div>

      <div class="column is-12" v-if="!toggleForm">
        <div class="columns is-multiline" v-if="notifications && notifications.length > 0">
          <div class="column is-6" v-for="item in notifications" :key="item.id">
            <div class="card">
              <header class="card-header">
                <div class="card-header-title is-text-overflow is-block">
                  {{ item.request.method.toUpperCase() }}({{ ucFirst(item.request.type) }}) @
                  <NuxtLink target="_blank" :href="item.request.url">{{ item.name }}</NuxtLink>
                </div>
                <div class="card-header-icon">
                  <a :href="item.url" class="has-text-primary" v-tooltip="'Copy url.'"
                    @click.prevent="copyText(item.request.url)">
                    <span class="icon"><i class="fa-solid fa-copy" /></span>
                  </a>
                  <button @click="item.raw = !item.raw">
                    <span class="icon"><i class="fa-solid"
                        :class="{ 'fa-arrow-down': !item?.raw, 'fa-arrow-up': item?.raw }" /></span>
                  </button>
                </div>
              </header>
              <div class="card-content">
                <div class="content">
                  <p>
                    <span class="icon"><i class="fa-solid fa-list-ul" /></span>
                    <span>On: {{ join_events(item.on) }}</span>
                  </p>
                  <p v-if="item.request?.headers && item.request.headers.length > 0">
                    <span class="icon"><i class="fa-solid fa-heading" /></span>
                    <span>{{ item.request.headers.map(h => h.key).join(', ') }}</span>
                  </p>
                </div>
              </div>
              <div class="card-content" v-if="item?.raw">
                <div class="content">
                  <pre><code>{{ filterItem(item) }}</code></pre>
                </div>
              </div>
              <div class="card-footer">
                <div class="card-footer-item">
                  <button class="button is-warning is-fullwidth" @click="editItem(item);">
                    <span class="icon"><i class="fa-solid fa-trash-can" /></span>
                    <span>Edit</span>
                  </button>
                </div>
                <div class="card-footer-item">
                  <button class="button is-danger is-fullwidth" @click="deleteItem(item)">
                    <span class="icon"><i class="fa-solid fa-trash" /></span>
                    <span>Delete</span>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <Message title="No Endpoints" class="is-background-warning-80 has-text-dark" icon="fas fa-exclamation-circle"
          v-if="!notifications || notifications.length < 1">
          There are no notifications endpoints configured to receive web notifications.
        </Message>
      </div>
    </div>
  </div>
</template>

<script setup>
import { request } from '~/utils/index'

const toast = useToast()
const config = useConfigStore()
const socket = useSocketStore()

const allowedEvents = ref([])
const notifications = ref([])
const target = ref({})
const targetRef = ref('')
const toggleForm = ref(false)
const isLoading = ref(false)
const initialLoad = ref(true)
const addInProgress = ref(false)

watch(() => config.app.basic_mode, async () => {
  if (!config.app.basic_mode) {
    return
  }
  await navigateTo('/')
})

watch(() => socket.isConnected, async () => {
  if (socket.isConnected && initialLoad.value) {
    await reloadContent(true)
    initialLoad.value = false
  }
})

const reloadContent = async (fromMounted = false) => {
  try {
    isLoading.value = true
    const response = await request('/api/notifications')

    if (fromMounted && !response.ok) {
      return
    }

    notifications.value = []

    const data = await response.json()
    if (data.length < 1) {
      return
    }

    allowedEvents.value = data.allowedTypes
    notifications.value = data.notifications
  } catch (e) {
    if (fromMounted) {
      return
    }
    console.error(e)
    toast.error('Failed to fetch notifications.')
  } finally {
    isLoading.value = false
  }
}

const resetForm = (closeForm = false) => {
  target.value = {
    name: '',
    on: [],
    request: {
      method: 'POST',
      url: '',
      type: 'json',
      headers: [],
    },
  }
  targetRef.value = null
  if (closeForm) {
    toggleForm.value = false
  }
}

const updateData = async notifications => {
  const response = await request('/api/notifications', {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(notifications),
  })

  const data = await response.json()

  if (200 !== response.status) {
    toast.error(`Failed to update notifications. ${data.error}`);
    return false
  }

  notifications.value = data.notifications
  return true
}

const deleteItem = async item => {
  if (true !== confirm(`Are you sure you want to delete notification target (${item.name})?`)) {
    return
  }

  const index = notifications.value.findIndex(i => i?.id === item.id)
  if (index > -1) {
    notifications.value.splice(index, 1)
  } else {
    toast.error('Notification target not found.')
    await reloadContent()
    return
  }

  const status = await updateData(notifications.value)

  if (!status) {
    return
  }

  toast.success('Notification target deleted.')
}

const updateItem = async ({ reference, item }) => {
  if (reference) {
    const index = notifications.value.findIndex(i => i?.id === reference)
    if (index > -1) {
      notifications.value[index] = item
    }
  } else {
    notifications.value.push(item)
  }

  try {
    const status = await updateData(notifications.value)

    if (!status) {
      return
    }

    toast.success(`Notification target ${reference ? 'updated' : 'added'}.`)
    resetForm(true)
  } finally {
    addInProgress.value = false
  }
}

const filterItem = item => {
  const { raw, ...rest } = item
  return JSON.stringify(rest, null, 2)
}

const editItem = item => {
  target.value = item
  targetRef.value = item.id
  toggleForm.value = true
}

const join_events = events => (!events || events.length < 1) ? 'ALL' : events.map(e => ucFirst(e)).join(', ')

const sendTest = async () => {
  if (true !== confirm('Are you sure you want to send a test notification?')) {
    return
  }

  try {
    isLoading.value = true
    const response = await request('/api/notifications/test', { method: 'POST' })

    if (200 !== response.status) {
      const data = await response.json()
      toast.error(`Failed to send test notification. ${data.error}`);
      return
    }

    toast.success('Test notification sent.')
  } catch (e) {
    console.error(e)
    toast.error(`Failed to send test notification. ${e.message}`);
  } finally {
    isLoading.value = false
  }
}

onMounted(async () => socket.isConnected ? await reloadContent(true) : '')

</script>