7x31/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2025-08-21 06:08:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

Feat: Toast notification timeout settings (#3441)

Browse Source 
* Add toast timeout to the settings

Changing gui, adding timeout with a fix value

memo

rc

rollback readme

cleanup code

cleanup code

Review fixes

review fix 2

* Feat: Add clearAll button below toastContainer

* Feat: Load & Apply defaults, improve wording

Chore: Remove unused

* Feat: Change setting to affect monitor notif. only

* Apply suggestions from code review

Co-authored-by: Matthew Nickson <mnickson@sidingsmedia.com>

* Chore: Fix JSDoc

---------

Co-authored-by: Berczi Sandor <sandor.berczi@urss.hu>
Co-authored-by: Matthew Nickson <mnickson@sidingsmedia.com>
This commit is contained in:
Nelson Chan
2023-09-06 19:52:54 +08:00
committed by GitHub
parent 62f4434711
commit bfc7b498be
7 changed files with 218 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/components/settings/Notifications.vue
View File

@@ -20,6 +20,39 @@
</button>
</div>
<div class="my-4 pt-4">
<h5 class="my-4 settings-subheading">{{ $t("monitorToastMessagesLabel") }}</h5>
<p>{{ $t("monitorToastMessagesDescription") }}</p>
<div class="my-4">
<label for="toastErrorTimeoutSecs" class="form-label">
{{ $t("toastErrorTimeout") }}
</label>
<input
id="toastErrorTimeoutSecs"
v-model="toastErrorTimeoutSecs"
type="number"
class="form-control"
min="-1"
step="1"
/>
</div>
<div class="my-4">
<label for="toastSuccessTimeoutSecs" class="form-label">
{{ $t("toastSuccessTimeout") }}
</label>
<input
id="toastSuccessTimeoutSecs"
v-model="toastSuccessTimeoutSecs"
type="number"
class="form-control"
min="-1"
step="1"
/>
</div>
</div>
<div class="my-4 pt-4">
<h5 class="my-4 settings-subheading">{{ $t("settingsCertificateExpiry") }}</h5>
<p>{{ $t("certificationExpiryDescription") }}</p>
@@ -58,6 +91,8 @@ export default {
data() {
return {
toastSuccessTimeoutSecs: 20,
toastErrorTimeoutSecs: -1,
/**
* Variable to store the input for new certificate expiry day.
*/
@@ -77,6 +112,26 @@ export default {
},
},
watch: {
// Parse, store and apply new timeout settings.
toastSuccessTimeoutSecs(newTimeout) {
const parsedTimeout = parseInt(newTimeout);
if (parsedTimeout != null && !Number.isNaN(parsedTimeout)) {
localStorage.toastSuccessTimeout = newTimeout > 0 ? newTimeout * 1000 : newTimeout;
}
},
toastErrorTimeoutSecs(newTimeout) {
const parsedTimeout = parseInt(newTimeout);
if (parsedTimeout != null && !Number.isNaN(parsedTimeout)) {
localStorage.toastErrorTimeout = newTimeout > 0 ? newTimeout * 1000 : newTimeout;
}
}
},
mounted() {
this.loadToastTimeoutSettings();
},
methods: {
/**
* Remove a day from expiry notification days.
@@ -108,6 +163,27 @@ export default {
}
}
},
/**
* Loads toast timeout settings from storage to component data.
*/
loadToastTimeoutSettings() {
const successTimeout = localStorage.toastSuccessTimeout;
if (successTimeout !== undefined) {
const parsedTimeout = parseInt(successTimeout);
if (parsedTimeout != null && !Number.isNaN(parsedTimeout)) {
this.toastSuccessTimeoutSecs = parsedTimeout > 0 ? parsedTimeout / 1000 : parsedTimeout;
}
}
const errorTimeout = localStorage.toastErrorTimeout;
if (errorTimeout !== undefined) {
const parsedTimeout = parseInt(errorTimeout);
if (parsedTimeout != null && !Number.isNaN(parsedTimeout)) {
this.toastErrorTimeoutSecs = parsedTimeout > 0 ? parsedTimeout / 1000 : parsedTimeout;
}
}
},
},
};
</script>