Merge remote-tracking branch 'origin/main' into main

README.md

@@ -1,7 +1,7 @@
 <p align="center">
   <p align="center">
     <a href="https://github.com/yyewolf/bar/releases/latest"><img alt="Release" src="https://img.shields.io/github/release/yyewolf/bar.svg?style=flat-square"></a>
-    <a href="/LICENSE.md"><img alt="Software License" src="https://img.shields.io/badge/license-GPLv3-brightgreen.svg?style=flat-square"></a>
+    <a href="/LICENSE"><img alt="Software License" src="https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square"></a>
     <a href="https://codeclimate.com/github/yyewolf/bar/test_coverage"><img src="https://api.codeclimate.com/v1/badges/d9fcf617937d6026221f/test_coverage" /></a>
     <a href="https://codeclimate.com/github/yyewolf/bar/maintainability"><img src="https://api.codeclimate.com/v1/badges/d9fcf617937d6026221f/maintainability" /></a>
     <a href="https://goreportcard.com/report/github.com/yyewolf/bar/backend"><img alt="Go Report Card" src="https://goreportcard.com/badge/github.com/yyewolf/bar/backend"></a>

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,58 @@
+
+<div class="fixed inset-0 flex items-center justify-center z-50">
+    <div class="flex flex-col roll-in-bottom">
+        <h1 class="text-2xl font-bold mb-4">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>
+
+
+	/* ----------------------------------------------
+ * Generated by Animista on 2023-8-12 0:34:45
+ * Licensed under FreeBSD License.
+ * See http://animista.net/license for more info. 
+ * w: http://animista.net, t: @cssanimista
+ * ---------------------------------------------- */
+
+	@-webkit-keyframes roll-in-bottom {
+		0% {
+			-webkit-transform: translateY(800px) rotate(540deg);
+			transform: translateY(800px) rotate(540deg);
+			opacity: 0;
+		}
+		100% {
+			-webkit-transform: translateY(0) rotate(0deg);
+			transform: translateY(0) rotate(0deg);
+			opacity: 1;
+		}
+	}
+	@keyframes roll-in-bottom {
+		0% {
+			-webkit-transform: translateY(800px) rotate(540deg);
+			transform: translateY(800px) rotate(540deg);
+			opacity: 0;
+		}
+		100% {
+			-webkit-transform: translateY(0) rotate(0deg);
+			transform: translateY(0) rotate(0deg);
+			opacity: 1;
+		}
+	}
+
+	.roll-in-bottom {
+		-webkit-animation: roll-in-bottom 1s ease-out both;
+		animation: roll-in-bottom 1s ease-out both;
+	}
+	/* 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/+layout.svelte

@@ -19,7 +19,7 @@
 
 <!-- svelte-ignore a11y-invalid-attribute -->
 
-<div class="h-screen dark:bg-slate-950">
+<div class="min-h-screen dark:bg-slate-950">
 	<header
 		class="flex flex-wrap sm:justify-start sm:flex-nowrap z-50 w-full bg-blue-600 dark:bg-blue-900 text-sm py-3 sm:py-0"
 	>

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

@@ -43,6 +43,15 @@
 			.postAccounts(newAccount, { withCredentials: true })
 			.then((res) => {
 				accounts = [...accounts, res.data];
+				newAccount = {
+					first_name: '',
+					last_name: '',
+					email_address: '',
+					card_id: '',
+					balance: 0,
+					role: 'student',
+					price_role: 'ceten'
+				};
 			});
 	}
 
@@ -434,7 +443,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 +476,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

@@ -31,6 +31,8 @@
 	let maxPage = 0;
 	let itemsPerPage = 10;
 
+	let rebounceTimeout: number | null = null;
+
 	onMount(() => {
 		categoriesApi()
 			.getCategories({ withCredentials: true })
@@ -306,7 +308,7 @@
 					<div class="relative flex flex-row">
 						<input
 							type="number"
-							class="block text-sm dark:text-white/[.8] w-16  break-words p-2 bg-transparent"
+							class="block text-sm dark:text-white/[.8] w-16 break-words p-2 bg-transparent"
 							value={selectedItem?.promotion ?? 0}
 							on:input={(e) => {
 								// @ts-ignore
@@ -486,14 +488,13 @@
 												required
 												aria-describedby="text-error"
 												bind:value={editItemPriceRole}
-												on:change={()=>{
+												on:change={() => {
 													// Remove the value of elems with id "price"
 													let elems = document.querySelectorAll('[id=price]');
 													elems.forEach((elem) => {
 														// @ts-ignore
-														elem.value = "";
+														elem.value = '';
 													});
-
 												}}
 											>
 												<option value="normal">Prix de base</option>
@@ -515,7 +516,7 @@
 											<div class="px-6 py-3">
 												<input
 													type="text"
-													class="block text-sm dark:text-white/[.8]  break-words p-2 bg-transparent"
+													class="block text-sm dark:text-white/[.8] break-words p-2 bg-transparent"
 													value={item.name}
 													on:input={(e) => {
 														// @ts-ignore
@@ -556,7 +557,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
@@ -573,7 +574,7 @@
 											<div class="px-6 py-3">
 												<input
 													type="number"
-													class="block text-sm dark:text-white/[.8]  break-words p-2 bg-transparent"
+													class="block text-sm dark:text-white/[.8] break-words p-2 bg-transparent"
 													value={item.amount_left}
 													on:input={(e) => {
 														// @ts-ignore
@@ -587,7 +588,7 @@
 											<div class="px-6 py-3">
 												<input
 													type="number"
-													class="block text-sm dark:text-white/[.8]  break-words p-2 bg-transparent"
+													class="block text-sm dark:text-white/[.8] break-words p-2 bg-transparent"
 													value={item.buy_limit}
 													on:input={(e) => {
 														// @ts-ignore
@@ -622,6 +623,16 @@
 														prices[editItemPriceRole] = price;
 
 														editItem(item.id, { prices: prices });
+
+														// Remove the value of elems with id "price" with rebounce timeout
+														if (rebounceTimeout) clearTimeout(rebounceTimeout);
+														rebounceTimeout = setTimeout(() => {
+															let elems = document.querySelectorAll('[id=price]');
+															elems.forEach((elem) => {
+																// @ts-ignore
+																elem.value = '';
+															});
+														}, 1000);
 													}}
 												/>
 											</div>

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,18 @@
 	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';
+	import { fly } from 'svelte/transition';
 
 	let fakeImages: Array<CarouselImage> = [
 		{
@@ -32,25 +40,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;
+					}, 1500);
+				});
 			});
 
 		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 +137,10 @@
 	<Pin callback={pinCallback} />
 {/if}
 
-<Carousel {images} {texts} />
+{#if display}
+	<div in:fly={{ x: -1000, duration: 1000 }}>
+		<Carousel {images} {texts} />
+	</div>
+{:else}
+	<FsLoading />
+{/if}