add indicator list to watchlist
This commit is contained in:
MuslemRahimi
parent
f2bc04d398
commit
5839aae2d5
@ -1,105 +1,12 @@
|
|||||||
<script lang='ts'>
|
<script lang='ts'>
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
import { goto } from '$app/navigation';
|
|
||||||
import { switchWatchList, screenWidth } from '$lib/store';
|
import { switchWatchList, screenWidth } from '$lib/store';
|
||||||
import { formatDate, abbreviateNumber } from '$lib/utils';
|
import { formatDate, abbreviateNumber } from '$lib/utils';
|
||||||
import InfoModal from '$lib/components/InfoModal.svelte';
|
|
||||||
|
|
||||||
export let watchListId;
|
export let watchListId;
|
||||||
|
export let indicatorList;
|
||||||
|
|
||||||
|
$: sortedList = indicatorList;
|
||||||
|
|
||||||
const sortTickersByName = (tickerList) => {
|
|
||||||
return tickerList.sort(function(a, b) {
|
|
||||||
if(order === 'highToLow')
|
|
||||||
{
|
|
||||||
return a?.symbol?.localeCompare(b?.symbol);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
return b?.symbol?.localeCompare(a?.symbol);
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const sortTickersByPrice = (tickerList) => {
|
|
||||||
return tickerList.sort(function(a, b) {
|
|
||||||
if(order === 'highToLow')
|
|
||||||
{
|
|
||||||
return b?.price - a?.price;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
return a?.price - b?.price;
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const sortTickersByEPS = (tickerList) => {
|
|
||||||
return tickerList.sort(function(a, b) {
|
|
||||||
if(order === 'highToLow')
|
|
||||||
{
|
|
||||||
return b?.eps - a?.eps;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
return a?.eps - b?.eps;
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const sortTickersByPE = (tickerList) => {
|
|
||||||
return tickerList.sort(function(a, b) {
|
|
||||||
if(order === 'highToLow')
|
|
||||||
{
|
|
||||||
return b?.pe - a?.pe;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
return a?.pe - b?.pe;
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const sortTickersByVolume = (tickerList) => {
|
|
||||||
return tickerList.sort(function(a, b) {
|
|
||||||
if(order === 'highToLow')
|
|
||||||
{
|
|
||||||
return b?.volume - a?.volume;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
return a?.volume - b?.volume;
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
const sortTickersByMarketCap = (tickerList) => {
|
|
||||||
return tickerList.sort(function(a, b) {
|
|
||||||
if(order === 'highToLow')
|
|
||||||
{
|
|
||||||
return b?.marketCap - a?.marketCap;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
return a?.marketCap - b?.marketCap;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const sortTickersByChange = (tickerList) => {
|
|
||||||
return tickerList.sort(function(a, b) {
|
|
||||||
if(order === 'highToLow')
|
|
||||||
{
|
|
||||||
return b?.changesPercentage - a?.changesPercentage;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
return a?.changesPercentage - b?.changesPercentage;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
let isLoaded = false;
|
let isLoaded = false;
|
||||||
@ -122,23 +29,13 @@ async function getWatchlistData()
|
|||||||
|
|
||||||
const output = await response?.json();
|
const output = await response?.json();
|
||||||
|
|
||||||
try {
|
watchList = output?.at(0);
|
||||||
watchList = sortTickersByChange(output?.at(0));
|
|
||||||
}
|
|
||||||
catch(e) {
|
|
||||||
watchList = []
|
|
||||||
}
|
|
||||||
|
|
||||||
news = output[1];
|
news = output[1];
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
onMount( async () => {
|
onMount( async () => {
|
||||||
|
|
||||||
|
|
||||||
@ -152,125 +49,8 @@ onMount( async () => {
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
let order = 'highToLow';
|
|
||||||
|
|
||||||
function selectSortingMethod(state:string) {
|
|
||||||
|
|
||||||
order = 'highToLow';
|
$: charNumber = $screenWidth < 640 ? 15 : 20;
|
||||||
|
|
||||||
if(state === 'Change')
|
|
||||||
{
|
|
||||||
sortBy = state;
|
|
||||||
watchList = sortTickersByChange(watchList);
|
|
||||||
}
|
|
||||||
|
|
||||||
else if (state === 'Market Cap')
|
|
||||||
{
|
|
||||||
sortBy = state;
|
|
||||||
watchList = sortTickersByMarketCap(watchList);
|
|
||||||
}
|
|
||||||
|
|
||||||
else if (state === 'Price')
|
|
||||||
{
|
|
||||||
sortBy = state;
|
|
||||||
watchList = sortTickersByPrice(watchList);
|
|
||||||
}
|
|
||||||
|
|
||||||
else if (state === 'EPS')
|
|
||||||
{
|
|
||||||
sortBy = state;
|
|
||||||
watchList = sortTickersByEPS(watchList);
|
|
||||||
}
|
|
||||||
|
|
||||||
else if (state === 'PE Ratio')
|
|
||||||
{
|
|
||||||
sortBy = state;
|
|
||||||
watchList = sortTickersByPE(watchList);
|
|
||||||
}
|
|
||||||
|
|
||||||
else if (state === 'Volume')
|
|
||||||
{
|
|
||||||
sortBy = state;
|
|
||||||
watchList = sortTickersByVolume(watchList);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
else if (state === 'Name: A-Z')
|
|
||||||
{
|
|
||||||
sortBy = state;
|
|
||||||
watchList = sortTickersByName(watchList);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
function changeOrder(state:string) {
|
|
||||||
if (state === 'highToLow')
|
|
||||||
{
|
|
||||||
order = 'lowToHigh';
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
order = 'highToLow';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let sortBy = 'Change';
|
|
||||||
let charNumber = 20;
|
|
||||||
|
|
||||||
|
|
||||||
$: {
|
|
||||||
if ($screenWidth < 640)
|
|
||||||
{
|
|
||||||
charNumber = 15;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
charNumber = 20;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
$: {
|
|
||||||
if(order)
|
|
||||||
{
|
|
||||||
if(sortBy === 'Change')
|
|
||||||
{
|
|
||||||
watchList = sortTickersByChange(watchList);
|
|
||||||
}
|
|
||||||
|
|
||||||
else if (sortBy === 'Market Cap')
|
|
||||||
{
|
|
||||||
watchList = sortTickersByMarketCap(watchList);
|
|
||||||
}
|
|
||||||
|
|
||||||
else if (sortBy === 'Price')
|
|
||||||
{
|
|
||||||
watchList = sortTickersByPrice(watchList);
|
|
||||||
}
|
|
||||||
|
|
||||||
else if (sortBy === 'EPS')
|
|
||||||
{
|
|
||||||
watchList = sortTickersByEPS(watchList);
|
|
||||||
}
|
|
||||||
|
|
||||||
else if (sortBy === 'PE Ratio')
|
|
||||||
{
|
|
||||||
watchList = sortTickersByPE(watchList);
|
|
||||||
}
|
|
||||||
|
|
||||||
else if (sortBy === 'Volume')
|
|
||||||
{
|
|
||||||
watchList = sortTickersByVolume(watchList);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
else if (sortBy === 'Name: A-Z')
|
|
||||||
{
|
|
||||||
watchList = sortTickersByName(watchList);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
$: {
|
$: {
|
||||||
if($switchWatchList && typeof window !== 'undefined')
|
if($switchWatchList && typeof window !== 'undefined')
|
||||||
@ -278,8 +58,6 @@ $: {
|
|||||||
isLoaded = false
|
isLoaded = false
|
||||||
getWatchlistData()
|
getWatchlistData()
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
isLoaded = true;
|
isLoaded = true;
|
||||||
$switchWatchList = false;
|
$switchWatchList = false;
|
||||||
}
|
}
|
||||||
@ -311,15 +89,12 @@ $: {
|
|||||||
<table class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto mt-4 ">
|
<table class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto mt-4 ">
|
||||||
<!-- head -->
|
<!-- head -->
|
||||||
<thead>
|
<thead>
|
||||||
<tr class="">
|
<tr class="border-b-[#09090B]">
|
||||||
<th class="text-white font-semibold text-sm">Symbol</th>
|
<th class="text-white font-semibold text-sm">Symbol</th>
|
||||||
<th class="text-white font-semibold text-sm">Company</th>
|
<th class="text-white font-semibold text-sm">Company</th>
|
||||||
<th class="text-white font-semibold text-end text-sm">EPS</th>
|
{#each sortedList as item}
|
||||||
<th class="text-white font-semibold text-end text-sm">PE Ratio</th>
|
<th class="text-white font-semibold text-end text-sm">{item}</th>
|
||||||
<th class="text-white font-semibold text-end text-sm">Volume</th>
|
{/each}
|
||||||
<th class="text-white font-semibold text-end text-sm">Market Cap</th>
|
|
||||||
<th class="text-white font-semibold text-end text-sm">Price</th>
|
|
||||||
<th class="text-white font-semibold text-end text-sm">Change</th>
|
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody class="p-0">
|
<tbody class="p-0">
|
||||||
@ -447,156 +222,4 @@ $: {
|
|||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!--Start Sort By Modal-->
|
|
||||||
<input type="checkbox" id="sortByModal" class="modal-toggle" />
|
|
||||||
|
|
||||||
<dialog id="sortByModal" class="modal modal-bottom sm:modal-middle ">
|
|
||||||
|
|
||||||
|
|
||||||
<label id="sortByModal" for="sortByModal" class="cursor-pointer modal-backdrop bg-[#09090B] bg-opacity-[0.5]"></label>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="modal-box w-full bg-[#09090B] sm:border sm:border-slate-800">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<label for="sortByModal" class="cursor-pointer absolute right-5 top-2 bg-[#09090B] text-[1.8rem] text-white">
|
|
||||||
✕
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<div class="text-white">
|
|
||||||
|
|
||||||
<h3 class="font-medium text-lg sm:text-xl mb-10">
|
|
||||||
Sort By
|
|
||||||
</h3>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="flex flex-col items-center w-full max-w-3xl bg-[#09090B]">
|
|
||||||
|
|
||||||
|
|
||||||
<label for="sortByModal" on:click={() => selectSortingMethod('Change')} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
|
|
||||||
|
|
||||||
<div class="flex flex-row items-center w-full bg-[#303030] p-3 rounded-lg {sortBy === 'Change' ? 'ring-2 ring-[#04E000]' : ''}">
|
|
||||||
|
|
||||||
<span class="ml-1 text-white font-medium mr-auto">
|
|
||||||
Daily Change in %
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<div class="rounded-full w-8 h-8 relative border border-[#737373]">
|
|
||||||
{#if sortBy === 'Change'}
|
|
||||||
<svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</label>
|
|
||||||
|
|
||||||
|
|
||||||
<label for="sortByModal" on:click={() => selectSortingMethod('Price')} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
|
|
||||||
|
|
||||||
<div class="flex flex-row items-center w-full bg-[#303030] p-3 rounded-lg {sortBy === 'Price' ? 'ring-2 ring-[#04E000]' : ''}">
|
|
||||||
|
|
||||||
<span class="ml-1 text-white font-medium mr-auto">
|
|
||||||
Price in $
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<div class="rounded-full w-8 h-8 relative border border-[#737373]">
|
|
||||||
{#if sortBy === 'Price'}
|
|
||||||
<svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</label>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<label for="sortByModal" on:click={() => selectSortingMethod('Market Cap')} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
|
|
||||||
<div class="flex flex-row items-center w-full bg-[#303030] p-3 rounded-lg {sortBy === 'Market Cap' ? 'ring-2 ring-[#04E000]' : ''}">
|
|
||||||
<span class="ml-1 text-white font-medium mr-auto">
|
|
||||||
Market Cap
|
|
||||||
</span>
|
|
||||||
<div class="rounded-full w-8 h-8 relative border border-[#737373]">
|
|
||||||
{#if sortBy === 'Market Cap'}
|
|
||||||
<svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<label for="sortByModal" on:click={() => selectSortingMethod('EPS')} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
|
|
||||||
<div class="flex flex-row items-center w-full bg-[#303030] p-3 rounded-lg {sortBy === 'EPS' ? 'ring-2 ring-[#04E000]' : ''}">
|
|
||||||
<span class="ml-1 text-white font-medium mr-auto">
|
|
||||||
Earnings per Share
|
|
||||||
</span>
|
|
||||||
<div class="rounded-full w-8 h-8 relative border border-[#737373]">
|
|
||||||
{#if sortBy === 'EPS'}
|
|
||||||
<svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<label for="sortByModal" on:click={() => selectSortingMethod('PE Ratio')} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
|
|
||||||
<div class="flex flex-row items-center w-full bg-[#303030] p-3 rounded-lg {sortBy === 'PE Ratio' ? 'ring-2 ring-[#04E000]' : ''}">
|
|
||||||
<span class="ml-1 text-white font-medium mr-auto">
|
|
||||||
PE Ratio
|
|
||||||
</span>
|
|
||||||
<div class="rounded-full w-8 h-8 relative border border-[#737373]">
|
|
||||||
{#if sortBy === 'PE Ratio'}
|
|
||||||
<svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<label for="sortByModal" on:click={() => selectSortingMethod('Volume')} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
|
|
||||||
<div class="flex flex-row items-center w-full bg-[#303030] p-3 rounded-lg {sortBy === 'Volume' ? 'ring-2 ring-[#04E000]' : ''}">
|
|
||||||
<span class="ml-1 text-white font-medium mr-auto">
|
|
||||||
Volume
|
|
||||||
</span>
|
|
||||||
<div class="rounded-full w-8 h-8 relative border border-[#737373]">
|
|
||||||
{#if sortBy === 'Volume'}
|
|
||||||
<svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
|
|
||||||
<label for="sortByModal" on:click={() => selectSortingMethod('Name: A-Z')} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
|
|
||||||
<div class="flex flex-row items-center w-full bg-[#303030] p-3 rounded-lg {sortBy === 'Name: A-Z' ? 'ring-2 ring-[#04E000]' : ''}">
|
|
||||||
<span class="ml-1 text-white font-medium mr-auto">
|
|
||||||
Name: A-Z
|
|
||||||
</span>
|
|
||||||
<div class="rounded-full w-8 h-8 relative border border-[#737373]">
|
|
||||||
{#if sortBy === 'Name: A-Z'}
|
|
||||||
<svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</label>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</dialog>
|
|
||||||
<!--End Sort By Modal-->
|
|
||||||
@ -6,37 +6,36 @@ import { onDestroy, onMount } from 'svelte';
|
|||||||
|
|
||||||
import Input from '$lib/components/Input.svelte';
|
import Input from '$lib/components/Input.svelte';
|
||||||
import WatchListCard from '$lib/components/WatchListCard.svelte';
|
import WatchListCard from '$lib/components/WatchListCard.svelte';
|
||||||
import {screenWidth, switchWatchList } from '$lib/store';
|
import {switchWatchList } from '$lib/store';
|
||||||
import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js";
|
import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js";
|
||||||
import { Button } from "$lib/components/shadcn/button/index.js";
|
import { Button } from "$lib/components/shadcn/button/index.js";
|
||||||
|
import { writable } from 'svelte/store';
|
||||||
|
|
||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
|
let searchQuery = '';
|
||||||
|
let shouldLoadWorker = writable(false);
|
||||||
|
|
||||||
|
|
||||||
let isLoaded = false;
|
let indicatorList = ['Volume', 'Market Cap', 'Price', 'Change', 'EPS', 'PE'];
|
||||||
|
indicatorList = indicatorList.sort((a, b) => a.localeCompare(b));
|
||||||
|
|
||||||
let displayWatchList;
|
|
||||||
|
|
||||||
let allList = data?.getAllWatchlist;
|
let isLoaded = false;
|
||||||
|
let downloadWorker: Worker | undefined;
|
||||||
async function handleRenameList() {
|
let displayWatchList;
|
||||||
const clicked = document.getElementById('editNameWatchList');
|
let allList = data?.getAllWatchlist;
|
||||||
clicked.dispatchEvent(new MouseEvent('click'));
|
|
||||||
const unClicked = document.getElementById('settingsWatchListModal');
|
|
||||||
unClicked.dispatchEvent(new MouseEvent('click'));
|
|
||||||
|
|
||||||
}
|
const handleDownloadMessage = (event) => {
|
||||||
|
stockScreenerData = event?.data?.stockScreenerData;
|
||||||
|
shouldLoadWorker.set(true);
|
||||||
|
|
||||||
async function handleDeleteList() {
|
};
|
||||||
const clicked = document.getElementById('deleteWatchlist');
|
|
||||||
clicked.dispatchEvent(new MouseEvent('click'));
|
|
||||||
const unClicked = document.getElementById('settingsWatchListModal');
|
|
||||||
unClicked.dispatchEvent(new MouseEvent('click'));
|
|
||||||
|
|
||||||
}
|
const updateStockScreenerData = async () => {
|
||||||
|
downloadWorker.postMessage({ indicatorList});
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
async function createWatchList(event) {
|
async function createWatchList(event) {
|
||||||
event.preventDefault(); // prevent the default form submission behavior
|
event.preventDefault(); // prevent the default form submission behavior
|
||||||
@ -104,90 +103,6 @@ async function createWatchList(event) {
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
async function editNameWatchList(event) {
|
|
||||||
event.preventDefault(); // prevent the default form submission behavior
|
|
||||||
|
|
||||||
const formData = new FormData(event.target); // create a FormData object from the form
|
|
||||||
|
|
||||||
const title = formData.get('title');
|
|
||||||
|
|
||||||
if (!title || title?.length === 0) {
|
|
||||||
toast.error('Title cannot be empty!', {
|
|
||||||
style: 'border-radius: 200px; background: #333; color: #fff;',
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (title?.length > 40) {
|
|
||||||
toast.error('Title is too long. Keep it simple and concise bruv!', {
|
|
||||||
style: 'border-radius: 200px; background: #333; color: #fff;',
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const postData = {};
|
|
||||||
|
|
||||||
// Iterate through the FormData entries and populate the object
|
|
||||||
for (const [key, value] of formData.entries()) {
|
|
||||||
postData[key] = value;
|
|
||||||
}
|
|
||||||
postData['path'] = 'edit-name-watchlist';
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch('/api/fastify-post-data', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json"
|
|
||||||
},
|
|
||||||
body: JSON.stringify(postData),
|
|
||||||
}); // make a POST request to the server with the FormData object
|
|
||||||
const output = (await response.json())?.items;
|
|
||||||
|
|
||||||
if (output === 'success') {
|
|
||||||
toast.success('Watchlist renamed successfully!', {
|
|
||||||
style: 'border-radius: 200px; background: #333; color: #fff;',
|
|
||||||
});
|
|
||||||
|
|
||||||
for (const item of allList) {
|
|
||||||
if (item?.title === postData['title']) {
|
|
||||||
item.title = postData['title'];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Initialize an index variable
|
|
||||||
let foundIndex = -1;
|
|
||||||
// Iterate through the list and replace "Short" with "Long"
|
|
||||||
allList?.forEach((item, index) => {
|
|
||||||
if (item?.title === displayWatchList?.title) {
|
|
||||||
item.title = postData?.title;
|
|
||||||
foundIndex = index; // Store the index where the title was found
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
allList = [...allList];
|
|
||||||
displayWatchList = allList[foundIndex]
|
|
||||||
|
|
||||||
const clicked = document.getElementById('editNameWatchList');
|
|
||||||
clicked.dispatchEvent(new MouseEvent('click'));
|
|
||||||
|
|
||||||
|
|
||||||
} else {
|
|
||||||
toast.error('Something went wrong. Please try again!', {
|
|
||||||
style: 'border-radius: 200px; background: #333; color: #fff;',
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error:', error);
|
|
||||||
toast.error('An error occurred. Please try again later.', {
|
|
||||||
style: 'border-radius: 200px; background: #333; color: #fff;',
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
async function deleteWatchlist(event) {
|
async function deleteWatchlist(event) {
|
||||||
event.preventDefault(); // prevent the default form submission behavior
|
event.preventDefault(); // prevent the default form submission behavior
|
||||||
|
|
||||||
@ -249,7 +164,7 @@ function changeWatchList(newWatchList)
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
onMount(() => {
|
onMount(async () => {
|
||||||
if(allList?.length !== 0)
|
if(allList?.length !== 0)
|
||||||
{
|
{
|
||||||
displayWatchList = allList[0]
|
displayWatchList = allList[0]
|
||||||
@ -257,6 +172,13 @@ if(allList?.length !== 0)
|
|||||||
else {
|
else {
|
||||||
displayWatchList = '';
|
displayWatchList = '';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (!downloadWorker) {
|
||||||
|
const DownloadWorker = await import('./workers/downloadWorker?worker');
|
||||||
|
downloadWorker = new DownloadWorker.default();
|
||||||
|
downloadWorker.onmessage = handleDownloadMessage;
|
||||||
|
}
|
||||||
|
|
||||||
isLoaded = true;
|
isLoaded = true;
|
||||||
|
|
||||||
});
|
});
|
||||||
@ -271,6 +193,41 @@ function handleWatchlistModal() {
|
|||||||
closePopup?.dispatchEvent(new MouseEvent('click'))
|
closePopup?.dispatchEvent(new MouseEvent('click'))
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let testList = [];
|
||||||
|
|
||||||
|
function handleInput(event) {
|
||||||
|
searchQuery = event.target.value?.toLowerCase() || '';
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
testList = [];
|
||||||
|
|
||||||
|
if (searchQuery.length > 0) {
|
||||||
|
|
||||||
|
const rawList = indicatorList
|
||||||
|
testList = rawList?.filter(item => {
|
||||||
|
const index = item?.toLowerCase();
|
||||||
|
// Check if country starts with searchQuery
|
||||||
|
return index?.startsWith(searchQuery);
|
||||||
|
}) || [];
|
||||||
|
}
|
||||||
|
}, 50);
|
||||||
|
}
|
||||||
|
|
||||||
|
let checkedItems = new Set(indicatorList);
|
||||||
|
|
||||||
|
function isChecked(item) {
|
||||||
|
return checkedItems?.has(item);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleChangeValue(value) {
|
||||||
|
if (checkedItems.has(value)) {
|
||||||
|
checkedItems.delete(value); // Remove the value if it's already in the Set
|
||||||
|
} else {
|
||||||
|
checkedItems?.add(value); // Add the value if it's not in the Set
|
||||||
|
}
|
||||||
|
indicatorList = [...indicatorList]
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -320,10 +277,10 @@ function handleWatchlistModal() {
|
|||||||
<div class="hidden text-sm sm:text-[1rem] font-semibold text-white md:block sm:mb-2">
|
<div class="hidden text-sm sm:text-[1rem] font-semibold text-white md:block sm:mb-2">
|
||||||
My Watchlist
|
My Watchlist
|
||||||
</div>
|
</div>
|
||||||
<div class="relative inline-block text-left w-fit flex flex-row items-center">
|
<div class="relative inline-block text-left w-full flex flex-row items-center">
|
||||||
<DropdownMenu.Root >
|
<DropdownMenu.Root >
|
||||||
<DropdownMenu.Trigger asChild let:builder>
|
<DropdownMenu.Trigger asChild let:builder>
|
||||||
<Button builders={[builder]} class="min-w-[110px] w-full border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-lg truncate">
|
<Button builders={[builder]} class="min-w-[110px] w-fit border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-lg truncate">
|
||||||
<span class="truncate font-semibold text-white shadow-sm">{displayWatchList?.title !== undefined ? displayWatchList?.title : 'Create Watchlist'}</span>
|
<span class="truncate font-semibold text-white shadow-sm">{displayWatchList?.title !== undefined ? displayWatchList?.title : 'Create Watchlist'}</span>
|
||||||
<svg class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block" viewBox="0 0 20 20" fill="currentColor" style="max-width:40px" aria-hidden="true">
|
<svg class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block" viewBox="0 0 20 20" fill="currentColor" style="max-width:40px" aria-hidden="true">
|
||||||
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||||
@ -357,6 +314,44 @@ function handleWatchlistModal() {
|
|||||||
<div>Delete</div>
|
<div>Delete</div>
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
|
<DropdownMenu.Root >
|
||||||
|
<DropdownMenu.Trigger asChild let:builder>
|
||||||
|
<Button builders={[builder]} class="ml-3 sm:ml-auto min-w-[110px] w-fit border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-lg truncate">
|
||||||
|
<span class="truncate font-semibold text-white shadow-sm">
|
||||||
|
Indicators
|
||||||
|
</span>
|
||||||
|
<svg class="-mr-1 ml-2 h-5 w-5 inline-block" viewBox="0 0 20 20" fill="currentColor" style="max-width:40px" aria-hidden="true">
|
||||||
|
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
||||||
|
</svg>
|
||||||
|
</Button>
|
||||||
|
</DropdownMenu.Trigger>
|
||||||
|
<DropdownMenu.Content class="w-56 h-fit max-h-72 overflow-y-auto scroller">
|
||||||
|
<div class="relative sticky z-40 focus:outline-none -top-1"
|
||||||
|
tabindex="0" role="menu" style="">
|
||||||
|
<input bind:value={searchQuery}
|
||||||
|
on:input={handleInput}
|
||||||
|
autocomplete="off"
|
||||||
|
class="text-sm absolute fixed sticky w-full border-0 bg-[#09090B] border-b border-gray-200
|
||||||
|
focus:border-gray-200 focus:ring-0 text-white placeholder:text-gray-300"
|
||||||
|
type="search"
|
||||||
|
placeholder="Search...">
|
||||||
|
</div>
|
||||||
|
<DropdownMenu.Separator />
|
||||||
|
<DropdownMenu.Group>
|
||||||
|
{#each (searchQuery?.length !== 0 ? testList : indicatorList) as item}
|
||||||
|
<DropdownMenu.Item class="sm:hover:bg-[#27272A]">
|
||||||
|
<div class="flex items-center" on:click|capture={(event) => event.preventDefault()}>
|
||||||
|
<label on:click={() => {handleChangeValue(item)}} class="cursor-pointer text-white" for={item}>
|
||||||
|
<input type="checkbox" class="rounded" checked={isChecked(item)}>
|
||||||
|
<span class="ml-2">{item}</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</DropdownMenu.Item>
|
||||||
|
{/each}
|
||||||
|
</DropdownMenu.Group>
|
||||||
|
</DropdownMenu.Content>
|
||||||
|
</DropdownMenu.Root>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -386,6 +381,7 @@ function handleWatchlistModal() {
|
|||||||
|
|
||||||
<WatchListCard
|
<WatchListCard
|
||||||
watchListId={displayWatchList?.id}
|
watchListId={displayWatchList?.id}
|
||||||
|
indicatorList={indicatorList}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
|
||||||
@ -464,112 +460,9 @@ function handleWatchlistModal() {
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!--Start Settings Watchlist Modal-->
|
|
||||||
<input type="checkbox" id="settingsWatchListModal" class="modal-toggle" />
|
|
||||||
|
|
||||||
<dialog id="settingsWatchListModal" class="modal modal-bottom sm:modal-middle">
|
|
||||||
|
|
||||||
|
|
||||||
<label for="settingsWatchListModal" class="cursor-pointer modal-backdrop bg-[#000] bg-opacity-[0.5]"></label>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="modal-box w-full bg-[#09090B] pb-5">
|
|
||||||
|
|
||||||
<div class="flex flex-row items-center mb-8">
|
|
||||||
<h3 class="text-white text-2xl font-bold">
|
|
||||||
Settings
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<label on:click={handleRenameList} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5 mt-5">
|
|
||||||
|
|
||||||
<div class="flex flex-row items-center w-full bg-[#303030] p-3 rounded-lg">
|
|
||||||
|
|
||||||
<div class="flex flex-col items-center w-full">
|
|
||||||
<span class="ml-1 text-white font-medium mr-auto">
|
|
||||||
Rename List
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none"><path d="M24 0v24H0V0h24ZM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018Zm.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01l-.184-.092Z"/><path fill="#CBD5FF" d="M15 3c1.296 0 2.496.41 3.477 1.11l-9.134 9.133a1 1 0 1 0 1.414 1.414l9.134-9.134A5.977 5.977 0 0 1 21 9v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h10Zm6.657-.657a1 1 0 0 1 0 1.414L19.89 5.523a6.035 6.035 0 0 0-1.414-1.414l1.766-1.766a1 1 0 0 1 1.414 0Z"/></g></svg>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</label>
|
|
||||||
|
|
||||||
|
|
||||||
<label on:click={handleDeleteList} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5 mt-5">
|
|
||||||
|
|
||||||
<div class="flex flex-row items-center w-full bg-[#303030] p-3 rounded-lg">
|
|
||||||
|
|
||||||
<div class="flex flex-col items-center w-full">
|
|
||||||
<span class="ml-1 text-white font-medium mr-auto">
|
|
||||||
Delete List
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none"><path d="M24 0v24H0V0h24ZM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018Zm.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01l-.184-.092Z"/><path fill="#CBD5FF" d="M20 5a1 1 0 1 1 0 2h-1l-.003.071l-.933 13.071A2 2 0 0 1 16.069 22H7.93a2 2 0 0 1-1.995-1.858l-.933-13.07A1.017 1.017 0 0 1 5 7H4a1 1 0 0 1 0-2h16Zm-6-3a1 1 0 1 1 0 2h-4a1 1 0 0 1 0-2h4Z"/></g></svg>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</dialog>
|
|
||||||
|
|
||||||
<!--End Settings Watchlist Modal-->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!--Start Edit Watchlist Modal-->
|
|
||||||
|
|
||||||
<input type="checkbox" id="editNameWatchList" class="modal-toggle" />
|
|
||||||
|
|
||||||
<dialog id="editNameWatchList" class="modal modal-bottom sm:modal-middle">
|
|
||||||
|
|
||||||
|
|
||||||
<label for="editNameWatchList" class="cursor-pointer modal-backdrop bg-[#000] bg-opacity-[0.5]"></label>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="modal-box w-full bg-[#09090B] sm:border sm:border-slate-600 " >
|
|
||||||
|
|
||||||
<div class="flex flex-row items-center">
|
|
||||||
<h3 class="text-white text-2xl font-bold">
|
|
||||||
Rename Watchlist
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<form
|
|
||||||
on:submit={editNameWatchList}
|
|
||||||
method="POST"
|
|
||||||
class="space-y-2 pt-5 pb-10"
|
|
||||||
>
|
|
||||||
<Input
|
|
||||||
id="title"
|
|
||||||
type="text"
|
|
||||||
label="New Name"
|
|
||||||
errors=''
|
|
||||||
required={true}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<input class="hidden" value={displayWatchList?.id} name ="watchListId"/>
|
|
||||||
|
|
||||||
<button type="submit" class="mt-10 btn bg-purple-600 hover:bg-purple-500 btn-md w-full rounded-lg m-auto text-white font-bold text-md">
|
|
||||||
Update Name
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</dialog>
|
|
||||||
|
|
||||||
<!--End Edit Watchlist Modal-->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!--Start Delete Strategy Modal-->
|
<!--Start Delete Strategy Modal-->
|
||||||
|
|
||||||
|
|||||||
57
src/routes/watchlist/stocks/workers/downloadWorker.ts
Normal file
57
src/routes/watchlist/stocks/workers/downloadWorker.ts
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
// Cache to store previous requests
|
||||||
|
let cache = new Map();
|
||||||
|
|
||||||
|
const getStockScreenerData = async (rules) => {
|
||||||
|
console.log("Checking cache and fetching new data if needed");
|
||||||
|
|
||||||
|
// Extract the rule names
|
||||||
|
let getRuleOfList = rules?.map((rule) => rule.name) || [];
|
||||||
|
|
||||||
|
// Convert the rule set into a string key for the cache
|
||||||
|
const ruleKey = JSON.stringify(getRuleOfList);
|
||||||
|
|
||||||
|
// Check if data for this rule set is already in the cache
|
||||||
|
if (cache.has(ruleKey)) {
|
||||||
|
console.log("Returning cached data");
|
||||||
|
return cache.get(ruleKey);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fetch new data if it's not in the cache
|
||||||
|
const postData = { ruleOfList: getRuleOfList };
|
||||||
|
const response = await fetch("/api/stock-screener-data", {
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
body: JSON.stringify(postData),
|
||||||
|
});
|
||||||
|
|
||||||
|
const output = await response.json();
|
||||||
|
|
||||||
|
// Store the new data in the cache
|
||||||
|
cache.set(ruleKey, output);
|
||||||
|
|
||||||
|
return output;
|
||||||
|
};
|
||||||
|
|
||||||
|
onmessage = async (event) => {
|
||||||
|
const { ruleOfList } = event.data || {};
|
||||||
|
|
||||||
|
const output = await getStockScreenerData(ruleOfList);
|
||||||
|
|
||||||
|
const stockScreenerData = output?.filter((item) =>
|
||||||
|
Object?.values(item)?.every(
|
||||||
|
(value) =>
|
||||||
|
value !== null &&
|
||||||
|
value !== undefined &&
|
||||||
|
(typeof value !== "object" ||
|
||||||
|
Object.values(value)?.every(
|
||||||
|
(subValue) => subValue !== null && subValue !== undefined
|
||||||
|
))
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
postMessage({ message: "success", stockScreenerData });
|
||||||
|
};
|
||||||
|
|
||||||
|
export {};
|
||||||
Loading…
x
Reference in New Issue
Block a user