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}}',