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

replace loading animation && update options 0dte flow page

Browse Source
This commit is contained in:
MuslemRahimi 2024-07-11 20:19:09 +02:00
parent ba8feb92d5
commit 5813979821
23 changed files with 375 additions and 558 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

485
src/lib/components/SimpleGraph.svelte
View File

@ -1,485 +0,0 @@
<script lang='ts'>
export let data;
export let displaySection = 'overview';
</script>
<!-- Start Graph -->
{#if displaySection === 'overview'}
{#if output !== null}
<div class = 'graph'>
<Chart {...options} width={width} height={height} autoSize={true} ref={(ref) => chart = ref} on:crosshairMove={handleCrosshairMove} >
{#if displayData === '3M'}
<LineSeries data={filteredData.threeMonthsAgo}
color={colorChange}
lineWidth={1.5}
priceScaleId="left"
crosshairMarkerVisible={false}
ref={handleSeriesReference}
priceLineVisible= {false}
>
<PriceLine
price={filteredData.threeMonthsAgo[0].value}
lineWidth = {1.5}
color="#d4d9d9"
/>
<!--
{#if rawClassifierModel !== null}
<PriceLine
title="Prediction price"
price={rawClassifierModel[1][0].value}
lineWidth = {1.5}
color="#661AE6"
priceScaleId="left"
/>
{/if}
-->
<!--Classifier Model Prediction-->
<!--
{#if rawClassifierModel !==null}
<PriceLine
price={(filteredData.threeMonthsAgo[filteredData.threeMonthsAgo.length-1].value * (1+priceChangeRangeValue/100)) }
lineWidth = {1.5}
color="#367E18"
title="Price rise"/>
{/if}
-->
</LineSeries>
{:else if displayData === '6M'}
<LineSeries data={filteredData.sixMonthsAgo}
color={colorChange}
lineWidth={1.5}
priceScaleId="right"
crosshairMarkerVisible={false}
ref={handleSeriesReference}
priceLineVisible= {false}
>
<PriceLine
price={filteredData.sixMonthsAgo[0].value}
lineWidth = {1.5}
color="#d4d9d9"
/>
</LineSeries>
{:else if displayData === '1y'}
<LineSeries data={filteredData.oneYearAgo}
color={colorChange}
lineWidth={1.5}
priceScaleId="right"
crosshairMarkerVisible={false}
ref={handleSeriesReference}
priceLineVisible= {false}
>
<PriceLine
price={filteredData.oneYearAgo[0].value}
lineWidth = {1.5}
color="#d4d9d9"
/>
</LineSeries>
{:else if displayData === '3y'}
<LineSeries data={filteredData.threeYearsAgo}
color={colorChange}
lineWidth={1.5}
priceScaleId="right"
crosshairMarkerVisible={false}
ref={handleSeriesReference}
priceLineVisible= {false}
>
<PriceLine
price={filteredData.threeYearsAgo[0].value}
lineWidth = {1.5}
color="#d4d9d9"
/>
</LineSeries>
{/if}
<!--
<HistogramSeries
data={volumeData}
priceScaleId=""
priceFormat={{type: 'volume'}}
scaleMargins={{top: 0.8, bottom: 0}}/>
-->
{#if displayBBANDS}
<LineSeries data={bbup}
color="#00F13F"
lineWidth={1.5}
crosshairMarkerVisible={false}
priceLineVisible= {false}
/>
<LineSeries data={bbmiddle}
color="#00F13F"
lineWidth={1.5}
crosshairMarkerVisible={false}
priceLineVisible= {false}
/>
<LineSeries data={bbdown}
color="#00F13F"
lineWidth={1.5}
crosshairMarkerVisible={false}
priceLineVisible= {false}
/>
{/if}
{#if displaySMA}
<LineSeries data={SMA}
color="#039dfc"
lineWidth={1.8}
crosshairMarkerVisible={false}
priceLineVisible= {false}
/>
{/if}
{#if displayEMA}
<LineSeries data={EMA}
color="#fc035a"
lineWidth={1.8}
crosshairMarkerVisible={false}
priceLineVisible= {false}
/>
{/if}
{#if rawRegressionModel !==null && displayTrainData && displayData === '3M'}
<LineSeries data={linearRegressionTrainData.threeMonthsAgo}
color="#9D00A0"
lineWidth={4.5}
priceScaleId="right"
crosshairMarkerVisible={false}
priceLineVisible= {false}
/>
{/if}
{#if rawRegressionModel !==null && displayTrainData && displayData === '6M'}
<LineSeries data={linearRegressionTrainData.sixMonthsAgo}
color="#9D00A0"
lineWidth={3.5}
priceScaleId="right"
crosshairMarkerVisible={false}
priceLineVisible= {false}
lineStyle = {1}
/>
{/if}
{#if rawRegressionModel !==null && displayTrainData && displayData === '1y'}
<LineSeries data={linearRegressionTrainData.oneYearAgo}
color="#9D00A0"
lineWidth={3.5}
priceScaleId="right"
crosshairMarkerVisible={false}
priceLineVisible= {false}
lineStyle = {1}
/>
{/if}
{#if rawRegressionModel !==null && displayTrainData && displayData === '3y'}
<LineSeries data={linearRegressionTrainData.threeYearsAgo}
color="#9D00A0"
lineWidth={3.5}
priceScaleId="right"
crosshairMarkerVisible={false}
priceLineVisible= {false}
lineStyle = {1}
/>
{/if}
<!--Test Data-->
{#if rawRegressionModel !==null && displayTestData && displayData === '3M'}
<LineSeries data={linearRegressionTestData.threeMonthsAgo}
color="#A09D00"
lineWidth={3.5}
priceScaleId="right"
crosshairMarkerVisible={false}
priceLineVisible= {false}
lineStyle = {1}
/>
{/if}
{#if rawRegressionModel !==null && displayTestData && displayData === '6M'}
<LineSeries data={linearRegressionTestData.sixMonthsAgo}
color="#A09D00"
lineWidth={3.5}
priceScaleId="right"
crosshairMarkerVisible={false}
priceLineVisible= {false}
lineStyle = {1}
/>
{/if}
{#if rawRegressionModel !==null && displayTestData && displayData === '1y'}
<LineSeries data={linearRegressionTestData.oneYearAgo}
color="#A09D00"
lineWidth={3.5}
priceScaleId="right"
crosshairMarkerVisible={false}
priceLineVisible= {false}
lineStyle = {1}
/>
{/if}
{#if rawRegressionModel !==null && displayTestData && displayData === '3y'}
<LineSeries data={linearRegressionTestData.threeYearsAgo}
color="#A09D00"
lineWidth={3.5}
priceScaleId="right"
crosshairMarkerVisible={false}
priceLineVisible= {false}
lineStyle = {1}
/>
{/if}
<!--Pred Data-->
{#if rawRegressionModel !==null && displayTestData && displayData === '3M'}
<LineSeries data={linearRegressionPredData.threeMonthsAgo}
color="#4287f5"
lineWidth={3.5}
priceScaleId="right"
crosshairMarkerVisible={false}
ref={handleSeriesPredReference}
priceLineVisible= {false}
lineStyle = {1}
/>
{/if}
{#if rawRegressionModel !==null && displayTestData && displayData === '6M'}
<LineSeries data={linearRegressionPredData.sixMonthsAgo}
color="#4287f5"
lineWidth={3.5}
priceScaleId="right"
crosshairMarkerVisible={false}
ref={handleSeriesPredReference}
priceLineVisible= {false}
lineStyle = {1}
/>
{/if}
{#if rawRegressionModel !==null && displayTestData && displayData === '1y'}
<LineSeries data={linearRegressionPredData.oneYearAgo}
color="#4287f5"
lineWidth={3.5}
priceScaleId="right"
crosshairMarkerVisible={false}
ref={handleSeriesPredReference}
priceLineVisible= {false}
lineStyle = {1}
/>
{/if}
{#if rawRegressionModel !==null && displayTestData && displayData === '3y'}
<LineSeries data={linearRegressionPredData.threeYearsAgo}
color="#4287f5"
lineWidth={3.5}
priceScaleId="right"
crosshairMarkerVisible={false}
ref={handleSeriesPredReference}
priceLineVisible= {false}
lineStyle = {1}
/>
{/if}
<!-- <TimeScale
fixRightEdge={fixRight}
fixLeftEdge={fixLeft}
on:visibleLogicalRangeChange={handleChartLogicalRangeChange}
ref={(ref) => timescale = ref } shiftVisibleRangeOnNewBar={false}/> -->
<!--Site crashes when i add timescale: Need to fix the bug ASAP -->
</Chart>
</div>
{:else}
<!-- else output not loaded yet-->
<div class="graphLoading" style="width: {width}px; height: 400px;">
<div class="flex justify-center items-center m-auto mt-10 py-20">
<div class="loader">Loading...</div>
</div>
</div>
{/if}
{/if}
<!--End Graph-->
<style>
.graph {
display:block;
position: relative;
max-width: 500px;
max-height: 600px;
overflow: hidden;
margin-top: auto;
margin-right: auto;
margin-left: auto;
border-width: thin;
border-color: #1A1A27;
background-color: #1A1A27;
bottom:20px;
}
.graphLoading {
display:block;
position: relative;
max-width: 500px;
max-height: 600px;
overflow: hidden;
margin-top: auto;
margin-right: auto;
margin-left: auto;
border-width: thin;
border-color: #1A1A27;
background-color: #1A1A27;
bottom:20px;
}
.loader,
.loader:before,
.loader:after {
border-radius: 50%;
width: 2.5em;
height: 2.5em;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation: load7 0.8s infinite ease-in-out;
animation: load7 0.8s infinite ease-in-out;
}
.loader {
color: #ffffff;
font-size: 10px;
margin: 80px auto;
position: relative;
text-indent: -9999em;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader:before,
.loader:after {
content: '';
position: absolute;
top: 0;
}
.loader:before {
left: -3.5em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader:after {
left: 3.5em;
}
@-webkit-keyframes load7 {
0%,
80%,
100% {
box-shadow: 0 2.5em 0 -1.3em;
}
40% {
box-shadow: 0 2.5em 0 0;
}
}
@keyframes load7 {
0%,
80%,
100% {
box-shadow: 0 2.5em 0 -1.3em;
}
40% {
box-shadow: 0 2.5em 0 0;
}
}
.chart-container {
width: 100%;
max-width: 800px;
height: 450px;
text-align: center;
}
canvas {
width: 100%;
height: 100%;
max-width: 800px;
max-height: 450px;
}
:root {
--date-picker-background: #1A1A27;
--date-picker-foreground: #f7f7f7;
}
.pulse {
position: relative;
animation: pulse-animation 1s forwards cubic-bezier(0.5, 0, 0.5, 1);
}
@keyframes pulse-animation {
0% {
transform: scale(0.9);
opacity: 1;
}
100% {
transform: scale(0.9);
opacity: 0;
}
}
.info-card {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: fade-in 0.5s ease-out, slide-up var(--animation-delay) ease-out;
animation-fill-mode: both;
justify-content: center;
align-items: center;
z-index: 1000;
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slide-up {
from {
transform: translate(-50%, 100%);
}
to {
transform: translate(-50%, -50%);
}
}
/* Hide the scrollbar when the info card is open */
.no-scroll {
overflow: hidden;
}
@font-face {
font-family: "pixel";
src: url("$lib/fonts/pixel.ttf");
}
.pixel {
font-family: "pixel";
font-size: 0.8em;
}
</style>

8
src/lib/components/WatchListCard.svelte
View File

@ -543,8 +543,12 @@ if(watchList && isLoaded)
{:else} {:else}
<div class="flex justify-center items-center m-auto w-full max-w-6xl"> <div class="flex justify-center items-center h-80">
<div class="loader">Loading...</div> <div class="relative">
<label class="bg-[#202020] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
<span class="loading loading-spinner loading-md"></span>
</label>
</div>
</div> </div>

4
src/routes/+layout.svelte
View File

@ -11,7 +11,7 @@
import Footer from '$lib/components/Footer.svelte'; import Footer from '$lib/components/Footer.svelte';
import Searchbar from '$lib/components/Searchbar.svelte'; import Searchbar from '$lib/components/Searchbar.svelte';
import NotificationBell from '$lib/components/NotificationBell.svelte'; import NotificationBell from '$lib/components/NotificationBell.svelte';
import PullToRefresh from '$lib/components/PullToRefresh.svelte'; //import PullToRefresh from '$lib/components/PullToRefresh.svelte';
//import DiscountBanner from '$lib/components/DiscountBanner.svelte'; //import DiscountBanner from '$lib/components/DiscountBanner.svelte';
@ -981,9 +981,11 @@ class="fixed 2xl:block top-0 left-0 xl:left-auto w-56 sm:{collapse ? 'w-20' : 'w
<Cookie /> <Cookie />
{/if} {/if}
<!--
{#if $screenWidth < 640} {#if $screenWidth < 640}
<PullToRefresh /> <PullToRefresh />
{/if} {/if}
-->
<!-- <!--
{#key data?.currentPath} {#key data?.currentPath}

8
src/routes/community/post/[postId]/+page.svelte
View File

@ -856,9 +856,13 @@ function updateVote(postVote) {
{#if !loadTextEditor} {#if !loadTextEditor}
<div class="flex items-center m-auto relative -top-7 h-[50px] w-[100px]"> <div class="flex justify-center items-center h-80">
<div class="loader">Loading...</div> <div class="relative">
<label class="bg-[#202020] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
<span class="loading loading-spinner loading-md"></span>
</label>
</div> </div>
</div>
{:else} {:else}
<!-- Start-Comment form --> <!-- Start-Comment form -->
<div class="w-full max-w-6xl mt-5"> <div class="w-full max-w-6xl mt-5">

10
src/routes/crypto/[tickerID]/congress-trading/+page.svelte
View File

@ -443,9 +443,13 @@ isLoaded = true;
{:else} {:else}
<div class="flex justify-center items-center m-auto relative w-[100px]"> <div class="flex justify-center items-center h-80">
<div class="loader">Loading...</div> <div class="relative">
</div> <label class="bg-[#202020] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
<span class="loading loading-spinner loading-md"></span>
</label>
</div>
</div>
{/if} {/if}

10
src/routes/etf/[tickerID]/congress-trading/+page.svelte
View File

@ -441,9 +441,13 @@ isLoaded = true;
{:else} {:else}
<div class="flex justify-center items-center m-auto relative w-[100px]"> <div class="flex justify-center items-center h-80">
<div class="loader">Loading...</div> <div class="relative">
</div> <label class="bg-[#202020] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
<span class="loading loading-spinner loading-md"></span>
</label>
</div>
</div>
{/if} {/if}

10
src/routes/heatmaps/+page.svelte
View File

@ -429,9 +429,13 @@ $: {
</div> </div>
</section> </section>
{:else} {:else}
<div class="flex justify-center items-center m-auto relative w-[100px]"> <div class="flex justify-center items-center h-80">
<div class="loader">Loading...</div> <div class="relative">
</div> <label class="bg-[#202020] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
<span class="loading loading-spinner loading-md"></span>
</label>
</div>
</div>
{/if} {/if}

10
src/routes/hedge-funds/+page.svelte
View File

@ -258,9 +258,13 @@ async function handleInput(event) {
</div> </div>
</section> </section>
{:else} {:else}
<div class="flex justify-center items-center m-auto relative w-[100px]"> <div class="flex justify-center items-center h-80">
<div class="loader">Loading...</div> <div class="relative">
</div> <label class="bg-[#202020] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
<span class="loading loading-spinner loading-md"></span>
</label>
</div>
</div>
{/if} {/if}

8
src/routes/ipos/+page.svelte
View File

@ -225,9 +225,13 @@
</div> </div>
{:else} {:else}
<div class="flex justify-center items-center m-auto relative w-[100px]"> <div class="flex justify-center items-center h-80">
<div class="loader">Loading...</div> <div class="relative">
<label class="bg-[#202020] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
<span class="loading loading-spinner loading-md"></span>
</label>
</div> </div>
</div>
{/if} {/if}

8
src/routes/ipos/[slug]/+page.svelte
View File

@ -299,9 +299,13 @@ $: {
</div> </div>
{:else} {:else}
<div class="flex justify-center items-center m-auto relative w-[100px]"> <div class="flex justify-center items-center h-80">
<div class="loader">Loading...</div> <div class="relative">
<label class="bg-[#202020] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
<span class="loading loading-spinner loading-md"></span>
</label>
</div> </div>
</div>
{/if} {/if}

10
src/routes/leaderboard/+page.svelte
View File

@ -508,9 +508,13 @@ async function getLeaderboard() {
{:else} {:else}
<div class="w-full"> <div class="flex justify-center items-center h-80">
<div class="loader">Loading...</div> <div class="relative">
</div> <label class="bg-[#202020] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
<span class="loading loading-spinner loading-md"></span>
</label>
</div>
</div>
{/if} {/if}

10
src/routes/notifications/+page.svelte
View File

@ -233,9 +233,13 @@ onMount(async () => {
{:else} {:else}
<div class="bg-[#202020] flex justify-center items-center m-auto w-full max-w-6xl"> <div class="flex justify-center items-center h-80">
<div class="loader">Loading...</div> <div class="relative">
</div> <label class="bg-[#202020] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
<span class="loading loading-spinner loading-md"></span>
</label>
</div>
</div>
{/if} {/if}

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

@ -933,9 +933,13 @@ $: {
{:else} {:else}
<div class="flex justify-center items-center m-auto w-full max-w-6xl"> <div class="flex justify-center items-center h-80">
<div class="loader">Loading...</div> <div class="relative">
</div> <label class="bg-[#202020] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
<span class="loading loading-spinner loading-md"></span>
</label>
</div>
</div>
{/if} {/if}
</div> </div>
@ -1093,10 +1097,10 @@ $: {
<td class="">{optionSentiment}</td> <td class="">{optionSentiment}</td>
</tr> </tr>
<tr class="border-b border-slate-700 odd:bg-[#202020]"> <tr class="border-b border-slate-700 odd:bg-[#202020]">
<td class="font-semibold">Trade Count</td> <td class="font-semibold">Execution Estimate</td>
<td class="">{optionTradeCount}</td> <td class="">{optionExecutionEstimate}</td>
<td class="font-semibold">Exchange</td> <td class="font-semibold"></td>
<td class="">{optionExchange}</td> <td class=""></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -1172,6 +1176,12 @@ $: {
<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-[#202020]">
<td class="font-semibold">Execution Est.</td>
<td class="">{optionExecutionEstimate}</td>
<td class="font-semibold"></td>
<td class=""></td>
</tr>
</tbody> </tbody>
</table> </table>

240
src/routes/options-zero-dte/+page.svelte
View File

@ -1,6 +1,6 @@
<script lang='ts'> <script lang='ts'>
import { goto } from '$app/navigation'; 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 notifySound from '$lib/audio/options-flow-reader.mp3';
import UpgradeToPro from '$lib/components/UpgradeToPro.svelte'; import UpgradeToPro from '$lib/components/UpgradeToPro.svelte';
import { abbreviateNumber } from '$lib/utils'; import { abbreviateNumber } from '$lib/utils';
@ -37,6 +37,23 @@
let highestPremiumTicker; let highestPremiumTicker;
let highestOpenInterestTicker; let highestOpenInterestTicker;
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;
let audio; let audio;
let muted = true; let muted = true;
@ -53,7 +70,30 @@ function toggleMode()
{ {
mode = !mode; mode = !mode;
} }
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() { async function websocketRealtimeData() {
@ -154,7 +194,11 @@ async function handleScroll() {
} }
} }
function reformatDate(dateString) {
return dateString.substring(5, 7) + '/' + dateString.substring(8) + '/' + dateString.substring(2, 4);
}
async function assetSelector(symbol, assetType) async function assetSelector(symbol, assetType)
{ {
if(assetType === 'etf') if(assetType === 'etf')
@ -699,15 +743,15 @@ const debouncedHandleInput = debounce(handleInput, 200);
<tbody> <tbody>
{#each optionList as item,index} {#each optionList as item,index}
<!-- row --> <!-- 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"> <td class="text-white pb-3 text-xs sm:text-sm text-start">
{item?.time} {item?.time}
</td> </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} {item?.ticker}
</th> </th>
<td class="text-white text-start"> <td class="text-white text-start">
{item?.strike_price} {item?.strike_price}
@ -780,9 +824,13 @@ const debouncedHandleInput = debounce(handleInput, 200);
{/if} {/if}
{:else} {:else}
<div class="flex justify-center items-center m-auto w-full max-w-6xl"> <div class="flex justify-center items-center h-80">
<div class="loader">Loading...</div> <div class="relative">
</div> <label class="bg-[#202020] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
<span class="loading loading-spinner loading-md"></span>
</label>
</div>
</div>
{/if} {/if}
</div> </div>
@ -790,3 +838,169 @@ const debouncedHandleInput = debounce(handleInput, 200);
</section> </section>
<!--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">Execution Estimate</td>
<td class="">{optionExecutionEstimate}</td>
<td class="font-semibold"></td>
<td class=""></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>
<tr class="border-b border-slate-700 odd:bg-[#202020]">
<td class="font-semibold">Execution Est.</td>
<td class="">{optionExecutionEstimate}</td>
<td class="font-semibold"></td>
<td class=""></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!--End Options Detail Modal-->

10
src/routes/politicians/+page.svelte
View File

@ -312,9 +312,13 @@ onMount(async () => {
</div> </div>
</section> </section>
{:else} {:else}
<div class="flex justify-center items-center m-auto relative w-[100px]"> <div class="flex justify-center items-center h-80">
<div class="loader">Loading...</div> <div class="relative">
</div> <label class="bg-[#202020] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
<span class="loading loading-spinner loading-md"></span>
</label>
</div>
</div>
{/if} {/if}

10
src/routes/politicians/flow-data/+page.svelte
View File

@ -677,9 +677,13 @@
</div> </div>
</section> </section>
{:else} {:else}
<div class="flex justify-center items-center m-auto relative w-[100px]"> <div class="flex justify-center items-center h-80">
<div class="loader">Loading...</div> <div class="relative">
</div> <label class="bg-[#202020] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
<span class="loading loading-spinner loading-md"></span>
</label>
</div>
</div>
{/if} {/if}

10
src/routes/portfolio/+page.svelte
View File

@ -601,9 +601,13 @@ if (usRegion.includes(value)) {
{:else} {:else}
<div class="flex justify-center items-center m-auto w-full max-w-6xl"> <div class="flex justify-center items-center h-80">
<div class="loader">Loading...</div> <div class="relative">
</div> <label class="bg-[#202020] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
<span class="loading loading-spinner loading-md"></span>
</label>
</div>
</div>
{/if} {/if}

10
src/routes/price-alert/+page.svelte
View File

@ -407,9 +407,13 @@ $: {
{/if} {/if}
{:else} {:else}
<div class="flex justify-center items-center m-auto h-full w-full max-w-6xl"> <div class="flex justify-center items-center h-80">
<div class="loader">Loading...</div> <div class="relative">
</div> <label class="bg-[#202020] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
<span class="loading loading-spinner loading-md"></span>
</label>
</div>
</div>
{/if} {/if}

8
src/routes/stock-screener/+page.svelte
View File

@ -508,9 +508,13 @@ onMount(async () => {
{/if} {/if}
{:else} {:else}
<div class="flex justify-center items-center m-auto h-full w-full max-w-6xl"> <div class="flex justify-center items-center h-80">
<div class="loader">Loading...</div> <div class="relative">
<label class="bg-[#202020] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
<span class="loading loading-spinner loading-md"></span>
</label>
</div> </div>
</div>
{/if} {/if}
<div class="{!data?.user ? 'hidden' : ''} sm:hidden fixed z-50 w-full h-16 max-w-3xl -right-5 bottom-5"> <div class="{!data?.user ? 'hidden' : ''} sm:hidden fixed z-50 w-full h-16 max-w-3xl -right-5 bottom-5">

10
src/routes/stocks/[tickerID]/insider/+page.svelte
View File

@ -638,9 +638,13 @@ onMount(async() => {
{:else} {:else}
<div class="flex justify-center items-center m-auto h-full w-full max-w-6xl"> <div class="flex justify-center items-center h-80">
<div class="loader">Loading...</div> <div class="relative">
</div> <label class="bg-[#202020] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
<span class="loading loading-spinner loading-md"></span>
</label>
</div>
</div>
{/if} {/if}

10
src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte
View File

@ -448,9 +448,13 @@ isLoaded = true;
{:else} {:else}
<div class="flex justify-center items-center m-auto relative w-[100px]"> <div class="flex justify-center items-center h-80">
<div class="loader">Loading...</div> <div class="relative">
</div> <label class="bg-[#202020] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
<span class="loading loading-spinner loading-md"></span>
</label>
</div>
</div>
{/if} {/if}

10
src/routes/stocks/[tickerID]/insider/transcripts/+page.svelte
View File

@ -254,9 +254,13 @@
{:else} {:else}
<div class="flex justify-center items-center m-auto w-full max-w-6xl"> <div class="flex justify-center items-center h-80">
<div class="loader">Loading...</div> <div class="relative">
</div> <label class="bg-[#202020] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
<span class="loading loading-spinner loading-md"></span>
</label>
</div>
</div>
{/if} {/if}
</div> </div>

10
src/routes/watchlist/+page.svelte
View File

@ -508,9 +508,13 @@ onDestroy( () => {
{/if} {/if}
{:else} {:else}
<div class="flex justify-center items-center m-auto h-full w-full max-w-6xl"> <div class="flex justify-center items-center h-80">
<div class="loader">Loading...</div> <div class="relative">
</div> <label class="bg-[#202020] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
<span class="loading loading-spinner loading-md"></span>
</label>
</div>
</div>
{/if} {/if}