mirror of
https://github.com/donaldzou/WGDashboard.git
synced 2025-12-16 08:26:17 +00:00
123 lines
3.2 KiB
Vue
123 lines
3.2 KiB
Vue
<script setup>
|
|
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";
|
|
import Backup from "@/components/configurationComponents/backupRestoreComponents/backup.vue";
|
|
|
|
const route = useRoute()
|
|
const backups = ref([])
|
|
const loading = ref(true)
|
|
const emit = defineEmits(["close", "refreshPeersList"])
|
|
|
|
onMounted(() => {
|
|
loadBackup();
|
|
})
|
|
|
|
const loadBackup = () => {
|
|
loading.value = true
|
|
fetchGet("/api/getWireguardConfigurationBackup", {
|
|
configurationName: route.params.id
|
|
}, (res) => {
|
|
backups.value = res.data;
|
|
loading.value = false;
|
|
})
|
|
}
|
|
|
|
const createBackup = () => {
|
|
fetchGet("/api/createWireguardConfigurationBackup", {
|
|
configurationName: route.params.id
|
|
}, (res) => {
|
|
backups.value = res.data;
|
|
loading.value = false;
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<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
|
|
@click="createBackup()"
|
|
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>
|
|
<LocaleText t="Create Backup"></LocaleText>
|
|
</button>
|
|
</div>
|
|
<div class="position-relative d-flex flex-column gap-3">
|
|
<TransitionGroup name="list1" >
|
|
<div class="text-center title"
|
|
key="spinner"
|
|
v-if="loading && backups.length === 0">
|
|
<div class="spinner-border"></div>
|
|
</div>
|
|
<div class="card my-0 rounded-3"
|
|
v-else-if="!loading && backups.length === 0"
|
|
key="noBackups"
|
|
>
|
|
<div class="card-body text-center text-muted">
|
|
<i class="bi bi-x-circle-fill me-2"></i>
|
|
<LocaleText t="No backup yet, click the button above to create backup."></LocaleText>
|
|
</div>
|
|
</div>
|
|
<Backup
|
|
@refresh="loadBackup()"
|
|
@refreshPeersList="emit('refreshPeersList')"
|
|
:b="b" v-for="b in backups"
|
|
:key="b.filename"
|
|
></Backup>
|
|
</TransitionGroup>
|
|
</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)
|
|
}
|
|
|
|
.list1-move, /* apply transition to moving elements */
|
|
.list1-enter-active,
|
|
.list1-leave-active {
|
|
transition: all 0.5s cubic-bezier(0.42, 0, 0.22, 1.0);
|
|
}
|
|
|
|
|
|
|
|
.list1-enter-from,
|
|
.list1-leave-to {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
}
|
|
|
|
/* ensure leaving items are taken out of layout flow so that moving
|
|
animations can be calculated correctly. */
|
|
.list1-leave-active {
|
|
width: 100%;
|
|
position: absolute;
|
|
}
|
|
</style> |