From edc3acd722619e154e3e6e041a606b2cbb1d9f35 Mon Sep 17 00:00:00 2001
From: Mawoka <mawoka-myblock@e.email>
Date: Mon, 12 Jun 2023 19:43:54 +0200
Subject: [PATCH] :sparkles: Added not about storage usage

---
 frontend/src/lib/i18n/locales/en.json       | 3 ++-
 frontend/src/routes/edit/files/+page.svelte | 8 ++++++++
 frontend/src/routes/edit/files/+page.ts     | 6 +++++-
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/i18n/locales/en.json b/frontend/src/lib/i18n/locales/en.json
index 31a6277..2d1faa8 100644
--- a/frontend/src/lib/i18n/locales/en.json
+++ b/frontend/src/lib/i18n/locales/en.json
@@ -411,7 +411,8 @@
         "delete_image": "Delete image",
         "edit_the_image": "Edit the image",
         "filename_word": "Filename",
-        "alt_text": "Alt(ernate) text / Caption"
+        "alt_text": "Alt(ernate) text / Caption",
+        "storage_usage": "You've used {{used}} Mib out of {{total}} MiB of storage. That's equivalent to {{percent}}% of your storage."
     },
     "video_uploader": {
         "time_elapsed": "Time elapsed",
diff --git a/frontend/src/routes/edit/files/+page.svelte b/frontend/src/routes/edit/files/+page.svelte
index f9405c7..8aa7ea2 100644
--- a/frontend/src/routes/edit/files/+page.svelte
+++ b/frontend/src/routes/edit/files/+page.svelte
@@ -12,6 +12,7 @@
 	import { onMount } from 'svelte';
 	import Uploader from './uploader.svelte';
 	import { getLocalization } from '$lib/i18n';
+
 	const { t } = getLocalization();
 
 	export let data: PageData;
@@ -49,6 +50,13 @@
 </script>
 
 <div>
+	<h2 class="text-center text-4xl">
+		{$t('file_dashboard.storage_usage', {
+			used: (data.storage_usage.used / (1024 * 1024)).toFixed(2),
+			total: (data.storage_usage.limit / (1024 * 1024)).toFixed(0),
+			percent: ((data.storage_usage.used / data.storage_usage.limit) * 100).toFixed(0)
+		})}
+	</h2>
 	<Uploader />
 	<div class="grid grid-cols-1 lg:grid-cols-2 p-4 gap-4">
 		{#each images as image}
diff --git a/frontend/src/routes/edit/files/+page.ts b/frontend/src/routes/edit/files/+page.ts
index fae735a..0dcaa6a 100644
--- a/frontend/src/routes/edit/files/+page.ts
+++ b/frontend/src/routes/edit/files/+page.ts
@@ -8,8 +8,12 @@ import type { PrivateImageData } from '$lib/quiz_types';
 
 export const load = (async ({ fetch }) => {
 	const res = await fetch('/api/v1/storage/list');
+	const res2 = await fetch('/api/v1/storage/limit');
 	const json: PrivateImageData[] = await res.json();
+	const storage_usage: { limit: number; limit_reached: boolean; used: number } =
+		await res2.json();
 	return {
-		images: json
+		images: json,
+		storage_usage
 	};
 }) satisfies PageLoad;