update options flow page
This commit is contained in:
MuslemRahimi
parent
279a4d4d57
commit
e1a7978312
@ -305,36 +305,40 @@ function calculateStats(optionList) {
|
|||||||
|
|
||||||
|
|
||||||
function handleInput(event) {
|
function handleInput(event) {
|
||||||
filterQuery = event.target.value;
|
filterQuery = event.target.value;
|
||||||
let newData = [];
|
let newData = [];
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
if (filterQuery?.length !== 0) {
|
if (filterQuery?.length !== 0) {
|
||||||
newData = [...rawData?.filter(item => item?.ticker === filterQuery?.toUpperCase())];
|
newData = [...rawData?.filter(item => item?.ticker === filterQuery?.toUpperCase())];
|
||||||
|
if (newData?.length !== 0) {
|
||||||
if (newData?.length !== 0) {
|
rawData = newData;
|
||||||
//rawData = newData;
|
optionList = rawData?.slice(0, 20);
|
||||||
//optionList = [...rawData?.slice(0,20)];
|
|
||||||
notFound = false;
|
notFound = false;
|
||||||
optionList = [...newData];
|
console.log('test');
|
||||||
|
} else {
|
||||||
}
|
notFound = true;
|
||||||
else {
|
|
||||||
notFound = true;
|
|
||||||
rawData = data?.getOptionsFlowFeed;
|
rawData = data?.getOptionsFlowFeed;
|
||||||
optionList = rawData?.slice(0,20);
|
optionList = rawData?.slice(0, 20);
|
||||||
|
}
|
||||||
}
|
} else {
|
||||||
} else {
|
notFound = false;
|
||||||
notFound = false;
|
rawData = data?.getOptionsFlowFeed;
|
||||||
rawData = data?.getOptionsFlowFeed;
|
optionList = rawData?.slice(0, 20);
|
||||||
optionList = rawData?.slice(0,20);
|
}
|
||||||
}
|
}, 200);
|
||||||
|
}
|
||||||
}, 500);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
function debounce(fn, delay) {
|
||||||
|
let timeoutId;
|
||||||
|
return function(...args) {
|
||||||
|
clearTimeout(timeoutId);
|
||||||
|
timeoutId = setTimeout(() => {
|
||||||
|
fn.apply(this, args);
|
||||||
|
}, delay);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const debouncedHandleInput = debounce(handleInput, 200);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
@ -655,25 +659,31 @@ function calculateStats(optionList) {
|
|||||||
<!--End Expand-->
|
<!--End Expand-->
|
||||||
|
|
||||||
<!--Start Filter-->
|
<!--Start Filter-->
|
||||||
<label for="modal-search" class="sr-only">Filter</label>
|
<div class="w-full pb-3 mt-10 sm:mt-0">
|
||||||
<label class="flex justify-end items-center">
|
<div class="relative right-0 bg-[#0F0F0F]">
|
||||||
<div class="flex flex-col items-center">
|
<ul class="relative grid grid-cols-2 sm:grid-cols-4 gap-y-3 gap-x-3 flex flex-wrap p-1 list-none rounded-[3px]">
|
||||||
<input
|
<li class="pl-3 py-1.5 flex-auto text-center bg-[#2E3238] rounded-[3px]">
|
||||||
id="modal-search"
|
<label class="flex flex-row items-center">
|
||||||
|
<input
|
||||||
|
id="modal-search"
|
||||||
type="search"
|
type="search"
|
||||||
class="input input-bordered bg-[#0F0F0F] focus:ring-transparent w-24 sm:w-28 h-9 text-sm"
|
class="ml-2 text-sm sm:text-[1rem] placeholder-gray-400 border-transparent focus:border-transparent focus:ring-0 flex items-center justify-center w-full px-0 py-1 bg-inherit"
|
||||||
placeholder="Filter..."
|
placeholder="Find by Symbol"
|
||||||
bind:value={filterQuery}
|
bind:value={filterQuery}
|
||||||
on:input={handleInput}
|
on:input={debouncedHandleInput}
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
/>
|
/>
|
||||||
{#if notFound === true}
|
<svg class="ml-auto h-7 w-7 sm:h-8 sm:w-8 inline-block mr-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#fff" d="m19.485 20.154l-6.262-6.262q-.75.639-1.725.989t-1.96.35q-2.402 0-4.066-1.663T3.808 9.503T5.47 5.436t4.064-1.667t4.068 1.664T15.268 9.5q0 1.042-.369 2.017t-.97 1.668l6.262 6.261zM9.539 14.23q1.99 0 3.36-1.37t1.37-3.361t-1.37-3.36t-3.36-1.37t-3.361 1.37t-1.37 3.36t1.37 3.36t3.36 1.37"/></svg>
|
||||||
<span class="label-text text-error text-[0.65rem] mt-1">
|
|
||||||
No Results Found
|
|
||||||
</span>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</label>
|
</label>
|
||||||
|
{#if notFound === true}
|
||||||
|
<span class="label-text text-error text-[0.65rem] mt-1">
|
||||||
|
No Results Found
|
||||||
|
</span>
|
||||||
|
{/if}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<!--End Filter-->
|
<!--End Filter-->
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -201,37 +201,42 @@ function calculateStats(optionList) {
|
|||||||
displayPutVolume = putVolumeSum;
|
displayPutVolume = putVolumeSum;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function handleInput(event) {
|
function handleInput(event) {
|
||||||
filterQuery = event.target.value;
|
filterQuery = event.target.value;
|
||||||
let newData = [];
|
let newData = [];
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
if (filterQuery?.length !== 0) {
|
if (filterQuery?.length !== 0) {
|
||||||
newData = [...rawData?.filter(item => item?.ticker === filterQuery?.toUpperCase())];
|
newData = [...rawData?.filter(item => item?.ticker === filterQuery?.toUpperCase())];
|
||||||
|
|
||||||
if (newData?.length !== 0) {
|
if (newData?.length !== 0) {
|
||||||
//rawData = newData;
|
rawData = newData;
|
||||||
//optionList = [...rawData?.slice(0,20)];
|
optionList = rawData?.slice(0, 20);
|
||||||
notFound = false;
|
notFound = false;
|
||||||
optionList = [...newData];
|
console.log('test');
|
||||||
|
} else {
|
||||||
}
|
|
||||||
else {
|
|
||||||
notFound = true;
|
notFound = true;
|
||||||
rawData = data?.getOptionsZeroDTE;
|
rawData = data?.getOptionsZeroDTE;
|
||||||
optionList = rawData?.slice(0,20);
|
optionList = rawData?.slice(0, 20);
|
||||||
|
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
notFound = false;
|
notFound = false;
|
||||||
rawData = data?.getOptionsZeroDTE;
|
rawData = data?.getOptionsZeroDTE;
|
||||||
optionList = rawData?.slice(0,20);
|
optionList = rawData?.slice(0, 20);
|
||||||
}
|
}
|
||||||
|
}, 200);
|
||||||
}, 500);
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function debounce(fn, delay) {
|
||||||
|
let timeoutId;
|
||||||
|
return function(...args) {
|
||||||
|
clearTimeout(timeoutId);
|
||||||
|
timeoutId = setTimeout(() => {
|
||||||
|
fn.apply(this, args);
|
||||||
|
}, delay);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const debouncedHandleInput = debounce(handleInput, 200);
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -476,27 +481,33 @@ function handleInput(event) {
|
|||||||
|
|
||||||
|
|
||||||
{#if rawData?.length !== 0}
|
{#if rawData?.length !== 0}
|
||||||
<!--Start Filter-->
|
<!--Start Filter-->
|
||||||
<label for="modal-search" class="sr-only">Filter</label>
|
<div class="w-full pb-3 mt-10 sm:mt-0">
|
||||||
<label class="flex justify-end items-center">
|
<div class="relative right-0 bg-[#0F0F0F]">
|
||||||
<div class="flex flex-col items-center">
|
<ul class="relative grid grid-cols-2 sm:grid-cols-4 gap-y-3 gap-x-3 flex flex-wrap p-1 list-none rounded-[3px]">
|
||||||
<input
|
<li class="pl-3 py-1.5 flex-auto text-center bg-[#2E3238] rounded-[3px]">
|
||||||
id="modal-search"
|
<label class="flex flex-row items-center">
|
||||||
type="search"
|
<input
|
||||||
class="input input-bordered bg-[#0F0F0F] focus:ring-transparent w-24 sm:w-28 h-9 text-sm"
|
id="modal-search"
|
||||||
placeholder="Filter..."
|
type="search"
|
||||||
bind:value={filterQuery}
|
class="ml-2 text-sm sm:text-[1rem] placeholder-gray-400 border-transparent focus:border-transparent focus:ring-0 flex items-center justify-center w-full px-0 py-1 bg-inherit"
|
||||||
on:input={handleInput}
|
placeholder="Find by Symbol"
|
||||||
autocomplete="off"
|
bind:value={filterQuery}
|
||||||
/>
|
on:input={debouncedHandleInput}
|
||||||
{#if notFound === true}
|
autocomplete="off"
|
||||||
<span class="label-text text-error text-[0.65rem] mt-1">
|
/>
|
||||||
No Results Found
|
<svg class="ml-auto h-7 w-7 sm:h-8 sm:w-8 inline-block mr-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#fff" d="m19.485 20.154l-6.262-6.262q-.75.639-1.725.989t-1.96.35q-2.402 0-4.066-1.663T3.808 9.503T5.47 5.436t4.064-1.667t4.068 1.664T15.268 9.5q0 1.042-.369 2.017t-.97 1.668l6.262 6.261zM9.539 14.23q1.99 0 3.36-1.37t1.37-3.361t-1.37-3.36t-3.36-1.37t-3.361 1.37t-1.37 3.36t1.37 3.36t3.36 1.37"/></svg>
|
||||||
</span>
|
</label>
|
||||||
{/if}
|
{#if notFound === true}
|
||||||
|
<span class="label-text text-error text-[0.65rem] mt-1">
|
||||||
|
No Results Found
|
||||||
|
</span>
|
||||||
|
{/if}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</label>
|
</div>
|
||||||
<!--End Filter-->
|
<!--End Filter-->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user