uptime-kuma/src/pages/AddStatusPage.vue

89 lines
2.9 KiB
Vue
Raw Normal View History

2022-03-15 04:00:29 +00:00
<template>
<transition name="slide-fade" appear>
<div>
<h1 class="mb-3">
{{ $t("Add New Status Page") }}
</h1>
2022-03-17 15:38:43 +00:00
<form @submit.prevent="submit">
<div class="shadow-box">
<div class="mb-3">
<label for="name" class="form-label">{{ $t("Name") }}</label>
<input id="name" v-model="title" type="text" class="form-control" required>
</div>
2022-03-15 04:00:29 +00:00
2022-03-17 15:38:43 +00:00
<div class="mb-4">
<label for="slug" class="form-label">{{ $t("Slug") }}</label>
<div class="input-group">
<span id="basic-addon3" class="input-group-text">/status/</span>
<input id="slug" v-model="slug" type="text" class="form-control" required>
</div>
<div class="form-text">
<ul>
<li>{{ $t("Accept characters:") }} <mark>a-z</mark> <mark>0-9</mark> <mark>-</mark></li>
<i18n-t tag="li" keypath="startOrEndWithOnly">
<mark>a-z</mark> <mark>0-9</mark>
</i18n-t>
2022-03-17 15:38:43 +00:00
<li>{{ $t("No consecutive dashes") }} <mark>--</mark></li>
<i18n-t tag="li" keypath="statusPageSpecialSlugDesc">
<mark class="me-1">default</mark>
</i18n-t>
2022-03-17 15:38:43 +00:00
</ul>
</div>
2022-03-17 14:44:47 +00:00
</div>
2022-03-17 15:38:43 +00:00
<div class="mt-2 mb-1">
<button id="monitor-submit-btn" class="btn btn-primary w-100" type="submit" :disabled="processing">{{ $t("Next") }}</button>
</div>
2022-03-15 04:00:29 +00:00
</div>
2022-03-17 15:38:43 +00:00
</form>
2022-03-15 04:00:29 +00:00
</div>
</transition>
</template>
<script>
export default {
components: {
},
data() {
return {
2022-03-17 15:38:43 +00:00
title: "",
slug: "",
2022-03-17 14:44:47 +00:00
processing: false,
2022-03-15 04:00:29 +00:00
};
2022-03-17 15:38:43 +00:00
},
methods: {
/**
* Submit form data to add new status page
* @returns {Promise<void>}
*/
2022-03-17 15:38:43 +00:00
async submit() {
this.processing = true;
this.$root.getSocket().emit("addStatusPage", this.title, this.slug, (res) => {
this.processing = false;
if (res.ok) {
location.href = "/status/" + this.slug + "?edit";
2022-03-17 15:38:43 +00:00
} else {
if (res.msg.includes("UNIQUE constraint")) {
2023-10-14 11:00:27 +00:00
this.$root.toastError("The slug is already taken. Please choose another slug.");
2022-03-17 15:38:43 +00:00
} else {
this.$root.toastRes(res);
}
}
});
}
2022-03-15 04:00:29 +00:00
}
};
</script>
2022-03-17 14:44:47 +00:00
<style lang="scss" scoped>
.shadow-box {
padding: 20px;
}
</style>