Merge remote-tracking branch 'origin/master' into status-page-expiry

# Conflicts:
#	src/lang/en.json

src/components/MonitorList.vue

@@ -2,6 +2,10 @@
     <div class="shadow-box mb-3" :style="boxStyle">
         <div class="list-header">
             <div class="header-top">
+                <button class="btn btn-outline-normal ms-2" :class="{ 'active': selectMode }" type="button" @click="selectMode = !selectMode">
+                    {{ $t("Select") }}
+                </button>
+
                 <div class="placeholder"></div>
                 <div class="search-wrapper">
                     <a v-if="searchText == ''" class="search-icon">
@@ -21,27 +25,55 @@
             <div class="header-filter">
                 <MonitorListFilter :filterState="filterState" @update-filter="updateFilter" />
             </div>
+
+            <!-- Selection Controls -->
+            <div v-if="selectMode" class="selection-controls px-2 pt-2">
+                <input
+                    v-model="selectAll"
+                    class="form-check-input select-input"
+                    type="checkbox"
+                />
+
+                <button class="btn-outline-normal" @click="pauseDialog"><font-awesome-icon icon="pause" size="sm" /> {{ $t("Pause") }}</button>
+                <button class="btn-outline-normal" @click="resumeSelected"><font-awesome-icon icon="play" size="sm" /> {{ $t("Resume") }}</button>
+
+                <span v-if="selectedMonitorCount > 0">
+                    {{ $t("selectedMonitorCount", [ selectedMonitorCount ]) }}
+                </span>
+            </div>
         </div>
-        <div class="monitor-list" :class="{ scrollbar: scrollbar }">
+        <div ref="monitorList" class="monitor-list" :class="{ scrollbar: scrollbar }" :style="monitorListStyle">
             <div v-if="Object.keys($root.monitorList).length === 0" class="text-center mt-3">
                 {{ $t("No Monitors, please") }} <router-link to="/add">{{ $t("add one") }}</router-link>
             </div>
 
             <MonitorListItem
-                v-for="(item, index) in sortedMonitorList" :key="index" :monitor="item"
+                v-for="(item, index) in sortedMonitorList"
+                :key="index"
+                :monitor="item"
                 :isSearch="searchText !== ''"
+                :isSelectMode="selectMode"
+                :isSelected="isSelected"
+                :select="select"
+                :deselect="deselect"
             />
         </div>
     </div>
+
+    <Confirm ref="confirmPause" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="pauseSelected">
+        {{ $t("pauseMonitorMsg") }}
+    </Confirm>
 </template>
 
 <script>
+import Confirm from "../components/Confirm.vue";
 import MonitorListItem from "../components/MonitorListItem.vue";
 import MonitorListFilter from "./MonitorListFilter.vue";
 import { getMonitorRelativeURL } from "../util.ts";
 
 export default {
     components: {
+        Confirm,
         MonitorListItem,
         MonitorListFilter,
     },
@@ -54,6 +86,10 @@ export default {
     data() {
         return {
             searchText: "",
+            selectMode: false,
+            selectAll: false,
+            disableSelectAllWatcher: false,
+            selectedMonitors: {},
             windowTop: 0,
             filterState: {
                 status: null,
@@ -146,6 +182,58 @@ export default {
 
             return result;
         },
+
+        isDarkTheme() {
+            return document.body.classList.contains("dark");
+        },
+
+        monitorListStyle() {
+            let listHeaderHeight = 107;
+
+            if (this.selectMode) {
+                listHeaderHeight += 42;
+            }
+
+            return {
+                "height": `calc(100% - ${listHeaderHeight}px)`
+            };
+        },
+
+        selectedMonitorCount() {
+            return Object.keys(this.selectedMonitors).length;
+        },
+    },
+    watch: {
+        searchText() {
+            for (let monitor of this.sortedMonitorList) {
+                if (!this.selectedMonitors[monitor.id]) {
+                    if (this.selectAll) {
+                        this.disableSelectAllWatcher = true;
+                        this.selectAll = false;
+                    }
+                    break;
+                }
+            }
+        },
+        selectAll() {
+            if (!this.disableSelectAllWatcher) {
+                this.selectedMonitors = {};
+
+                if (this.selectAll) {
+                    this.sortedMonitorList.forEach((item) => {
+                        this.selectedMonitors[item.id] = true;
+                    });
+                }
+            } else {
+                this.disableSelectAllWatcher = false;
+            }
+        },
+        selectMode() {
+            if (!this.selectMode) {
+                this.selectAll = false;
+                this.selectedMonitors = {};
+            }
+        }
     },
     mounted() {
         window.addEventListener("scroll", this.onScroll);
@@ -181,6 +269,53 @@ export default {
         updateFilter(newFilter) {
             this.filterState = newFilter;
         },
+        /**
+         * Deselect a monitor
+         * @param {number} id ID of monitor
+         */
+        deselect(id) {
+            delete this.selectedMonitors[id];
+        },
+        /**
+         * Select a monitor
+         * @param {number} id ID of monitor
+         */
+        select(id) {
+            this.selectedMonitors[id] = true;
+        },
+        /**
+         * Determine if monitor is selected
+         * @param {number} id ID of monitor
+         * @returns {bool}
+         */
+        isSelected(id) {
+            return id in this.selectedMonitors;
+        },
+        /** Disable select mode and reset selection */
+        cancelSelectMode() {
+            this.selectMode = false;
+            this.selectedMonitors = {};
+        },
+        /** Show dialog to confirm pause */
+        pauseDialog() {
+            this.$refs.confirmPause.show();
+        },
+        /** Pause each selected monitor */
+        pauseSelected() {
+            Object.keys(this.selectedMonitors)
+                .filter(id => this.$root.monitorList[id].active)
+                .forEach(id => this.$root.getSocket().emit("pauseMonitor", id));
+
+            this.cancelSelectMode();
+        },
+        /** Resume each selected monitor */
+        resumeSelected() {
+            Object.keys(this.selectedMonitors)
+                .filter(id => !this.$root.monitorList[id].active)
+                .forEach(id => this.$root.getSocket().emit("resumeMonitor", id));
+
+            this.cancelSelectMode();
+        },
     },
 };
 </script>
@@ -271,4 +406,12 @@ export default {
     padding-left: 67px;
     margin-top: 5px;
 }
+
+.selection-controls {
+    margin-top: 5px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
 </style>

src/components/MonitorListFilterDropdown.vue

@@ -44,6 +44,7 @@ export default {
 
 <style lang="scss">
 @import "../assets/vars.scss";
+@import "../assets/app.scss";
 
 .filter-dropdown-menu {
     z-index: 100;
@@ -102,18 +103,10 @@ export default {
 }
 
 .filter-dropdown-status {
+    @extend .btn-outline-normal;
     display: flex;
     align-items: center;
-    padding: 4px 10px;
     margin-left: 5px;
-    border: 1px solid #ced4da;
-    border-radius: 25px;
-    background-color: transparent;
-
-    .dark & {
-        color: $dark-font-color;
-        border: 1px solid $dark-font-color2;
-    }
 
     &.active {
         border: 1px solid $highlight;

src/components/MonitorListItem.vue

@@ -1,34 +1,56 @@
 <template>
     <div>
-        <router-link :to="monitorURL(monitor.id)" class="item" :class="{ 'disabled': ! monitor.active }">
-            <div class="row">
-                <div class="col-9 col-md-8 small-padding" :class="{ 'monitor-item': $root.userHeartbeatBar == 'bottom' || $root.userHeartbeatBar == 'none' }">
-                    <div class="info" :style="depthMargin">
-                        <Uptime :monitor="monitor" type="24" :pill="true" />
-                        <span v-if="hasChildren" class="collapse-padding" @click.prevent="changeCollapsed">
-                            <font-awesome-icon icon="chevron-down" class="animated" :class="{ collapsed: isCollapsed}" />
-                        </span>
-                        {{ monitorName }}
-                    </div>
-                    <div class="tags">
-                        <Tag v-for="tag in monitor.tags" :key="tag" :item="tag" :size="'sm'" />
-                    </div>
-                </div>
-                <div v-show="$root.userHeartbeatBar == 'normal'" :key="$root.userHeartbeatBar" class="col-3 col-md-4">
-                    <HeartbeatBar size="small" :monitor-id="monitor.id" />
-                </div>
+        <div :style="depthMargin">
+            <!-- Checkbox -->
+            <div v-if="isSelectMode" class="select-input-wrapper">
+                <input
+                    class="form-check-input select-input"
+                    type="checkbox"
+                    :aria-label="$t('Check/Uncheck')"
+                    :checked="isSelected(monitor.id)"
+                    @click.stop="toggleSelection"
+                />
             </div>
 
-            <div v-if="$root.userHeartbeatBar == 'bottom'" class="row">
-                <div class="col-12 bottom-style">
-                    <HeartbeatBar size="small" :monitor-id="monitor.id" />
+            <router-link :to="monitorURL(monitor.id)" class="item" :class="{ 'disabled': ! monitor.active }">
+                <div class="row">
+                    <div class="col-9 col-md-8 small-padding" :class="{ 'monitor-item': $root.userHeartbeatBar == 'bottom' || $root.userHeartbeatBar == 'none' }">
+                        <div class="info">
+                            <Uptime :monitor="monitor" type="24" :pill="true" />
+                            <span v-if="hasChildren" class="collapse-padding" @click.prevent="changeCollapsed">
+                                <font-awesome-icon icon="chevron-down" class="animated" :class="{ collapsed: isCollapsed}" />
+                            </span>
+                            {{ monitorName }}
+                        </div>
+                        <div v-if="monitor.tags.length > 0" class="tags">
+                            <Tag v-for="tag in monitor.tags" :key="tag" :item="tag" :size="'sm'" />
+                        </div>
+                    </div>
+                    <div v-show="$root.userHeartbeatBar == 'normal'" :key="$root.userHeartbeatBar" class="col-3 col-md-4">
+                        <HeartbeatBar ref="heartbeatBar" size="small" :monitor-id="monitor.id" />
+                    </div>
                 </div>
-            </div>
-        </router-link>
+
+                <div v-if="$root.userHeartbeatBar == 'bottom'" class="row">
+                    <div class="col-12 bottom-style">
+                        <HeartbeatBar ref="heartbeatBar" size="small" :monitor-id="monitor.id" />
+                    </div>
+                </div>
+            </router-link>
+        </div>
 
         <transition name="slide-fade-up">
             <div v-if="!isCollapsed" class="childs">
-                <MonitorListItem v-for="(item, index) in sortedChildMonitorList" :key="index" :monitor="item" :isSearch="isSearch" :depth="depth + 1" />
+                <MonitorListItem
+                    v-for="(item, index) in sortedChildMonitorList"
+                    :key="index" :monitor="item"
+                    :isSearch="isSearch"
+                    :isSelectMode="isSelectMode"
+                    :isSelected="isSelected"
+                    :select="select"
+                    :deselect="deselect"
+                    :depth="depth + 1"
+                />
             </div>
         </transition>
     </div>
@@ -58,11 +80,31 @@ export default {
             type: Boolean,
             default: false,
         },
+        /** If the user is in select mode */
+        isSelectMode: {
+            type: Boolean,
+            default: false,
+        },
         /** How many ancestors are above this monitor */
         depth: {
             type: Number,
             default: 0,
         },
+        /** Callback to determine if monitor is selected */
+        isSelected: {
+            type: Function,
+            default: () => {}
+        },
+        /** Callback fired when monitor is selected */
+        select: {
+            type: Function,
+            default: () => {}
+        },
+        /** Callback fired when monitor is deselected */
+        deselect: {
+            type: Function,
+            default: () => {}
+        },
     },
     data() {
         return {
@@ -118,6 +160,12 @@ export default {
             }
         }
     },
+    watch: {
+        isSelectMode() {
+            // TODO: Resize the heartbeat bar, but too slow
+            // this.$refs.heartbeatBar.resize();
+        }
+    },
     beforeMount() {
 
         // Always unfold if monitor is accessed directly
@@ -164,6 +212,16 @@ export default {
         monitorURL(id) {
             return getMonitorRelativeURL(id);
         },
+        /**
+         * Toggle selection of monitor
+         */
+        toggleSelection() {
+            if (this.isSelected(this.monitor.id)) {
+                this.deselect(this.monitor.id);
+            } else {
+                this.select(this.monitor.id);
+            }
+        },
     },
 };
 </script>
@@ -201,4 +259,14 @@ export default {
     transition: all 0.2s $easing-in;
 }
 
+.select-input-wrapper {
+    float: left;
+    margin-top: 15px;
+    margin-left: 3px;
+    margin-right: 10px;
+    padding-left: 4px;
+    position: relative;
+    z-index: 15;
+}
+
 </style>

src/components/NotificationDialog.vue

@@ -126,6 +126,7 @@ export default {
                 "lunasea": "LunaSea",
                 "matrix": "Matrix",
                 "mattermost": "Mattermost",
+                "nostr": "Nostr",
                 "ntfy": "Ntfy",
                 "octopush": "Octopush",
                 "OneBot": "OneBot",

src/components/notifications/Gorush.vue

@@ -17,7 +17,7 @@
         <label for="gorush-platform" class="form-label">{{ $t("Platform") }}</label><span style="color: red;"><sup>*</sup></span>
         <select id="gorush-platform" v-model="$parent.notification.gorushPlatform" class="form-select">
             <option value="ios">iOS</option>
-            <option value="android">{{ $t("Android") }}</option>
+            <option value="android">Android</option>
             <option value="huawei">{{ $t("Huawei") }}</option>
         </select>
     </div>

src/components/notifications/Mattermost.vue

@@ -13,7 +13,7 @@
         <div class="form-text">
             <span style="color: red;"><sup>*</sup></span>{{ $t("Required") }}
             <i18n-t tag="p" keypath="aboutWebhooks" style="margin-top: 8px;">
-                <a href="https://docs.mattermost.com/developer/webhooks-incoming.html" target="_blank">https://docs.mattermost.com/developer/webhooks-incoming.html</a>
+                <a href="https://developers.mattermost.com/integrate/webhooks/incoming/" target="_blank">https://developers.mattermost.com/integrate/webhooks/incoming/</a>
             </i18n-t>
             <p style="margin-top: 8px;">
                 {{ $t("aboutMattermostChannelName") }}

src/components/notifications/Nostr.vue

@@ -0,0 +1,26 @@
+<template>
+    <div class="mb-3">
+        <label for="nostr-relays" class="form-label">{{ $t("nostrRelays") }}<span style="color: red;"><sup>*</sup></span></label>
+        <textarea id="nostr-relays" v-model="$parent.notification.relays" class="form-control" :required="true" placeholder="wss://127.0.0.1:7777/"></textarea>
+        <small class="form-text text-muted">{{ $t("nostrRelaysHelp") }}</small>
+    </div>
+    <div class="mb-3">
+        <label for="nostr-sender" class="form-label">{{ $t("nostrSender") }}<span style="color: red;"><sup>*</sup></span></label>
+        <HiddenInput id="nostr-sender" v-model="$parent.notification.sender" autocomplete="new-password" :required="true"></HiddenInput>
+    </div>
+    <div class="mb-3">
+        <label for="nostr-recipients" class="form-label">{{ $t("nostrRecipients") }}<span style="color: red;"><sup>*</sup></span></label>
+        <textarea id="nostr-recipients" v-model="$parent.notification.recipients" class="form-control" :required="true" placeholder="npub123...&#10;npub789..."></textarea>
+        <small class="form-text text-muted">{{ $t("nostrRecipientsHelp") }}</small>
+    </div>
+</template>
+
+<script>
+import HiddenInput from "../HiddenInput.vue";
+
+export default {
+    components: {
+        HiddenInput,
+    },
+};
+</script>

src/components/notifications/Ntfy.vue

@@ -7,8 +7,9 @@
     </div>
     <div class="mb-3">
         <label for="ntfy-server-url" class="form-label">{{ $t("Server URL") }}</label>
-        <div class="input-group mb-3">
-            <input id="ntfy-server-url" v-model="$parent.notification.ntfyserverurl" type="text" class="form-control" required>
+        <input id="ntfy-server-url" v-model="$parent.notification.ntfyserverurl" type="text" class="form-control" required>
+        <div class="form-text">
+            {{ $t("Server URL should not contain the nfty topic") }}
         </div>
     </div>
     <div class="mb-3">

src/components/notifications/index.js

@@ -19,6 +19,7 @@ import LineNotify from "./LineNotify.vue";
 import LunaSea from "./LunaSea.vue";
 import Matrix from "./Matrix.vue";
 import Mattermost from "./Mattermost.vue";
+import Nostr from "./Nostr.vue";
 import Ntfy from "./Ntfy.vue";
 import Octopush from "./Octopush.vue";
 import OneBot from "./OneBot.vue";
@@ -77,6 +78,7 @@ const NotificationFormList = {
     "lunasea": LunaSea,
     "matrix": Matrix,
     "mattermost": Mattermost,
+    "nostr": Nostr,
     "ntfy": Ntfy,
     "octopush": Octopush,
     "OneBot": OneBot,