From 4a106431f39328b13deec16ded67118c519426aa Mon Sep 17 00:00:00 2001
From: LouisLam <louislam@users.noreply.github.com>
Date: Tue, 7 Sep 2021 23:32:05 +0800
Subject: [PATCH] convert Telegram into a vue components

---
 src/components/NotificationDialog.vue     | 84 +++----------------
 src/components/notifications/Telegram.vue | 98 +++++++++++++++++++++++
 src/languages/da-DK.js                    |  3 +-
 src/languages/de-DE.js                    |  1 +
 src/languages/en.js                       |  3 +-
 src/languages/es-ES.js                    |  3 +-
 src/languages/fr-FR.js                    |  3 +-
 src/languages/ja.js                       |  3 +-
 src/languages/ko-KR.js                    |  3 +-
 src/languages/nl-NL.js                    |  3 +-
 src/languages/pl.js                       |  9 ++-
 src/languages/ru-RU.js                    |  3 +-
 src/languages/sr-latn.js                  |  3 +-
 src/languages/sr.js                       |  3 +-
 src/languages/sv-SE.js                    |  3 +-
 src/languages/zh-CN.js                    |  3 +-
 src/languages/zh-HK.js                    |  3 +-
 17 files changed, 142 insertions(+), 89 deletions(-)
 create mode 100644 src/components/notifications/Telegram.vue

diff --git a/src/components/NotificationDialog.vue b/src/components/NotificationDialog.vue
index bc7d4c054..8a05d66ef 100644
--- a/src/components/NotificationDialog.vue
+++ b/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'">
-                            <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>
+                        <Telegram></Telegram>
 
-                            <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="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>
+                        <!-- TODO: Convert all into vue components, but not an easy task.  -->
 
                         <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>
diff --git a/src/components/notifications/Telegram.vue b/src/components/notifications/Telegram.vue
new file mode 100644
index 000000000..59d1992d6
--- /dev/null
+++ b/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>
diff --git a/src/languages/da-DK.js b/src/languages/da-DK.js
index 7e2e8a9f1..c8e4e68fd 100644
--- a/src/languages/da-DK.js
+++ b/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"
 }
diff --git a/src/languages/de-DE.js b/src/languages/de-DE.js
index 9945bdff6..a39d2b110 100644
--- a/src/languages/de-DE.js
+++ b/src/languages/de-DE.js
@@ -116,4 +116,5 @@ export default {
     respTime: "Antw. Zeit (ms)",
     notAvailableShort: "N/A",
     Create: "Erstellen",
+    "Auto Get": "Auto Get"
 }
diff --git a/src/languages/en.js b/src/languages/en.js
index 435160750..cece7e96f 100644
--- a/src/languages/en.js
+++ b/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"
 }
diff --git a/src/languages/es-ES.js b/src/languages/es-ES.js
index fadd3fccc..035608483 100644
--- a/src/languages/es-ES.js
+++ b/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"
 }
diff --git a/src/languages/fr-FR.js b/src/languages/fr-FR.js
index f11781966..dca82ac25 100644
--- a/src/languages/fr-FR.js
+++ b/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"
 }
diff --git a/src/languages/ja.js b/src/languages/ja.js
index f7fb55eee..d7b4e6e2a 100644
--- a/src/languages/ja.js
+++ b/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"
 }
diff --git a/src/languages/ko-KR.js b/src/languages/ko-KR.js
index 8956de072..d57dcbd7e 100644
--- a/src/languages/ko-KR.js
+++ b/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"
 }
diff --git a/src/languages/nl-NL.js b/src/languages/nl-NL.js
index 647d136b2..ef2305ca5 100644
--- a/src/languages/nl-NL.js
+++ b/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"
 }
diff --git a/src/languages/pl.js b/src/languages/pl.js
index cc625d6de..74137dbbf 100644
--- a/src/languages/pl.js
+++ b/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"
 }
diff --git a/src/languages/ru-RU.js b/src/languages/ru-RU.js
index e3835816b..1cea0567f 100644
--- a/src/languages/ru-RU.js
+++ b/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"
 }
diff --git a/src/languages/sr-latn.js b/src/languages/sr-latn.js
index 98453decd..46a6efec7 100644
--- a/src/languages/sr-latn.js
+++ b/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"
 }
diff --git a/src/languages/sr.js b/src/languages/sr.js
index 779754b96..c46244ada 100644
--- a/src/languages/sr.js
+++ b/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"
 }
diff --git a/src/languages/sv-SE.js b/src/languages/sv-SE.js
index c830e8907..a07396678 100644
--- a/src/languages/sv-SE.js
+++ b/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"
 }
diff --git a/src/languages/zh-CN.js b/src/languages/zh-CN.js
index 5491ab5be..d837aced5 100644
--- a/src/languages/zh-CN.js
+++ b/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"
 }
diff --git a/src/languages/zh-HK.js b/src/languages/zh-HK.js
index b76bdfc85..d7aa9de88 100644
--- a/src/languages/zh-HK.js
+++ b/src/languages/zh-HK.js
@@ -115,5 +115,6 @@ export default {
     confirmClearStatisticsMsg: "是否確定刪除所有監測器的脈搏資料？（您的監測器會繼續正常運作）",
     "Clear Data": "清除資料",
     Events: "事件",
-    Heartbeats: "脈搏"
+    Heartbeats: "脈搏",
+    "Auto Get": "自動獲取"
 }