Update:Notification system descriptions #996

client/components/cards/NotificationCard.vue

@@ -76,7 +76,7 @@ export default {
  },
  sendTestClick() {
  const payload = {
- message: `Send a test notification to event ${this.eventName}?`,
+ message: `Trigger this notification with test data?`,
  callback: (confirmed) => {
  if (confirmed) {
  this.sendTest()

client/components/modals/notification/NotificationEditModal.vue

@@ -16,6 +16,8 @@
 
  <ui-textarea-with-label v-model="newNotification.bodyTemplate" label="Body Template" class="mb-2" />
 
+ <p v-if="availableVariables" class="text-sm text-gray-300"><strong>Available variables:</strong> {{ availableVariables.join(', ') }}</p>
+
  <div class="flex items-center pt-4">
  <div class="flex items-center">
  <ui-toggle-switch v-model="newNotification.enabled" />
@@ -73,7 +75,7 @@ export default {
  return this.notificationData.events || []
  },
  eventOptions() {
- return this.notificationEvents.map((e) => ({ value: e.name, text: e.name }))
+ return this.notificationEvents.map((e) => ({ value: e.name, text: e.name, subtext: e.description }))
  },
  selectedEventData() {
  return this.notificationEvents.find((e) => e.name === this.newNotification.eventName)
@@ -83,6 +85,9 @@ export default {
  },
  title() {
  return this.isNew ? 'Create Notification' : 'Update Notification'
+ },
+ availableVariables() {
+ return this.selectedEventData ? this.selectedEventData.variables || null : null
  }
  },
  methods: {

client/components/ui/Dropdown.vue

@@ -3,7 +3,9 @@
  <p class="text-sm font-semibold px-1" :class="disabled ? 'text-gray-300' : ''">{{ label }}</p>
  <button type="button" :disabled="disabled" class="relative w-full border rounded shadow-sm pl-3 pr-8 py-2 text-left focus:outline-none sm:text-sm" :class="buttonClass" aria-haspopup="listbox" aria-expanded="true" @click.stop.prevent="clickShowMenu">
  <span class="flex items-center">
- <span class="block truncate" :class="small ? 'text-sm' : ''">{{ selectedText }}</span>
+ <span class="block truncate font-sans" :class="{ 'font-semibold': selectedSubtext, 'text-sm': small }">{{ selectedText }}</span>
+ <span v-if="selectedSubtext">:&nbsp;</span>
+ <span v-if="selectedSubtext" class="font-normal block truncate font-sans text-sm text-gray-400">{{ selectedSubtext }}</span>
  </span>
  <span class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
  <span class="material-icons">expand_more</span>
@@ -15,7 +17,9 @@
  <template v-for="item in items">
  <li :key="item.value" class="text-gray-100 select-none relative py-2 cursor-pointer hover:bg-black-400" id="listbox-option-0" role="option" @click="clickedOption(item.value)">
  <div class="flex items-center">
- <span class="font-normal ml-3 block truncate font-sans text-sm">{{ item.text }}</span>
+ <span class="ml-3 block truncate font-sans text-sm" :class="{ 'font-semibold': item.subtext }">{{ item.text }}</span>
+ <span v-if="item.subtext">:&nbsp;</span>
+ <span v-if="item.subtext" class="font-normal block truncate font-sans text-sm text-gray-400">{{ item.subtext }}</span>
  </div>
  </li>
  </template>
@@ -64,6 +68,9 @@ export default {
  selectedText() {
  return this.selectedItem ? this.selectedItem.text : ''
  },
+ selectedSubtext() {
+ return this.selectedItem ? this.selectedItem.subtext : ''
+ },
  buttonClass() {
  var classes = []
  if (this.small) classes.push('h-9')

client/pages/config/notifications.vue

@@ -1,8 +1,11 @@
 <template>
  <div>
  <div class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-8 mb-2 max-w-3xl mx-auto">
- <h2 class="text-xl font-semibold mb-2">Apprise Notification Settings</h2>
- <p class="mb-6">Insert some text here describing this feature</p>
+ <h2 class="text-xl font-semibold mb-4">Apprise Notification Settings</h2>
+ <p class="mb-6 text-gray-200">
+ In order to use this feature you will need to have an instance of <a href="https://github.com/caronc/apprise-api" target="_blank" class="hover:underline text-blue-400 hover:text-blue-300">Apprise API</a> running or an api that will handle those same requests. <br />The Apprise API Url should be the full URL path to send the notification, e.g., if your API instance is served at
+ <span class="rounded-md bg-neutral-600 text-sm text-white py-0.5 px-1 font-mono">http://192.168.1.1:8337</span> then you would put <span class="rounded-md bg-neutral-600 text-sm text-white py-0.5 px-1 font-mono">http://192.168.1.1:8337/notify</span>.
+ </p>
 
  <form @submit.prevent="submitForm">
  <ui-text-input-with-label ref="apiUrlInput" v-model="appriseApiUrl" :disabled="savingSettings" label="Apprise API Url" />

server/managers/NotificationManager.js

@@ -37,7 +37,7 @@ class NotificationManager {
  async triggerNotification(eventName, eventData, intentionallyFail = false) {
  if (!this.db.notificationSettings.isUseable) return false
 
- const notifications = this.db.notificationSettings.getNotificationsForEvent(eventName)
+ const notifications = this.db.notificationSettings.getActiveNotificationsForEvent(eventName)
  for (const notification of notifications) {
  Logger.debug(`[NotificationManager] triggerNotification: Sending ${eventName} notification ${notification.id}`)
  const success = intentionallyFail ? false : await this.sendNotification(notification, eventData)

server/objects/settings/NotificationSettings.js

@@ -32,8 +32,8 @@ class NotificationSettings {
  return !!this.appriseApiUrl
  }
 
- getNotificationsForEvent(eventName) {
- return this.notifications.filter(n => n.eventName === eventName)
+ getActiveNotificationsForEvent(eventName) {
+ return this.notifications.filter(n => n.eventName === eventName && n.enabled)
  }
 
  getNotification(id) {

server/utils/notifications.js

@@ -24,7 +24,7 @@ module.exports.notificationData = {
  {
  name: 'onTest',
  requiresLibrary: false,
- description: 'Notification for testing',
+ description: 'Event for testing the notification system',
  variables: ['version'],
  defaults: {
  title: 'Test Notification on Abs {{version}}',