Improved importBackup handling

This commit is contained in:
Ponkhy 2021-09-07 23:14:44 +02:00
parent f4e885982d
commit 69a7c4dab4
3 changed files with 25 additions and 3 deletions

View file

@ -123,4 +123,6 @@ export default {
backupDescription: "Es können alle Monitore und alle Benachrichtigungen in einer JSON-Datei gesichert werden.", backupDescription: "Es können alle Monitore und alle Benachrichtigungen in einer JSON-Datei gesichert werden.",
backupDescription2: "PS: Verlaufs- und Ereignisdaten sind nicht enthalten.", backupDescription2: "PS: Verlaufs- und Ereignisdaten sind nicht enthalten.",
backupDescription3: "Sensible Daten wie Benachrichtigungstoken sind in der Exportdatei enthalten, bitte bewahre sie sorgfältig auf.", backupDescription3: "Sensible Daten wie Benachrichtigungstoken sind in der Exportdatei enthalten, bitte bewahre sie sorgfältig auf.",
alertNoFile: "Bitte wähle eine Datei zum importieren aus.",
alertWrongFileType: "Bitte wähle eine JSON Datei aus.",
} }

View file

@ -123,4 +123,6 @@ export default {
backupDescription: "You can backup all monitors and all notifications into a JSON file.", backupDescription: "You can backup all monitors and all notifications into a JSON file.",
backupDescription2: "PS: History and event data is not included.", backupDescription2: "PS: History and event data is not included.",
backupDescription3: "Sensitive data such as notification tokens is included in the export file, please keep it carefully.", backupDescription3: "Sensitive data such as notification tokens is included in the export file, please keep it carefully.",
alertNoFile: "Please select a file to import.",
alertWrongFileType: "Please select a JSON file.",
} }

View file

@ -129,8 +129,14 @@
<div class="input-group mb-3"> <div class="input-group mb-3">
<button class="btn btn-outline-primary" @click="downloadBackup">{{ $t("Export") }}</button> <button class="btn btn-outline-primary" @click="downloadBackup">{{ $t("Export") }}</button>
<button type="button" class="btn btn-outline-primary" @click="importBackup">{{ $t("Import") }}</button> <button type="button" class="btn btn-outline-primary" :disabled="processing" @click="importBackup">
<input id="importBackup" type="file" class="form-control"> <div v-if="processing" class="spinner-border spinner-border-sm me-1"></div>
{{ $t("Import") }}
</button>
<input id="importBackup" type="file" class="form-control" accept="application/json">
</div>
<div v-if="importAlert" class="alert alert-danger mt-3" style="padding: 6px 16px;">
{{ importAlert }}
</div> </div>
<p><strong>{{ $t("backupDescription3") }}</strong></p> <p><strong>{{ $t("backupDescription3") }}</strong></p>
@ -276,6 +282,8 @@ export default {
}, },
loaded: false, loaded: false,
importAlert: null,
processing: false,
} }
}, },
watch: { watch: {
@ -369,9 +377,17 @@ export default {
}, },
importBackup() { importBackup() {
this.processing = true;
let uploadItem = document.getElementById("importBackup").files; let uploadItem = document.getElementById("importBackup").files;
if (uploadItem.length <= 0) { if (uploadItem.length <= 0) {
return false; 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(); let fileReader = new FileReader();
@ -379,6 +395,8 @@ export default {
fileReader.onload = item => { fileReader.onload = item => {
this.$root.uploadBackup(item.target.result, (res) => { this.$root.uploadBackup(item.target.result, (res) => {
this.processing = false;
if (res.ok) { if (res.ok) {
toast.success(res.msg); toast.success(res.msg);
} else { } else {