Merge branch 'master' into import-export

src/pages/Details.vue

@@ -133,6 +133,23 @@
             </div>
 
             <div class="shadow-box table-shadow-box">
+                <div class="dropdown dropdown-clear-data">
+                    <button class="btn btn-sm btn-outline-danger dropdown-toggle" type="button" data-bs-toggle="dropdown">
+                        <font-awesome-icon icon="trash" /> {{ $t("Clear Data") }}
+                    </button>
+                    <ul class="dropdown-menu dropdown-menu-end">
+                        <li>
+                            <button type="button" class="dropdown-item" @click="clearEventsDialog">
+                                {{ $t("Events") }}
+                            </button>
+                        </li>
+                        <li>
+                            <button type="button" class="dropdown-item" @click="clearHeartbeatsDialog">
+                                {{ $t("Heartbeats") }}
+                            </button>
+                        </li>
+                    </ul>
+                </div>
                 <table class="table table-borderless table-hover">
                     <thead>
                         <tr>
@@ -172,6 +189,14 @@
             <Confirm ref="confirmDelete" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="deleteMonitor">
                 {{ $t("deleteMonitorMsg") }}
             </Confirm>
+
+            <Confirm ref="confirmClearEvents" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="clearEvents">
+                {{ $t("clearEventsMsg") }}
+            </Confirm>
+
+            <Confirm ref="confirmClearHeartbeats" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="clearHeartbeats">
+                {{ $t("clearHeartbeatsMsg") }}
+            </Confirm>
         </div>
     </transition>
 </template>
@@ -251,6 +276,7 @@ export default {
 
         importantHeartBeatList() {
             if (this.$root.importantHeartbeatList[this.monitor.id]) {
+                // eslint-disable-next-line vue/no-side-effects-in-computed-properties
                 this.heartBeatList = this.$root.importantHeartbeatList[this.monitor.id];
                 return this.$root.importantHeartbeatList[this.monitor.id]
             }
@@ -313,6 +339,14 @@ export default {
             this.$refs.confirmDelete.show();
         },
 
+        clearEventsDialog() {
+            this.$refs.confirmClearEvents.show();
+        },
+
+        clearHeartbeatsDialog() {
+            this.$refs.confirmClearHeartbeats.show();
+        },
+
         deleteMonitor() {
             this.$root.deleteMonitor(this.monitor.id, (res) => {
                 if (res.ok) {
@@ -324,6 +358,21 @@ export default {
             })
         },
 
+        clearEvents() {
+            this.$root.clearEvents(this.monitor.id, (res) => {
+                if (! res.ok) {
+                    toast.error(res.msg);
+                }
+            })
+        },
+
+        clearHeartbeats() {
+            this.$root.clearHeartbeats(this.monitor.id, (res) => {
+                if (! res.ok) {
+                    toast.error(res.msg);
+                }
+            })
+        },
     },
 }
 </script>
@@ -340,16 +389,20 @@ export default {
 @media (max-width: 550px) {
     .functions {
         text-align: center;
-    }
 
-    button, a {
-        margin-left: 10px !important;
-        margin-right: 10px !important;
+        button, a {
+            margin-left: 10px !important;
+            margin-right: 10px !important;
+        }
     }
 
     .ping-chart-wrapper {
         padding: 10px !important;
     }
+
+    .dropdown-clear-data {
+        margin-bottom: 10px;
+    }
 }
 
 @media (max-width: 400px) {
@@ -364,6 +417,13 @@ export default {
         padding-left: 25px;
         padding-right: 25px;
     }
+
+    .dropdown-clear-data {
+        button {
+            display: block;
+            padding-top: 4px;
+        }
+    }
 }
 
 .url {
@@ -417,10 +477,30 @@ table {
     color: black;
 }
 
+.dropdown-clear-data {
+    float: right;
+}
+
 .dark {
     .keyword {
         color: $dark-font-color;
     }
+
+    .dropdown-clear-data {
+        ul {
+            background-color: $dark-bg;
+            border-color: $dark-bg2;
+            border-width: 2px;
+
+            li button {
+                color: $dark-font-color;
+            }
+
+            li button:hover {
+                background-color: $dark-bg2;
+            }
+        }
+    }
 }
 
 </style>

src/pages/Settings.vue

@@ -134,6 +134,7 @@
                                 <button v-if="settings.disableAuth" class="btn btn-outline-primary me-1" @click="enableAuth">{{ $t("Enable Auth") }}</button>
                                 <button v-if="! settings.disableAuth" class="btn btn-primary me-1" @click="confirmDisableAuth">{{ $t("Disable Auth") }}</button>
                                 <button v-if="! settings.disableAuth" class="btn btn-danger me-1" @click="$root.logout">{{ $t("Logout") }}</button>
+                                <button class="btn btn-outline-danger me-1" @click="confirmClearStatistics">{{ $t("Clear all Statistics") }}</button>
                             </div>
                         </template>
                     </div>
@@ -221,6 +222,15 @@
                     <p>이 기능은 <strong>Cloudflare Access와 같은 서드파티 인증</strong>을 Uptime Kuma 앞에 둔 사용자를 위한 기능이에요.</p>
                     <p>신중하게 사용하세요.</p>
                 </template>
+                <template v-if="$i18n.locale === 'pl' ">
+                    <p>Czy na pewno chcesz <strong>wyłączyć autoryzację</strong>?</p>
+                    <p>Jest przeznaczony dla <strong>kogoś, kto ma autoryzację zewnętrzną</strong> przed Uptime Kuma, taką jak Cloudflare Access.</p>
+                    <p>Proszę używać ostrożnie.</p>
+                </template>
+            </Confirm>
+
+            <Confirm ref="confirmClearStatistics" btn-style="btn-danger" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="clearStatistics">
+                {{ $t("confirmClearStatisticsMsg") }}
             </Confirm>
         </div>
     </transition>
@@ -320,6 +330,10 @@ export default {
             this.$refs.confirmDisableAuth.show();
         },
 
+        confirmClearStatistics() {
+            this.$refs.confirmClearStatistics.show();
+        },
+
         disableAuth() {
             this.settings.disableAuth = true;
             this.saveSettings();
@@ -366,6 +380,16 @@ export default {
                 })
             }
         },
+
+        clearStatistics() {
+            this.$root.clearStatistics((res) => {
+                if (res.ok) {
+                    this.$router.go();
+                } else {
+                    toast.error(res.msg);
+                }
+            })
+        },
     },
 }
 </script>

src/pages/Setup.vue

@@ -14,6 +14,15 @@
                 </p>
 
                 <div class="form-floating">
+                    <select id="language" v-model="$i18n.locale" class="form-select">
+                        <option v-for="(lang, i) in $i18n.availableLocales" :key="`Lang${i}`" :value="lang">
+                            {{ $i18n.messages[lang].languageName }}
+                        </option>
+                    </select>
+                    <label for="language" class="form-label">{{ $t("Language") }}</label>
+                </div>
+
+                <div class="form-floating mt-3">
                     <input id="floatingInput" v-model="username" type="text" class="form-control" placeholder="Username" required>
                     <label for="floatingInput">{{ $t("Username") }}</label>
                 </div>
@@ -29,7 +38,7 @@
                 </div>
 
                 <button class="w-100 btn btn-primary mt-3" type="submit" :disabled="processing">
-                    Create
+                    {{ $t("Create") }}
                 </button>
             </form>
         </div>
@@ -49,6 +58,11 @@ export default {
             repeatPassword: "",
         }
     },
+    watch: {
+        "$i18n.locale"() {
+            localStorage.locale = this.$i18n.locale;
+        },
+    },
     mounted() {
         this.$root.getSocket().emit("needSetup", (needSetup) => {
             if (! needSetup) {