Still working on backup & restore

src/static/app/src/components/configurationComponents/editConfiguration.vue

@@ -5,6 +5,8 @@ import {WireguardConfigurationsStore} from "@/stores/WireguardConfigurationsStor
 import {fetchPost} from "@/utilities/fetch.js";
 import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js";
 import router from "@/router/index.js";
+import ConfigurationBackupRestore
+	from "@/components/configurationComponents/editConfigurationComponents/configurationBackupRestore.vue";
 const props = defineProps({
 	configurationInfo: Object
 })
@@ -177,13 +179,17 @@ watch(data, () => {
 								        :disabled="!dataChanged || saving">
 									<i class="bi bi-arrow-clockwise"></i>
 								</button>
-
 								<button class="btn bg-primary-subtle border-primary-subtle text-primary-emphasis rounded-3 px-3 py-2 shadow"
 								        :disabled="!dataChanged || saving"
 								        @click="saveForm()"
 								>
 									<i class="bi bi-save-fill"></i></button>
 							</div>
+							<hr>
+							<h6>
+								<LocaleText t="Backup & Restore"></LocaleText>
+							</h6>
+							<ConfigurationBackupRestore></ConfigurationBackupRestore>
 						</div>
 					</div>
 				</div>

src/static/app/src/components/configurationComponents/editConfigurationComponents/configurationBackupRestore.vue

@@ -0,0 +1,61 @@
+<script setup>
+import {onMounted, reactive, ref} from "vue";
+import {fetchGet} from "@/utilities/fetch.js";
+import {useRoute} from "vue-router";
+import dayjs from "dayjs";
+
+const route = useRoute()
+const backups = ref([])
+
+onMounted(() => {
+	fetchGet("/api/getWireguardConfigurationBackup", {
+		configurationName: route.params.id
+	}, (res) => {
+		backups.value = res.data;
+	})
+})
+</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="d-flex flex-column">
+						<small class="text-muted">
+							Filename
+						</small>
+						<small>
+							{{b.filename}}
+						</small>
+					</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>
+						<button class="btn bg-danger-subtle text-danger-emphasis border-danger-subtle rounded-3 btn-sm">
+							<i class="bi bi-trash-fill"></i>
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+</template>
+
+<style scoped>
+
+</style>

src/static/app/src/components/configurationComponents/peerList.vue

@@ -145,10 +145,10 @@ export default {
 				selectedPeer: undefined
 			},
 			editConfiguration: {
-				modalOpen: false
+				modalOpen: true
 			},
 			selectPeers: {
-				modalOpen: true
+				modalOpen: false
 			}
 		}
 	},

src/static/app/src/components/configurationComponents/peerSettings.vue

@@ -231,19 +231,17 @@ export default {
 							</div>
 						</div>
 						<div class="d-flex align-items-center gap-2">
-							<button class="btn btn-secondary rounded-3 shadow"
+							<button class="btn bg-secondary-subtle border-secondary-subtle text-secondary-emphasis rounded-3 shadow ms-auto px-3 py-2"
 							        @click="this.reset()"
 							        :disabled="!this.dataChanged || this.saving">
-								<LocaleText t="Revert"></LocaleText>
-								 <i class="bi bi-arrow-clockwise ms-2"></i>
+								 <i class="bi bi-arrow-clockwise"></i>
 							</button>
 
-							<button class="ms-auto btn btn-dark btn-brand rounded-3 px-3 py-2 shadow"
+							<button class="btn bg-primary-subtle border-primary-subtle text-primary-emphasis rounded-3 px-3 py-2 shadow"
 							        :disabled="!this.dataChanged || this.saving"
 							        @click="this.savePeer()"
 							>
-								<LocaleText t="Save Peer"></LocaleText>
-								<i class="bi bi-save-fill ms-2"></i></button>
+								<i class="bi bi-save-fill"></i></button>
 						</div>
 					</div>
 				</div>

src/static/app/src/components/configurationComponents/selectPeers.vue

@@ -66,9 +66,7 @@ const downloaded = reactive({
 	failed: []
 })
 const cardBody = useTemplateRef('card-body');
-const sleep = m => new Promise(resolve => setTimeout(resolve, m))
 const el = useTemplateRef("sp")
-console.log(el.value)
 const submitDownload = async () => {
 	downloadConfirmation.value = true
 	for (const x of selectedPeers.value) {

src/static/app/src/components/navbar.vue

@@ -66,10 +66,10 @@ export default {
 					<LocaleText t="WireGuard Configurations"></LocaleText>
 				</h6>
 				<ul class="nav flex-column px-2">
-					<li class="nav-item">
+					<li class="nav-item" v-for="c in this.wireguardConfigurationsStore.Configurations">
 						<RouterLink :to="'/configuration/'+c.Name + '/peers'" class="nav-link nav-conf-link rounded-3"
 						            active-class="active"
-						            v-for="c in this.wireguardConfigurationsStore.Configurations">
+						            >
 							<span class="dot me-2" :class="{active: c.Status}"></span>
 							{{c.Name}}
 						</RouterLink>