Finished adding data usage on configuration list

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

@@ -212,7 +212,8 @@ 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',
 											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,7 +46,7 @@ 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>
 					</div>
 				</div>

src/static/app/src/components/configurationListComponents/configurationCard.vue

@@ -10,7 +10,6 @@ export default {
 			Status: Boolean,
 			PublicKey: String,
 			PrivateKey: String
-			
 		}
 	},
 	data(){
@@ -52,9 +51,24 @@ 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">
+			<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>
+					<strong>Public Key</strong>
 				</small>
 				<small class="mb-0 d-block d-lg-inline-block ">
 					<samp style="line-break: anywhere">{{c.PublicKey}}</samp>
@@ -76,6 +90,7 @@ export default {
 				</div>
 			</div>
 		</div>
+	</div>
 </template>
 
 <style scoped>

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