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-12-05 16:40:47 +01:00
parent 94f736eb26
commit da133fc91b
1 changed files with 43 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1019,7 +1019,7 @@ function sendMessage(message) {
</div> </div>
{/if} {/if}
<div class="rounded-md border border-gray-700 bg-[#262626] p-2"> <div class="rounded-md border border-gray-700 bg-[#1E222D] p-2">
<div <div
class="flex flex-col sm:flex-row items-center pt-3 sm:pt-1 pb-3 sm:border-b sm:border-gray-600" class="flex flex-col sm:flex-row items-center pt-3 sm:pt-1 pb-3 sm:border-b sm:border-gray-600"
> >
@ -1097,14 +1097,14 @@ function sendMessage(message) {
<div class="sm:ml-auto w-full sm:w-fit pt-5"> <div class="sm:ml-auto w-full sm:w-fit pt-5">
<div class="relative flex flex-col sm:flex-row items-center"> <div class="relative flex flex-col sm:flex-row items-center">
<div <div
class="relative w-full sm:w-fit pl-3 sm:mr-5 mb-4 sm:mb-0 flex-auto text-center bg-[#313131] rounded-md border border-gray-600" class="relative w-full sm:w-fit pl-3 sm:mr-5 mb-4 sm:mb-0 flex-auto text-center bg-[#2A2E39] rounded-md border border-gray-600"
> >
<label class="flex flex-row items-center"> <label class="flex flex-row items-center">
<input <input
id="modal-search" id="modal-search"
type="search" type="search"
class="text-white sm:ml-2 text-[1rem] placeholder-gray-300 border-transparent focus:border-transparent focus:ring-0 flex items-center justify-center w-full px-0 py-1.5 bg-inherit" class="text-white sm:ml-2 text-[1rem] placeholder-gray-300 border-transparent focus:border-transparent focus:ring-0 flex items-center justify-center w-full px-0 py-1.5 bg-inherit"
placeholder="Find by Symbol" placeholder="Search AAPL, SPY,..."
bind:value={filterQuery} bind:value={filterQuery}
on:input={debouncedHandleInput} on:input={debouncedHandleInput}
autocomplete="off" autocomplete="off"
@ -1354,13 +1354,13 @@ function sendMessage(message) {
{#if !["put_call", "sentiment", "execution_estimate", "option_activity_type", "date_expiration", "underlying_type"]?.includes(row?.rule)} {#if !["put_call", "sentiment", "execution_estimate", "option_activity_type", "date_expiration", "underlying_type"]?.includes(row?.rule)}
{#each row?.step as newValue} {#each row?.step as newValue}
<DropdownMenu.Item <DropdownMenu.Item
class="sm:hover:bg-[#27272A]" class="sm:hover:bg-[#2A2E39]"
> >
<button <button
on:click={() => { on:click={() => {
handleChangeValue(newValue); handleChangeValue(newValue);
}} }}
class="block w-full border-b border-gray-600 px-4 py-1.5 text-left text-sm sm:text-[1rem] rounded text-white last:border-0 sm:hover:bg-[#27272A] focus:bg-blue-100 focus:text-gray-900 focus:outline-none" class="block w-full border-b border-gray-600 px-4 py-1.5 text-left text-sm sm:text-[1rem] rounded text-white last:border-0 sm:hover:bg-[#2A2E39] focus:bg-blue-100 focus:text-gray-900 focus:outline-none"
> >
{ruleCondition[row?.rule] !== undefined {ruleCondition[row?.rule] !== undefined
? ruleCondition[row?.rule] ? ruleCondition[row?.rule]
@ -1372,7 +1372,7 @@ function sendMessage(message) {
{:else if ["put_call", "sentiment", "execution_estimate", "option_activity_type", "date_expiration", "underlying_type"]?.includes(row?.rule)} {:else if ["put_call", "sentiment", "execution_estimate", "option_activity_type", "date_expiration", "underlying_type"]?.includes(row?.rule)}
{#each row?.step as item} {#each row?.step as item}
<DropdownMenu.Item <DropdownMenu.Item
class="sm:hover:bg-[#27272A]" class="sm:hover:bg-[#2A2E39]"
> >
<div <div
class="flex items-center" class="flex items-center"
@ -1415,7 +1415,7 @@ function sendMessage(message) {
<div class="w-full grid grid-cols-1 lg:grid-cols-4 gap-y-3 gap-x-3"> <div class="w-full grid grid-cols-1 lg:grid-cols-4 gap-y-3 gap-x-3">
<!--Start Flow Sentiment--> <!--Start Flow Sentiment-->
<div <div
class="flex flex-row items-center flex-wrap w-full px-5 bg-[#262626] shadow-lg rounded-md h-20" class="flex flex-row items-center flex-wrap w-full px-5 bg-[#1E222D] shadow-lg rounded-md h-20"
> >
<div class="flex flex-col items-start"> <div class="flex flex-col items-start">
<span class="font-semibold text-gray-200 text-sm sm:text-[1rem]" <span class="font-semibold text-gray-200 text-sm sm:text-[1rem]"
@ -1436,7 +1436,7 @@ function sendMessage(message) {
<!--End Flow Sentiment--> <!--End Flow Sentiment-->
<!--Start Put/Call--> <!--Start Put/Call-->
<div <div
class="flex flex-row items-center flex-wrap w-full px-5 bg-[#262626] shadow-lg rounded-md h-20" class="flex flex-row items-center flex-wrap w-full px-5 bg-[#1E222D] shadow-lg rounded-md h-20"
> >
<div class="flex flex-col items-start"> <div class="flex flex-col items-start">
<span class="font-semibold text-gray-200 text-sm sm:text-[1rem]" <span class="font-semibold text-gray-200 text-sm sm:text-[1rem]"
@ -1492,7 +1492,7 @@ function sendMessage(message) {
<!--End Put/Call--> <!--End Put/Call-->
<!--Start Call Flow--> <!--Start Call Flow-->
<div <div
class="flex flex-row items-center flex-wrap w-full px-5 bg-[#262626] shadow-lg rounded-md h-20" class="flex flex-row items-center flex-wrap w-full px-5 bg-[#1E222D] shadow-lg rounded-md h-20"
> >
<div class="flex flex-col items-start"> <div class="flex flex-col items-start">
<span class="font-semibold text-gray-200 text-sm sm:text-[1rem]" <span class="font-semibold text-gray-200 text-sm sm:text-[1rem]"
@ -1549,7 +1549,7 @@ function sendMessage(message) {
<!--End Call Flow--> <!--End Call Flow-->
<!--Start Put Flow--> <!--Start Put Flow-->
<div <div
class="flex flex-row items-center flex-wrap w-full px-5 bg-[#262626] shadow-lg rounded-md h-20" class="flex flex-row items-center flex-wrap w-full px-5 bg-[#1E222D] shadow-lg rounded-md h-20"
> >
<div class="flex flex-col items-start"> <div class="flex flex-col items-start">
<span class="font-semibold text-gray-200 text-sm sm:text-[1rem]" <span class="font-semibold text-gray-200 text-sm sm:text-[1rem]"
@ -1622,7 +1622,7 @@ function sendMessage(message) {
<!-- Table headers --> <!-- Table headers -->
<div <div
on:click={() => sortData("time")} on:click={() => sortData("time")}
class="td cursor-pointer select-none bg-[#161618] text-slate-300 font-bold text-xs text-start uppercase" class="td cursor-pointer select-none bg-[#1E222D] text-slate-300 font-bold text-xs text-start uppercase"
> >
Time Time
<svg <svg
@ -1643,7 +1643,7 @@ function sendMessage(message) {
</div> </div>
<div <div
on:click={() => sortData("ticker")} on:click={() => sortData("ticker")}
class="td cursor-pointer select-none bg-[#161618] font-bold text-slate-300 text-xs text-start uppercase" class="td cursor-pointer select-none bg-[#1E222D] font-bold text-slate-300 text-xs text-start uppercase"
> >
Symbol Symbol
<svg <svg
@ -1665,13 +1665,13 @@ function sendMessage(message) {
> >
</div> </div>
<div <div
class="td select-none bg-[#161618] text-slate-300 font-bold text-xs text-start uppercase" class="td select-none bg-[#1E222D] text-slate-300 font-bold text-xs text-start uppercase"
> >
Save Save
</div> </div>
<div <div
on:click={() => sortData("expiry")} on:click={() => sortData("expiry")}
class="td cursor-pointer select-none bg-[#161618] text-slate-300 font-bold text-xs text-start uppercase" class="td cursor-pointer select-none bg-[#1E222D] text-slate-300 font-bold text-xs text-start uppercase"
> >
Expiry Expiry
<svg <svg
@ -1694,7 +1694,7 @@ function sendMessage(message) {
</div> </div>
<div <div
on:click={() => sortData("dte")} on:click={() => sortData("dte")}
class="td cursor-pointer select-none bg-[#161618] text-slate-300 font-bold text-xs text-start uppercase" class="td cursor-pointer select-none bg-[#1E222D] text-slate-300 font-bold text-xs text-start uppercase"
> >
DTE DTE
<svg <svg
@ -1717,7 +1717,7 @@ function sendMessage(message) {
</div> </div>
<div <div
on:click={() => sortData("strike")} on:click={() => sortData("strike")}
class="td cursor-pointer select-none bg-[#161618] text-slate-300 font-bold text-xs text-start uppercase" class="td cursor-pointer select-none bg-[#1E222D] text-slate-300 font-bold text-xs text-start uppercase"
> >
Strike Strike
<svg <svg
@ -1740,7 +1740,7 @@ function sendMessage(message) {
</div> </div>
<div <div
on:click={() => sortData("callPut")} on:click={() => sortData("callPut")}
class="td cursor-pointer select-none bg-[#161618] text-slate-300 font-bold text-xs text-start uppercase" class="td cursor-pointer select-none bg-[#1E222D] text-slate-300 font-bold text-xs text-start uppercase"
> >
C/P C/P
<svg <svg
@ -1763,7 +1763,7 @@ function sendMessage(message) {
</div> </div>
<div <div
on:click={() => sortData("sentiment")} on:click={() => sortData("sentiment")}
class="td cursor-pointer select-none bg-[#161618] text-slate-300 font-bold text-xs text-start uppercase" class="td cursor-pointer select-none bg-[#1E222D] text-slate-300 font-bold text-xs text-start uppercase"
> >
Sent. Sent.
<svg <svg
@ -1786,7 +1786,7 @@ function sendMessage(message) {
</div> </div>
<div <div
on:click={() => sortData("spot")} on:click={() => sortData("spot")}
class="td cursor-pointer select-none bg-[#161618] text-slate-300 font-bold text-xs text-start uppercase" class="td cursor-pointer select-none bg-[#1E222D] text-slate-300 font-bold text-xs text-start uppercase"
> >
Spot Spot
<svg <svg
@ -1809,7 +1809,7 @@ function sendMessage(message) {
</div> </div>
<div <div
on:click={() => sortData("price")} on:click={() => sortData("price")}
class="td cursor-pointer select-none bg-[#161618] text-slate-300 font-bold text-xs text-start uppercase" class="td cursor-pointer select-none bg-[#1E222D] text-slate-300 font-bold text-xs text-start uppercase"
> >
Price Price
<svg <svg
@ -1832,7 +1832,7 @@ function sendMessage(message) {
</div> </div>
<div <div
on:click={() => sortData("premium")} on:click={() => sortData("premium")}
class="td cursor-pointer select-none bg-[#161618] text-slate-300 font-bold text-xs text-start uppercase" class="td cursor-pointer select-none bg-[#1E222D] text-slate-300 font-bold text-xs text-start uppercase"
> >
Prem Prem
<svg <svg
@ -1855,7 +1855,7 @@ function sendMessage(message) {
</div> </div>
<div <div
on:click={() => sortData("type")} on:click={() => sortData("type")}
class="td cursor-pointer select-none bg-[#161618] text-slate-300 font-bold text-xs text-start uppercase" class="td cursor-pointer select-none bg-[#1E222D] text-slate-300 font-bold text-xs text-start uppercase"
> >
Type Type
<svg <svg
@ -1878,7 +1878,7 @@ function sendMessage(message) {
</div> </div>
<div <div
on:click={() => sortData("exec")} on:click={() => sortData("exec")}
class="td cursor-pointer select-none bg-[#161618] text-slate-300 font-bold text-xs text-start uppercase" class="td cursor-pointer select-none bg-[#1E222D] text-slate-300 font-bold text-xs text-start uppercase"
> >
Exec Exec
<svg <svg
@ -1901,7 +1901,7 @@ function sendMessage(message) {
</div> </div>
<div <div
on:click={() => sortData("vol")} on:click={() => sortData("vol")}
class="td cursor-pointer select-none bg-[#161618] text-slate-300 font-bold text-xs text-start uppercase" class="td cursor-pointer select-none bg-[#1E222D] text-slate-300 font-bold text-xs text-start uppercase"
> >
Vol Vol
<svg <svg
@ -1924,7 +1924,7 @@ function sendMessage(message) {
</div> </div>
<div <div
on:click={() => sortData("oi")} on:click={() => sortData("oi")}
class="td cursor-pointer select-none bg-[#161618] text-slate-300 font-bold text-xs text-start uppercase" class="td cursor-pointer select-none bg-[#1E222D] text-slate-300 font-bold text-xs text-start uppercase"
> >
OI OI
<svg <svg
@ -1954,7 +1954,7 @@ function sendMessage(message) {
let:style let:style
{style} {style}
class="tr cursor-pointer {index % 2 === 0 class="tr cursor-pointer {index % 2 === 0
? 'bg-[#27272A]' ? 'bg-[#2A2E39]'
: 'bg-[#09090B]'}" : 'bg-[#09090B]'}"
> >
<!-- Row data --> <!-- Row data -->
@ -2248,8 +2248,8 @@ function sendMessage(message) {
on:click={() => changeRule(row?.rule)} on:click={() => changeRule(row?.rule)}
class="sm:hover:bg-[#333333] cursor-pointer" class="sm:hover:bg-[#333333] cursor-pointer"
> >
<td class="border-b border-[#262626]">{index + 1}</td> <td class="border-b border-[#1E222D]">{index + 1}</td>
<td class="text-start border-b border-[#262626]"> <td class="text-start border-b border-[#1E222D]">
{#if ruleOfList?.find((rule) => rule?.name === row?.rule)} {#if ruleOfList?.find((rule) => rule?.name === row?.rule)}
<svg <svg
class="flex-shrink-0 w-5 h-5 sm:w-6 sm:h-6 text-green-400 inline-block" class="flex-shrink-0 w-5 h-5 sm:w-6 sm:h-6 text-green-400 inline-block"
@ -2264,7 +2264,7 @@ function sendMessage(message) {
> >
{/if} {/if}
</td> </td>
<td class="text-start border-b border-[#262626]" <td class="text-start border-b border-[#1E222D]"
>{row?.label}</td >{row?.label}</td
> >
</tr> </tr>
@ -2318,37 +2318,37 @@ function sendMessage(message) {
> >
<tbody> <tbody>
<!-- row 1 --> <!-- row 1 -->
<tr class="border-b border-slate-700 odd:bg-[#27272A]"> <tr class="border-b border-slate-700 odd:bg-[#2A2E39]">
<td class="font-semibold">Premium</td> <td class="font-semibold">Premium</td>
<td class="">{optionPremium}</td> <td class="">{optionPremium}</td>
<td class="font-semibold">C/P</td> <td class="font-semibold">C/P</td>
<td class="">{optionContract}</td> <td class="">{optionContract}</td>
</tr> </tr>
<tr class="border-b border-slate-700 odd:bg-[#27272A]"> <tr class="border-b border-slate-700 odd:bg-[#2A2E39]">
<td class="font-semibold">Expiry</td> <td class="font-semibold">Expiry</td>
<td class="">{optionExpiry}</td> <td class="">{optionExpiry}</td>
<td class="font-semibold">Type</td> <td class="font-semibold">Type</td>
<td class="">{optionType}</td> <td class="">{optionType}</td>
</tr> </tr>
<tr class="border-b border-slate-700 odd:bg-[#27272A]"> <tr class="border-b border-slate-700 odd:bg-[#2A2E39]">
<td class="font-semibold">Strike</td> <td class="font-semibold">Strike</td>
<td class="">${optionStrike}</td> <td class="">${optionStrike}</td>
<td class="font-semibold">Volume</td> <td class="font-semibold">Volume</td>
<td class="">{optionVolume}</td> <td class="">{optionVolume}</td>
</tr> </tr>
<tr class="border-b border-slate-700 odd:bg-[#27272A]"> <tr class="border-b border-slate-700 odd:bg-[#2A2E39]">
<td class="font-semibold">Spot</td> <td class="font-semibold">Spot</td>
<td class="">${optionSpot}</td> <td class="">${optionSpot}</td>
<td class="font-semibold">Open Interest</td> <td class="font-semibold">Open Interest</td>
<td class="">{optionOpenInterest}</td> <td class="">{optionOpenInterest}</td>
</tr> </tr>
<tr class="border-b border-slate-700 odd:bg-[#27272A]"> <tr class="border-b border-slate-700 odd:bg-[#2A2E39]">
<td class="font-semibold">Price</td> <td class="font-semibold">Price</td>
<td class="">${optionPrice}</td> <td class="">${optionPrice}</td>
<td class="font-semibold">Sentiment</td> <td class="font-semibold">Sentiment</td>
<td class="">{optionSentiment}</td> <td class="">{optionSentiment}</td>
</tr> </tr>
<tr class="border-b border-slate-700 odd:bg-[#27272A]"> <tr class="border-b border-slate-700 odd:bg-[#2A2E39]">
<td class="font-semibold">Execution Estimate</td> <td class="font-semibold">Execution Estimate</td>
<td class="">{optionexecution_estimate}</td> <td class="">{optionexecution_estimate}</td>
<td class="font-semibold"></td> <td class="font-semibold"></td>
@ -2389,43 +2389,43 @@ function sendMessage(message) {
<table class="table table-sm table-compact w-full mt-5 mb-10 text-white"> <table class="table table-sm table-compact w-full mt-5 mb-10 text-white">
<tbody> <tbody>
<tr class="border-b border-slate-700 odd:bg-[#27272A]"> <tr class="border-b border-slate-700 odd:bg-[#2A2E39]">
<td class="font-semibold">Premium</td> <td class="font-semibold">Premium</td>
<td class="">{optionPremium}</td> <td class="">{optionPremium}</td>
<td class="font-semibold">C/P</td> <td class="font-semibold">C/P</td>
<td class="">{optionContract}</td> <td class="">{optionContract}</td>
</tr> </tr>
<tr class="border-b border-slate-700 odd:bg-[#27272A]"> <tr class="border-b border-slate-700 odd:bg-[#2A2E39]">
<td class="font-semibold">Expiry</td> <td class="font-semibold">Expiry</td>
<td class="">{optionExpiry}</td> <td class="">{optionExpiry}</td>
<td class="font-semibold">Type</td> <td class="font-semibold">Type</td>
<td class="">{optionType}</td> <td class="">{optionType}</td>
</tr> </tr>
<tr class="border-b border-slate-700 odd:bg-[#27272A]"> <tr class="border-b border-slate-700 odd:bg-[#2A2E39]">
<td class="font-semibold">Strike</td> <td class="font-semibold">Strike</td>
<td class="">${optionStrike}</td> <td class="">${optionStrike}</td>
<td class="font-semibold">Volume</td> <td class="font-semibold">Volume</td>
<td class="">{optionVolume}</td> <td class="">{optionVolume}</td>
</tr> </tr>
<tr class="border-b border-slate-700 odd:bg-[#27272A]"> <tr class="border-b border-slate-700 odd:bg-[#2A2E39]">
<td class="font-semibold">Spot</td> <td class="font-semibold">Spot</td>
<td class="">${optionSpot}</td> <td class="">${optionSpot}</td>
<td class="font-semibold">Open Interest</td> <td class="font-semibold">Open Interest</td>
<td class="">{optionOpenInterest}</td> <td class="">{optionOpenInterest}</td>
</tr> </tr>
<tr class="border-b border-slate-700 odd:bg-[#27272A]"> <tr class="border-b border-slate-700 odd:bg-[#2A2E39]">
<td class="font-semibold">Price</td> <td class="font-semibold">Price</td>
<td class="">${optionPrice}</td> <td class="">${optionPrice}</td>
<td class="font-semibold">Sentiment</td> <td class="font-semibold">Sentiment</td>
<td class="">{optionSentiment}</td> <td class="">{optionSentiment}</td>
</tr> </tr>
<tr class="odd:bg-[#27272A]"> <tr class="odd:bg-[#2A2E39]">
<td class="font-semibold">Trade Count</td> <td class="font-semibold">Trade Count</td>
<td class="">{optionTradeCount}</td> <td class="">{optionTradeCount}</td>
<td class="font-semibold">Exchange</td> <td class="font-semibold">Exchange</td>
<td class="">{optionExchange}</td> <td class="">{optionExchange}</td>
</tr> </tr>
<tr class="border-b border-slate-700 odd:bg-[#27272A]"> <tr class="border-b border-slate-700 odd:bg-[#2A2E39]">
<td class="font-semibold">Execution Est.</td> <td class="font-semibold">Execution Est.</td>
<td class="">{optionexecution_estimate}</td> <td class="">{optionexecution_estimate}</td>
<td class="font-semibold"></td> <td class="font-semibold"></td>
@ -2486,7 +2486,7 @@ function sendMessage(message) {
} }
.tr.even { .tr.even {
background-color: #27272a; background-color: #2a2e39;
} }
.tr.odd { .tr.odd {