Implement basic functionalities

acicts · Nov 21, 2022 · f083f58 · f083f58
1 parent a03f4a4
commit f083f58
Show file tree

Hide file tree

Showing 9 changed files with 1,107 additions and 2,457 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -26,6 +26,8 @@
   },
   "dependencies": {
     "@beyonk/svelte-mapbox": "^8.1.4",
+    "@mapbox/mapbox-sdk": "^0.14.0",
+    "mapbox": "^1.0.0-beta10",
     "mapbox-gl": "^2.10.0",
     "svelte-icons-pack": "^2.0.0",
     "svelte-spa-router": "^3.3.0"

diff --git a/src/app.css b/src/app.css
@@ -16,3 +16,12 @@
 .footer_ul_li {
 	@apply w-6/12 font-semibold text-lg text-white md:mr-[40px] md:text-xl md:font-medium hover:opacity-40 transition-opacity;
 }
+
+.mapboxgl-canvas {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
diff --git a/src/lib/home/Search.svelte b/src/lib/home/Search.svelte
@@ -11,7 +11,7 @@
 	<span class="text-white">Search</span>
 	<input
 		class="w-[65%] px-[25px] py-[10px] bg-[#E7E7E7] text-[#6C6C6C] rounded-full"
-		placeholder="Ex. hydrocortisone / pharmacy name"
+		placeholder="Enter the checmical name"
 		bind:value={searchValue}
 	/>
 	<select
@@ -39,7 +39,7 @@
 	</div>
 	<input
 		class="ml-[5%] w-[90%] px-[25px] py-[7px] md:py-[10px] bg-[#E7E7E7] text-[#6C6C6C] rounded-full"
-		placeholder="Ex. hydrocortisone / pharmacy name"
+		placeholder="Enter the chemical name"
 		bind:value={searchValue}
 	/>
 </div>
diff --git a/src/lib/home/TableRow.svelte b/src/lib/home/TableRow.svelte
@@ -1,20 +1,27 @@
 <script lang="ts">
-	import { link } from 'svelte-spa-router';
+	import { link, push } from 'svelte-spa-router';
 	export let name: string;
 	export let mrp: number;
 	export let totalStock: number;
 	export let index: number;
+	export let chemicalName: number;
 	export let id;
+	console.log(id);
 </script>
 
 <tr
-	class={`${
+	class="{`${
 		index % 2 == 0 ? 'bg-[#CEE8B8]' : 'bg-white'
-	} rounded-full text-xs md:text-base cursor-pointer`}
+	} rounded-full text-xs md:text-base cursor-pointer w-full`}"
+	on:click="{() => {
+		push(`/medicine/${chemicalName}?name=${name}`);
+	}}"
 >
-	<td class="w-6/12 py-[15px] p-[20px] rounded-l-lg md:rounded-l-full"
-		><a href={`/medicine/${id}`} use:link>{name}</a></td
+	<td class="w-1/4 py-[15px] p-[20px] rounded-l-lg md:rounded-l-full"
+		><a href="{`/medicine/${chemicalName}?name=${name}`}" use:link>{name}</a
+		></td
 	>
+	<td class="w-1/4 py-[15px] p-[20px]">{chemicalName}</td>
 	<td class="w-1/4 py-[15px] p-[20px]">{mrp}</td>
 	<td class="w-1/4 py-[15px] p-[20px] rounded-r-lg md:rounded-r-full"
 		>{#if totalStock == 0}

diff --git a/src/lib/medicine/TableRow.svelte b/src/lib/medicine/TableRow.svelte
@@ -1,23 +1,27 @@
 <script lang="ts">
-	import { link } from 'svelte-spa-router';
+	import { link, push } from 'svelte-spa-router';
 	export let name: string;
-	export let address: string;
+	export let contactNo: string | number;
 	export let mrp: number;
 	export let stock: number;
 	export let index: number;
 	export let id;
 </script>
 
 <tr
-	class={`${
+	class="{`${
 		index % 2 == 0 ? 'bg-[#CEE8B8]' : 'bg-white'
-	} rounded-full text-xs md:text-base cursor-pointer`}
+	} rounded-full text-xs md:text-base cursor-pointer `}"
+	on:click="{() => {
+		push(`/pharmacy/${id}`);
+	}}"
 >
-	<td class="w-[40%] py-[15px] p-[20px] rounded-l-lg md:rounded-l-full"
-		><a href={`/pharmacy/${index}`} use:link>{name}</a></td
+	<td
+		class="w-[40%] py-[15px] p-[20px] rounded-l-lg md:rounded-l-full align-middle"
+		><a href="{`/pharmacy/${id}`}" use:link>{name}</a></td
 	>
-	<td class="w-[40%] py-[15px] p-[20px]">{address}</td>
-	<td class="w-[10%] py-[15px] p-[20px]">{mrp}</td>
+	<td class="w-[40%] py-[15px] p-[20px]  align-middle">{contactNo}</td>
+	<td class="w-[10%] py-[15px] p-[20px] align-middle">{mrp}</td>
 	<td class="w-[10%] py-[15px] p-[20px] rounded-r-lg md:rounded-r-full"
 		>{#if stock == 0}
 			Out of stock

diff --git a/src/routes/Home.svelte b/src/routes/Home.svelte
@@ -1,26 +1,48 @@
-<script>
+<script lang="ts">
 	import TableRow from '../lib/home/TableRow.svelte';
 	import Search from '../lib/home/Search.svelte';
 	import Layout from '../lib/Layout.svelte';
 	import { medicine as newMed } from '../store';
 	import TagSection from '../lib/home/TagSection.svelte';
 	import { districts } from '../data';
+	import { API_ENDPOINT } from '../lib/env.js';
+	import { onDestroy } from 'svelte';
 
 	let searchValue = '';
 	let selectValue = districts[0];
 
-	$: medicines = $newMed.filter(
-		(i) =>
-			i.name.toLowerCase().includes(searchValue.toLowerCase()) &&
-			(selectValue === 'All in Sri Lanka' ||
-				i.stocks.find(
-					(st) =>
-						st.District.toLowerCase() === selectValue.toLowerCase()
-				))
-	);
+	const fetchData = async (searchValue, selectValue) => {
+		let url = `${API_ENDPOINT}/user/medicine?med=${searchValue}${
+			selectValue !== 'All in Sri Lanka' ? `&district=${selectValue}` : ''
+		}`;
+		const response = await fetch(url);
+		const data = await response.json();
+
+		return data.medicines.map((i) => {
+			return {
+				name: i.name,
+				totalStock: i.stock,
+				mrp: i.pricePerUnit,
+				id: i._id,
+				chemicalName: i.chemicalName,
+			};
+		});
+	};
+
+	$: promise = fetchData(searchValue, selectValue);
+
+	// $: medicines = $newMed.filter(
+	// 	(i) =>
+	// 		i.name.toLowerCase().includes(searchValue.toLowerCase()) &&
+	// 		(selectValue === 'All in Sri Lanka' ||
+	// 			i.stocks.find(
+	// 				(st) =>
+	// 					st.District.toLowerCase() === selectValue.toLowerCase()
+	// 			))
+	// );
 </script>
 
-<Layout isHome={true}>
+<Layout isHome="{true}">
 	<section
 		slot="hero"
 		class="flex items-center justify-between flex-col w-full min-h-[30vh] md:min-h-[28vh] absolute bottom-2 left-[50%] translate-x-[-50%]"
@@ -31,7 +53,7 @@
 			>
 				<div
 					class="w-[1.7em] h-[1.7em] rounded-full mr-[5px] bg-white"
-				/>
+				></div>
 				<p class="font-bold text-2xl md:text-4xl">Pharmacy App</p>
 			</div>
 			<p class="font-light text-sm text-white w-full text-center">
@@ -46,84 +68,93 @@
 	</section>
 	<section slot="body" class="p-[20px]">
 		{#if searchValue.trim().length > 0}
-			{#if $newMed.length === 0}
-				<p
-					class="text-[#5E9486] w-full text-center my-[10px] font-bold text-xl"
-				>
-					Loading...
-				</p>
-			{:else if medicines.length == 0}
-				<p
-					class="text-[#5E9486] w-full text-center my-[10px] font-bold text-xl"
-				>
-					Couldn't find the searched medicine!
-				</p>
-			{:else}
-				<table class="border-collapse w-full">
-					<thead class="text-[#2F8D76] text-sm md:text-base">
-						<tr class="">
-							<th class="w-6/12 text-left pl-[20px]">Item</th>
-							<th class="w-1/4 text-left pl-[20px]">MRP</th>
-							<th class="w-1/4 text-left pl-[20px]"
-								>Availability status</th
-							>
-						</tr>
-					</thead>
-					<tbody>
-						{#each medicines as medicine, index (medicine.id)}
-							<TableRow {...medicine} {index} />
-						{/each}
-					</tbody>
-				</table>
-			{/if}
-			<TagSection
-				title="Similar Searches"
-				tags={[
-					'Value 1',
-					'Value 2',
-					'Value 3',
-					'Value 4',
-					'Value 5',
-					'Value 6',
-					'Value 7',
-				]}
-			/>
+			{#await promise}
+				<p>Loading...</p>
+			{:then medicines}
+				{#if medicines.length == 0}
+					<p
+						class="text-[#5E9486] w-full text-center my-[10px] font-bold text-xl"
+					>
+						Couldn't find the searched medicine!
+					</p>
+				{:else}
+					<div class="w-full overflow-scroll hidden_scroll_bar">
+						<table class="border-collapse w-full min-w-[500px]">
+							<thead class="text-[#2F8D76] text-sm md:text-base">
+								<tr class="">
+									<th class="w-1/4 text-left pl-[20px]"
+										>Item</th
+									>
+									<th class="w-1/4 text-left pl-[20px]"
+										>Chemical Name</th
+									>
+									<th class="w-1/4 text-left pl-[20px]"
+										>Avg.Price</th
+									>
+									<th class="w-1/4 text-left pl-[20px]"
+										>Availability status</th
+									>
+								</tr>
+							</thead>
+							<tbody>
+								{#each medicines as medicine, index (medicine.id)}
+									<TableRow {...medicine} index="{index}" />
+								{/each}
+							</tbody>
+						</table>
+					</div>
+				{/if}
+				<TagSection
+					title="Similar Searches"
+					tags="{[
+						'Value 1',
+						'Value 2',
+						'Value 3',
+						'Value 4',
+						'Value 5',
+						'Value 6',
+						'Value 7',
+					]}"
+				/>
+			{:catch error}
+				<p style="color: red">{error.message}</p>
+			{/await}
 		{:else}
 			<TagSection
 				title="Empty Stocks"
-				tags={[
+				tags="{[
 					'Value 1',
 					'Value 2',
 					'Value 3',
 					'Value 4',
 					'Value 5',
 					'Value 6',
 					'Value 7',
-				]}
+				]}"
 			/>
 			<TagSection
 				title="Least Available Stocks"
-				tags={[
+				tags="{[
 					'Value 1',
 					'Value 2',
 					'Value 3',
 					'Value 4',
 					'Value 5',
 					'Value 6',
 					'Value 7',
-				]}
+				]}"
 			/>
 			<TagSection
 				title="Most Searched"
-				tags={[
+				tags="{[
 					'Value 1',
 					'Value 2',
 					'Value 3',
 					'Value 4',
 					'Value 5',
 					'Value 6',
 					'Value 7',
-				]}
+				]}"
 			/>
 		{/if}
 	</section>