convert Telegram into a vue components

src/components/NotificationDialog.vue

@@ -37,44 +37,9 @@
                             <input id="name" v-model="notification.name" type="text" class="form-control" required>
                         </div>
 
-                        <template v-if="notification.type === 'telegram'">
+                        <Telegram></Telegram>
-                            <div class="mb-3">
-                                <label for="telegram-bot-token" class="form-label">Bot Token</label>
-                                <HiddenInput id="telegram-bot-token" v-model="notification.telegramBotToken" :required="true" autocomplete="one-time-code"></HiddenInput>
-                                <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">
+                        <!-- TODO: Convert all into vue components, but not an easy task.  -->
-                                <label for="telegram-chat-id" class="form-label">Chat ID</label>
-
-                                <div class="input-group mb-3">
-                                    <input id="telegram-chat-id" v-model="notification.telegramChatID" type="text" class="form-control" required>
-                                    <button v-if="notification.telegramBotToken" class="btn btn-outline-secondary" type="button" @click="autoGetTelegramChatID">
-                                        Auto Get
-                                    </button>
-                                </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;">
-                                        <template v-if="notification.telegramBotToken">
-                                            <a :href="telegramGetUpdatesURL" target="_blank" style="word-break: break-word;">{{ telegramGetUpdatesURL }}</a>
-                                        </template>
-
-                                        <template v-else>
-                                            {{ telegramGetUpdatesURL }}
-                                        </template>
-                                    </p>
-                                </div>
-                            </div>
-                        </template>
 
                         <template v-if="notification.type === 'webhook'">
                             <div class="mb-3">
@@ -469,6 +434,8 @@
                                 First access the <a href="https://developers.line.biz/console/" target="_blank">Line Developers Console</a>, create a provider and channel (Messaging API), then you can get the channel access token and user id from the above mentioned menu items.
                             </div>
                         </template>
+
+                        <!-- DEPRECATED! Please create vue component in "./src/components/notifications/{notification name}.vue" -->
                     </div>
                     <div class="modal-footer">
                         <button v-if="id" type="button" class="btn btn-danger" :disabled="processing" @click="deleteConfirm">
@@ -495,15 +462,18 @@
 import { Modal } from "bootstrap"
 import { ucfirst } from "../util.ts"
 import axios from "axios";
-import { useToast } from "vue-toastification"
+
 import Confirm from "./Confirm.vue";
 import HiddenInput from "./HiddenInput.vue";
-const toast = useToast()
+import Telegram from "./notifications/Telegram.vue";
+import { useToast } from "vue-toastification"
+const toast = useToast();
 
 export default {
     components: {
         Confirm,
         HiddenInput,
+        Telegram,
     },
     props: {},
     data() {
@@ -519,17 +489,7 @@ export default {
             appriseInstalled: false,
         }
     },
-    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: {
         "notification.type"(to, from) {
             let oldName;
@@ -615,32 +575,6 @@ export default {
                 }
             })
         },
-
-        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]
-
-                    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")
-                }
-
-            } catch (error) {
-                toast.error(error.message)
-            }
-
-        },
-
     },
 }
 </script>

src/components/notifications/Telegram.vue

@@ -0,0 +1,98 @@
+<template>
+    <template v-if="$parent.notification.type === name">
+        <div class="mb-3">
+            <label for="telegram-bot-token" class="form-label">Bot Token</label>
+            <HiddenInput id="telegram-bot-token" v-model="$parent.notification.telegramBotToken" :required="true" autocomplete="one-time-code"></HiddenInput>
+            <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">
+            <label for="telegram-chat-id" class="form-label">Chat ID</label>
+
+            <div class="input-group mb-3">
+                <input id="telegram-chat-id" v-model="$parent.notification.telegramChatID" type="text" class="form-control" required>
+                <button v-if="$parent.notification.telegramBotToken" class="btn btn-outline-secondary" type="button" @click="autoGetTelegramChatID">
+                    {{ $t("Auto Get") }}
+                </button>
+            </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;">
+                    <template v-if="$parent.notification.telegramBotToken">
+                        <a :href="telegramGetUpdatesURL" target="_blank" style="word-break: break-word;">{{ telegramGetUpdatesURL }}</a>
+                    </template>
+
+                    <template v-else>
+                        {{ telegramGetUpdatesURL }}
+                    </template>
+                </p>
+            </div>
+        </div>
+    </template>
+</template>
+
+<script>
+import HiddenInput from "../HiddenInput.vue";
+import axios from "axios";
+import { useToast } from "vue-toastification"
+const toast = useToast();
+
+export default {
+    components: {
+        HiddenInput,
+    },
+    data() {
+        return {
+            name: "telegram",
+        }
+    },
+    computed: {
+        telegramGetUpdatesURL() {
+            let token = "<YOUR BOT TOKEN HERE>"
+
+            if (this.$parent.notification.telegramBotToken) {
+                token = this.$parent.notification.telegramBotToken;
+            }
+
+            return `https://api.telegram.org/bot${token}/getUpdates`;
+        },
+    },
+    mounted() {
+        console.log(this.$parent.notification.type);
+    },
+    methods: {
+        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]
+
+                    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")
+                }
+
+            } catch (error) {
+                toast.error(error.message)
+            }
+
+        },
+    }
+}
+</script>

src/languages/da-DK.js

@@ -115,5 +115,6 @@ export default {
     confirmClearStatisticsMsg: "Are you sure want to delete ALL statistics?",
     "Clear Data": "Clear Data",
     Events: "Events",
-    Heartbeats: "Heartbeats"
+    Heartbeats: "Heartbeats",
+    "Auto Get": "Auto Get"
 }

src/languages/de-DE.js

@@ -116,4 +116,5 @@ export default {
     respTime: "Antw. Zeit (ms)",
     notAvailableShort: "N/A",
     Create: "Erstellen",
+    "Auto Get": "Auto Get"
 }

src/languages/en.js

@@ -115,5 +115,6 @@ export default {
     Create: "Create",
     "Clear Data": "Clear Data",
     Events: "Events",
-    Heartbeats: "Heartbeats"
+    Heartbeats: "Heartbeats",
+    "Auto Get": "Auto Get"
 }

src/languages/es-ES.js

@@ -115,5 +115,6 @@ export default {
     confirmClearStatisticsMsg: "Are you sure want to delete ALL statistics?",
     "Clear Data": "Clear Data",
     Events: "Events",
-    Heartbeats: "Heartbeats"
+    Heartbeats: "Heartbeats",
+    "Auto Get": "Auto Get"
 }

src/languages/fr-FR.js

@@ -115,5 +115,6 @@ export default {
     confirmClearStatisticsMsg: "Are you sure want to delete ALL statistics?",
     "Clear Data": "Clear Data",
     Events: "Events",
-    Heartbeats: "Heartbeats"
+    Heartbeats: "Heartbeats",
+    "Auto Get": "Auto Get"
 }

src/languages/ja.js

@@ -115,5 +115,6 @@ export default {
     confirmClearStatisticsMsg: "Are you sure want to delete ALL statistics?",
     "Clear Data": "Clear Data",
     Events: "Events",
-    Heartbeats: "Heartbeats"
+    Heartbeats: "Heartbeats",
+    "Auto Get": "Auto Get"
 }

src/languages/ko-KR.js

@@ -115,5 +115,6 @@ export default {
     confirmClearStatisticsMsg: "Are you sure want to delete ALL statistics?",
     "Clear Data": "Clear Data",
     Events: "Events",
-    Heartbeats: "Heartbeats"
+    Heartbeats: "Heartbeats",
+    "Auto Get": "Auto Get"
 }

src/languages/nl-NL.js

@@ -115,5 +115,6 @@ export default {
     confirmClearStatisticsMsg: "Are you sure want to delete ALL statistics?",
     "Clear Data": "Clear Data",
     Events: "Events",
-    Heartbeats: "Heartbeats"
+    Heartbeats: "Heartbeats",
+    "Auto Get": "Auto Get"
 }

src/languages/pl.js

@@ -109,5 +109,12 @@ export default {
     "Repeat Password": "Powtórz hasło",
     respTime: "Czas odp. (ms)",
     notAvailableShort: "N/A",
-    Create: "Stwórz"
+    Create: "Stwórz",
+    clearEventsMsg: "Are you sure want to delete all events for this monitor?",
+    clearHeartbeatsMsg: "Are you sure want to delete all heartbeats for this monitor?",
+    confirmClearStatisticsMsg: "Are you sure want to delete ALL statistics?",
+    "Clear Data": "Clear Data",
+    Events: "Events",
+    Heartbeats: "Heartbeats",
+    "Auto Get": "Auto Get"
 }

src/languages/ru-RU.js

@@ -115,5 +115,6 @@ export default {
     confirmClearStatisticsMsg: "Are you sure want to delete ALL statistics?",
     "Clear Data": "Clear Data",
     Events: "Events",
-    Heartbeats: "Heartbeats"
+    Heartbeats: "Heartbeats",
+    "Auto Get": "Auto Get"
 }

src/languages/sr-latn.js

@@ -115,5 +115,6 @@ export default {
     confirmClearStatisticsMsg: "Are you sure want to delete ALL statistics?",
     "Clear Data": "Clear Data",
     Events: "Events",
-    Heartbeats: "Heartbeats"
+    Heartbeats: "Heartbeats",
+    "Auto Get": "Auto Get"
 }

src/languages/sr.js

@@ -115,5 +115,6 @@ export default {
     confirmClearStatisticsMsg: "Are you sure want to delete ALL statistics?",
     "Clear Data": "Clear Data",
     Events: "Events",
-    Heartbeats: "Heartbeats"
+    Heartbeats: "Heartbeats",
+    "Auto Get": "Auto Get"
 }

src/languages/sv-SE.js

@@ -115,5 +115,6 @@ export default {
     confirmClearStatisticsMsg: "Are you sure want to delete ALL statistics?",
     "Clear Data": "Clear Data",
     Events: "Events",
-    Heartbeats: "Heartbeats"
+    Heartbeats: "Heartbeats",
+    "Auto Get": "Auto Get"
 }

src/languages/zh-CN.js

@@ -115,5 +115,6 @@ export default {
     confirmClearStatisticsMsg: "Are you sure want to delete ALL statistics?",
     "Clear Data": "Clear Data",
     Events: "Events",
-    Heartbeats: "Heartbeats"
+    Heartbeats: "Heartbeats",
+    "Auto Get": "Auto Get"
 }

src/languages/zh-HK.js

@@ -115,5 +115,6 @@ export default {
     confirmClearStatisticsMsg: "是否確定刪除所有監測器的脈搏資料？（您的監測器會繼續正常運作）",
     "Clear Data": "清除資料",
     Events: "事件",
-    Heartbeats: "脈搏"
+    Heartbeats: "脈搏",
+    "Auto Get": "自動獲取"
 }