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"> <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 { abbreviateNumber, formatETFName } from '$lib/utils';
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition';
@ -92,12 +92,12 @@ let showFullText = false;
<table class="table table-sm table-compact"> <table class="table table-sm table-compact">
<tbody> <tbody>
<tr class="text-white border-b border-[#27272A]"> <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-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] 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>
<tr class="text-white border-b border-[#27272A]"> <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 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> <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"> <script lang="ts">
import {stockTicker, screenWidth} from '$lib/store'; import {stockTicker, screenWidth, wsBidPrice, wsAskPrice} from '$lib/store';
import { abbreviateNumber } from '$lib/utils'; import { abbreviateNumber } from '$lib/utils';
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition';
@ -125,9 +125,9 @@ $: {
--> -->
<tr class="text-white border-b border-[#27272A]"> <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-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] 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>
<tr class="text-white border-b border-[#27272A]"> <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-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 currentPrice = writable(<number>0);
export const currentPortfolioPrice = writable(<number>0); export const currentPortfolioPrice = writable(<number>0);
export const realtimePrice = 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 priceIncrease = writable(<boolean>false);
export const isCrosshairMoveActive = writable(<boolean>true); export const isCrosshairMoveActive = writable(<boolean>true);

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

@ -1,6 +1,6 @@
<script lang='ts'> <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 { onMount, onDestroy, afterUpdate} from "svelte";
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
@ -238,7 +238,9 @@ async function toggleUserWatchlist(watchListId: string) {
//console.log('Received message:', data); //console.log('Received message:', data);
try { 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('Received message:', $realtimePrice);
@ -329,7 +331,8 @@ async function toggleUserWatchlist(watchListId: string) {
await websocketRealtimeData() await websocketRealtimeData()
console.log('connecting again') console.log('connecting again')
} }
$wsAskPrice = null;
$wsBidPrice = null;
} }
}); });
@ -348,6 +351,8 @@ async function toggleUserWatchlist(watchListId: string) {
$currentPortfolioPrice = null; $currentPortfolioPrice = null;
$currentPrice = null; $currentPrice = null;
$priceIncrease = null; $priceIncrease = null;
$wsAskPrice = null;
$wsBidPrice = null;
$traded = false $traded = false
}); });

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

@ -1,5 +1,5 @@
<script lang="ts"> <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 { onMount, onDestroy, afterUpdate } from "svelte";
import { goto } from "$app/navigation"; import { goto } from "$app/navigation";
@ -193,9 +193,11 @@ async function toggleUserWatchlist(watchListId: string) {
const data = event.data; const data = event.data;
//console.log('Received message:', data); //console.log('Received message:', data);
try { 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('Received message:', $realtimePrice);
console.log(JSON.parse(data))
if ($realtimePrice > previousRealtimePrice) { if ($realtimePrice > previousRealtimePrice) {
$priceIncrease = true; $priceIncrease = true;
previousRealtimePrice = $realtimePrice; previousRealtimePrice = $realtimePrice;
@ -253,6 +255,8 @@ async function toggleUserWatchlist(watchListId: string) {
await websocketRealtimeData(); await websocketRealtimeData();
console.log("connecting again"); console.log("connecting again");
} }
$wsAskPrice = null;
$wsBidPrice = null;
} }
}); });
@ -268,6 +272,8 @@ async function toggleUserWatchlist(watchListId: string) {
$currentPortfolioPrice = null; $currentPortfolioPrice = null;
$currentPrice = null; $currentPrice = null;
$priceIncrease = null; $priceIncrease = null;
$wsAskPrice = null;
$wsBidPrice = null;
//$traded = false //$traded = false
}); });