|
|
|
@ -1,42 +1,81 @@ |
|
|
|
<template> |
|
|
|
<div class="modal fade" tabindex="-1" ref="modal" data-bs-backdrop="static"> |
|
|
|
<div class="modal-dialog"> |
|
|
|
<div class="modal-content"> |
|
|
|
<div class="modal-header"> |
|
|
|
<h5 class="modal-title" id="exampleModalLabel">Setup Notification</h5> |
|
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> |
|
|
|
</div> |
|
|
|
<div class="modal-body"> |
|
|
|
<form @submit.prevent="submit"> |
|
|
|
|
|
|
|
<div class="mb-3"> |
|
|
|
<label for="type" class="form-label">Notification Type</label> |
|
|
|
<select class="form-select" id="type" v-model="type"> |
|
|
|
<option value="email">Email</option> |
|
|
|
<option value="webhook">Webhook</option> |
|
|
|
<option value="telegram">Telegram</option> |
|
|
|
<option value="discord">Discord</option> |
|
|
|
</select> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="mb-3"> |
|
|
|
<label for="name" class="form-label">Friendly Name</label> |
|
|
|
<input type="text" class="form-control" id="name" required v-model="name"> |
|
|
|
</div> |
|
|
|
|
|
|
|
</form> |
|
|
|
</div> |
|
|
|
<div class="modal-footer"> |
|
|
|
<button type="button" class="btn btn-primary" @click="yes" data-bs-dismiss="modal">Save</button> |
|
|
|
<form @submit.prevent="submit"> |
|
|
|
|
|
|
|
<div class="modal fade" tabindex="-1" ref="modal" data-bs-backdrop="static"> |
|
|
|
<div class="modal-dialog"> |
|
|
|
<div class="modal-content"> |
|
|
|
<div class="modal-header"> |
|
|
|
<h5 class="modal-title" id="exampleModalLabel">Setup Notification</h5> |
|
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> |
|
|
|
</div> |
|
|
|
<div class="modal-body"> |
|
|
|
|
|
|
|
|
|
|
|
<div class="mb-3"> |
|
|
|
<label for="type" class="form-label">Notification Type</label> |
|
|
|
<select class="form-select" id="type" v-model="notification.type"> |
|
|
|
<option value="telegram">Telegram</option> |
|
|
|
<option value="webhook">Webhook</option> |
|
|
|
<option value="email">Email</option> |
|
|
|
<option value="discord">Discord</option> |
|
|
|
</select> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="mb-3"> |
|
|
|
<label for="name" class="form-label">Friendly Name</label> |
|
|
|
<input type="text" class="form-control" id="name" required v-model="notification.name"> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="mb-3" v-if="notification.type === 'telegram'"> |
|
|
|
<label for="telegram-bot-token" class="form-label">Bot Token</label> |
|
|
|
<input type="text" class="form-control" id="telegram-bot-token" required v-model="notification.telegramBotToken"> |
|
|
|
<div class="form-text">You can get a token from <a href="https://t.me/BotFather" target="_blank">https://t.me/BotFather</a>.</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="mb-3" v-if="notification.type === 'telegram'"> |
|
|
|
<label for="telegram-chat-id" class="form-label">Chat ID</label> |
|
|
|
|
|
|
|
<div class="input-group mb-3"> |
|
|
|
<input type="text" class="form-control" id="telegram-chat-id" required v-model="notification.telegramChatID"> |
|
|
|
<button class="btn btn-outline-secondary" type="button" @click="autoGetTelegramChatID" v-if="notification.telegramBotToken">Auto Get</button> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="form-text"> |
|
|
|
You can get your chat id by sending message to the bot and go to this url to view the chat_id: |
|
|
|
|
|
|
|
<p style="margin-top: 8px;"> |
|
|
|
|
|
|
|
<template v-if="notification.telegramBotToken"> |
|
|
|
<a :href="telegramGetUpdatesURL" target="_blank">{{ telegramGetUpdatesURL }}</a> |
|
|
|
</template> |
|
|
|
|
|
|
|
<template v-else> |
|
|
|
{{ telegramGetUpdatesURL }} |
|
|
|
</template> |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
<div class="modal-footer"> |
|
|
|
<button type="button" class="btn btn-danger" @click="deleteNotification" :disabled="processing" v-if="id">Delete</button> |
|
|
|
<button type="button" class="btn btn-warning" @click="test" :disabled="processing">Test</button> |
|
|
|
<button type="submit" class="btn btn-primary" :disabled="processing">Save</button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</form> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { Modal } from 'bootstrap' |
|
|
|
import { ucfirst } from "../../server/util"; |
|
|
|
import axios from "axios"; |
|
|
|
import { useToast } from 'vue-toastification' |
|
|
|
const toast = useToast() |
|
|
|
|
|
|
|
export default { |
|
|
|
props: { |
|
|
|
@ -45,33 +84,123 @@ export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
model: null, |
|
|
|
type: null, |
|
|
|
name: "", |
|
|
|
processing: false, |
|
|
|
id: null, |
|
|
|
notification: { |
|
|
|
name: "", |
|
|
|
type: null, |
|
|
|
}, |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.modal = new Modal(this.$refs.modal) |
|
|
|
|
|
|
|
// TODO: for edit |
|
|
|
this.$root.getSocket().emit("getSettings", "notification", (data) => { |
|
|
|
// this.notification = data |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
methods: { |
|
|
|
show() { |
|
|
|
|
|
|
|
show(notificationID) { |
|
|
|
if (notificationID) { |
|
|
|
this.id = notificationID; |
|
|
|
|
|
|
|
for (let n of this.$root.notificationList) { |
|
|
|
if (n.id === notificationID) { |
|
|
|
this.notification = JSON.parse(n.config); |
|
|
|
break; |
|
|
|
} |
|
|
|
} |
|
|
|
} else { |
|
|
|
this.id = null; |
|
|
|
this.notification = { |
|
|
|
name: "", |
|
|
|
type: null, |
|
|
|
} |
|
|
|
|
|
|
|
// Default set to Telegram |
|
|
|
this.notification.type = "telegram" |
|
|
|
} |
|
|
|
|
|
|
|
this.modal.show() |
|
|
|
}, |
|
|
|
|
|
|
|
submit() { |
|
|
|
this.processing = true; |
|
|
|
this.$root.getSocket().emit("addNotification", this.notification, this.id, (res) => { |
|
|
|
this.$root.toastRes(res) |
|
|
|
this.processing = false; |
|
|
|
|
|
|
|
} |
|
|
|
if (res.ok) { |
|
|
|
this.modal.hide() |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
|
|
|
|
test() { |
|
|
|
this.processing = true; |
|
|
|
this.$root.getSocket().emit("testNotification", this.notification, (res) => { |
|
|
|
this.$root.toastRes(res) |
|
|
|
this.processing = false; |
|
|
|
}) |
|
|
|
}, |
|
|
|
|
|
|
|
deleteNotification() { |
|
|
|
this.processing = true; |
|
|
|
this.$root.getSocket().emit("deleteNotification", this.id, (res) => { |
|
|
|
this.$root.toastRes(res) |
|
|
|
this.processing = false; |
|
|
|
|
|
|
|
if (res.ok) { |
|
|
|
this.modal.hide() |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
|
|
|
|
async autoGetTelegramChatID() { |
|
|
|
try { |
|
|
|
let res = await axios.get(this.telegramGetUpdatesURL) |
|
|
|
|
|
|
|
if (res.data.result.length >= 1) { |
|
|
|
let update = res.data.result[res.data.result.length - 1] |
|
|
|
this.notification.telegramChatID = update.message.chat.id; |
|
|
|
} else { |
|
|
|
throw new Error("Chat ID is not found, please send a message to this bot first") |
|
|
|
} |
|
|
|
|
|
|
|
} catch (error) { |
|
|
|
toast.error(error.message) |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
}, |
|
|
|
computed: { |
|
|
|
telegramGetUpdatesURL() { |
|
|
|
let token = "<YOUR BOT TOKEN HERE>" |
|
|
|
|
|
|
|
if (this.notification.telegramBotToken) { |
|
|
|
token = this.notification.telegramBotToken; |
|
|
|
} |
|
|
|
|
|
|
|
return `https://api.telegram.org/bot${token}/getUpdates`; |
|
|
|
}, |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
type(to, from) { |
|
|
|
"notification.type"(to, from) { |
|
|
|
let oldName; |
|
|
|
|
|
|
|
if (from) { |
|
|
|
oldName = `My ${ucfirst(from)} Notification`; |
|
|
|
oldName = `My ${ucfirst(from)} Alert (1)`; |
|
|
|
} else { |
|
|
|
oldName = ""; |
|
|
|
} |
|
|
|
|
|
|
|
if (! this.name || this.name === oldName) { |
|
|
|
this.name = `My ${ucfirst(to)} Alert (1)` |
|
|
|
if (! this.notification.name || this.notification.name === oldName) { |
|
|
|
this.notification.name = `My ${ucfirst(to)} Alert (1)` |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
LouisLam
4 years ago