Reconstruct Client App UI

src/static/client/src/components/Configuration/configuration.vue

@@ -1,12 +1,50 @@
 <script setup>
-import {ref} from "vue";
+import {computed, ref} from "vue";
 import ConfigurationQRCode from "@/components/Configuration/configurationQRCode.vue";
-
+import dayjs from "dayjs";
+import Duration from 'dayjs/plugin/Duration'
+dayjs.extend(Duration);
 const props = defineProps([
 	'config'
 ])
-
 const showQRCode = ref(false)
+
+const dateJobs = computed(() => {
+	return props.config.jobs.filter(x => x.Field === 'date').sort((x, y) => {
+		if (dayjs(x.Value).isBefore(y.Value)){
+			return -1
+		}else if (dayjs(x.Value).isAfter(y.Value)){
+			return 1
+		}else{
+			return 0
+		}
+	})
+});
+
+const totalDataJobs = computed(() => {
+	return props.config.jobs.filter(x => x.Field === "total_data").sort((x, y) => {
+		return parseFloat(y.Value) - parseFloat(x.Value)
+	})
+});
+
+const dateLimit = computed(() => {
+	if (dateJobs.value.length > 0){
+		return dateJobs.value[0].Value
+	}
+	return undefined
+})
+const totalDataLimit = computed(() => {
+	if (totalDataJobs.value.length > 0){
+		return totalDataJobs.value[0].Value
+	}
+	return undefined
+})
+
+const totalDataPercentage = computed(() => {
+	if (!totalDataLimit.value) return 100
+	return ( props.config.data / totalDataLimit.value ) * 100
+})
+window.dayjs = dayjs
 </script>
 
 <template>
@@ -21,25 +59,32 @@ const showQRCode = ref(false)
 							{{ props.config.protocol === 'wg' ? 'WireGuard': 'AmneziaWG' }}
 						</span>
 		</div>
-		<div class="card-body p-3">
-			<div class="row gy-2 mb-2">
-				<div class="col-sm text-center">
-					<small class="text-muted mb-2">
+		<div class="card-body p-3 d-flex gap-3 flex-column">
+			<div>
+				<div class="mb-1 d-flex align-items-center">
+					<small class="text-muted ">
 						<i class="bi bi-bar-chart-fill me-1"></i> Data Usage
 					</small>
-					<h6 class="fw-bold ">
-						3.42 / 4.00 GB
-					</h6>
-				</div>
-				<div class="col-sm text-center">
-					<small class="text-muted mb-2">
-						<i class="bi bi-calendar me-1"></i> Valid Until
+					<small class="fw-bold ms-sm-auto">
+						{{ props.config.data.toFixed(4) }} / {{ totalDataLimit ? parseFloat(totalDataLimit).toFixed(4) : 'Unlimited'}} GB
 					</small>
-					<h6 class="fw-bold ">
-						3.42 / 4.00 GB
-					</h6>
+				</div>
+				<div class="progress" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 6px">
+					<div class="progress-bar bg-primary"
+					     :style="{'width': '' + totalDataPercentage + '%'}"></div>
 				</div>
 			</div>
+			<div>
+				<div class="mb-1 d-flex align-items-center">
+					<small class="text-muted">
+						<i class="bi bi-calendar me-1"></i> Valid Until
+					</small>
+					<small class="fw-bold ms-auto">
+						{{ dateLimit ? dateLimit : 'Unlimited Time' }}
+					</small>
+				</div>
+			</div>
+
 			<button class="btn btn-outline-body rounded-3 flex-grow-1 fw-bold w-100" @click="showQRCode = true">
 				<i class="bi bi-link-45deg me-2"></i><small>Connect</small>
 			</button>