Update

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

@@ -46,7 +46,7 @@ onMounted(() => {
 	getBackup()
 })
 
-const emits = defineEmits(["backup"])
+const emits = defineEmits(["backup", "close"])
 
 
 
@@ -61,7 +61,7 @@ const emits = defineEmits(["backup"])
 						<h5 class="mb-0">
 							<LocaleText t="Are you sure to delete this configuration?"></LocaleText>
 						</h5>
-						<button type="button" class="btn-close ms-auto" @click="$emit('close')"></button>
+						<button type="button" class="btn-close ms-auto" @click="emits('close')"></button>
 					</div>
 					<div class="card-body px-4 text-muted">
 						<p class="mb-0">

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

@@ -34,7 +34,7 @@ const resetForm = () => {
 	dataChanged.value = false;
 	Object.assign(data, JSON.parse(JSON.stringify(props.configurationInfo)))
 }
-const emit = defineEmits(["changed", "close"])
+const emit = defineEmits(["changed", "close", "backupRestore", "deleteConfiguration"])
 const saveForm = ()  => {
 	saving.value = true
 	fetchPost("/api/updateWireguardConfiguration", data, (res) => {
@@ -193,13 +193,34 @@ watch(data, () => {
 									<button class="btn bg-secondary-subtle border-secondary-subtle text-secondary-emphasis rounded-3 shadow ms-auto"
 									        @click="resetForm()"
 									        :disabled="!dataChanged || saving">
-										<i class="bi bi-arrow-clockwise"></i>
+										<i class="bi bi-arrow-clockwise me-2"></i>
+										<LocaleText t="Reset"></LocaleText>
 									</button>
 									<button class="btn bg-primary-subtle border-primary-subtle text-primary-emphasis rounded-3 shadow"
 									        :disabled="!dataChanged || saving"
 									        @click="saveForm()"
 									>
-										<i class="bi bi-save-fill"></i></button>
+										<i class="bi bi-save-fill me-2"></i>
+										<LocaleText t="Save"></LocaleText>
+									</button>
+								</div>
+								<hr>
+								<h5 class="mb-3">Danger Zone</h5>
+								<div class="d-flex gap-2">
+									<button
+										@click="emit('backupRestore')"
+										style="flex-basis: 100%"
+										class="btn bg-warning-subtle border-warning-subtle text-warning-emphasis rounded-3 ms-auto">
+										<i class="bi bi-copy me-2"></i>
+										<LocaleText t="Backup & Restore"></LocaleText>
+									</button>
+									<button
+										@click="emit('deleteConfiguration')"
+										style="flex-basis: 100%"
+										class="btn bg-danger-subtle border-danger-subtle text-danger-emphasis rounded-3 ms-auto">
+										<i class="bi bi-trash-fill me-2"></i>
+										<LocaleText t="Delete Configuration"></LocaleText>
+									</button>
 								</div>
 							</template>
 						</div>

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

@@ -31,7 +31,7 @@ export default {
 	<div class="peerSettingContainer w-100 h-100 position-absolute top-0 start-0 overflow-y-scroll">
 		<div class="container d-flex h-100 w-100">
 			<div class="m-auto modal-dialog-centered dashboardModal">
-				<div class="card rounded-3 shadow" style="width: 700px">
+				<div class="card rounded-3 shadow" style="width: 900px">
 					<div class="card-header bg-transparent d-flex align-items-center gap-2 border-0 p-4 pb-2">
 						<h4 class="mb-0 fw-normal">
 							<LocaleText t="All Active Jobs"></LocaleText>
@@ -39,6 +39,12 @@ export default {
 						<button type="button" class="btn-close ms-auto" @click="this.$emit('close')"></button>
 					</div>
 					<div class="card-body px-4 pb-4 pt-2 ">
+						<button class="btn bg-primary-subtle border-1 border-primary-subtle text-primary-emphasis rounded-3 shadow mb-2"
+
+						        @click="this.$emit('allLogs')">
+							<i class="bi bi-clock me-2"></i>
+							<LocaleText t="Logs"></LocaleText>
+						</button>
 						<div class="accordion" id="peerJobsLogsModalAccordion" v-if="this.getAllJobs.length > 0">
 							<div class="accordion-item" v-for="(p, index) in this.getAllJobs" :key="p.id">
 								<h2 class="accordion-header">

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

@@ -34,9 +34,11 @@ Chart.register(
 import dayjs from "dayjs";
 import {defineAsyncComponent, ref} from "vue";
 import LocaleText from "@/components/text/localeText.vue";
+import PeerRow from "@/components/configurationComponents/peerRow.vue";
 export default {
 	name: "peerList",
 	components: {
+		PeerRow,
 		DeleteConfiguration:
 			defineAsyncComponent(() => import("@/components/configurationComponents/deleteConfiguration.vue")),
 		ConfigurationBackupRestore:
@@ -264,7 +266,7 @@ export default {
 	},
 	computed: {
 		configurationSummary(){
-			const k = {
+			return {
 				connectedPeers: this.configurationPeers.filter(x => x.status === "running").length,
 				totalUsage: this.configurationPeers.length > 0 ? 
 					this.configurationPeers.filter(x => !x.restricted)
@@ -276,8 +278,6 @@ export default {
 					this.configurationPeers.filter(x => !x.restricted)
 						.map(x => x.total_sent + x.cumu_sent).reduce((a, b) => a + b, 0).toFixed(4) : 0
 			}
-			
-			return k
 		},
 		receiveData(){
 			return this.historyReceiveData
@@ -416,7 +416,7 @@ export default {
 
 <template>
 	<div v-if="!this.loading" class="container-md">
-		<div class="d-flex align-items-center">
+		<div class="d-flex align-items-sm-center flex-column flex-sm-row gap-3">
 			<div>
 				<small CLASS="text-muted">
 					<LocaleText t="CONFIGURATION"></LocaleText>
@@ -425,20 +425,20 @@ export default {
 					<h1 class="mb-0 display-4"><samp>{{this.configurationInfo.Name}}</samp></h1>
 				</div>
 			</div>
-			<div class="card rounded-3 bg-transparent shadow-sm ms-auto">
+			<div class="ms-sm-auto d-flex gap-2 flex-column">
+				<div class="card rounded-3 bg-transparent shadow-sm">
 					<div class="card-body py-2 d-flex align-items-center">
-					<div>
+						<small class="text-muted">
-						<p class="mb-0 text-muted"><small>
 							<LocaleText t="Status"></LocaleText>
-						</small></p>
+						</small>
-						<div class="form-check form-switch ms-auto">
+						<div class="dot ms-2" :class="{active: this.configurationInfo.Status}"></div>
+						<div class="form-check form-switch mb-0 ms-auto pe-0 me-0">
 							<label class="form-check-label" style="cursor: pointer" :for="'switch' + this.configurationInfo.id">
-								<LocaleText t="Turning Off..." v-if="!this.configurationInfo.Status && this.configurationToggling"></LocaleText>
+								<LocaleText t="On" v-if="this.configurationInfo.Status && !this.configurationToggling"></LocaleText>
-								<LocaleText t="Turning On..." v-else-if="this.configurationInfo.Status && this.configurationToggling"></LocaleText>
-								<LocaleText t="On" v-else-if="this.configurationInfo.Status && !this.configurationToggling"></LocaleText>
 								<LocaleText t="Off" v-else-if="!this.configurationInfo.Status && !this.configurationToggling"></LocaleText>
 								<span v-if="this.configurationToggling"
-								      class="spinner-border spinner-border-sm ms-2" aria-hidden="true"></span>
+								      class="spinner-border spinner-border-sm ms-2" aria-hidden="true">
+								</span>
 							</label>
 							<input class="form-check-input"
 							       style="cursor: pointer"
@@ -448,8 +448,27 @@ export default {
 							       v-model="this.configurationInfo.Status"
 							>
 						</div>
+						
 					</div>
-					<div class="dot ms-5" :class="{active: this.configurationInfo.Status}"></div>
+				</div>
+				<div class="d-flex gap-2">
+					<RouterLink
+						to="create"
+						class="titleBtn py-2 text-decoration-none btn text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle shadow-sm">
+						<i class="bi bi-plus-lg me-2"></i>
+						<LocaleText t="Peer"></LocaleText>
+					</RouterLink>
+					<button class="titleBtn py-2 text-decoration-none btn text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle shadow-sm"
+					        @click="editConfiguration.modalOpen = true"
+					        type="button" aria-expanded="false">
+						<i class="bi bi-gear-fill me-2"></i>
+						<LocaleText t="Configuration Settings"></LocaleText>
+					</button>
+<!--					<button-->
+<!--						class="titleBtn btn text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle shadow-sm py-2">-->
+<!--						<i class="bi bi-download me-2"></i>-->
+<!--						<LocaleText t="Download All"></LocaleText>-->
+<!--					</button>-->
 				</div>
 			</div>
 		</div>
@@ -586,6 +605,7 @@ export default {
 				</div>
 			</div>
 		</div>
+		<hr>
 		<div class="mb-3">
 			<PeerSearch
 				@jobsAll="this.peerScheduleJobsAll.modalOpen = true"
@@ -609,6 +629,7 @@ export default {
 					></Peer>
 				</div>
 			</TransitionGroup>
+			
 		</div>
 		<Transition name="zoom">
 			<PeerSettings v-if="this.peerSetting.modalOpen"
@@ -636,6 +657,7 @@ export default {
 			<PeerJobsAllModal 
 				v-if="this.peerScheduleJobsAll.modalOpen"
 				@refresh="this.getPeers()"
+				@allLogs="peerScheduleJobsLogs.modalOpen = true"
 				@close="this.peerScheduleJobsAll.modalOpen = false"
 			                   :configurationPeers="this.configurationPeers"
 			>
@@ -643,6 +665,7 @@ export default {
 		</Transition>
 		<Transition name="zoom">
 			<PeerJobsLogsModal v-if="this.peerScheduleJobsLogs.modalOpen"
+			                   
 				@close="this.peerScheduleJobsLogs.modalOpen = false" 
 				               :configurationInfo="this.configurationInfo"
 			>
@@ -658,6 +681,8 @@ export default {
 			<EditConfiguration 
 				@close="this.editConfiguration.modalOpen = false"
 				@dataChanged="(d) => this.configurationInfo = d"
+				@backupRestore="this.backupRestore.modalOpen = true"
+				@deleteConfiguration="this.deleteConfiguration.modalOpen = true"
 				:configurationInfo="this.configurationInfo"
 				v-if="this.editConfiguration.modalOpen"></EditConfiguration>
 		</Transition>
@@ -699,5 +724,13 @@ export default {
 	}
 }
 
+th, td{
+	background-color: transparent !important;
+}
 
+@media screen and (max-width: 576px) {
+	.titleBtn{
+		flex-basis: 100%;
+	}
+}
 </style>

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

@@ -0,0 +1,79 @@
+<script setup>
+import {computed, ref, useTemplateRef} from "vue";
+import PeerSettingsDropdown from "@/components/configurationComponents/peerSettingsDropdown.vue";
+import {onClickOutside} from "@vueuse/core";
+
+const props = defineProps(['Peer'])
+const subMenuOpened = ref(false)
+const getLatestHandshake = computed(() => {
+	if (props.Peer.latest_handshake.includes(",")){
+		return props.Peer.latest_handshake.split(",")[0]
+	}
+	return props.Peer.latest_handshake;
+})
+
+const target = useTemplateRef('target');
+onClickOutside(target, event => {
+	subMenuOpened.value = false;
+});
+
+const emit = defineEmits(['qrcode', 'configurationFile', 'setting', 'jobs', 'refresh', 'share'])
+</script>
+
+<template>
+<tr>
+	<td>
+		<small>{{Peer.name ? Peer.name : 'Untitled Peer'}}</small>
+	</td>
+	<td>
+		<small>{{Peer.id}}</small>
+	</td>
+	<td>
+		<small>
+			{{Peer.allowed_ip}}
+		</small>
+	</td>
+	<td>
+		<small class="text-primary">
+			{{(Peer.cumu_receive + Peer.total_receive).toFixed(4)}} GB
+		</small>
+	</td>
+	<td>
+		<small class="text-success">
+			{{(Peer.cumu_sent + Peer.total_sent).toFixed(4)}} GB
+		</small>
+	</td>
+	<td>
+		<small class="text-secondary" v-if="Peer.latest_handshake !== 'No Handshake'">
+			<i class="bi bi-arrows-angle-contract"></i>
+			{{getLatestHandshake}} ago
+		</small>
+		<small v-else>N/A</small>
+	</td>
+	<td>
+		<a role="button" class="text-body"
+		   @click="subMenuOpened = true">
+			<h5 class="mb-0"><i class="bi bi-three-dots"></i></h5>
+		</a>
+		<Transition name="slide-fade">
+			<PeerSettingsDropdown
+				@qrcode="(file) => emit('qrcode', file)"
+				@configurationFile="(file) => emit('configurationFile', file)"
+				@setting="emit('setting')"
+				@jobs="emit('jobs')"
+				@refresh="emit('refresh')"
+				@share="emit('share')"
+				:Peer="Peer"
+				v-if="subMenuOpened"
+				ref="target"
+			></PeerSettingsDropdown>
+		</Transition>
+	</td>
+</tr>
+</template>
+
+<style scoped>
+td{
+	background-color: transparent;
+}
+</style>

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

@@ -89,147 +89,82 @@ export default {
 </script>
 
 <template>
-	<div class="mb-3">
+	<div class="d-flex flex-column gap-2 mb-3">
-		<div class="d-flex gap-2 z-3 peerSearchContainer">
+		<div class="d-flex gap-2 z-3 peerSearchContainer justify-content-end">
-			<RouterLink
+			<button class="btn btn-sm text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle shadow-sm"
-				to="create"
-				class="text-decoration-none btn text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle shadow-sm">
-				<i class="bi bi-plus-lg me-2"></i>
-				<LocaleText t="Peer"></LocaleText>
-			</RouterLink>
-			<button class="btn text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle  shadow-sm"
 			        @click="this.downloadAllPeer()">
 				<i class="bi bi-download me-2"></i>
 				<LocaleText t="Download All"></LocaleText>
 			</button>
-			<div class="mt-3 mt-md-0 flex-grow-1">
+			<button class="btn btn-sm text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle shadow-sm"
+			        @click="this.$emit('selectPeers')">
+				<i class="bi bi-check2-all me-2"></i>
+				<LocaleText t="Select Peers"></LocaleText>
+			</button>
+			<div class="dropdown">
+				<button
+					data-bs-toggle="dropdown"
+					class="btn w-100 btn-sm text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle shadow-sm position-relative">
+					<i class="bi bi-sort-up me-2"></i>
+					<LocaleText t="Sort By"></LocaleText>
+					<span class="badge text-bg-primary ms-2">{{this.sort[store.Configuration.Server.dashboard_sort]}}</span>
+				</button>
+				<ul class="dropdown-menu rounded-3 shadow">
+					<li v-for="(value, key) in this.sort" >
+						<button class="dropdown-item d-flex align-items-center" @click="this.updateSort(key)">
+							<small>
+								{{ value }}
+							</small>
+							<small class="ms-auto">
+								<i class="bi bi-check-circle-fill"
+								   v-if="store.Configuration.Server.dashboard_sort === key"></i>
+							</small>
+						</button>
+					</li>
+				</ul>
+			</div>
+			<div class="dropdown">
+				<button
+					data-bs-toggle="dropdown"
+					class="btn btn-sm w-100 text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle shadow-sm position-relative">
+					<i class="bi bi-arrow-repeat me-2"></i>
+					<LocaleText t="Refresh Interval"></LocaleText>
+					<span class="badge text-bg-primary ms-2">{{this.interval[store.Configuration.Server.dashboard_refresh_interval]}}</span>
+				</button>
+				<ul class="dropdown-menu rounded-3 shadow">
+					<li v-for="(value, key) in this.interval" >
+						<button class="dropdown-item d-flex align-items-center" @click="this.updateRefreshInterval(key)">
+							<small>
+								{{ value }}
+							</small>
+							<small class="ms-auto">
+								<i class="bi bi-check-circle-fill"
+								   v-if="store.Configuration.Server.dashboard_refresh_interval === key"></i>
+							</small>
+						</button>
+					</li>
 
-				<input class="form-control rounded-3 bg-secondary-subtle border-1 border-secondary-subtle shadow-sm w-100"
+				</ul>
+			</div>
+			<button class="btn btn-sm text-primary-emphasis bg-primary-subtle rounded-3 border-1 border-primary-subtle shadow-sm"
+			        @click="this.$emit('jobsAll')"
+			        type="button" aria-expanded="false">
+				<i class="bi bi-person-walking me-2"></i>
+				<LocaleText t="Active Jobs"></LocaleText>
+			</button>
+		</div>
+		<div class="d-flex gap-3 align-items-center">
+			<h6 class="mb-0">
+				<label for="searchPeers">
+					<i class="bi bi-search"></i>
+				</label>
+			</h6>
+			<input class="form-control form-control-sm rounded-3 bg-secondary-subtle border-1 border-secondary-subtle shadow-sm w-auto"
 			       :placeholder="searchBarPlaceholder"
 			       id="searchPeers"
 			       @keyup="this.debounce()"
 			       v-model="this.searchString">
 		</div>
-			<button
-				@click="this.showDisplaySettings = true"
-				class="btn text-secondary-emphasis bg-secondary-subtle rounded-3 border-1 border-secondary-subtle shadow-sm"
-				type="button" aria-expanded="false">
-				<i class="bi bi-filter-circle me-2"></i>
-				<LocaleText t="Display"></LocaleText>
-			</button>
-			<button class="btn text-secondary-emphasis bg-secondary-subtle rounded-3 border-1 border-secondary-subtle shadow-sm"
-			        @click="this.$emit('editConfiguration')"
-			        type="button" aria-expanded="false">
-				<i class="bi bi-gear-fill"></i>
-			</button>
-			<button class="btn text-secondary-emphasis bg-secondary-subtle rounded-3 border-1 border-secondary-subtle shadow-sm"
-			        @click="this.showMoreSettings = true"
-			        type="button" aria-expanded="false">
-				<i class="bi bi-three-dots"></i>
-			</button>
-			<Transition name="zoom">
-				<div
-					v-if="this.showDisplaySettings"
-					class="peerSettingContainer w-100 h-100 position-absolute top-0 start-0 overflow-y-scroll displayModal">
-					<div class="container-md d-flex h-100 w-100">
-						<div class="m-auto modal-dialog-centered dashboardModal">
-							<div class="card rounded-3 shadow w-100">
-								<div class="card-header bg-transparent d-flex align-items-center gap-2 border-0 p-4 pb-2">
-									<h4 class="mb-0 fw-normal"><LocaleText t="Display"></LocaleText>
-									</h4>
-									<button type="button" class="btn-close ms-auto" @click="this.showDisplaySettings = false"></button>
-								</div>
-								<div class="card-body px-4 pb-4 d-flex gap-3 flex-column">
-									<div>
-										<p class="text-muted fw-bold mb-2"><small>
-											<LocaleText t="Sort by"></LocaleText>
-										</small></p>
-										<div class="list-group">
-											<a v-for="(value, key) in this.sort" class="list-group-item list-group-item-action d-flex" 
-											   role="button" 
-											   @click="this.updateSort(key)">
-												<span class="me-auto">{{value}}</span>
-												<i class="bi bi-check text-primary"
-												   v-if="store.Configuration.Server.dashboard_sort === key"></i>
-											</a>
-										</div>
-									</div>
-									<div>
-										<p class="text-muted fw-bold mb-2"><small>
-											<LocaleText t="Refresh Interval"></LocaleText>
-										</small></p>
-										<div class="list-group">
-											<a v-for="(value, key) in this.interval"
-											   class="list-group-item list-group-item-action d-flex" role="button"
-											   @click="this.updateRefreshInterval(key)">
-												<span class="me-auto">{{value}}</span>
-												<i class="bi bi-check text-primary"
-												   v-if="store.Configuration.Server.dashboard_refresh_interval === key"></i>
-											</a>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</Transition>
-			<Transition name="zoom">
-				<div
-					v-if="this.showMoreSettings"
-					class="peerSettingContainer w-100 h-100 position-absolute top-0 start-0 overflow-y-scroll displayModal">
-					<div class="container-md d-flex h-100 w-100">
-						<div class="m-auto modal-dialog-centered dashboardModal">
-							<div class="card rounded-3 shadow w-100">
-								<div class="card-header bg-transparent d-flex align-items-center gap-2 border-0 p-4">
-									<h4 class="mb-0">
-										<LocaleText t="Other Settings"></LocaleText>
-									</h4>
-									<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="Peers"></LocaleText>
-										</small></p>
-										<div class="list-group">
-											<a class="list-group-item list-group-item-action d-flex" role="button"
-											   @click="this.$emit('selectPeers')">
-												<LocaleText t="Select Peers"></LocaleText>
-											</a>
-											<a class="list-group-item list-group-item-action d-flex" role="button"
-											   @click="this.$emit('jobsAll')">
-												<LocaleText t="Active Jobs"></LocaleText>
-											</a>
-											<a class="list-group-item list-group-item-action d-flex" role="button"
-											   @click="this.$emit('jobLogs')">
-												<LocaleText t="Logs"></LocaleText>
-											</a>
-										</div>
-									</div>
-									<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>
-											<a class="list-group-item list-group-item-action d-flex text-danger fw-bold" role="button"
-											   @click="this.$emit('deleteConfiguration')">
-												<LocaleText t="Delete Configuration"></LocaleText>
-											</a>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</Transition>
-		</div>
 	</div>
 </template>
 
@@ -258,7 +193,7 @@ export default {
 	width: 400px !important;
 }
 
-@media screen and (max-width: 768px) {
+@media screen and (max-width: 992px) {
 	.peerSearchContainer{
 		flex-direction: column;
 	}
@@ -267,4 +202,18 @@ export default {
 		width: 100% !important;
 	}
 }
+
+.peerSearchContainer > *{
+	flex-grow: 1;
+}
+
+button{
+	text-align: left;
+	display: flex;
+	align-items: center;
+	
+	i{
+		margin-right: auto !important;
+	}
+}
 </style>