From 1e595eaa76cf35bdb8e8be24c56ede595dd1f38a Mon Sep 17 00:00:00 2001
From: Adam Stachowicz <adam.stachowicz@fingo.info>
Date: Tue, 26 Apr 2022 01:26:57 +0200
Subject: [PATCH] Update linters

---
 .eslintrc.js                   |  1 +
 package.json                   | 12 +++----
 server/database.js             |  2 +-
 server/prometheus.js           |  2 +-
 server/proxy.js                |  2 +-
 server/server.js               | 17 ++-------
 server/util-server.js          |  2 +-
 src/components/Datetime.vue    |  2 +-
 src/components/MonitorList.vue | 10 ++----
 src/components/PingChart.vue   | 10 +++---
 src/components/Tag.vue         | 21 +++++------
 src/components/TagsManager.vue | 66 ++++++++++++++++++----------------
 src/pages/EditMonitor.vue      |  9 +++--
 13 files changed, 72 insertions(+), 84 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 38a16e64d..4713799d7 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -48,6 +48,7 @@ module.exports = {
         "vue/html-self-closing": "off",
         "vue/require-component-is": "off",      // not allow is="style" https://github.com/vuejs/eslint-plugin-vue/issues/462#issuecomment-430234675
         "vue/attribute-hyphenation": "off",     // This change noNL to "no-n-l" unexpectedly
+        "vue/multi-word-component-names": "off",
         "no-multi-spaces": [ "error", {
             ignoreEOLComments: true,
         }],
diff --git a/package.json b/package.json
index 8a8bd1ebd..3096dfdb0 100644
--- a/package.json
+++ b/package.json
@@ -123,7 +123,7 @@
     },
     "devDependencies": {
         "@actions/github": "~5.0.1",
-        "@babel/eslint-parser": "~7.15.8",
+        "@babel/eslint-parser": "~7.17.0",
         "@babel/preset-env": "^7.15.8",
         "@types/bootstrap": "~5.1.9",
         "@vitejs/plugin-legacy": "~1.6.4",
@@ -135,16 +135,16 @@
         "core-js": "~3.18.3",
         "cross-env": "~7.0.3",
         "dns2": "~2.0.1",
-        "eslint": "~7.32.0",
-        "eslint-plugin-vue": "~7.18.0",
+        "eslint": "~8.14.0",
+        "eslint-plugin-vue": "~8.7.1",
         "jest": "~27.2.5",
         "jest-puppeteer": "~6.0.3",
-        "npm-check-updates": "^12.5.5",
+        "npm-check-updates": "^12.5.9",
         "postcss-html": "^1.3.1",
         "puppeteer": "~13.1.3",
         "sass": "~1.42.1",
-        "stylelint": "~14.2.0",
-        "stylelint-config-standard": "~24.0.0",
+        "stylelint": "~14.7.1",
+        "stylelint-config-standard": "~25.0.0",
         "typescript": "~4.4.4",
         "vite": "~2.6.14",
         "wait-on": "^6.0.1"
diff --git a/server/database.js b/server/database.js
index 099d15d56..6ed11c3b9 100644
--- a/server/database.js
+++ b/server/database.js
@@ -58,7 +58,7 @@ class Database {
         "patch-monitor-expiry-notification.sql": true,
         "patch-status-page-footer-css.sql": true,
         "patch-added-mqtt-monitor.sql": true,
-    }
+    };
 
     /**
      * The final version should be 10 after merged tag feature
diff --git a/server/prometheus.js b/server/prometheus.js
index fe0896f61..9bf623fbe 100644
--- a/server/prometheus.js
+++ b/server/prometheus.js
@@ -33,7 +33,7 @@ const monitorStatus = new PrometheusClient.Gauge({
 });
 
 class Prometheus {
-    monitorLabelValues = {}
+    monitorLabelValues = {};
 
     constructor(monitor) {
         this.monitorLabelValues = {
diff --git a/server/proxy.js b/server/proxy.js
index 621f24d06..22c63b39a 100644
--- a/server/proxy.js
+++ b/server/proxy.js
@@ -7,7 +7,7 @@ const { UptimeKumaServer } = require("./uptime-kuma-server");
 
 class Proxy {
 
-    static SUPPORTED_PROXY_PROTOCOLS = [ "http", "https", "socks", "socks5", "socks4" ]
+    static SUPPORTED_PROXY_PROTOCOLS = [ "http", "https", "socks", "socks5", "socks4" ];
 
     /**
      * Saves and updates given proxy entity
diff --git a/server/server.js b/server/server.js
index 7bee52521..4bd0b4810 100644
--- a/server/server.js
+++ b/server/server.js
@@ -136,13 +136,6 @@ app.use(function (req, res, next) {
     next();
 });
 
-/**
- * Total WebSocket client connected to server currently, no actual use
- *
- * @type {number}
- */
-let totalClient = 0;
-
 /**
  * Use for decode the auth object
  * @type {null}
@@ -248,17 +241,11 @@ try {
 
         sendInfo(socket);
 
-        totalClient++;
-
         if (needSetup) {
             log.info("server", "Redirect to setup page");
             socket.emit("setup");
         }
 
-        socket.on("disconnect", () => {
-            totalClient--;
-        });
-
         // ***************************
         // Public Socket API
         // ***************************
@@ -1228,7 +1215,7 @@ try {
 
                     for (let i = 0; i < monitorListData.length; i++) {
                         // Only starts importing the monitor if the import option is "overwrite", "keep" or "skip" but the notification doesn't exists
-                        if ((importHandle == "skip" && monitorNameListString.includes(monitorListData[i].name) == false) || importHandle == "keep" || importHandle == "overwrite") {
+                        if ((importHandle === "skip" && monitorNameListString.includes(monitorListData[i].name) === false) || importHandle === "keep" || importHandle === "overwrite") {
 
                             // Define in here every new variable for monitors which where implemented after the first version of the Import/Export function (1.6.0)
                             // --- Start ---
@@ -1325,7 +1312,7 @@ try {
                             await updateMonitorNotification(bean.id, notificationIDList);
 
                             // If monitor was active start it immediately, otherwise pause it
-                            if (monitorListData[i].active == 1) {
+                            if (monitorListData[i].active === 1) {
                                 await startMonitor(socket.userID, bean.id);
                             } else {
                                 await pauseMonitor(socket.userID, bean.id);
diff --git a/server/util-server.js b/server/util-server.js
index 7a9d3e7d1..edbad5892 100644
--- a/server/util-server.js
+++ b/server/util-server.js
@@ -132,7 +132,7 @@ exports.mqttAsync = function (hostname, topic, okMessage, options = {}) {
         });
 
         client.on("message", (messageTopic, message) => {
-            if (messageTopic == topic) {
+            if (messageTopic === topic) {
                 client.end();
                 clearTimeout(timeoutID);
                 if (okMessage != null && okMessage !== "" && message.toString() !== okMessage) {
diff --git a/src/components/Datetime.vue b/src/components/Datetime.vue
index 8662e6d8a..ed38c434d 100644
--- a/src/components/Datetime.vue
+++ b/src/components/Datetime.vue
@@ -5,8 +5,8 @@
 <script>
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
-import utc from "dayjs/plugin/utc";
 import timezone from "dayjs/plugin/timezone"; // dependent on utc plugin
+import utc from "dayjs/plugin/utc";
 dayjs.extend(utc);
 dayjs.extend(timezone);
 dayjs.extend(relativeTime);
diff --git a/src/components/MonitorList.vue b/src/components/MonitorList.vue
index c8de6a6f2..7aeadd1e1 100644
--- a/src/components/MonitorList.vue
+++ b/src/components/MonitorList.vue
@@ -47,8 +47,8 @@
 
 <script>
 import HeartbeatBar from "../components/HeartbeatBar.vue";
-import Uptime from "../components/Uptime.vue";
 import Tag from "../components/Tag.vue";
+import Uptime from "../components/Uptime.vue";
 import { getMonitorRelativeURL } from "../util.ts";
 
 export default {
@@ -105,7 +105,7 @@ export default {
 
             // Simple filter by search text
             // finds monitor name, tag name or tag value
-            if (this.searchText != "") {
+            if (this.searchText !== "") {
                 const loweredSearchText = this.searchText.toLowerCase();
                 result = result.filter(monitor => {
                     return monitor.name.toLowerCase().includes(loweredSearchText)
@@ -170,12 +170,6 @@ export default {
     }
 }
 
-.dark {
-    .footer {
-        //  background-color: $dark-bg;
-    }
-}
-
 @media (max-width: 770px) {
     .list-header {
         margin: -20px;
diff --git a/src/components/PingChart.vue b/src/components/PingChart.vue
index 9132b4e90..d4f94a191 100644
--- a/src/components/PingChart.vue
+++ b/src/components/PingChart.vue
@@ -18,10 +18,10 @@
 
 <script lang="ts">
 import { BarController, BarElement, Chart, Filler, LinearScale, LineController, LineElement, PointElement, TimeScale, Tooltip } from "chart.js";
-import dayjs from "dayjs";
-import utc from "dayjs/plugin/utc";
-import timezone from "dayjs/plugin/timezone";
 import "chartjs-adapter-dayjs";
+import dayjs from "dayjs";
+import timezone from "dayjs/plugin/timezone";
+import utc from "dayjs/plugin/utc";
 import { LineChart } from "vue-chart-3";
 import { useToast } from "vue-toastification";
 import { DOWN } from "../util.ts";
@@ -217,7 +217,7 @@ export default {
     watch: {
         // Update chart data when the selected chart period changes
         chartPeriodHrs: function (newPeriod) {
-            if (newPeriod == "0") {
+            if (newPeriod === "0") {
                 newPeriod = null;
                 this.heartbeatList = null;
                 this.$root.storage().removeItem(`chart-period-${this.monitorId}`);
@@ -241,7 +241,7 @@ export default {
         // And mirror latest change to this.heartbeatList
         this.$watch(() => this.$root.heartbeatList[this.monitorId],
             (heartbeatList) => {
-                if (this.chartPeriodHrs != 0) {
+                if (this.chartPeriodHrs !== 0) {
                     const newBeat = heartbeatList.at(-1);
                     if (newBeat && dayjs.utc(newBeat.time) > dayjs.utc(this.heartbeatList.at(-1)?.time)) {
                         this.heartbeatList.push(heartbeatList.at(-1));
diff --git a/src/components/Tag.vue b/src/components/Tag.vue
index 364a05c66..3c9668502 100644
--- a/src/components/Tag.vue
+++ b/src/components/Tag.vue
@@ -1,13 +1,14 @@
 <template>
-    <div class="tag-wrapper rounded d-inline-flex"
-         :class="{ 'px-3': size == 'normal',
-                   'py-1': size == 'normal',
-                   'm-2': size == 'normal',
-                   'px-2': size == 'sm',
-                   'py-0': size == 'sm',
-                   'm-1': size == 'sm',
-         }"
-         :style="{ backgroundColor: item.color, fontSize: size == 'sm' ? '0.7em' : '1em' }"
+    <div
+        class="tag-wrapper rounded d-inline-flex"
+        :class="{ 'px-3': size == 'normal',
+                  'py-1': size == 'normal',
+                  'm-2': size == 'normal',
+                  'px-2': size == 'sm',
+                  'py-0': size == 'sm',
+                  'm-1': size == 'sm',
+        }"
+        :style="{ backgroundColor: item.color, fontSize: size == 'sm' ? '0.7em' : '1em' }"
     >
         <span class="tag-text">{{ displayText }}</span>
         <span v-if="remove != null" class="ps-1 btn-remove" @click="remove(item)">
@@ -34,7 +35,7 @@ export default {
     },
     computed: {
         displayText() {
-            if (this.item.value == "") {
+            if (this.item.value === "") {
                 return this.item.name;
             } else {
                 return `${this.item.name}: ${this.item.value}`;
diff --git a/src/components/TagsManager.vue b/src/components/TagsManager.vue
index 2412f7e8e..1a9212ca5 100644
--- a/src/components/TagsManager.vue
+++ b/src/components/TagsManager.vue
@@ -34,18 +34,20 @@
                             label="name"
                         >
                             <template #option="{ option }">
-                                <div class="mx-2 py-1 px-3 rounded d-inline-flex"
-                                     style="margin-top: -5px; margin-bottom: -5px; height: 24px;"
-                                     :style="{ color: textColor(option), backgroundColor: option.color + ' !important' }"
+                                <div
+                                    class="mx-2 py-1 px-3 rounded d-inline-flex"
+                                    style="margin-top: -5px; margin-bottom: -5px; height: 24px;"
+                                    :style="{ color: textColor(option), backgroundColor: option.color + ' !important' }"
                                 >
                                     <span>
                                         {{ option.name }}</span>
                                 </div>
                             </template>
                             <template #singleLabel="{ option }">
-                                <div class="py-1 px-3 rounded d-inline-flex"
-                                     style="height: 24px;"
-                                     :style="{ color: textColor(option), backgroundColor: option.color + ' !important' }"
+                                <div
+                                    class="py-1 px-3 rounded d-inline-flex"
+                                    style="height: 24px;"
+                                    :style="{ color: textColor(option), backgroundColor: option.color + ' !important' }"
                                 >
                                     <span>{{ option.name }}</span>
                                 </div>
@@ -53,10 +55,11 @@
                         </vue-multiselect>
                         <div v-if="newDraftTag.select?.name == null" class="d-flex mb-2">
                             <div class="w-50 pe-2">
-                                <input v-model="newDraftTag.name" class="form-control"
-                                       :class="{'is-invalid': validateDraftTag.nameInvalid}"
-                                       :placeholder="$t('Name')"
-                                       @keydown.enter.prevent="onEnter"
+                                <input
+                                    v-model="newDraftTag.name" class="form-control"
+                                    :class="{'is-invalid': validateDraftTag.nameInvalid}"
+                                    :placeholder="$t('Name')"
+                                    @keydown.enter.prevent="onEnter"
                                 />
                                 <div class="invalid-feedback">
                                     {{ $t("Tag with this name already exist.") }}
@@ -75,17 +78,19 @@
                                     deselect-label=""
                                 >
                                     <template #option="{ option }">
-                                        <div class="mx-2 py-1 px-3 rounded d-inline-flex"
-                                             style="height: 24px; color: white;"
-                                             :style="{ backgroundColor: option.color + ' !important' }"
+                                        <div
+                                            class="mx-2 py-1 px-3 rounded d-inline-flex"
+                                            style="height: 24px; color: white;"
+                                            :style="{ backgroundColor: option.color + ' !important' }"
                                         >
                                             <span>{{ option.name }}</span>
                                         </div>
                                     </template>
                                     <template #singleLabel="{ option }">
-                                        <div class="py-1 px-3 rounded d-inline-flex"
-                                             style="height: 24px; color: white;"
-                                             :style="{ backgroundColor: option.color + ' !important' }"
+                                        <div
+                                            class="py-1 px-3 rounded d-inline-flex"
+                                            style="height: 24px; color: white;"
+                                            :style="{ backgroundColor: option.color + ' !important' }"
                                         >
                                             <span>{{ option.name }}</span>
                                         </div>
@@ -94,10 +99,11 @@
                             </div>
                         </div>
                         <div class="mb-2">
-                            <input v-model="newDraftTag.value" class="form-control"
-                                   :class="{'is-invalid': validateDraftTag.valueInvalid}"
-                                   :placeholder="$t('value (optional)')"
-                                   @keydown.enter.prevent="onEnter"
+                            <input
+                                v-model="newDraftTag.value" class="form-control"
+                                :class="{'is-invalid': validateDraftTag.valueInvalid}"
+                                :placeholder="$t('value (optional)')"
+                                @keydown.enter.prevent="onEnter"
                             />
                             <div class="invalid-feedback">
                                 {{ $t("Tag with this value already exist.") }}
@@ -123,8 +129,8 @@
 <script>
 import { Modal } from "bootstrap";
 import VueMultiselect from "vue-multiselect";
-import Tag from "../components/Tag.vue";
 import { useToast } from "vue-toastification";
+import Tag from "../components/Tag.vue";
 const toast = useToast();
 
 export default {
@@ -159,14 +165,14 @@ export default {
         tagOptions() {
             const tagOptions = this.existingTags;
             for (const tag of this.newTags) {
-                if (!tagOptions.find(t => t.name == tag.name && t.color == tag.color)) {
+                if (!tagOptions.find(t => t.name === tag.name && t.color === tag.color)) {
                     tagOptions.push(tag);
                 }
             }
             return tagOptions;
         },
         selectedTags() {
-            return this.preSelectedTags.concat(this.newTags).filter(tag => !this.deleteTags.find(monitorTag => monitorTag.id == tag.id));
+            return this.preSelectedTags.concat(this.newTags).filter(tag => !this.deleteTags.find(monitorTag => monitorTag.id === tag.id));
         },
         colorOptions() {
             return [
@@ -192,7 +198,7 @@ export default {
             let nameInvalid = false;
             let valueInvalid = false;
             let invalid = true;
-            if (this.deleteTags.find(tag => tag.name == this.newDraftTag.select?.name && tag.value == this.newDraftTag.value)) {
+            if (this.deleteTags.find(tag => tag.name === this.newDraftTag.select?.name && tag.value === this.newDraftTag.value)) {
                 // Undo removing a Tag
                 nameInvalid = false;
                 valueInvalid = false;
@@ -202,9 +208,9 @@ export default {
                 nameInvalid = true;
                 invalid = true;
             } else if (this.newTags.concat(this.preSelectedTags).filter(tag => (
-                tag.name == this.newDraftTag.select?.name && tag.value == this.newDraftTag.value
+                tag.name === this.newDraftTag.select?.name && tag.value === this.newDraftTag.value
             ) || (
-                tag.name == this.newDraftTag.name && tag.value == this.newDraftTag.value
+                tag.name === this.newDraftTag.name && tag.value === this.newDraftTag.value
             )).length > 0) {
                 // Try to add a tag with existing name and value
                 valueInvalid = true;
@@ -250,7 +256,7 @@ export default {
         deleteTag(item) {
             if (item.new) {
                 // Undo Adding a new Tag
-                this.newTags = this.newTags.filter(tag => !(tag.name == item.name && tag.value == item.value));
+                this.newTags = this.newTags.filter(tag => !(tag.name === item.name && tag.value === item.value));
             } else {
                 // Remove an Existing Tag
                 this.deleteTags.push(item);
@@ -266,9 +272,9 @@ export default {
         addDraftTag() {
             console.log("Adding Draft Tag: ", this.newDraftTag);
             if (this.newDraftTag.select != null) {
-                if (this.deleteTags.find(tag => tag.name == this.newDraftTag.select.name && tag.value == this.newDraftTag.value)) {
+                if (this.deleteTags.find(tag => tag.name === this.newDraftTag.select.name && tag.value === this.newDraftTag.value)) {
                     // Undo removing a tag
-                    this.deleteTags = this.deleteTags.filter(tag => !(tag.name == this.newDraftTag.select.name && tag.value == this.newDraftTag.value));
+                    this.deleteTags = this.deleteTags.filter(tag => !(tag.name === this.newDraftTag.select.name && tag.value === this.newDraftTag.value));
                 } else {
                     // Add an existing Tag
                     this.newTags.push({
@@ -345,7 +351,7 @@ export default {
                     tagId = newTagResult.id;
                     // Assign the new ID to the tags of the same name & color
                     this.newTags.map(tag => {
-                        if (tag.name == newTag.name && tag.color == newTag.color) {
+                        if (tag.name === newTag.name && tag.color === newTag.color) {
                             tag.id = newTagResult.id;
                         }
                     });
diff --git a/src/pages/EditMonitor.vue b/src/pages/EditMonitor.vue
index cd3bff563..3a49c8293 100644
--- a/src/pages/EditMonitor.vue
+++ b/src/pages/EditMonitor.vue
@@ -361,13 +361,12 @@
 </template>
 
 <script>
+import VueMultiselect from "vue-multiselect";
+import { useToast } from "vue-toastification";
+import CopyableInput from "../components/CopyableInput.vue";
 import NotificationDialog from "../components/NotificationDialog.vue";
 import ProxyDialog from "../components/ProxyDialog.vue";
 import TagsManager from "../components/TagsManager.vue";
-import CopyableInput from "../components/CopyableInput.vue";
-
-import { useToast } from "vue-toastification";
-import VueMultiselect from "vue-multiselect";
 import { genSecret, isDev } from "../util.ts";
 
 const toast = useToast();
@@ -540,7 +539,7 @@ export default {
                 }
 
                 for (let i = 0; i < this.$root.notificationList.length; i++) {
-                    if (this.$root.notificationList[i].isDefault == true) {
+                    if (this.$root.notificationList[i].isDefault === true) {
                         this.monitor.notificationIDList[this.$root.notificationList[i].id] = true;
                     }
                 }