From 84d8c7346d3b1da26ca329a6e7e28f789c6acec6 Mon Sep 17 00:00:00 2001 From: MuslemRahimi Date: Thu, 10 Oct 2024 15:31:36 +0200 Subject: [PATCH] update watchlist page --- src/lib/components/WatchListCard.svelte | 115 +------ src/routes/watchlist/+layout.svelte | 1 - src/routes/watchlist/stocks/+page.svelte | 387 +++++------------------ 3 files changed, 99 insertions(+), 404 deletions(-) diff --git a/src/lib/components/WatchListCard.svelte b/src/lib/components/WatchListCard.svelte index bc3e4281..5d65e74e 100644 --- a/src/lib/components/WatchListCard.svelte +++ b/src/lib/components/WatchListCard.svelte @@ -74,18 +74,6 @@ const sortTickersByVolume = (tickerList) => { }); }; -const sortTickersBySharesOutstanding = (tickerList) => { - return tickerList.sort(function(a, b) { - if(order === 'highToLow') - { - return b?.sharesOutstanding - a?.sharesOutstanding; - } - else { - return a?.sharesOutstanding - b?.sharesOutstanding; - } - - }); -} const sortTickersByMarketCap = (tickerList) => { return tickerList.sort(function(a, b) { @@ -149,9 +137,6 @@ news = output[1]; -let roundedMean = 0; -let sum = 0; - onMount( async () => { @@ -291,8 +276,6 @@ $: { if($switchWatchList && typeof window !== 'undefined') { isLoaded = false - sum = 0; - roundedMean = 0; getWatchlistData() @@ -302,21 +285,6 @@ $: { } } -$: { -if(watchList && isLoaded) -{ - sum = 0; - for (let i = 0; i < watchList?.length; i++) { - const change = parseFloat(watchList[i]?.changesPercentage); - sum += change; - } - - //const mean = sum / watchList?.length; - const mean = sum; - roundedMean = mean?.toFixed(2); -} -} - @@ -325,7 +293,7 @@ if(watchList && isLoaded) -
+
@@ -334,55 +302,7 @@ if(watchList && isLoaded) {#if watchList.length !== 0} -
-
- - -
- -
- {#if roundedMean >= 0} - - +{roundedMean}% - {:else if roundedMean < 0} - - {roundedMean}% - {/if} -
-
- - - - -
- - - - -
+
@@ -392,18 +312,18 @@ if(watchList && isLoaded) - Symbol - Company - EPS - PE Ratio - Volume - Market Cap - Price - Change + Symbol + Company + EPS + PE Ratio + Volume + Market Cap + Price + Change - {#each watchList as item, index} + {#each watchList as item} @@ -418,22 +338,19 @@ if(watchList && isLoaded) {item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name} - + {item?.eps !== null ? item?.eps?.toFixed(2) : '-'} - + {item?.pe !== null ? item?.pe?.toFixed(2) : '-'} - - {new Intl.NumberFormat("en", { - minimumFractionDigits: 2, - maximumFractionDigits: 2 - }).format(item?.volume)} + + {abbreviateNumber(item?.volume)} - + {abbreviateNumber(item?.marketCap,true)} diff --git a/src/routes/watchlist/+layout.svelte b/src/routes/watchlist/+layout.svelte index b65ebf4a..97c72755 100644 --- a/src/routes/watchlist/+layout.svelte +++ b/src/routes/watchlist/+layout.svelte @@ -135,7 +135,6 @@ let activeIdx = 0; - diff --git a/src/routes/watchlist/stocks/+page.svelte b/src/routes/watchlist/stocks/+page.svelte index f548d838..b16d26c4 100644 --- a/src/routes/watchlist/stocks/+page.svelte +++ b/src/routes/watchlist/stocks/+page.svelte @@ -3,88 +3,17 @@ import { numberOfUnreadNotification } from '$lib/store'; //import { enhance } from '$app/forms'; import toast from 'svelte-french-toast'; import { onDestroy, onMount } from 'svelte'; -import { Drawer } from "vaul-svelte"; import Input from '$lib/components/Input.svelte'; import WatchListCard from '$lib/components/WatchListCard.svelte'; import {screenWidth, switchWatchList } from '$lib/store'; -//import MiniPlot from '$lib/components/MiniPlot.svelte'; -import { goto } from '$app/navigation'; -import ArrowLogo from "lucide-svelte/icons/move-up-right"; - -let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL; +import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js"; +import { Button } from "$lib/components/shadcn/button/index.js"; export let data; -/* - -const rawData = data?.getMiniPlotsIndex; - -function getCurrentDateFormatted() { - // Get current date - let date = new Date(); - - // If today is Saturday or Sunday, move to the previous Friday - if (date.getDay() === 6) { // Saturday - date.setDate(date.getDate() - 1); - } else if (date.getDay() === 0) { // Sunday - date.setDate(date.getDate() - 2); - } - - // Define months array for formatting - const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; - - // Get formatted date components - const month = months[date.getMonth()]; - const day = date.getDate(); - const year = date.getFullYear(); - - // Return formatted date - return `${month} ${day}, ${year}`; -} - -let priceDataSP500; -let priceDataNasdaq; -let priceDataDowJones; -let priceDataRussel2000; - -let changeSP500, changeNasdaq, changeDowJones, changeRussel2000; -let previousCloseSP500, previousCloseNasdaq, previousCloseDowJones, previousCloseRussel2000; -// Assign values based on the symbol -rawData?.forEach(({ symbol, priceData, changesPercentage, previousClose }) => { - switch (symbol) { - case "SPY": - priceDataSP500 = priceData?.map(({ time, value }) => ({ time: Date?.parse(time), value})); - priceDataSP500 = priceDataSP500?.filter(item => item.value !== 0 && item.value !== null && item.value !== undefined) - changeSP500 = changesPercentage; - previousCloseSP500 = previousClose; - break; - case "QQQ": - priceDataNasdaq = priceData?.map(({ time, value }) => ({ time: Date?.parse(time), value})); - priceDataNasdaq = priceDataNasdaq?.filter(item => item.value !== 0 && item.value !== null && item.value !== undefined) - changeNasdaq = changesPercentage; - previousCloseNasdaq = previousClose; - break; - case "DIA": - priceDataDowJones = priceData?.map(({ time, value }) => ({ time: Date?.parse(time), value})); - priceDataDowJones = priceDataDowJones?.filter(item => item.value !== 0 && item.value !== null && item.value !== undefined) - changeDowJones = changesPercentage - previousCloseDowJones = previousClose; - break; - case "IWM": - priceDataRussel2000 = priceData?.map(({ time, value }) => ({ time: Date?.parse(time), value})); - priceDataRussel2000 = priceDataRussel2000?.filter(item => item.value !== 0 && item.value !== null && item.value !== undefined) - changeRussel2000 = changesPercentage; - previousCloseRussel2000 = previousClose; - break; - default: - // Handle unknown symbol - break; - } -}); -*/ let isLoaded = false; @@ -101,7 +30,7 @@ rawData?.forEach(({ symbol, priceData, changesPercentage, previousClose }) => { } async function handleDeleteList() { - const clicked = document.getElementById('deleteWatchList'); + const clicked = document.getElementById('deleteWatchlist'); clicked.dispatchEvent(new MouseEvent('click')); const unClicked = document.getElementById('settingsWatchListModal'); unClicked.dispatchEvent(new MouseEvent('click')); @@ -152,7 +81,7 @@ async function createWatchList(event) { }); - const clicked = document.getElementById('addWatchList'); + const clicked = document.getElementById('addWatchlist'); clicked?.dispatchEvent(new MouseEvent('click')); const anchor = document.createElement('a'); @@ -259,7 +188,7 @@ async function editNameWatchList(event) { -async function deleteWatchList(event) { +async function deleteWatchlist(event) { event.preventDefault(); // prevent the default form submission behavior const postData = {'watchListId': displayWatchList?.id, 'path': 'delete-watchlist'}; @@ -291,7 +220,7 @@ async function deleteWatchList(event) { changeWatchList(displayWatchList); - const clicked = document.getElementById('deleteWatchList'); + const clicked = document.getElementById('deleteWatchlist'); clicked.dispatchEvent(new MouseEvent('click')); @@ -337,6 +266,10 @@ onDestroy( () => { }) +function handleWatchlistModal() { + const closePopup = document.getElementById("addWatchlist"); + closePopup?.dispatchEvent(new MouseEvent('click')) +} @@ -369,7 +302,7 @@ onDestroy( () => { -
+
@@ -381,66 +314,55 @@ onDestroy( () => { {#if isLoaded} - - - {#if allList?.length !== 0} -
- -
- -
- {:else} -
- -
- {/if} + + {#if allList.length === 0}
@@ -501,67 +423,13 @@ onDestroy( () => { -{#if $screenWidth < 640} - - - - - -
-
-
- -
-
-
- - - - - - - - - - -
-
-
- New Watchlist - - - - - - - - - -
- - - - -{:else} - + - + - +
@@ -570,7 +438,7 @@ onDestroy( () => {
{ -
- - {/if} - + @@ -707,125 +573,38 @@ onDestroy( () => { - - - - - - + + + + -
- -

- Are you sure you want to delete the watchlist? -

- -
- -
+ + +
+ + + - - - - - - - - - - - - - -
- -

- Watchlists -

- - - -
- -
- - {#each allList as item} - - {/each} - -
- -
- - - -
- - - - - - - - \ No newline at end of file