Merge pull request #248 from WeebDev/feature/stats-dashboard

feature: Add basic statistics UI

5 files changed, 162 insertions, 0 deletions

diff --git a/src/site/components/statistics/byte.vue b/src/site/components/statistics/byte.vue
new file mode 100644
index 0000000..05852cd
--- /dev/null
+++ b/src/site/components/statistics/byte.vue
@@ -0,0 +1,26 @@
+<template>
+	<div>
+		<div class="columns">
+			<div class="column is-2">
+				{{ title }}
+			</div>
+			<div class="column">
+				{{ (value / 1024 / 1024 / 1024).toFixed(2) }} GiB
+			</div>
+		</div>
+	</div>
+</template>
+<script>
+export default {
+	props: {
+		title: {
+			'type': String,
+			'default': null
+		},
+		value: {
+			'type': Number,
+			'default': null
+		}
+	}
+};
+</script>
diff --git a/src/site/components/statistics/byteUsage.vue b/src/site/components/statistics/byteUsage.vue
new file mode 100644
index 0000000..740feff
--- /dev/null
+++ b/src/site/components/statistics/byteUsage.vue
@@ -0,0 +1,31 @@
+<template>
+	<div>
+		<div class="columns">
+			<div class="column is-2">
+				{{ title }}
+			</div>
+			<div class="column">
+				{{ (used / 1024 / 1024 / 1024).toFixed(2) }} GiB /
+				{{ (total / 1024 / 1024 / 1024).toFixed(2) }} GiB ({{ ((used * 100) / total).toFixed(2) }}%)
+			</div>
+		</div>
+	</div>
+</template>
+<script>
+export default {
+	props: {
+		title: {
+			'type': String,
+			'default': null
+		},
+		used: {
+			'type': Number,
+			'default': null
+		},
+		total: {
+			'type': Number,
+			'default': null
+		}
+	}
+};
+</script>
diff --git a/src/site/components/statistics/detailed.vue b/src/site/components/statistics/detailed.vue
new file mode 100644
index 0000000..8a0722e
--- /dev/null
+++ b/src/site/components/statistics/detailed.vue
@@ -0,0 +1,33 @@
+<template>
+	<div>
+		<div class="columns">
+			<div class="column is-2">
+				{{ title }}
+			</div>
+			<div class="column">
+				<b-table :data="data || []" :mobile-cards="true">
+					<b-table-column v-slot="props" field="type" label="Type">
+						{{ props.row.key }}
+					</b-table-column>
+					<b-table-column v-slot="props" field="count" label="Count">
+						{{ props.row.value }}
+					</b-table-column>
+				</b-table>
+			</div>
+		</div>
+	</div>
+</template>
+<script>
+export default {
+	props: {
+		title: {
+			'type': String,
+			'default': null
+		},
+		data: {
+			'type': Array,
+			'default': () => []
+		}
+	}
+};
+</script>
diff --git a/src/site/components/statistics/generic.vue b/src/site/components/statistics/generic.vue
new file mode 100644
index 0000000..704be7a
--- /dev/null
+++ b/src/site/components/statistics/generic.vue
@@ -0,0 +1,26 @@
+<template>
+	<div>
+		<div class="columns">
+			<div class="column is-2">
+				{{ title }}
+			</div>
+			<div class="column">
+				{{ value }}
+			</div>
+		</div>
+	</div>
+</template>
+<script>
+export default {
+	props: {
+		title: {
+			'type': String,
+			'default': null
+		},
+		value: {
+			'type': [Number, String],
+			'default': null
+		}
+	}
+};
+</script>
diff --git a/src/site/components/statistics/time.vue b/src/site/components/statistics/time.vue
new file mode 100644
index 0000000..ff1bb8d
--- /dev/null
+++ b/src/site/components/statistics/time.vue
@@ -0,0 +1,46 @@
+<template>
+	<div>
+		<div class="columns">
+			<div class="column is-2">
+				{{ title }}
+			</div>
+			<div class="column">
+				{{ parsedTime }}
+			</div>
+		</div>
+	</div>
+</template>
+<script>
+export default {
+	props: {
+		title: {
+			'type': String,
+			'default': null
+		},
+		value: {
+			'type': Number,
+			'default': null
+		}
+	},
+	computed: {
+		parsedTime() {
+			let seconds = this.value;
+			const days = Math.floor(seconds / 86400);
+			seconds %= 86400;
+			let hours = Math.floor(seconds / 3600);
+			seconds %= 3600;
+			let minutes = Math.floor(seconds / 60);
+			seconds %= 60;
+
+			if (hours < 10) hours = `0${hours}`;
+			if (minutes < 10) minutes = `0${minutes}`;
+			if (seconds < 10) seconds = `0${seconds}`;
+
+			if (days > 0) {
+				return `${days}d ${hours}:${minutes}:${seconds}`;
+			}
+			return `${hours}:${minutes}:${seconds}`;
+		}
+	}
+};
+</script>