From 85542250642838487a80a53085fa32313d5051ce Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Tue, 8 Oct 2024 13:50:30 +0200
Subject: [PATCH] add bid ask price

---
 src/lib/components/ETFProfileCard.svelte |  9 ++++++++-
 src/lib/components/TickerInfoCard.svelte | 12 ++++++++++--
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/ETFProfileCard.svelte b/src/lib/components/ETFProfileCard.svelte
index 8127389e..b0bb745e 100644
--- a/src/lib/components/ETFProfileCard.svelte
+++ b/src/lib/components/ETFProfileCard.svelte
@@ -92,7 +92,12 @@ let showFullText = false;
             <table class="table table-sm table-compact">
               <tbody>
               
-     
+                <tr class="text-white border-b border-[#27272A]">
+                  <td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Bid</td>
+                  <td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{data?.getStockQuote?.bid}</td>
+                  <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Ask</td>
+                  <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B]">{data?.getStockQuote?.ask}</td>
+                </tr>
                 <tr class="text-white border-b border-[#27272A]">
                   <td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Provider</td>
                   <td on:click={() => goto(`/etf/etf-providers/${provider}`)} class="text-center sm:text-end text-blue-400 lg:hover:text-white cursor-pointer bg-[#000] lg:bg-[#09090B]">{formatETFName(provider)}</td>
@@ -117,12 +122,14 @@ let showFullText = false;
                   <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap ">Avg. Vol</td>
                   <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] whitespace-nowrap ">{abbreviateNumber(avgVolume)}</td>
                 </tr>
+                <!--
                 <tr class="text-white border-b border-[#27272A]">
                   <td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Open</td>
                   <td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{data?.getStockQuote?.open?.toFixed(2)}</td>
                   <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap ">Prev. Close</td>
                   <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] whitespace-nowrap ">{data?.getStockQuote?.previousClose?.toFixed(2)}</td>
                 </tr>
+              -->
                 <tr class="text-white border-b border-[#27272A]">
                   <td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">EPS (ttm)</td>
                   <td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{data?.getStockQuote?.eps?.toFixed(2)}</td>
diff --git a/src/lib/components/TickerInfoCard.svelte b/src/lib/components/TickerInfoCard.svelte
index a0b1ce24..e4b28f1a 100644
--- a/src/lib/components/TickerInfoCard.svelte
+++ b/src/lib/components/TickerInfoCard.svelte
@@ -123,6 +123,12 @@ $: {
                 <td class="text-start sm:text-end bg-[#000] lg:border-b lg:border-[#27272A] lg:bg-[#09090B] whitespace-normal font-semibold">{country}</td>
               </tr>
               -->
+              <tr class="text-white border-b border-[#27272A]">
+                <td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Bid</td>
+                <td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{data?.getStockQuote?.bid}</td>
+                <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Ask</td>
+                <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B]">{data?.getStockQuote?.ask}</td>
+              </tr>
               <tr class="text-white border-b border-[#27272A]">
                 <td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Mkt Cap</td>
                 <td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{abbreviateNumber(data?.getStockQuote?.marketCap,true)}</td>
@@ -155,14 +161,16 @@ $: {
                 <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap ">Prev. Close</td>
                 <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] whitespace-nowrap ">{data?.getStockQuote?.previousClose?.toFixed(2)}</td>
               </tr>
+              <!--
               {#if $screenWidth > 640}
               <tr class="text-white border-b border-[#27272A]">
-                <td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">Day's Range</td>
+                <td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">1D-Range</td>
                 <td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{data?.getStockQuote?.dayLow?.toFixed(2)} - {data?.getStockQuote?.dayHigh?.toFixed(2)}</td>
-                <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap ">52-Week Range</td>
+                <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap ">1Y-Range</td>
                 <td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B] whitespace-nowrap ">{data?.getStockQuote?.yearLow?.toFixed(2)} - {data?.getStockQuote?.yearHigh?.toFixed(2)}</td>
               </tr>
               {/if}
+              -->
               <tr class="text-white border-b border-[#27272A]">
                 <td class="text-start bg-[#000] lg:bg-[#09090B] text-white font-semibold whitespace-nowrap">EPS (ttm)</td>
                 <td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{data?.getStockQuote?.eps}</td>