mudhorn/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2024-12-26 22:19:43 -08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

WIP

Browse source
This commit is contained in:
Louis Lam 2023-03-31 20:58:45 +08:00
parent 227cec86a8
commit a6acd065bb
5 changed files with 58 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/assets/app.scss
View file

@ -556,6 +556,31 @@ h5.settings-subheading::after {
border-bottom: 1px solid $dark-border-color;
}
$shadow-box-padding: 20px;
.shadow-box-with-fixed-bottom-bar {
padding-top: $shadow-box-padding;
padding-bottom: 0;
padding-right: $shadow-box-padding;
padding-left: $shadow-box-padding;
}
.fixed-bottom-bar {
position: sticky;
bottom: 0;
margin-left: -$shadow-box-padding;
margin-right: -$shadow-box-padding;
z-index: 100;
background-color: rgba(white, 0.2);
backdrop-filter: blur(2px);
border-radius: 0 0 10px 10px;
.dark & {
background-color: rgba($dark-header-bg, 0.9);
}
}
// Localization
@import "localization.scss";

2
src/components/MaintenanceTime.vue
View file

@ -10,7 +10,7 @@
{{ endDateTime }}
</div>
<div class="timeslot">
UTC{{ maintenance.timezoneOffset }} {{ maintenance.timezone }}
UTC{{ maintenance.timezoneOffset }} <span v-if="maintenance.timezone !== 'UTC'">{{ maintenance.timezone }}</span>
</div>
</div>
</div>

2
src/lang/en.json
View file

@ -398,6 +398,8 @@
"startDateTime": "Start Date/Time",
"endDateTime": "End Date/Time",
"cronExpression": "Cron Expression",
"cronSchedule": "Schedule: ",
"invalidCronExpression": "Invalid Cron Expression: {0}",
"recurringInterval": "Interval",
"Recurring": "Recurring",
"strategyManual": "Active/Inactive Manually",

48
src/pages/EditMaintenance.vue
View file

@ -3,7 +3,7 @@
<div>
<h1 class="mb-3">{{ pageName }}</h1>
<form @submit.prevent="submit">
<div class="shadow-box">
<div class="shadow-box shadow-box-with-fixed-bottom-bar">
<div class="row">
<div class="col-xl-10">
<!-- Title -->
@ -108,7 +108,7 @@
<label for="cron" class="form-label">
{{ $t("cronExpression") }}
</label>
<p>Run: {{ cronDescription }}</p>
<p>{{ $t("cronSchedule") }}{{ cronDescription }}</p>
<input id="cron" v-model="maintenance.cron" type="text" class="form-control" required>
</div>
@ -233,17 +233,12 @@
</div>
</div>
</template>
<div class="mt-4 mb-1">
<button
id="monitor-submit-btn" class="btn btn-primary" type="submit"
:disabled="processing"
>
{{ $t("Save") }}
</button>
</div>
</div>
</div>
<div class="fixed-bottom-bar p-3">
<button id="monitor-submit-btn" class="btn btn-primary" type="submit" :disabled="processing">{{ $t("Save") }}</button>
</div>
</div>
</form>
</div>
@ -256,7 +251,7 @@ import VueMultiselect from "vue-multiselect";
import dayjs from "dayjs";
import Datepicker from "@vuepic/vue-datepicker";
import { timezoneList } from "../util-frontend";
import cronstrue from "cronstrue";
import cronstrue from "cronstrue/i18n";
const toast = useToast();
@ -330,9 +325,28 @@ export default {
if (! this.maintenance.cron) {
return "";
}
return cronstrue.toString(this.maintenance.cron, {
locale: "zh-TW",
});
let locale = "";
if (this.$root.language) {
locale = this.$root.language.replace("-", "_");
}
// Special handling
// If locale is also not working in your language, you can map it here
// https://github.com/bradymholt/cRonstrue/tree/master/src/i18n/locales
if (locale === "zh_HK") {
locale = "zh_TW";
}
try {
return cronstrue.toString(this.maintenance.cron, {
locale,
});
} catch (e) {
return this.$t("invalidCronExpression", e.message);
}
},
selectedStatusPagesOptions() {
@ -528,10 +542,6 @@ export default {
</script>
<style lang="scss" scoped>
.shadow-box {
padding: 20px;
}
textarea {
min-height: 150px;
}

26
src/pages/EditMonitor.vue
View file

@ -3,7 +3,7 @@
<div>
<h1 class="mb-3">{{ pageName }}</h1>
<form @submit.prevent="submit">
<div class="shadow-box">
<div class="shadow-box shadow-box-with-fixed-bottom-bar">
<div class="row">
<div class="col-md-6">
<h2 class="mb-2">{{ $t("General") }}</h2>
@ -1102,31 +1102,7 @@ message HealthCheckResponse {
<style lang="scss" scoped>
@import "../assets/vars.scss";
$padding: 20px;
.shadow-box {
padding-top: $padding;
padding-bottom: 0;
padding-right: $padding;
padding-left: $padding;
}
textarea {
min-height: 200px;
}
.fixed-bottom-bar {
position: sticky;
bottom: 0;
margin-left: -$padding;
margin-right: -$padding;
z-index: 100;
background-color: rgba(white, 0.2);
backdrop-filter: blur(2px);
border-radius: 0 0 10px 10px;
.dark & {
background-color: rgba($dark-header-bg, 0.9);
}
}
</style>