-
-
Notifications
You must be signed in to change notification settings - Fork 5.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
1ccbbda
commit 53d90c1
Showing
9 changed files
with
1,007 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,149 @@ | ||
| <template> | ||
| <div> | ||
| <div class="my-4"> | ||
| <label for="language" class="form-label"> | ||
| {{ $t("Language") }} | ||
| </label> | ||
| <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> | ||
| </div> | ||
| <div class="my-4"> | ||
| <label for="timezone" class="form-label">{{ $t("Theme") }}</label> | ||
| <div> | ||
| <div | ||
| class="btn-group" | ||
| role="group" | ||
| aria-label="Basic checkbox toggle button group" | ||
| > | ||
| <input | ||
| id="btncheck1" | ||
| v-model="$root.userTheme" | ||
| type="radio" | ||
| class="btn-check" | ||
| name="theme" | ||
| autocomplete="off" | ||
| value="light" | ||
| /> | ||
| <label class="btn btn-outline-primary" for="btncheck1"> | ||
| {{ $t("Light") }} | ||
| </label> | ||
|
|
||
| <input | ||
| id="btncheck2" | ||
| v-model="$root.userTheme" | ||
| type="radio" | ||
| class="btn-check" | ||
| name="theme" | ||
| autocomplete="off" | ||
| value="dark" | ||
| /> | ||
| <label class="btn btn-outline-primary" for="btncheck2"> | ||
| {{ $t("Dark") }} | ||
| </label> | ||
|
|
||
| <input | ||
| id="btncheck3" | ||
| v-model="$root.userTheme" | ||
| type="radio" | ||
| class="btn-check" | ||
| name="theme" | ||
| autocomplete="off" | ||
| value="auto" | ||
| /> | ||
| <label class="btn btn-outline-primary" for="btncheck3"> | ||
| {{ $t("Auto") }} | ||
| </label> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="my-4"> | ||
| <label class="form-label">{{ $t("Theme - Heartbeat Bar") }}</label> | ||
| <div> | ||
| <div | ||
| class="btn-group" | ||
| role="group" | ||
| aria-label="Basic checkbox toggle button group" | ||
| > | ||
| <input | ||
| id="btncheck4" | ||
| v-model="$root.userHeartbeatBar" | ||
| type="radio" | ||
| class="btn-check" | ||
| name="heartbeatBarTheme" | ||
| autocomplete="off" | ||
| value="normal" | ||
| /> | ||
| <label class="btn btn-outline-primary" for="btncheck4"> | ||
| {{ $t("Normal") }} | ||
| </label> | ||
|
|
||
| <input | ||
| id="btncheck5" | ||
| v-model="$root.userHeartbeatBar" | ||
| type="radio" | ||
| class="btn-check" | ||
| name="heartbeatBarTheme" | ||
| autocomplete="off" | ||
| value="bottom" | ||
| /> | ||
| <label class="btn btn-outline-primary" for="btncheck5"> | ||
| {{ $t("Bottom") }} | ||
| </label> | ||
|
|
||
| <input | ||
| id="btncheck6" | ||
| v-model="$root.userHeartbeatBar" | ||
| type="radio" | ||
| class="btn-check" | ||
| name="heartbeatBarTheme" | ||
| autocomplete="off" | ||
| value="none" | ||
| /> | ||
| <label class="btn btn-outline-primary" for="btncheck6"> | ||
| {{ $t("None") }} | ||
| </label> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import { setPageLocale } from "../../util-frontend"; | ||
| export default { | ||
| watch: { | ||
| "$i18n.locale"() { | ||
| localStorage.locale = this.$i18n.locale; | ||
| setPageLocale(); | ||
| }, | ||
| }, | ||
| }; | ||
| </script> | ||
|
|
||
| <style lang="scss" scoped> | ||
| @import "../../assets/vars.scss"; | ||
| .btn-check:active + .btn-outline-primary, | ||
| .btn-check:checked + .btn-outline-primary, | ||
| .btn-check:hover + .btn-outline-primary { | ||
| color: #fff; | ||
| .dark & { | ||
| color: #000; | ||
| } | ||
| } | ||
| .dark { | ||
| .list-group-item { | ||
| background-color: $dark-bg2; | ||
| color: $dark-font-color; | ||
| } | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,213 @@ | ||
| <template> | ||
| <div> | ||
| <div class="my-4"> | ||
| <h4 class="mt-4 mb-2">{{ $t("Export Backup") }}</h4> | ||
|
|
||
| <p> | ||
| {{ $t("backupDescription") }} <br /> | ||
| ({{ $t("backupDescription2") }}) <br /> | ||
| </p> | ||
|
|
||
| <div class="mb-2"> | ||
| <button class="btn btn-primary" @click="downloadBackup"> | ||
| {{ $t("Export") }} | ||
| </button> | ||
| </div> | ||
|
|
||
| <p> | ||
| <strong>{{ $t("backupDescription3") }}</strong> | ||
| </p> | ||
| </div> | ||
|
|
||
| <div class="my-4"> | ||
| <h4 class="mt-4 mb-2">{{ $t("Import Backup") }}</h4> | ||
|
|
||
| <label class="form-label">{{ $t("Options") }}:</label> | ||
| <br /> | ||
| <div class="form-check form-check-inline"> | ||
| <input | ||
| id="radioKeep" | ||
| v-model="importHandle" | ||
| class="form-check-input" | ||
| type="radio" | ||
| name="radioImportHandle" | ||
| value="keep" | ||
| /> | ||
| <label class="form-check-label" for="radioKeep"> | ||
| {{ $t("Keep both") }} | ||
| </label> | ||
| </div> | ||
| <div class="form-check form-check-inline"> | ||
| <input | ||
| id="radioSkip" | ||
| v-model="importHandle" | ||
| class="form-check-input" | ||
| type="radio" | ||
| name="radioImportHandle" | ||
| value="skip" | ||
| /> | ||
| <label class="form-check-label" for="radioSkip"> | ||
| {{ $t("Skip existing") }} | ||
| </label> | ||
| </div> | ||
| <div class="form-check form-check-inline"> | ||
| <input | ||
| id="radioOverwrite" | ||
| v-model="importHandle" | ||
| class="form-check-input" | ||
| type="radio" | ||
| name="radioImportHandle" | ||
| value="overwrite" | ||
| /> | ||
| <label class="form-check-label" for="radioOverwrite"> | ||
| {{ $t("Overwrite") }} | ||
| </label> | ||
| </div> | ||
| <div class="form-text mb-2"> | ||
| {{ $t("importHandleDescription") }} | ||
| </div> | ||
|
|
||
| <div class="mb-2"> | ||
| <input | ||
| id="importBackup" | ||
| type="file" | ||
| class="form-control" | ||
| accept="application/json" | ||
| /> | ||
| </div> | ||
|
|
||
| <div class="input-group mb-2 justify-content-end"> | ||
| <button | ||
| type="button" | ||
| class="btn btn-outline-primary" | ||
| :disabled="processing" | ||
| @click="confirmImport" | ||
| > | ||
| <div | ||
| v-if="processing" | ||
| class="spinner-border spinner-border-sm me-1" | ||
| ></div> | ||
| {{ $t("Import") }} | ||
| </button> | ||
| </div> | ||
|
|
||
| <div | ||
| v-if="importAlert" | ||
| class="alert alert-danger mt-3" | ||
| style="padding: 6px 16px" | ||
| > | ||
| {{ importAlert }} | ||
| </div> | ||
| </div> | ||
|
|
||
| <Confirm | ||
| ref="confirmImport" | ||
| btn-style="btn-danger" | ||
| :yes-text="$t('Yes')" | ||
| :no-text="$t('No')" | ||
| @yes="importBackup" | ||
| > | ||
| {{ $t("confirmImportMsg") }} | ||
| </Confirm> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import Confirm from "../../components/Confirm.vue"; | ||
| import dayjs from "dayjs"; | ||
| import { useToast } from "vue-toastification"; | ||
| const toast = useToast(); | ||
| export default { | ||
| components: { | ||
| Confirm, | ||
| }, | ||
| data() { | ||
| return { | ||
| processing: false, | ||
| importHandle: "skip", | ||
| importAlert: null, | ||
| }; | ||
| }, | ||
| methods: { | ||
| confirmImport() { | ||
| this.$refs.confirmImport.show(); | ||
| }, | ||
| downloadBackup() { | ||
| let time = dayjs().format("YYYY_MM_DD-hh_mm_ss"); | ||
| let fileName = `Uptime_Kuma_Backup_${time}.json`; | ||
| let monitorList = Object.values(this.$root.monitorList); | ||
| let exportData = { | ||
| version: this.$root.info.version, | ||
| notificationList: this.$root.notificationList, | ||
| monitorList: monitorList, | ||
| }; | ||
| exportData = JSON.stringify(exportData, null, 4); | ||
| let downloadItem = document.createElement("a"); | ||
| downloadItem.setAttribute( | ||
| "href", | ||
| "data:application/json;charset=utf-8," + | ||
| encodeURIComponent(exportData) | ||
| ); | ||
| downloadItem.setAttribute("download", fileName); | ||
| downloadItem.click(); | ||
| }, | ||
| importBackup() { | ||
| this.processing = true; | ||
| let uploadItem = document.getElementById("importBackup").files; | ||
| if (uploadItem.length <= 0) { | ||
| this.processing = false; | ||
| return (this.importAlert = this.$t("alertNoFile")); | ||
| } | ||
| if (uploadItem.item(0).type !== "application/json") { | ||
| this.processing = false; | ||
| return (this.importAlert = this.$t("alertWrongFileType")); | ||
| } | ||
| let fileReader = new FileReader(); | ||
| fileReader.readAsText(uploadItem.item(0)); | ||
| fileReader.onload = (item) => { | ||
| this.$root.uploadBackup( | ||
| item.target.result, | ||
| this.importHandle, | ||
| (res) => { | ||
| this.processing = false; | ||
| if (res.ok) { | ||
| toast.success(res.msg); | ||
| } else { | ||
| toast.error(res.msg); | ||
| } | ||
| } | ||
| ); | ||
| }; | ||
| }, | ||
| }, | ||
| }; | ||
| </script> | ||
|
|
||
| <style lang="scss" scoped> | ||
| @import "../../assets/vars.scss"; | ||
| .dark { | ||
| #importBackup { | ||
| &::file-selector-button { | ||
| color: $primary; | ||
| background-color: $dark-bg; | ||
| } | ||
| &:hover:not(:disabled):not([readonly])::file-selector-button { | ||
| color: $dark-font-color2; | ||
| background-color: $primary; | ||
| } | ||
| } | ||
| } | ||
| </style> |
Oops, something went wrong.