Merge branch 'loading' into origin/main

backend/api/impl.go

@@ -69,6 +69,14 @@ func (s *Server) Serve(c *config.Config) error {
 		}
 	})
 
+	// Fake timeout
+	// e.Use(func(next echo.HandlerFunc) echo.HandlerFunc {
+	// 	return func(c echo.Context) error {
+	// 		time.Sleep(1000 * time.Millisecond)
+	// 		return next(c)
+	// 	}
+	// })
+
 	// You can use h for intellisense and get the handlers' names
 	e.Use(s.AuthMiddleware)
 

frontend/src/lib/components/admin/refills.svelte

@@ -150,7 +150,7 @@
 											<td class="h-px w-72">
 												<div class="px-6 py-3">
                                                     <select
-                                                        class="block text-sm dark:text-white/[.8]  break-words p-2 bg-transparent"
+                                                        class="block text-sm dark:text-white/[.8] dark:bg-slate-900 break-words p-2 bg-transparent"
                                                         value={refill.state}
                                                         disabled
                                                     >

frontend/src/lib/components/borne/fs_loading.svelte

@@ -0,0 +1,19 @@
+<div class="fixed inset-0 flex items-center justify-center z-50">
+    <div class="flex flex-col">
+        <h1 class="text-2xl font-bold mb-4 animate-pulse">Chargement du bar</h1>
+        <div class="self-center animate-spin rounded-full h-16 w-16 border-t-4 border-blue-500" />
+    </div>
+</div>
+
+<style>
+	/* Style for the loading animation */
+	@keyframes spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	.animate-spin {
+		animation: spin 1s linear infinite;
+	}
+</style>

frontend/src/lib/components/comptoir/newRefill.svelte

@@ -47,7 +47,7 @@
 
 <div id="popup" class="absolute w-full h-full top-0 left-0 flex justify-center items-center">
 	<div
-		class="relative flex flex-col justify-center items-center gap-4 p-10 h-64 bg-white rounded-xl shadow-xl z-20"
+		class="relative text-black flex flex-col justify-center items-center gap-4 p-10 h-64 bg-white rounded-xl shadow-xl z-20"
 	>
 		<!-- button to close the popup -->
 		<button
@@ -60,7 +60,7 @@
 		</button>
 		<!-- prompt to scan the card -->
 		{#if card.id == ''}
-			<h1 class="text-black text-3xl">Veuillez scanner la carte.</h1>
+			<h1 class="text-3xl">Veuillez scanner la carte.</h1>
 		{:else}
 			<h1 class="text-3xl">Veuillez entrer le montant de la recharge.</h1>
 

frontend/src/routes/admin/accounts/+page.svelte

@@ -434,7 +434,7 @@
 									<td class="h-px w-72">
 										<div class="px-6 py-3">
 											<select
-												class="block text-sm dark:text-white/[.8] break-words p-2 bg-transparent"
+												class="block text-sm dark:text-white/[.8] dark:bg-slate-900 break-words p-2 bg-transparent"
 												value={account.role}
 												on:change={(e) => {
 													// @ts-ignore
@@ -467,7 +467,7 @@
 									<td class="h-px w-72">
 										<div class="px-6 py-3">
 											<select
-												class="block text-sm dark:text-white/[.8] break-words p-2 bg-transparent"
+												class="block text-sm dark:text-white/[.8] dark:bg-slate-900 break-words p-2"
 												value={account.price_role}
 												on:change={(e) => {
 													// @ts-ignore

frontend/src/routes/admin/produits/+page.svelte

@@ -556,7 +556,7 @@
 										<td class="h-px w-72">
 											<div class="px-6 py-3">
 												<select
-													class="block text-sm dark:text-white/[.8]  break-words p-2 bg-transparent"
+													class="block text-sm dark:text-white/[.8] dark:bg-slate-900 break-words p-2 bg-transparent"
 													value={item.state}
 													on:change={(e) => {
 														// @ts-ignore

frontend/src/routes/admin/restore/accounts/+page.svelte

@@ -207,7 +207,7 @@
 									<td class="h-px w-72">
 										<div class="px-6 py-3">
 											<select
-												class="block text-sm dark:text-white/[.8]  break-words p-2 bg-transparent"
+												class="block text-sm dark:text-white/[.8] dark:bg-slate-900 break-words p-2 bg-transparent"
 												value={account.role}
 												disabled
 											>
@@ -223,7 +223,7 @@
 									<td class="h-px w-72">
 										<div class="px-6 py-3">
 											<select
-												class="block text-sm dark:text-white/[.8]  break-words p-2 bg-transparent"
+												class="block text-sm dark:text-white/[.8] dark:bg-slate-900 break-words p-2 bg-transparent"
 												value={account.price_role}
 												disabled
 											>

frontend/src/routes/borne/+page.svelte

@@ -3,10 +3,17 @@
 	import Pin from '$lib/components/borne/pin.svelte';
 	import Error from '$lib/components/error.svelte';
 
-	import { AccountState, type CarouselImage, type CarouselText, type ConnectCardRequest } from '$lib/api';
+	import {
+		AccountState,
+		type CarouselImage,
+		type CarouselText,
+		type ConnectCardRequest
+	} from '$lib/api';
 	import { onMount } from 'svelte';
 	import { authApi, carouselApi } from '$lib/requests/requests';
 	import { goto } from '$app/navigation';
+	import FsLoading from '$lib/components/borne/fs_loading.svelte';
+	import { api } from '$lib/config/config';
 
 	let fakeImages: Array<CarouselImage> = [
 		{
@@ -32,25 +39,39 @@
 		}
 	];
 
+	let display: Boolean = false;
 	let images: Array<CarouselImage> = fakeImages;
 	let texts: Array<CarouselText> = fakeTexts;
 
 	onMount(() => {
 		fetchCarousel();
 	});
 
+	const preloadImage = (src: string) =>
+		new Promise((resolve, reject) => {
+			const image = new Image();
+			image.onload = resolve;
+			image.onerror = reject;
+			image.src = src;
+		});
+
 	function fetchCarousel() {
 		carouselApi()
 			.getCarouselImages()
 			.then((res) => {
 				if (res.data != null) images = res.data;
 				if (images.length === 0) images = fakeImages;
+				Promise.all(images.map((x) => preloadImage(api() + x.image_url))).finally(() => {
+					setTimeout(() => {
+						display = true;
+					}, 500);
+				});
 			});
 
 		carouselApi()
 			.getCarouselTexts()
 			.then((res) => {
-				if (res.data != null)  texts = res.data;
+				if (res.data != null) texts = res.data;
 				if (texts.length === 0) texts = fakeTexts;
 			});
 
@@ -115,4 +136,8 @@
 	<Pin callback={pinCallback} />
 {/if}
 
-<Carousel {images} {texts} />
+{#if display}
+	<Carousel {images} {texts} />
+{:else}
+	<FsLoading />
+{/if}

frontend/src/routes/comptoir/+page.svelte

@@ -7,6 +7,8 @@
 	import { onMount } from 'svelte';
 	import { authApi, carouselApi } from '$lib/requests/requests';
 	import { goto } from '$app/navigation';
+	import FsLoading from '$lib/components/borne/fs_loading.svelte';
+	import { api } from '$lib/config/config';
 
 	let fakeImages: Array<CarouselImage> = [
 		{
@@ -32,25 +34,39 @@
 		}
 	];
 
+	let display: Boolean = false;
 	let images: Array<CarouselImage> = fakeImages;
 	let texts: Array<CarouselText> = fakeTexts;
 
 	onMount(() => {
 		fetchCarousel();
 	});
 
+	const preloadImage = (src: string) =>
+		new Promise((resolve, reject) => {
+			const image = new Image();
+			image.onload = resolve;
+			image.onerror = reject;
+			image.src = src;
+		});
+
 	function fetchCarousel() {
 		carouselApi()
 			.getCarouselImages()
 			.then((res) => {
 				if (res.data != null) images = res.data;
 				if (images.length === 0) images = fakeImages;
+				Promise.all(images.map((x) => preloadImage(api() + x.image_url))).finally(() => {
+					setTimeout(() => {
+						display = true;
+					}, 500);
+				});
 			});
 
 		carouselApi()
 			.getCarouselTexts()
 			.then((res) => {
-				if (res.data != null)  texts = res.data;
+				if (res.data != null) texts = res.data;
 				if (texts.length === 0) texts = fakeTexts;
 			});
 
@@ -88,7 +104,11 @@
 				}
 			)
 			.then((res) => {
-				if (res.data.account?.role === AccountRole.AccountAdmin || AccountRole.AccountSuperAdmin || AccountRole.AccountMember)
+				if (
+					res.data.account?.role === AccountRole.AccountAdmin ||
+					AccountRole.AccountSuperAdmin ||
+					AccountRole.AccountMember
+				)
 					goto('/comptoir');
 				goto('/comptoir/transactions');
 			})
@@ -116,4 +136,8 @@
 	<Pin callback={pinCallback} />
 {/if}
 
-<Carousel {images} {texts} />
+{#if display}
+	<Carousel {images} {texts} />
+{:else}
+	<FsLoading />
+{/if}