Create a dialog for auction end

dhzdhd · Nov 9, 2023 · 99010c1 · 99010c1
1 parent 68f7faf
commit 99010c1
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 14 deletions.
diff --git a/backend/src/index.ts b/backend/src/index.ts
@@ -64,7 +64,10 @@ module.exports = {
             .service("api::product.product")
             .loadProducts(params.id);
 
+          let bid = await strapi.service("api::bid.bid").loadBids(params.id);
+
           io.emit("loadProducts", data);
+          io.emit("loadBids", bid);
         } catch (error) {
           console.log(error);
         }

diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
@@ -63,6 +63,7 @@
 		align-items: center
 		padding: 1rem 2rem
 		color: var(--secondary-color)
+		z-index: 10
 
 		.title
 			display: flex
@@ -121,6 +122,7 @@
 		align-items: center
 		padding: 20px
 		background-color: vars.$accent
+		z-index: 10
 
 		.social-link
 			margin: 0 10px

diff --git a/frontend/src/routes/auth/+page.svelte b/frontend/src/routes/auth/+page.svelte
@@ -15,7 +15,9 @@
 
 	export let form: ActionData;
 
-	const updateUser = () => {
+	$: updateUser(form);
+
+	const updateUser = (form: ActionData) => {
 		if (browser) {
 			window.localStorage.setItem('user', form?.id);
 		}
@@ -44,8 +46,10 @@
 			use:enhance={() => {
 				return async ({ result, update }) => {
 					// await applyAction(result);
+					console.log(result);
+
 					update();
-					updateUser();
+					updateUser(form);
 				};
 			}}
 		>

diff --git a/frontend/src/routes/home/[id=int]/+page.svelte b/frontend/src/routes/home/[id=int]/+page.svelte
@@ -50,12 +50,16 @@
 		socket = socketIOClient(CMS_URL, { query: { token: data.token } });
 		socket.emit('loadProducts', { id: product.id });
 		socket.on('loadProducts', (data: any) => {
+			console.log('products loaded');
+
 			console.log(data);
 
 			updateProduct(data);
 		});
 
 		socket.on('loadBids', (data: any) => {
+			console.log('bids loaded');
+
 			if (browser) {
 				const user = window.localStorage.getItem('user');
 				isWinner = Number(data.user) === Number(user);
@@ -91,20 +95,24 @@
 		<h4>Product Details</h4>
 		<span>{product.description}</span>
 	</div>
-	<input bind:value={currentBid} type="number" class="input" />
-	<Button id="bid-btn" text="Make Bid" func={makeBid} />
-
-	{#if !product.available}
-		<h1>Auction ended!</h1>
+	{#if product.available}
+		<input bind:value={currentBid} type="number" class="input" />
+		<Button id="bid-btn" text="Make Bid" func={makeBid} />
 	{/if}
 
-	{#if isWinner && !product.available}
-		<h1>You won the auction!</h1>
-		<Button
-			id="payment-btn"
-			text="Proceed to payment"
-			func={() => goto(`/home/payment?id=${product.id}`)}
-		/>
+	{#if !product.available}
+		<div class="dialog">
+			{#if isWinner}
+				<h1>You won the auction!</h1>
+				<Button
+					id="payment-btn"
+					text="Proceed to payment"
+					func={() => goto(`/home/payment?id=${product.id}`)}
+				/>
+			{:else}
+				<h1>Auction ended!</h1>
+			{/if}
+		</div>
 	{/if}
 </section>
 
@@ -142,4 +150,16 @@ section
         border: none
         color: white
 
+    .dialog
+        position: fixed
+        background-color: vars.$primary
+        box-shadow: 0rem 0rem 100vh 100vh black
+        display: flex
+        flex-direction: column
+        gap: 1rem
+        padding: 5rem
+        border-radius: 2rem
+        top: 40vh
+        z-index: 0
+
 </style>