mirror of
https://github.com/donaldzou/WGDashboard.git
synced 2024-11-22 07:10:09 +01:00
Re-adjust backup & restore location
This commit is contained in:
Donald Zou
parent
27de7ddbf8
commit
51712ed2a8
@ -56,6 +56,7 @@ watch(data, () => {
|
||||
deep: true
|
||||
})
|
||||
|
||||
const openBackupRestore = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -185,11 +186,6 @@ watch(data, () => {
|
||||
>
|
||||
<i class="bi bi-save-fill"></i></button>
|
||||
</div>
|
||||
<hr>
|
||||
<h6>
|
||||
<LocaleText t="Backup & Restore"></LocaleText>
|
||||
</h6>
|
||||
<ConfigurationBackupRestore></ConfigurationBackupRestore>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,47 +1,74 @@
|
||||
<script setup>
|
||||
import {onMounted, reactive, ref} from "vue";
|
||||
import {onBeforeUnmount, onMounted, reactive, ref} from "vue";
|
||||
import {fetchGet} from "@/utilities/fetch.js";
|
||||
import {useRoute} from "vue-router";
|
||||
import dayjs from "dayjs";
|
||||
import LocaleText from "@/components/text/localeText.vue";
|
||||
|
||||
const route = useRoute()
|
||||
const backups = ref([])
|
||||
const loading = ref(false)
|
||||
const emit = defineEmits(["close"])
|
||||
|
||||
onMounted(() => {
|
||||
loadBackup();
|
||||
})
|
||||
|
||||
const loadBackup = () => {
|
||||
loading.value = true
|
||||
fetchGet("/api/getWireguardConfigurationBackup", {
|
||||
configurationName: route.params.id
|
||||
}, (res) => {
|
||||
backups.value = res.data;
|
||||
loading.value = false;
|
||||
})
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="card rounded-3" style="height: 400px; overflow-y: scroll">
|
||||
<div class="card-body d-flex gap-2 flex-column">
|
||||
<div class="card" v-for="b in backups">
|
||||
<div class="card-body p-2 px-3">
|
||||
<div class="d-flex gap-3 align-items-center">
|
||||
<div class="peerSettingContainer w-100 h-100 position-absolute top-0 start-0 overflow-y-scroll" ref="editConfigurationContainer">
|
||||
<div class="d-flex h-100 w-100">
|
||||
<div class="modal-dialog-centered dashboardModal w-100 h-100 overflow-x-scroll flex-column gap-3 mx-3">
|
||||
<div class="my-5 d-flex gap-3 flex-column position-relative">
|
||||
<div class="title">
|
||||
<div class="d-flex mb-3">
|
||||
<h4 class="mb-0">
|
||||
<LocaleText t="Backup & Restore"></LocaleText>
|
||||
</h4>
|
||||
<button type="button" class="btn-close ms-auto" @click="$emit('close')"></button>
|
||||
</div>
|
||||
<button class="btn bg-primary-subtle text-primary-emphasis border-primary-subtle rounded-3 w-100">
|
||||
<i class="bi bi-plus-circle-fill me-2"></i> Create Backup
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="position-relative d-flex gap-3 flex-column">
|
||||
<div class="text-center" v-if="loading">
|
||||
<div class="spinner-border"></div>
|
||||
</div>
|
||||
<div class="card animate__animated animate__fadeInUp animate__fast my-0 rounded-3"
|
||||
v-else-if="!loading && backups.length === 0">
|
||||
<div class="card-body text-center text-muted">
|
||||
<i class="bi bi-x-circle-fill me-2"></i> No backup yet, click the button above to create backup.
|
||||
</div>
|
||||
</div>
|
||||
<div class="card animate__animated animate__fadeInUp animate__fast my-0 rounded-3"
|
||||
v-for="(b, index) in backups" :style="{'animation-delay': index*0.05 + 's'}">
|
||||
<div class="card-body">
|
||||
<div class="d-flex gap-3">
|
||||
<div class="d-flex flex-column">
|
||||
<small class="text-muted">
|
||||
Filename
|
||||
</small>
|
||||
<small>
|
||||
{{b.filename}}
|
||||
</small>
|
||||
<samp>{{b.filename}}</samp>
|
||||
</div>
|
||||
<div class="d-flex flex-column">
|
||||
<small class="text-muted">
|
||||
Backup Date
|
||||
</small>
|
||||
<small>
|
||||
{{dayjs(b.backupDate, "YYYYMMDDHHmmss").format("YYYY-MM-DD HH:mm:ss")}}
|
||||
</small>
|
||||
</div>
|
||||
<div class="d-flex gap-2 align-items-center ms-auto">
|
||||
<button class="btn bg-info-subtle text-info-emphasis border-info-subtle rounded-3 btn-sm">
|
||||
<i class="bi bi-eye-fill"></i>
|
||||
</button>
|
||||
<button class="btn bg-warning-subtle text-warning-emphasis border-warning-subtle rounded-3 btn-sm">
|
||||
<i class="bi bi-clock-history"></i>
|
||||
</button>
|
||||
@ -50,12 +77,33 @@ onMounted(() => {
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<textarea class="form-control rounded-3" :value="b.content"
|
||||
disabled
|
||||
style="height: 400px; font-family: var(--bs-font-monospace),sans-serif !important;"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.card, .title{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 700px) {
|
||||
.card, .title{
|
||||
width: 700px;
|
||||
}
|
||||
}
|
||||
|
||||
.animate__fadeInUp{
|
||||
animation-timing-function: cubic-bezier(0.42, 0, 0.22, 1.0)
|
||||
}
|
||||
</style>
|
||||
@ -44,6 +44,8 @@ import PeerShareLinkModal from "@/components/configurationComponents/peerShareLi
|
||||
import LocaleText from "@/components/text/localeText.vue";
|
||||
import EditConfiguration from "@/components/configurationComponents/editConfiguration.vue";
|
||||
import SelectPeers from "@/components/configurationComponents/selectPeers.vue";
|
||||
import ConfigurationBackupRestore
|
||||
from "@/components/configurationComponents/editConfigurationComponents/configurationBackupRestore.vue";
|
||||
|
||||
Chart.register(
|
||||
ArcElement,
|
||||
@ -74,6 +76,7 @@ Chart.register(
|
||||
export default {
|
||||
name: "peerList",
|
||||
components: {
|
||||
ConfigurationBackupRestore,
|
||||
SelectPeers,
|
||||
EditConfiguration,
|
||||
LocaleText,
|
||||
@ -145,10 +148,13 @@ export default {
|
||||
selectedPeer: undefined
|
||||
},
|
||||
editConfiguration: {
|
||||
modalOpen: true
|
||||
modalOpen: false
|
||||
},
|
||||
selectPeers: {
|
||||
modalOpen: false
|
||||
},
|
||||
backupRestore: {
|
||||
modalOpen: true
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -598,6 +604,7 @@ export default {
|
||||
@jobLogs="this.peerScheduleJobsLogs.modalOpen = true"
|
||||
@editConfiguration="this.editConfiguration.modalOpen = true"
|
||||
@selectPeers="this.selectPeers.modalOpen = true"
|
||||
@backupRestore="this.backupRestore.modalOpen = true"
|
||||
:configuration="this.configurationInfo"></PeerSearch>
|
||||
<TransitionGroup name="list" tag="div" class="row gx-2 gy-2 z-0">
|
||||
<div class="col-12 col-lg-6 col-xl-4"
|
||||
@ -672,6 +679,11 @@ export default {
|
||||
@close="this.selectPeers.modalOpen = false"
|
||||
></SelectPeers>
|
||||
</Transition>
|
||||
<Transition name="zoom">
|
||||
<ConfigurationBackupRestore
|
||||
@close="backupRestore.modalOpen = false"
|
||||
v-if="backupRestore.modalOpen"></ConfigurationBackupRestore>
|
||||
</Transition>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -188,6 +188,17 @@ export default {
|
||||
<button type="button" class="btn-close ms-auto" @click="this.showMoreSettings = false"></button>
|
||||
</div>
|
||||
<div class="card-body px-4 pb-4 d-flex gap-3 flex-column pt-0">
|
||||
<div>
|
||||
<p class="text-muted fw-bold mb-2"><small>
|
||||
<LocaleText t="Configuration"></LocaleText>
|
||||
</small></p>
|
||||
<div class="list-group">
|
||||
<a class="list-group-item list-group-item-action d-flex" role="button"
|
||||
@click="this.$emit('backupRestore')">
|
||||
<LocaleText t="Backup & Restore"></LocaleText>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-muted fw-bold mb-2"><small>
|
||||
<LocaleText t="Manage Peers"></LocaleText>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user