Finished adding data usage on configuration list

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
 										}
 									],
 								}

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>
+					<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>
+						<ConfigurationCard v-for="c in this.wireguardConfigurationsStore.Configurations" :key="c.Name" :c="c"></ConfigurationCard>
 					</div>
 				</div>
 			</Transition>

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">
+		<div class="card-footer d-flex gap-2 flex-column">
-			<small class="me-2 text-muted">
+			<div class="d-flex gap-4">
-				<strong>PUBLIC KEY</strong>
+				<small >
-			</small>
+					<i class="bi bi-arrow-down-up me-2"></i>{{c.DataUsage.Total > 0 ? c.DataUsage.Total.toFixed(4) : 0}} GB
-			<small class="mb-0 d-block d-lg-inline-block ">
+				</small>
-				<samp style="line-break: anywhere">{{c.PublicKey}}</samp>
+				<small class="text-primary-emphasis">
-			</small>
+					<i class="bi bi-arrow-down me-2"></i>{{c.DataUsage.Receive > 0 ? c.DataUsage.Receive.toFixed(4) : 0}} GB
-			<div class="form-check form-switch ms-auto">
+				</small>
-				<label class="form-check-label" style="cursor: pointer" :for="'switch' + c.PrivateKey">
+				<small class="text-success-emphasis">
-					{{this.configurationToggling ? 'Turning ':''}}
+					<i class="bi bi-arrow-up me-2"></i>{{c.DataUsage.Sent > 0 ? c.DataUsage.Sent.toFixed(4) : 0}} GB
-					{{c.Status ? "On":"Off"}}
+				</small>
-					<span v-if="this.configurationToggling" 
+				<small class="ms-auto">
-					      class="spinner-border spinner-border-sm" aria-hidden="true"></span>
+					<span class="dot me-2" :class="{active: c.ConnectedPeers > 0}"></span>{{c.ConnectedPeers}} Peers
-				</label>
+				</small>
-				<input class="form-check-input"
+			</div>
-				       style="cursor: pointer"
+			<div class="d-flex align-items-center">
-				       :disabled="this.configurationToggling"
+				<small class="me-2 text-muted">
-				       type="checkbox" role="switch" :id="'switch' + c.PrivateKey"
+					<strong>Public Key</strong>
-				       @change="this.toggle()"
+				</small>
-				       v-model="c.Status"
+				<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>

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: [