From 9644e6195c1aed822dabc627707f6504e16e7d6c Mon Sep 17 00:00:00 2001
From: Donald Zou <donaldzou@live.hk>
Date: Fri, 9 Aug 2024 17:30:44 -0400
Subject: [PATCH] Finished adding data usage on configuration list

---
 .../configurationComponents/peerList.vue      | 14 ++++-
 .../app/src/components/configurationList.vue  | 12 +++-
 .../configurationCard.vue                     | 59 ++++++++++++-------
 .../stores/WireguardConfigurationsStore.js    |  1 +
 4 files changed, 59 insertions(+), 27 deletions(-)

diff --git a/src/static/app/src/components/configurationComponents/peerList.vue b/src/static/app/src/components/configurationComponents/peerList.vue
index 8aa2aea..71b80c5 100644
--- a/src/static/app/src/components/configurationComponents/peerList.vue
+++ b/src/static/app/src/components/configurationComponents/peerList.vue
@@ -212,9 +212,10 @@ export default {
 										{
 											label: 'Data Sent',
 											data: [...this.historySentData.datasets[0].data,
-												((sent - this.historyDataSentDifference[this.historyDataSentDifference.length - 1])*1000).toFixed(4)],
+												((sent - this.historyDataSentDifference[this.historyDataSentDifference.length - 1])*1000)
+													.toFixed(4)],
 											fill: false,
-											borderColor: ' #198754',
+											borderColor: '#198754',
 											tension: 0
 										}
 									],
@@ -237,6 +238,15 @@ export default {
 											fill: false,
 											borderColor: '#0d6efd',
 											tension: 0
+										},
+										{
+											label: 'Data Sent',
+											data: [...this.historySentData.datasets[0].data,
+												((sent - this.historyDataSentDifference[this.historyDataSentDifference.length - 1])*1000)
+													.toFixed(4)],
+											fill: false,
+											borderColor: '#198754',
+											tension: 0
 										}
 									],
 								}
diff --git a/src/static/app/src/components/configurationList.vue b/src/static/app/src/components/configurationList.vue
index eb50577..80dfd60 100644
--- a/src/static/app/src/components/configurationList.vue
+++ b/src/static/app/src/components/configurationList.vue
@@ -8,7 +8,6 @@ export default {
 	components: {ConfigurationCard},
 	async setup(){
 		const wireguardConfigurationsStore = WireguardConfigurationsStore();
-		
 		return {wireguardConfigurationsStore}
 	},
 	data(){
@@ -19,6 +18,13 @@ export default {
 	async mounted() {
 		await this.wireguardConfigurationsStore.getConfigurations();
 		this.configurationLoaded = true;
+		
+		this.wireguardConfigurationsStore.ConfigurationListInterval = setInterval(() => {
+			this.wireguardConfigurationsStore.getConfigurations()
+		}, 10000)
+	},
+	beforeUnmount() {
+		clearInterval(this.wireguardConfigurationsStore.ConfigurationListInterval)
 	}
 }
 </script>
@@ -40,8 +46,8 @@ export default {
 					<p class="text-muted" v-if="this.wireguardConfigurationsStore.Configurations.length === 0">
 						You don't have any WireGuard configurations yet. Please check the configuration folder or change it in "Settings". By default the folder is "/etc/wireguard".
 					</p>
-					<div class="d-flex gap-3 flex-column" v-else>
-						<ConfigurationCard  v-for="c in this.wireguardConfigurationsStore.Configurations" :key="c.Name" :c="c"></ConfigurationCard>
+					<div class="d-flex gap-3 flex-column mb-3" v-else>
+						<ConfigurationCard v-for="c in this.wireguardConfigurationsStore.Configurations" :key="c.Name" :c="c"></ConfigurationCard>
 					</div>
 				</div>
 			</Transition>
diff --git a/src/static/app/src/components/configurationListComponents/configurationCard.vue b/src/static/app/src/components/configurationListComponents/configurationCard.vue
index f3d3db7..5acdae2 100644
--- a/src/static/app/src/components/configurationListComponents/configurationCard.vue
+++ b/src/static/app/src/components/configurationListComponents/configurationCard.vue
@@ -10,7 +10,6 @@ export default {
 			Status: Boolean,
 			PublicKey: String,
 			PrivateKey: String
-			
 		}
 	},
 	data(){
@@ -52,27 +51,43 @@ export default {
 				<i class="bi bi-chevron-right"></i>
 			</h6>
 		</RouterLink>
-		<div class="card-footer d-flex align-items-center">
-			<small class="me-2 text-muted">
-				<strong>PUBLIC KEY</strong>
-			</small>
-			<small class="mb-0 d-block d-lg-inline-block ">
-				<samp style="line-break: anywhere">{{c.PublicKey}}</samp>
-			</small>
-			<div class="form-check form-switch ms-auto">
-				<label class="form-check-label" style="cursor: pointer" :for="'switch' + c.PrivateKey">
-					{{this.configurationToggling ? 'Turning ':''}}
-					{{c.Status ? "On":"Off"}}
-					<span v-if="this.configurationToggling" 
-					      class="spinner-border spinner-border-sm" aria-hidden="true"></span>
-				</label>
-				<input class="form-check-input"
-				       style="cursor: pointer"
-				       :disabled="this.configurationToggling"
-				       type="checkbox" role="switch" :id="'switch' + c.PrivateKey"
-				       @change="this.toggle()"
-				       v-model="c.Status"
-				>
+		<div class="card-footer d-flex gap-2 flex-column">
+			<div class="d-flex gap-4">
+				<small >
+					<i class="bi bi-arrow-down-up me-2"></i>{{c.DataUsage.Total > 0 ? c.DataUsage.Total.toFixed(4) : 0}} GB
+				</small>
+				<small class="text-primary-emphasis">
+					<i class="bi bi-arrow-down me-2"></i>{{c.DataUsage.Receive > 0 ? c.DataUsage.Receive.toFixed(4) : 0}} GB
+				</small>
+				<small class="text-success-emphasis">
+					<i class="bi bi-arrow-up me-2"></i>{{c.DataUsage.Sent > 0 ? c.DataUsage.Sent.toFixed(4) : 0}} GB
+				</small>
+				<small class="ms-auto">
+					<span class="dot me-2" :class="{active: c.ConnectedPeers > 0}"></span>{{c.ConnectedPeers}} Peers
+				</small>
+			</div>
+			<div class="d-flex align-items-center">
+				<small class="me-2 text-muted">
+					<strong>Public Key</strong>
+				</small>
+				<small class="mb-0 d-block d-lg-inline-block ">
+					<samp style="line-break: anywhere">{{c.PublicKey}}</samp>
+				</small>
+				<div class="form-check form-switch ms-auto">
+					<label class="form-check-label" style="cursor: pointer" :for="'switch' + c.PrivateKey">
+						{{this.configurationToggling ? 'Turning ':''}}
+						{{c.Status ? "On":"Off"}}
+						<span v-if="this.configurationToggling"
+						      class="spinner-border spinner-border-sm" aria-hidden="true"></span>
+					</label>
+					<input class="form-check-input"
+					       style="cursor: pointer"
+					       :disabled="this.configurationToggling"
+					       type="checkbox" role="switch" :id="'switch' + c.PrivateKey"
+					       @change="this.toggle()"
+					       v-model="c.Status"
+					>
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/src/static/app/src/stores/WireguardConfigurationsStore.js b/src/static/app/src/stores/WireguardConfigurationsStore.js
index b45f4dd..d4770c3 100644
--- a/src/static/app/src/stores/WireguardConfigurationsStore.js
+++ b/src/static/app/src/stores/WireguardConfigurationsStore.js
@@ -6,6 +6,7 @@ export const WireguardConfigurationsStore = defineStore('WireguardConfigurations
 	state: () => ({
 		Configurations: undefined,
 		searchString: "",
+		ConfigurationListInterval: undefined,
 		PeerScheduleJobs: {
 			dropdowns: {
 				Field: [