2022-09-22 01:01:10 +02:00
< 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" >
2022-09-25 16:46:45 +02:00
< 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 >
2022-09-22 01:01:10 +02:00
< form @submit.prevent ="submitForm" >
2022-09-24 21:03:14 +02:00
< ui -text -input -with -label ref = "apiUrlInput" v -model = " appriseApiUrl " :disabled ="savingSettings" label = "Apprise API Url" / >
2022-09-22 01:01:10 +02:00
< div class = "flex items-center justify-end pt-4" >
2022-09-24 21:03:14 +02:00
< ui -btn :loading ="savingSettings" type = "submit" > Save < / u i - b t n >
2022-09-22 01:01:10 +02:00
< / div >
< / form >
2022-09-23 01:12:48 +02:00
< div class = "w-full h-px bg-white bg-opacity-10 my-6" / >
< div class = "flex items-center justify-between mb-6" >
< h2 class = "text-xl font-semibold" > Notifications < / h2 >
< ui -btn small color = "success" class = "flex items-center" @click ="clickCreate" > Create < span class = "material-icons text-lg pl-2" > add < / span > < / u i - b t n >
< / div >
< div v-if ="!notifications.length" class="flex justify-center text-center" >
< p class = "text-lg text-gray-200" > No notifications < / p >
< / div >
< template v-for ="notification in notifications" >
2022-09-24 21:03:14 +02:00
< cards -notification -card :key ="notification.id" :notification ="notification" @update ="updateSettings" @edit ="editNotification" / >
2022-09-23 01:12:48 +02:00
< / template >
2022-09-22 01:01:10 +02:00
< / div >
2022-09-23 01:12:48 +02:00
2022-09-24 21:03:14 +02:00
< modals -notification -edit -modal v -model = " showEditModal " :notification ="selectedNotification" :notification-data ="notificationData" @update ="updateSettings" / >
2022-09-22 01:01:10 +02:00
< / div >
< / template >
< script >
export default {
data ( ) {
return {
loading : false ,
2022-09-24 21:03:14 +02:00
savingSettings : false ,
2022-09-22 01:01:10 +02:00
appriseApiUrl : null ,
notifications : [ ] ,
2022-09-23 01:12:48 +02:00
notificationSettings : null ,
notificationData : null ,
showEditModal : false ,
2022-09-24 01:10:03 +02:00
selectedNotification : null ,
sendingTest : false
2022-09-22 01:01:10 +02:00
}
} ,
computed : { } ,
methods : {
2022-09-24 21:03:14 +02:00
updateSettings ( settings ) {
this . notificationSettings = settings
this . notifications = settings . notifications
2022-09-24 01:10:03 +02:00
} ,
2022-09-24 21:03:14 +02:00
editNotification ( notification ) {
this . selectedNotification = notification
this . showEditModal = true
2022-09-24 01:10:03 +02:00
} ,
2022-09-23 01:12:48 +02:00
clickCreate ( ) {
this . selectedNotification = null
this . showEditModal = true
} ,
2022-09-24 23:15:16 +02:00
validateAppriseApiUrl ( ) {
try {
return new URL ( this . appriseApiUrl )
} catch ( error ) {
console . log ( 'URL error' , error )
this . $toast . error ( error . message )
return false
}
} ,
2022-09-22 01:01:10 +02:00
submitForm ( ) {
if ( this . notificationSettings && this . notificationSettings . appriseApiUrl == this . appriseApiUrl ) {
2022-09-24 21:03:14 +02:00
this . $toast . info ( 'No update necessary' )
2022-09-22 01:01:10 +02:00
return
}
2022-09-24 21:03:14 +02:00
if ( this . $refs . apiUrlInput ) {
this . $refs . apiUrlInput . blur ( )
}
2022-09-24 23:15:16 +02:00
const isValid = this . validateAppriseApiUrl ( )
if ( ! isValid ) {
return
}
2022-09-22 01:01:10 +02:00
const updatePayload = {
appriseApiUrl : this . appriseApiUrl || null
}
2022-09-24 21:03:14 +02:00
this . savingSettings = true
2022-09-22 01:01:10 +02:00
this . $axios
. $patch ( '/api/notifications' , updatePayload )
. then ( ( ) => {
this . $toast . success ( 'Notification settings updated' )
} )
. catch ( ( error ) => {
console . error ( 'Failed to update notification settings' , error )
this . $toast . error ( 'Failed to update notification settings' )
} )
. finally ( ( ) => {
2022-09-24 21:03:14 +02:00
this . savingSettings = false
2022-09-22 01:01:10 +02:00
} )
} ,
async init ( ) {
this . loading = true
2022-09-23 01:12:48 +02:00
const notificationResponse = await this . $axios . $get ( '/api/notifications' ) . catch ( ( error ) => {
2022-09-22 01:01:10 +02:00
console . error ( 'Failed to get notification settings' , error )
this . $toast . error ( 'Failed to load notification settings' )
return null
} )
this . loading = false
2022-09-23 01:12:48 +02:00
if ( ! notificationResponse ) {
2022-09-22 01:01:10 +02:00
return
}
2022-09-23 01:12:48 +02:00
this . notificationData = notificationResponse . data
2022-09-24 23:15:16 +02:00
this . setNotificationSettings ( notificationResponse . settings )
} ,
setNotificationSettings ( notificationSettings ) {
this . notificationSettings = notificationSettings
this . appriseApiUrl = notificationSettings . appriseApiUrl
this . notifications = notificationSettings . notifications || [ ]
} ,
notificationsUpdated ( notificationSettings ) {
console . log ( 'Notifications updated' , notificationSettings )
this . setNotificationSettings ( notificationSettings )
2022-09-22 01:01:10 +02:00
}
} ,
mounted ( ) {
this . init ( )
2022-09-24 23:15:16 +02:00
this . $root . socket . on ( 'notifications_updated' , this . notificationsUpdated )
} ,
beforeDestroy ( ) {
this . $root . socket . off ( 'notifications_updated' , this . notificationsUpdated )
2022-09-22 01:01:10 +02:00
}
}
< / script >