From e9735d239b4605d65ca5c39c15fff993edd938d4 Mon Sep 17 00:00:00 2001 From: zsxeee Date: Fri, 17 Sep 2021 16:07:03 +0800 Subject: [PATCH 01/16] Convert notification form to separate component --- src/components/NotificationDialog.vue | 398 +------------------- src/components/notifications/Apprise.vue | 30 ++ src/components/notifications/Discord.vue | 30 ++ src/components/notifications/Gotify.vue | 32 ++ src/components/notifications/Line.vue | 34 ++ src/components/notifications/LunaSea.vue | 19 + src/components/notifications/Mattermost.vue | 42 +++ src/components/notifications/Octopush.vue | 45 +++ src/components/notifications/Pushbullet.vue | 25 ++ src/components/notifications/Pushover.vue | 72 ++++ src/components/notifications/Pushy.vue | 31 ++ src/components/notifications/RocketChat.vue | 39 ++ src/components/notifications/Signal.vue | 42 +++ src/components/notifications/Slack.vue | 39 ++ src/components/notifications/Webhook.vue | 37 ++ src/components/notifications/index.js | 44 +++ src/languages/en.js | 17 + 17 files changed, 594 insertions(+), 382 deletions(-) create mode 100644 src/components/notifications/Apprise.vue create mode 100644 src/components/notifications/Discord.vue create mode 100644 src/components/notifications/Gotify.vue create mode 100644 src/components/notifications/Line.vue create mode 100644 src/components/notifications/LunaSea.vue create mode 100644 src/components/notifications/Mattermost.vue create mode 100644 src/components/notifications/Octopush.vue create mode 100644 src/components/notifications/Pushbullet.vue create mode 100644 src/components/notifications/Pushover.vue create mode 100644 src/components/notifications/Pushy.vue create mode 100644 src/components/notifications/RocketChat.vue create mode 100644 src/components/notifications/Signal.vue create mode 100644 src/components/notifications/Slack.vue create mode 100644 src/components/notifications/Webhook.vue create mode 100644 src/components/notifications/index.js diff --git a/src/components/NotificationDialog.vue b/src/components/NotificationDialog.vue index 220ff8d..c26990f 100644 --- a/src/components/NotificationDialog.vue +++ b/src/components/NotificationDialog.vue @@ -13,23 +13,7 @@
@@ -38,370 +22,8 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + +
@@ -454,6 +76,7 @@ import HiddenInput from "./HiddenInput.vue"; import Telegram from "./notifications/Telegram.vue"; import Teams from "./notifications/Teams.vue"; import SMTP from "./notifications/SMTP.vue"; +import NotificationForm from "./notifications" export default { components: { @@ -470,8 +93,10 @@ export default { model: null, processing: false, id: null, + notificationTypes: Object.keys(NotificationForm), notification: { name: "", + /** @type { null | keyof NotificationForm } */ type: null, isDefault: false, // Do not set default value here, please scroll to show() @@ -480,6 +105,15 @@ export default { } }, + computed: { + currentForm() { + if (!this.notification.type) { + return null + } + return NotificationForm[this.notification.type] + } + }, + watch: { "notification.type"(to, from) { let oldName; @@ -528,7 +162,7 @@ export default { } // Set Default value here - this.notification.type = "telegram"; + this.notification.type = this.notificationTypes[0]; this.notification.gotifyPriority = 8; this.notification.smtpSecure = false; } diff --git a/src/components/notifications/Apprise.vue b/src/components/notifications/Apprise.vue new file mode 100644 index 0000000..b9d2a94 --- /dev/null +++ b/src/components/notifications/Apprise.vue @@ -0,0 +1,30 @@ + + + diff --git a/src/components/notifications/Discord.vue b/src/components/notifications/Discord.vue new file mode 100644 index 0000000..3d4869e --- /dev/null +++ b/src/components/notifications/Discord.vue @@ -0,0 +1,30 @@ + + + diff --git a/src/components/notifications/Gotify.vue b/src/components/notifications/Gotify.vue new file mode 100644 index 0000000..600b5e4 --- /dev/null +++ b/src/components/notifications/Gotify.vue @@ -0,0 +1,32 @@ + + + diff --git a/src/components/notifications/Line.vue b/src/components/notifications/Line.vue new file mode 100644 index 0000000..2468875 --- /dev/null +++ b/src/components/notifications/Line.vue @@ -0,0 +1,34 @@ + + + diff --git a/src/components/notifications/LunaSea.vue b/src/components/notifications/LunaSea.vue new file mode 100644 index 0000000..efa103f --- /dev/null +++ b/src/components/notifications/LunaSea.vue @@ -0,0 +1,19 @@ + + + diff --git a/src/components/notifications/Mattermost.vue b/src/components/notifications/Mattermost.vue new file mode 100644 index 0000000..79ff23b --- /dev/null +++ b/src/components/notifications/Mattermost.vue @@ -0,0 +1,42 @@ + + + diff --git a/src/components/notifications/Octopush.vue b/src/components/notifications/Octopush.vue new file mode 100644 index 0000000..94c5783 --- /dev/null +++ b/src/components/notifications/Octopush.vue @@ -0,0 +1,45 @@ + + + diff --git a/src/components/notifications/Pushbullet.vue b/src/components/notifications/Pushbullet.vue new file mode 100644 index 0000000..8eddb9f --- /dev/null +++ b/src/components/notifications/Pushbullet.vue @@ -0,0 +1,25 @@ + + + diff --git a/src/components/notifications/Pushover.vue b/src/components/notifications/Pushover.vue new file mode 100644 index 0000000..ff29a40 --- /dev/null +++ b/src/components/notifications/Pushover.vue @@ -0,0 +1,72 @@ + + + diff --git a/src/components/notifications/Pushy.vue b/src/components/notifications/Pushy.vue new file mode 100644 index 0000000..752f169 --- /dev/null +++ b/src/components/notifications/Pushy.vue @@ -0,0 +1,31 @@ + + + diff --git a/src/components/notifications/RocketChat.vue b/src/components/notifications/RocketChat.vue new file mode 100644 index 0000000..50c21b2 --- /dev/null +++ b/src/components/notifications/RocketChat.vue @@ -0,0 +1,39 @@ + + + diff --git a/src/components/notifications/Signal.vue b/src/components/notifications/Signal.vue new file mode 100644 index 0000000..f68b6df --- /dev/null +++ b/src/components/notifications/Signal.vue @@ -0,0 +1,42 @@ + + + diff --git a/src/components/notifications/Slack.vue b/src/components/notifications/Slack.vue new file mode 100644 index 0000000..c1b4f7c --- /dev/null +++ b/src/components/notifications/Slack.vue @@ -0,0 +1,39 @@ + + + diff --git a/src/components/notifications/Webhook.vue b/src/components/notifications/Webhook.vue new file mode 100644 index 0000000..002a2d5 --- /dev/null +++ b/src/components/notifications/Webhook.vue @@ -0,0 +1,37 @@ + + + + + diff --git a/src/components/notifications/index.js b/src/components/notifications/index.js new file mode 100644 index 0000000..50716f1 --- /dev/null +++ b/src/components/notifications/index.js @@ -0,0 +1,44 @@ +import STMP from "./SMTP.vue" +import Telegram from "./Telegram.vue"; +import Discord from "./Discord.vue"; +import Webhook from "./Webhook.vue"; +import Signal from "./Signal.vue"; +import Gotify from "./Gotify.vue"; +import Slack from "./Slack.vue"; +import RocketChat from "./RocketChat.vue"; +import Teams from "./Teams.vue"; +import Pushover from "./Pushover.vue"; +import Pushy from "./Pushy.vue"; +import Octopush from "./Octopush.vue"; +import LunaSea from "./LunaSea.vue"; +import Apprise from "./Apprise.vue"; +import Pushbullet from "./Pushbullet.vue"; +import Line from "./Line.vue"; +import Mattermost from "./Mattermost.vue"; + +/** + * manage all notification form. + * + * @type { Record } + */ +const NotificationForm = { + "telegram": Telegram, + "webhook": Webhook, + "smtp": STMP, + "discord": Discord, + "teams": Teams, + "signal": Signal, + "gotify": Gotify, + "slack": Slack, + "rocket.chat": RocketChat, + "pushover": Pushover, + "pushy": Pushy, + "octopush": Octopush, + "lunasea": LunaSea, + "apprise": Apprise, + "pushbullet": Pushbullet, + "line": Line, + "mattermost": Mattermost +} + +export default NotificationForm diff --git a/src/languages/en.js b/src/languages/en.js index 1971f6f..bb0f50b 100644 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -167,4 +167,21 @@ export default { Purple: "Purple", Pink: "Pink", "Search...": "Search...", + "telegram": "Telegram", + "webhook": "Webhook", + "smtp": "Email (SMTP)", + "discord": "Discord", + "teams": "Microsoft Teams", + "signal": "Signal", + "gotify": "Gotify", + "slack": "Slack", + "rocket.chat": "Rocket.chat", + "pushover": "Pushover", + "pushy": "Pushy", + "octopush": "Octopush", + "lunasea": "LunaSea", + "apprise": "Apprise (Support 50+ Notification services)", + "pushbullet": "Pushbullet", + "line": "Line Messenger", + "mattermost": "Mattermost", } From 534ac4b720dff8a4368666e2ceab8f66326ea4f0 Mon Sep 17 00:00:00 2001 From: zsxeee Date: Fri, 17 Sep 2021 16:54:50 +0800 Subject: [PATCH 02/16] Move Apprise check to child component --- src/components/NotificationDialog.vue | 7 +------ src/components/notifications/Apprise.vue | 9 +++++++-- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/NotificationDialog.vue b/src/components/NotificationDialog.vue index c26990f..f254982 100644 --- a/src/components/NotificationDialog.vue +++ b/src/components/NotificationDialog.vue @@ -100,8 +100,7 @@ export default { type: null, isDefault: false, // Do not set default value here, please scroll to show() - }, - appriseInstalled: false, + } } }, @@ -131,10 +130,6 @@ export default { }, mounted() { this.modal = new Modal(this.$refs.modal) - - this.$root.getSocket().emit("checkApprise", (installed) => { - this.appriseInstalled = installed; - }) }, methods: { diff --git a/src/components/notifications/Apprise.vue b/src/components/notifications/Apprise.vue index b9d2a94..000ce91 100644 --- a/src/components/notifications/Apprise.vue +++ b/src/components/notifications/Apprise.vue @@ -12,8 +12,7 @@

Status: - - Apprise is installed + Apprise is installed Apprise is not installed. Read more

@@ -24,7 +23,13 @@ export default { data() { return { name: "apprise", + appriseInstalled: false } }, + mounted() { + this.$root.getSocket().emit("checkApprise", (installed) => { + this.appriseInstalled = installed; + }) + }, } From de8b61ef2bc325d9510de5ae1970704862b7de55 Mon Sep 17 00:00:00 2001 From: zsxeee Date: Fri, 17 Sep 2021 17:16:52 +0800 Subject: [PATCH 03/16] Remove unused imports --- src/components/NotificationDialog.vue | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/components/NotificationDialog.vue b/src/components/NotificationDialog.vue index f254982..707adfc 100644 --- a/src/components/NotificationDialog.vue +++ b/src/components/NotificationDialog.vue @@ -72,19 +72,11 @@ import { Modal } from "bootstrap" import { ucfirst } from "../util.ts" import Confirm from "./Confirm.vue"; -import HiddenInput from "./HiddenInput.vue"; -import Telegram from "./notifications/Telegram.vue"; -import Teams from "./notifications/Teams.vue"; -import SMTP from "./notifications/SMTP.vue"; import NotificationForm from "./notifications" export default { components: { Confirm, - HiddenInput, - Telegram, - Teams, - SMTP, }, props: {}, emits: ["added"], From 66e40d9fcb9ba87a4eb864489930dcdc578d615b Mon Sep 17 00:00:00 2001 From: zsxeee Date: Fri, 17 Sep 2021 20:20:44 +0800 Subject: [PATCH 04/16] Edit comment and remove unused variable --- src/components/notifications/Apprise.vue | 1 - src/components/notifications/Discord.vue | 10 ---------- src/components/notifications/Gotify.vue | 5 ----- src/components/notifications/Line.vue | 5 ----- src/components/notifications/LunaSea.vue | 10 ---------- src/components/notifications/Mattermost.vue | 10 ---------- src/components/notifications/Octopush.vue | 5 ----- src/components/notifications/Pushbullet.vue | 5 ----- src/components/notifications/Pushover.vue | 5 ----- src/components/notifications/Pushy.vue | 5 ----- src/components/notifications/RocketChat.vue | 10 ---------- src/components/notifications/SMTP.vue | 5 ----- src/components/notifications/Signal.vue | 10 ---------- src/components/notifications/Slack.vue | 10 ---------- src/components/notifications/Teams.vue | 10 ---------- src/components/notifications/Telegram.vue | 8 -------- src/components/notifications/Webhook.vue | 14 -------------- src/components/notifications/index.js | 2 +- 18 files changed, 1 insertion(+), 129 deletions(-) diff --git a/src/components/notifications/Apprise.vue b/src/components/notifications/Apprise.vue index 000ce91..de3fe52 100644 --- a/src/components/notifications/Apprise.vue +++ b/src/components/notifications/Apprise.vue @@ -22,7 +22,6 @@ export default { data() { return { - name: "apprise", appriseInstalled: false } }, diff --git a/src/components/notifications/Discord.vue b/src/components/notifications/Discord.vue index 3d4869e..c45a526 100644 --- a/src/components/notifications/Discord.vue +++ b/src/components/notifications/Discord.vue @@ -18,13 +18,3 @@
- - diff --git a/src/components/notifications/Gotify.vue b/src/components/notifications/Gotify.vue index 600b5e4..737a297 100644 --- a/src/components/notifications/Gotify.vue +++ b/src/components/notifications/Gotify.vue @@ -23,10 +23,5 @@ export default { components: { HiddenInput, }, - data() { - return { - name: "gotify", - } - }, } diff --git a/src/components/notifications/Line.vue b/src/components/notifications/Line.vue index 2468875..7d5312c 100644 --- a/src/components/notifications/Line.vue +++ b/src/components/notifications/Line.vue @@ -25,10 +25,5 @@ export default { components: { HiddenInput, }, - data() { - return { - name: "line", - } - }, } diff --git a/src/components/notifications/LunaSea.vue b/src/components/notifications/LunaSea.vue index efa103f..1511f41 100644 --- a/src/components/notifications/LunaSea.vue +++ b/src/components/notifications/LunaSea.vue @@ -7,13 +7,3 @@ - - diff --git a/src/components/notifications/Mattermost.vue b/src/components/notifications/Mattermost.vue index 79ff23b..3e1a7bd 100644 --- a/src/components/notifications/Mattermost.vue +++ b/src/components/notifications/Mattermost.vue @@ -30,13 +30,3 @@ - - diff --git a/src/components/notifications/Octopush.vue b/src/components/notifications/Octopush.vue index 94c5783..10fb6df 100644 --- a/src/components/notifications/Octopush.vue +++ b/src/components/notifications/Octopush.vue @@ -36,10 +36,5 @@ export default { components: { HiddenInput, }, - data() { - return { - name: "octopush", - } - }, } diff --git a/src/components/notifications/Pushbullet.vue b/src/components/notifications/Pushbullet.vue index 8eddb9f..2c805e0 100644 --- a/src/components/notifications/Pushbullet.vue +++ b/src/components/notifications/Pushbullet.vue @@ -16,10 +16,5 @@ export default { components: { HiddenInput, }, - data() { - return { - name: "pushbullet", - } - }, } diff --git a/src/components/notifications/Pushover.vue b/src/components/notifications/Pushover.vue index ff29a40..ae836b5 100644 --- a/src/components/notifications/Pushover.vue +++ b/src/components/notifications/Pushover.vue @@ -63,10 +63,5 @@ export default { components: { HiddenInput, }, - data() { - return { - name: "pushover", - } - }, } diff --git a/src/components/notifications/Pushy.vue b/src/components/notifications/Pushy.vue index 752f169..64e4ef9 100644 --- a/src/components/notifications/Pushy.vue +++ b/src/components/notifications/Pushy.vue @@ -22,10 +22,5 @@ export default { components: { HiddenInput, }, - data() { - return { - name: "pushy", - } - }, } diff --git a/src/components/notifications/RocketChat.vue b/src/components/notifications/RocketChat.vue index 50c21b2..0776a15 100644 --- a/src/components/notifications/RocketChat.vue +++ b/src/components/notifications/RocketChat.vue @@ -27,13 +27,3 @@ - - diff --git a/src/components/notifications/SMTP.vue b/src/components/notifications/SMTP.vue index 47661aa..d2d1e9d 100644 --- a/src/components/notifications/SMTP.vue +++ b/src/components/notifications/SMTP.vue @@ -66,10 +66,5 @@ export default { components: { HiddenInput, }, - data() { - return { - name: "smtp", - } - }, } diff --git a/src/components/notifications/Signal.vue b/src/components/notifications/Signal.vue index f68b6df..8598d07 100644 --- a/src/components/notifications/Signal.vue +++ b/src/components/notifications/Signal.vue @@ -30,13 +30,3 @@ - - diff --git a/src/components/notifications/Slack.vue b/src/components/notifications/Slack.vue index c1b4f7c..1ec2cdf 100644 --- a/src/components/notifications/Slack.vue +++ b/src/components/notifications/Slack.vue @@ -27,13 +27,3 @@ - - diff --git a/src/components/notifications/Teams.vue b/src/components/notifications/Teams.vue index 748bf7a..45ba26c 100644 --- a/src/components/notifications/Teams.vue +++ b/src/components/notifications/Teams.vue @@ -17,13 +17,3 @@ - - diff --git a/src/components/notifications/Telegram.vue b/src/components/notifications/Telegram.vue index 9be1e00..a59c804 100644 --- a/src/components/notifications/Telegram.vue +++ b/src/components/notifications/Telegram.vue @@ -47,11 +47,6 @@ export default { components: { HiddenInput, }, - data() { - return { - name: "telegram", - } - }, computed: { telegramGetUpdatesURL() { let token = "" @@ -62,9 +57,6 @@ export default { return `https://api.telegram.org/bot${token}/getUpdates`; }, - }, - mounted() { - }, methods: { async autoGetTelegramChatID() { diff --git a/src/components/notifications/Webhook.vue b/src/components/notifications/Webhook.vue index 002a2d5..1554a83 100644 --- a/src/components/notifications/Webhook.vue +++ b/src/components/notifications/Webhook.vue @@ -21,17 +21,3 @@ - - - - diff --git a/src/components/notifications/index.js b/src/components/notifications/index.js index 50716f1..52d4d44 100644 --- a/src/components/notifications/index.js +++ b/src/components/notifications/index.js @@ -17,7 +17,7 @@ import Line from "./Line.vue"; import Mattermost from "./Mattermost.vue"; /** - * manage all notification form. + * Manage all notification form. * * @type { Record } */ From 2fb3c40307c6f113578582c24f68dd2c43bf615c Mon Sep 17 00:00:00 2001 From: zsxeee Date: Fri, 17 Sep 2021 20:40:57 +0800 Subject: [PATCH 05/16] Variable name and key binding --- src/components/NotificationDialog.vue | 10 +++++----- src/components/notifications/index.js | 4 ++-- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/NotificationDialog.vue b/src/components/NotificationDialog.vue index 707adfc..4b1b0cc 100644 --- a/src/components/NotificationDialog.vue +++ b/src/components/NotificationDialog.vue @@ -13,7 +13,7 @@
@@ -72,7 +72,7 @@ import { Modal } from "bootstrap" import { ucfirst } from "../util.ts" import Confirm from "./Confirm.vue"; -import NotificationForm from "./notifications" +import NotificationFormList from "./notifications" export default { components: { @@ -85,10 +85,10 @@ export default { model: null, processing: false, id: null, - notificationTypes: Object.keys(NotificationForm), + notificationTypes: Object.keys(NotificationFormList), notification: { name: "", - /** @type { null | keyof NotificationForm } */ + /** @type { null | keyof NotificationFormList } */ type: null, isDefault: false, // Do not set default value here, please scroll to show() @@ -101,7 +101,7 @@ export default { if (!this.notification.type) { return null } - return NotificationForm[this.notification.type] + return NotificationFormList[this.notification.type] } }, diff --git a/src/components/notifications/index.js b/src/components/notifications/index.js index 52d4d44..e377803 100644 --- a/src/components/notifications/index.js +++ b/src/components/notifications/index.js @@ -21,7 +21,7 @@ import Mattermost from "./Mattermost.vue"; * * @type { Record } */ -const NotificationForm = { +const NotificationFormList = { "telegram": Telegram, "webhook": Webhook, "smtp": STMP, @@ -41,4 +41,4 @@ const NotificationForm = { "mattermost": Mattermost } -export default NotificationForm +export default NotificationFormList From ffbc25722d8fe086b83046ae94913aa5f6051d1b Mon Sep 17 00:00:00 2001 From: zsxeee Date: Sun, 19 Sep 2021 18:05:22 +0800 Subject: [PATCH 06/16] Move default setting to child component --- src/components/NotificationDialog.vue | 2 -- src/components/notifications/Gotify.vue | 5 +++++ src/components/notifications/SMTP.vue | 5 +++++ 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src/components/NotificationDialog.vue b/src/components/NotificationDialog.vue index 4b1b0cc..78d8909 100644 --- a/src/components/NotificationDialog.vue +++ b/src/components/NotificationDialog.vue @@ -150,8 +150,6 @@ export default { // Set Default value here this.notification.type = this.notificationTypes[0]; - this.notification.gotifyPriority = 8; - this.notification.smtpSecure = false; } this.modal.show() diff --git a/src/components/notifications/Gotify.vue b/src/components/notifications/Gotify.vue index 737a297..f8039d5 100644 --- a/src/components/notifications/Gotify.vue +++ b/src/components/notifications/Gotify.vue @@ -23,5 +23,10 @@ export default { components: { HiddenInput, }, + mounted() { + if (typeof this.$parent.notification.gotifyPriority === "undefined") { + this.$parent.notification.gotifyPriority = 8; + } + }, } diff --git a/src/components/notifications/SMTP.vue b/src/components/notifications/SMTP.vue index d2d1e9d..b86a626 100644 --- a/src/components/notifications/SMTP.vue +++ b/src/components/notifications/SMTP.vue @@ -66,5 +66,10 @@ export default { components: { HiddenInput, }, + mounted() { + if (typeof this.$parent.notification.smtpSecure === "undefined") { + this.$parent.notification.smtpSecure = false; + } + }, } From f9d633e02ba4dc186ffe5f168879c0f9480c89de Mon Sep 17 00:00:00 2001 From: Adam Stachowicz Date: Tue, 28 Sep 2021 08:07:42 +0200 Subject: [PATCH 07/16] Display created and updated time in local timezone. Fixes #491 --- src/mixins/datetime.js | 12 ++++++------ src/pages/StatusPage.vue | 21 +++++++++------------ 2 files changed, 15 insertions(+), 18 deletions(-) diff --git a/src/mixins/datetime.js b/src/mixins/datetime.js index 426ef6d..7cef22d 100644 --- a/src/mixins/datetime.js +++ b/src/mixins/datetime.js @@ -1,7 +1,7 @@ import dayjs from "dayjs"; -import utc from "dayjs/plugin/utc"; -import timezone from "dayjs/plugin/timezone"; import relativeTime from "dayjs/plugin/relativeTime"; +import timezone from "dayjs/plugin/timezone"; +import utc from "dayjs/plugin/utc"; dayjs.extend(utc); dayjs.extend(timezone); dayjs.extend(relativeTime); @@ -14,7 +14,7 @@ export default { data() { return { userTimezone: localStorage.timezone || "auto", - } + }; }, methods: { @@ -47,11 +47,11 @@ export default { computed: { timezone() { if (this.userTimezone === "auto") { - return dayjs.tz.guess() + return dayjs.tz.guess(); } - return this.userTimezone + return this.userTimezone; }, } -} +}; diff --git a/src/pages/StatusPage.vue b/src/pages/StatusPage.vue index 42a15af..4f00e08 100644 --- a/src/pages/StatusPage.vue +++ b/src/pages/StatusPage.vue @@ -90,9 +90,9 @@
- Created: {{ incident.createdDate }} ({{ createdDateFromNow }})
+ Created: {{ $root.datetime(incident.createdDate) }} ({{ dateFromNow(incident.createdDate) }})
- Last Updated: {{ incident.lastUpdatedDate }} ({{ lastUpdatedDateFromNow }}) + Last Updated: {{ $root.datetime(incident.lastUpdatedDate) }} ({{ dateFromNow(incident.lastUpdatedDate) }})
@@ -157,7 +157,7 @@
- +
@@ -343,14 +343,6 @@ export default { return this.overallStatus === STATUS_PAGE_ALL_DOWN; }, - createdDateFromNow() { - return dayjs.utc(this.incident.createdDate).fromNow(); - }, - - lastUpdatedDateFromNow() { - return dayjs.utc(this.incident. lastUpdatedDate).fromNow(); - } - }, watch: { @@ -548,7 +540,12 @@ export default { this.$root.getSocket().emit("unpinIncident", () => { this.incident = null; }); - } + }, + + dateFromNow(date) { + return dayjs.utc(date).fromNow(); + }, + } }; From ba4a4aaf1c5a0562dd022141a8738dad84540f3b Mon Sep 17 00:00:00 2001 From: Nelson Chan Date: Thu, 30 Sep 2021 00:08:37 +0800 Subject: [PATCH 08/16] Chore: Move multiselect css to own file --- src/assets/app.scss | 25 +------------ src/assets/multiselect.scss | 73 +++++++++++++++++++++++++++++++++++++ src/pages/EditMonitor.vue | 52 -------------------------- 3 files changed, 74 insertions(+), 76 deletions(-) create mode 100644 src/assets/multiselect.scss diff --git a/src/assets/app.scss b/src/assets/app.scss index 8e96a4a..f4707df 100644 --- a/src/assets/app.scss +++ b/src/assets/app.scss @@ -1,4 +1,5 @@ @import "vars.scss"; +@import "multiselect.scss"; @import "node_modules/bootstrap/scss/bootstrap"; #app { @@ -233,30 +234,6 @@ h2 { color: $dark-font-color; } - // Multiselect - .multiselect__tags { - background-color: $dark-bg2; - border-color: $dark-border-color; - } - - .multiselect__input, .multiselect__single { - background-color: $dark-bg2; - color: $dark-font-color; - } - - .multiselect__content-wrapper { - background-color: $dark-bg2; - border-color: $dark-border-color; - } - - .multiselect--above .multiselect__content-wrapper { - border-color: $dark-border-color; - } - - .multiselect__option--selected { - background-color: $dark-bg; - } - .monitor-list { .item { &:hover { diff --git a/src/assets/multiselect.scss b/src/assets/multiselect.scss new file mode 100644 index 0000000..3002307 --- /dev/null +++ b/src/assets/multiselect.scss @@ -0,0 +1,73 @@ +@import "vars.scss"; +@import "node_modules/vue-multiselect/dist/vue-multiselect"; + +.multiselect__tags { + border-radius: 1.5rem; + border: 1px solid #ced4da; + min-height: 38px; + padding: 6px 40px 0 8px; +} + +.multiselect--active .multiselect__tags { + border-radius: 1rem; +} + +.multiselect__option--highlight { + background: $primary !important; +} + +.multiselect__option--highlight::after { + background: $primary !important; +} + +.multiselect__tag { + border-radius: 50rem; + margin-bottom: 0; + padding: 6px 26px 6px 10px; + background: $primary !important; +} + +.multiselect__placeholder { + font-size: 1rem; + padding-left: 6px; + padding-top: 0; + padding-bottom: 0; + margin-bottom: 0; + opacity: 0.67; +} + +.multiselect__input, +.multiselect__single { + line-height: 14px; + margin-bottom: 0; +} + +.dark { + .multiselect__tag { + color: $dark-font-color2; + } + + .multiselect__tags { + background-color: $dark-bg2; + border-color: $dark-border-color; + } + + .multiselect__input, + .multiselect__single { + background-color: $dark-bg2; + color: $dark-font-color; + } + + .multiselect__content-wrapper { + background-color: $dark-bg2; + border-color: $dark-border-color; + } + + .multiselect--above .multiselect__content-wrapper { + border-color: $dark-border-color; + } + + .multiselect__option--selected { + background-color: $dark-bg; + } +} diff --git a/src/pages/EditMonitor.vue b/src/pages/EditMonitor.vue index 84231b1..a561470 100644 --- a/src/pages/EditMonitor.vue +++ b/src/pages/EditMonitor.vue @@ -383,58 +383,6 @@ export default { } - - - -