AmineTMIRI/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add ws bid/ask price

Browse Source
This commit is contained in:
MuslemRahimi 2024-10-08 15:59:18 +02:00
parent 8554225064
commit ccd020ad6b
5 changed files with 29 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/lib/components/ETFProfileCard.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts">
import {etfTicker, screenWidth, displayCompanyName} from '$lib/store';
import {etfTicker, wsBidPrice, wsAskPrice, screenWidth, displayCompanyName} from '$lib/store';
import { abbreviateNumber, formatETFName } from '$lib/utils';
import { fade } from 'svelte/transition';
@ -92,12 +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">Bid</td>
<td class="text-center sm:text-end bg-[#000] lg:bg-[#09090B]">{$wsBidPrice !== (0 || null) ? $wsBidPrice : 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]">{$wsAskPrice !== (0 || null) ? $wsAskPrice : 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>

6
src/lib/components/TickerInfoCard.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts">
import {stockTicker, screenWidth} from '$lib/store';
import {stockTicker, screenWidth, wsBidPrice, wsAskPrice} from '$lib/store';
import { abbreviateNumber } from '$lib/utils';
import { fade } from 'svelte/transition';
@ -125,9 +125,9 @@ $: {
-->
<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-center sm:text-end bg-[#000] lg:bg-[#09090B]">{$wsBidPrice !== (0 || null) ? $wsBidPrice : 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>
<td class="text-start sm:text-end bg-[#000] lg:bg-[#09090B]">{$wsAskPrice !== (0 || null) ? $wsAskPrice : 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>

2
src/lib/store.ts
View File

@ -56,6 +56,8 @@ export const displayCompanyName = writable(<string>"");
export const currentPrice = writable(<number>0);
export const currentPortfolioPrice = writable(<number>0);
export const realtimePrice = writable(<number>0);
export const wsBidPrice = writable(<number>0);
export const wsAskPrice = writable(<number>0);
export const priceIncrease = writable(<boolean>false);
export const isCrosshairMoveActive = writable(<boolean>true);

11
src/routes/etf/[tickerID]/+layout.svelte
View File

@ -1,6 +1,6 @@
<script lang='ts'>
import {searchBarData, globalForm, screenWidth, openPriceAlert, currentPortfolioPrice, realtimePrice, isCrosshairMoveActive, currentPrice, priceIncrease, displayCompanyName, traded, etfTicker, assetType, isOpen } from '$lib/store';
import {searchBarData, globalForm, screenWidth, openPriceAlert, currentPortfolioPrice, wsBidPrice, wsAskPrice, realtimePrice, isCrosshairMoveActive, currentPrice, priceIncrease, displayCompanyName, traded, etfTicker, assetType, isOpen } from '$lib/store';
import { onMount, onDestroy, afterUpdate} from "svelte";
import { goto } from '$app/navigation';
@ -238,7 +238,9 @@ async function toggleUserWatchlist(watchListId: string) {
//console.log('Received message:', data);
try {
$realtimePrice = typeof JSON.parse(data)?.bp !== 'undefined' ? JSON.parse(data)?.bp : null;
$realtimePrice = typeof JSON.parse(data)?.lp !== "undefined" ? JSON.parse(data)?.lp : null;
$wsBidPrice = typeof JSON.parse(data)?.bp !== "undefined" ? JSON.parse(data)?.bp : null;
$wsAskPrice = typeof JSON.parse(data)?.ap !== "undefined" ? JSON.parse(data)?.ap : null;
//console.log('Received message:', $realtimePrice);
@ -329,7 +331,8 @@ async function toggleUserWatchlist(watchListId: string) {
await websocketRealtimeData()
console.log('connecting again')
}
$wsAskPrice = null;
$wsBidPrice = null;
}
});
@ -348,6 +351,8 @@ async function toggleUserWatchlist(watchListId: string) {
$currentPortfolioPrice = null;
$currentPrice = null;
$priceIncrease = null;
$wsAskPrice = null;
$wsBidPrice = null;
$traded = false
});

12
src/routes/stocks/[tickerID]/+layout.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts">
import { searchBarData, globalForm, scoreComponent, screenWidth, openPriceAlert, currentPortfolioPrice, realtimePrice, isCrosshairMoveActive, currentPrice, priceIncrease, displayCompanyName, stockTicker, isOpen } from "$lib/store";
import { wsBidPrice, wsAskPrice, searchBarData, globalForm, scoreComponent, screenWidth, openPriceAlert, currentPortfolioPrice, realtimePrice, isCrosshairMoveActive, currentPrice, priceIncrease, displayCompanyName, stockTicker, isOpen } from "$lib/store";
import { onMount, onDestroy, afterUpdate } from "svelte";
import { goto } from "$app/navigation";
@ -193,9 +193,11 @@ async function toggleUserWatchlist(watchListId: string) {
const data = event.data;
//console.log('Received message:', data);
try {
$realtimePrice = typeof JSON.parse(data)?.bp !== "undefined" ? JSON.parse(data)?.bp : null;
$realtimePrice = typeof JSON.parse(data)?.lp !== "undefined" ? JSON.parse(data)?.lp : null;
$wsBidPrice = typeof JSON.parse(data)?.bp !== "undefined" ? JSON.parse(data)?.bp : null;
$wsAskPrice = typeof JSON.parse(data)?.ap !== "undefined" ? JSON.parse(data)?.ap : null;
//console.log('Received message:', $realtimePrice);
console.log(JSON.parse(data))
if ($realtimePrice > previousRealtimePrice) {
$priceIncrease = true;
previousRealtimePrice = $realtimePrice;
@ -253,6 +255,8 @@ async function toggleUserWatchlist(watchListId: string) {
await websocketRealtimeData();
console.log("connecting again");
}
$wsAskPrice = null;
$wsBidPrice = null;
}
});
@ -268,6 +272,8 @@ async function toggleUserWatchlist(watchListId: string) {
$currentPortfolioPrice = null;
$currentPrice = null;
$priceIncrease = null;
$wsAskPrice = null;
$wsBidPrice = null;
//$traded = false
});