send notification for important heartbeat

src/components/NotificationDialog.vue

@@ -41,7 +41,11 @@
                                 </div>
 
                                 <div class="form-text">
+                                    Support Direct Chat / Group / Channel's Chat ID
+
+                                    <p style="margin-top: 8px;">
                                     You can get your chat id by sending message to the bot and go to this url to view the chat_id:
+                                    </p>
 
                                     <p style="margin-top: 8px;">
 
@@ -59,7 +63,7 @@
 
                     </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-danger" @click="deleteConfirm" :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>
@@ -68,6 +72,8 @@
         </div>
 
     </form>
+
+    <Confirm ref="confirmDelete" @yes="deleteNotification" btn-style="btn-danger">Are you sure want to delete this notification for all monitors?</Confirm>
 </template>
 
 <script>
@@ -75,9 +81,11 @@ import { Modal } from 'bootstrap'
 import { ucfirst } from "../../server/util";
 import axios from "axios";
 import { useToast } from 'vue-toastification'
+import Confirm from "./Confirm.vue";
 const toast = useToast()
 
 export default {
+    components: {Confirm},
     props: {
 
     },
@@ -104,6 +112,11 @@ export default {
     },
     methods: {
 
+        deleteConfirm() {
+            this.modal.hide();
+            this.$refs.confirmDelete.show()
+        },
+
         show(notificationID) {
             if (notificationID) {
                 this.id = notificationID;
@@ -166,7 +179,15 @@ export default {
 
                 if (res.data.result.length >= 1) {
                     let update = res.data.result[res.data.result.length - 1]
-                    this.notification.telegramChatID = update.message.chat.id;
+
+                    if (update.channel_post) {
+                        this.notification.telegramChatID = update.channel_post.chat.id;
+                    } else if (update.message) {
+                        this.notification.telegramChatID = update.message.chat.id;
+                    } else {
+                        throw new Error("Chat ID is not found, please send a message to this bot first")
+                    }
+
                 } else {
                     throw new Error("Chat ID is not found, please send a message to this bot first")
                 }

src/pages/EditMonitor.vue

@@ -58,8 +58,12 @@
                 <p v-if="$root.notificationList.length === 0">Not available, please setup.</p>
 
                 <div class="form-check form-switch mb-3" v-for="notification in $root.notificationList">
-                    <input class="form-check-input" type="checkbox" :id=" 'notification' + notification.id">
-                    <label class="form-check-label" :for=" 'notification' + notification.id">{{ notification.name }} <a href="#" @click="$refs.notificationDialog.show(notification.id)">Edit</a></label>
+                    <input class="form-check-input" type="checkbox" :id=" 'notification' + notification.id" v-model="monitor.notificationIDList[notification.id]">
+
+                    <label class="form-check-label" :for=" 'notification' + notification.id">
+                        {{ notification.name }}
+                        <a href="#" @click="$refs.notificationDialog.show(notification.id)">Edit</a>
+                    </label>
                 </div>
 
                 <button class="btn btn-primary me-2" @click="$refs.notificationDialog.show()" type="button">Setup Notification</button>
@@ -86,7 +90,9 @@ export default {
     data() {
         return {
             processing: false,
-            monitor: { }
+            monitor: {
+                notificationIDList: {},
+            },
         }
     },
     computed: {
@@ -109,6 +115,7 @@ export default {
                     name: "",
                     url: "https://",
                     interval: 60,
+                    notificationIDList: {},
                 }
             } else if (this.isEdit) {
                 this.$root.getSocket().emit("getMonitor", this.$route.params.id, (res) => {

src/pages/Settings.vue

@@ -52,20 +52,30 @@
 
             <div class="col-md-6">
                 <h2>Notifications</h2>
-                <p>Empty</p>
-                <button class="btn btn-primary" type="submit">Add Notification</button>
+                <p v-if="$root.notificationList.length === 0">Not available, please setup.</p>
+
+                <ul>
+                    <li  v-for="notification in $root.notificationList">
+                        {{ notification.name }}
+                        <a href="#" @click="$refs.notificationDialog.show(notification.id)">Edit</a>
+                    </li>
+                </ul>
+
+                <button class="btn btn-primary me-2" @click="$refs.notificationDialog.show()" type="button">Setup Notification</button>
             </div>
 
+
         </div>
     </div>
 
-
+    <NotificationDialog ref="notificationDialog" />
 </template>
 
 <script>
 import dayjs from "dayjs";
 import utc  from 'dayjs/plugin/utc'
 import timezone  from 'dayjs/plugin/timezone'
+import NotificationDialog from "../components/NotificationDialog.vue";
 dayjs.extend(utc)
 dayjs.extend(timezone)
 import {timezoneList} from "../util-frontend";
@@ -74,7 +84,7 @@ const toast = useToast()
 
 export default {
     components: {
-
+        NotificationDialog
     },
     data() {
         return {