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

ui fixes

Browse Source
This commit is contained in:
MuslemRahimi 2024-07-11 15:53:50 +02:00
parent de4ea9005a
commit bfd152f40c
2 changed files with 204 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/routes/+layout.svelte
View File

@ -361,7 +361,7 @@ $: {
<!--<ViewTransition />-->
<!--Start Navbar-->
<div id="navbar" class="navbar {$screenWidth < 640 && hideHeader ? 'invisible -mt-20' : ''} border-b border-[#0F0F0F] w-screen sticky top-0 z-40 bg-[#202020]">
<div id="navbar" class="navbar {$screenWidth < 640 && hideHeader ? 'invisible -mt-20' : ''} border-b border-[#0F0F0F] w-screen fixed top-0 e z-40 bg-[#202020]">
<div class="w-full max-w-[1600px] m-auto">
<div class="flex flex-row items-center w-full xl:px-2">

207
src/routes/options-flow/+page.svelte
View File

@ -1,6 +1,6 @@
<script lang='ts'>
import { goto } from '$app/navigation';
import { userRegion, numberOfUnreadNotification, etfTicker, stockTicker, isOpen } from '$lib/store';
import { screenWidth, userRegion, numberOfUnreadNotification, etfTicker, stockTicker, isOpen } from '$lib/store';
import notifySound from '$lib/audio/options-flow-reader.mp3';
import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
import { abbreviateNumber } from '$lib/utils';
@ -49,6 +49,23 @@
let mode = $isOpen === true ? true : false;
let showMore = false;
let optionSymbol;
let optionDescription;
let optionPremium;
let optionExpiry;
let optionContract;
let optionType;
let optionStrike;
let optionVolume;
let optionSpot;
let optionOpenInterest;
let optionSentiment;
let optionPrice;
let optionTradeCount;
let optionExecutionEstimate;
let optionExchange;
function toggleMode()
{
if ($isOpen) {
@ -64,6 +81,29 @@
}
function handleViewData(optionData) {
//optionStart = optionData['Start Date'] === null ? 'n/a' : new Date(optionData['Start Date'])?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' });
optionSymbol = optionData?.option_symbol;
optionDescription = optionData?.description;
optionPremium = abbreviateNumber(optionData?.cost_basis,true);
optionExpiry = reformatDate(optionData?.date_expiration);
optionContract = optionData?.put_call;
optionType = optionData?.type;
optionStrike = optionData?.strike_price;
optionVolume = new Intl.NumberFormat("en", {minimumFractionDigits: 0, maximumFractionDigits: 0}).format(optionData?.volume);
optionSpot = optionData?.underlying_price;
optionOpenInterest = new Intl.NumberFormat("en", {minimumFractionDigits: 0, maximumFractionDigits: 0}).format(optionData?.open_interest);
optionSentiment = optionData?.sentiment;
optionPrice = optionData?.price;
optionTradeCount = optionData?.tradeCount;
optionExecutionEstimate = optionData?.executionEstimate;
optionExchange = optionData?.exchange;
const openPopup = $screenWidth < 640 ? document.getElementById("optionDetailsMobileModal") : document.getElementById("optionDetailsDesktopModal");
openPopup?.dispatchEvent(new MouseEvent('click'))
}
async function websocketRealtimeData() {
try {
@ -185,6 +225,7 @@
async function assetSelector(symbol, assetType)
{
if(assetType === 'etf')
{
etfTicker.update(value => symbol);
@ -804,13 +845,13 @@ $: {
<tbody>
{#each optionList as item,index}
<!-- row -->
<tr on:click={() => assetSelector(item?.ticker, item?.assetType)} class="w-full odd:bg-[#202020] cursor-pointer {index+1 === optionList?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
<tr on:click={() => handleViewData(item)} class="w-full odd:bg-[#202020] cursor-pointer {index+1 === optionList?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
<td class="text-white pb-3 text-xs sm:text-sm text-start">
{item?.time}
</td>
<th class="{index % 2 ? 'bg-[#0F0F0F]' : 'bg-[#202020]'} text-blue-400 text-start font-normal">
<th on:click|stopPropagation={() => assetSelector(item?.ticker, item?.assetType)} class="{index % 2 ? 'bg-[#0F0F0F]' : 'bg-[#202020]'} text-blue-400 text-start font-normal">
{item?.ticker}
</th>
@ -972,4 +1013,162 @@ $: {
</div>
</dialog>
</dialog>
<!--Start Options Detail Desktop Modal-->
<!-- Put this part before </body> tag -->
<input type="checkbox" id="optionDetailsDesktopModal" class="modal-toggle" />
<label for="optionDetailsDesktopModal" class="hidden sm:modal modal-bottom sm:modal-middle cursor-pointer">
<label for="optionDetailsDesktopModal" class="cursor-pointer modal-backdrop"></label>
<!-- svelte-ignore a11y-label-has-associated-control -->
<label class="modal-box w-full relative bg-[#202020] h-auto max-h-[900px] overflow-y-scroll">
<label for="optionDetailsDesktopModal" class="cursor-pointer absolute right-5 top-2 bg-[#202020] text-2xl text-white">
✕
</label>
<p class="text-gray-200 mt-10">
<span class="text-white text-xl font-semibold">Order Details:</span>
<br>
{optionSymbol}
</p>
<p class="py-4 text-gray-200 bg-[#202020] w-full">
<span class="font-semibold text-white">Description:</span>
<br>
{optionDescription}
</p>
<table class="table table-sm table-compact bg-[#202020] w-full mt-5 mb-10 text-white">
<tbody>
<!-- row 1 -->
<tr class="border-b border-slate-700 odd:bg-[#202020]">
<td class="font-semibold">Premium</td>
<td class="">{optionPremium}</td>
<td class="font-semibold">C/P</td>
<td class="">{optionContract}</td>
</tr>
<tr class="border-b border-slate-700 odd:bg-[#202020]">
<td class="font-semibold">Expiry</td>
<td class="">{optionExpiry}</td>
<td class="font-semibold">Type</td>
<td class="">{optionType}</td>
</tr>
<tr class="border-b border-slate-700 odd:bg-[#202020]">
<td class="font-semibold">Strike</td>
<td class="">${optionStrike}</td>
<td class="font-semibold">Volume</td>
<td class="">{optionVolume}</td>
</tr>
<tr class="border-b border-slate-700 odd:bg-[#202020]">
<td class="font-semibold">Spot</td>
<td class="">${optionSpot}</td>
<td class="font-semibold">Open Interest</td>
<td class="">{optionOpenInterest}</td>
</tr>
<tr class="border-b border-slate-700 odd:bg-[#202020]">
<td class="font-semibold">Price</td>
<td class="">${optionPrice}</td>
<td class="font-semibold">Sentiment</td>
<td class="">{optionSentiment}</td>
</tr>
<tr class="border-b border-slate-700 odd:bg-[#202020]">
<td class="font-semibold">Trade Count</td>
<td class="">{optionTradeCount}</td>
<td class="font-semibold">Exchange</td>
<td class="">{optionExchange}</td>
</tr>
</tbody>
</table>
</label>
</label>
<!--End Options Detial Desktop Modal-->
<!--Start Options Detail Modal-->
<div class="sm:hidden drawer drawer-end z-40 overflow-hidden w-screen">
<input id="optionDetailsMobileModal" type="checkbox" class="drawer-toggle"/>
<div class="drawer-side overflow-hidden">
<div class="bg-[#000] min-h-screen w-screen pb-20 overflow-hidden">
<label for="optionDetailsMobileModal" class="absolute left-6 top-6">
<svg class="w-6 h-6 inline-block mb-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#fff" d="M9.125 21.1L.7 12.7q-.15-.15-.213-.325T.425 12q0-.2.063-.375T.7 11.3l8.425-8.425q.35-.35.875-.35t.9.375q.375.375.375.875t-.375.875L3.55 12l7.35 7.35q.35.35.35.863t-.375.887q-.375.375-.875.375t-.875-.375Z"/></svg>
</label>
<div class="w-full overflow-hidden overflow-y-scroll p-2">
<p class="text-xl font-semibold text-white mt-16 p-3">
<span class="text-xl font-semibold">Order Details:</span>
<br>
{optionSymbol}
</p>
<p class="py-4 text-gray-200 w-full p-3">
<span class="font-semibold text-white">Description:</span>
{optionDescription}
</p>
<table class="table table-sm table-compact w-full mt-5 mb-10 text-white">
<tbody>
<!-- row 1 -->
<tr class="border-b border-slate-700 odd:bg-[#202020]">
<td class="font-semibold">Premium</td>
<td class="">{optionPremium}</td>
<td class="font-semibold">C/P</td>
<td class="">{optionContract}</td>
</tr>
<tr class="border-b border-slate-700 odd:bg-[#202020]">
<td class="font-semibold">Expiry</td>
<td class="">{optionExpiry}</td>
<td class="font-semibold">Type</td>
<td class="">{optionType}</td>
</tr>
<tr class="border-b border-slate-700 odd:bg-[#202020]">
<td class="font-semibold">Strike</td>
<td class="">${optionStrike}</td>
<td class="font-semibold">Volume</td>
<td class="">{optionVolume}</td>
</tr>
<tr class="border-b border-slate-700 odd:bg-[#202020]">
<td class="font-semibold">Spot</td>
<td class="">${optionSpot}</td>
<td class="font-semibold">Open Interest</td>
<td class="">{optionOpenInterest}</td>
</tr>
<tr class="border-b border-slate-700 odd:bg-[#202020]">
<td class="font-semibold">Price</td>
<td class="">${optionPrice}</td>
<td class="font-semibold">Sentiment</td>
<td class="">{optionSentiment}</td>
</tr>
<tr class="odd:bg-[#202020]">
<td class="font-semibold">Trade Count</td>
<td class="">{optionTradeCount}</td>
<td class="font-semibold">Exchange</td>
<td class="">{optionExchange}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!--End Options Detail Modal-->