update price alert page
This commit is contained in:
MuslemRahimi
parent
b8dddde748
commit
1427713528
@ -15,7 +15,7 @@ export const GET: RequestHandler = async ({ locals }) => {
|
|||||||
|
|
||||||
let output = await response.json();
|
let output = await response.json();
|
||||||
|
|
||||||
output = output?.sort((a, b) => a?.symbol?.localeCompare(b?.symbol));
|
output.data = output?.data?.sort((a, b) => a?.symbol?.localeCompare(b?.symbol));
|
||||||
|
|
||||||
|
|
||||||
return new Response(JSON.stringify(output));
|
return new Response(JSON.stringify(output));
|
||||||
|
|||||||
@ -13,7 +13,7 @@ export const load = async ({ locals }) => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
let output = await response.json();
|
let output = await response.json();
|
||||||
output = output?.sort((a, b) => a?.symbol?.localeCompare(b?.symbol));
|
output.data = output?.data?.sort((a, b) => a?.symbol?.localeCompare(b?.symbol));
|
||||||
return output;
|
return output;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -1,7 +1,13 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { numberOfUnreadNotification, openPriceAlert } from "$lib/store";
|
import { numberOfUnreadNotification, openPriceAlert } from "$lib/store";
|
||||||
import { abbreviateNumber } from "$lib/utils";
|
import {
|
||||||
|
groupNews,
|
||||||
|
groupEarnings,
|
||||||
|
compareTimes,
|
||||||
|
formatTime,
|
||||||
|
abbreviateNumber,
|
||||||
|
calculateChange,
|
||||||
|
} from "$lib/utils";
|
||||||
//import { enhance } from '$app/forms';
|
//import { enhance } from '$app/forms';
|
||||||
import toast from "svelte-french-toast";
|
import toast from "svelte-french-toast";
|
||||||
import { goto } from "$app/navigation";
|
import { goto } from "$app/navigation";
|
||||||
@ -10,19 +16,54 @@
|
|||||||
import HoverStockChart from "$lib/components/HoverStockChart.svelte";
|
import HoverStockChart from "$lib/components/HoverStockChart.svelte";
|
||||||
import { Combobox } from "bits-ui";
|
import { Combobox } from "bits-ui";
|
||||||
import PriceAlert from "$lib/components/PriceAlert.svelte";
|
import PriceAlert from "$lib/components/PriceAlert.svelte";
|
||||||
|
import { onMount } from "svelte";
|
||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
|
|
||||||
let timeoutId;
|
let timeoutId;
|
||||||
let searchBarData = [];
|
let searchBarData = [];
|
||||||
|
|
||||||
let addTicker = "";
|
let addTicker = "";
|
||||||
let addAssetType = "";
|
let addAssetType = "";
|
||||||
|
let activeIdx = 0;
|
||||||
|
let rawTabData = [];
|
||||||
|
let displayList = [];
|
||||||
let editMode = false;
|
let editMode = false;
|
||||||
let numberOfChecked = 0;
|
let numberOfChecked = 0;
|
||||||
let deletePriceAlertList = [];
|
let priceAlertList = data?.getPriceAlert?.data;
|
||||||
|
|
||||||
let priceAlertList = data?.getPriceAlert;
|
let deletePriceAlertList = [];
|
||||||
|
let news = data?.getPriceAlert?.news || [];
|
||||||
|
let earnings = data?.getPriceAlert?.earnings || [];
|
||||||
|
|
||||||
|
news = news?.map((item) => {
|
||||||
|
const match = priceAlertList?.find((w) => w?.symbol === item?.symbol);
|
||||||
|
return match ? { ...item, type: match?.type } : { ...item };
|
||||||
|
});
|
||||||
|
earnings = earnings?.map((item) => {
|
||||||
|
const match = priceAlertList?.find((w) => w?.symbol === item?.symbol);
|
||||||
|
return match ? { ...item, name: match?.name } : { ...item };
|
||||||
|
});
|
||||||
|
let groupedNews = [];
|
||||||
|
let groupedEarnings = [];
|
||||||
|
|
||||||
|
if (priceAlertList?.length > 0) {
|
||||||
|
groupedEarnings = groupEarnings(earnings);
|
||||||
|
groupedNews = groupNews(news, priceAlertList);
|
||||||
|
} else {
|
||||||
|
groupedEarnings = [];
|
||||||
|
groupedNews = [];
|
||||||
|
}
|
||||||
|
changeTab(0);
|
||||||
|
|
||||||
|
const tabs = [
|
||||||
|
{
|
||||||
|
title: "News",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Earnings",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
async function handleFilter(priceAlertId) {
|
async function handleFilter(priceAlertId) {
|
||||||
const filterSet = new Set(deletePriceAlertList);
|
const filterSet = new Set(deletePriceAlertList);
|
||||||
@ -46,12 +87,6 @@
|
|||||||
"border-radius: 10px; background: #333; color: #fff; padding: 12px; margin-top: 10px; box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);",
|
"border-radius: 10px; background: #333; color: #fff; padding: 12px; margin-top: 10px; box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);",
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
priceAlertList = priceAlertList?.filter(
|
|
||||||
(item) => !deletePriceAlertList?.includes(item?.id),
|
|
||||||
);
|
|
||||||
|
|
||||||
priceAlertList = [...priceAlertList];
|
|
||||||
|
|
||||||
const postData = {
|
const postData = {
|
||||||
priceAlertIdList: deletePriceAlertList,
|
priceAlertIdList: deletePriceAlertList,
|
||||||
};
|
};
|
||||||
@ -63,6 +98,34 @@
|
|||||||
},
|
},
|
||||||
body: JSON.stringify(postData),
|
body: JSON.stringify(postData),
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const symbolsToDelete = priceAlertList
|
||||||
|
?.filter((item) => deletePriceAlertList.includes(item.id))
|
||||||
|
.map((item) => item.symbol);
|
||||||
|
|
||||||
|
// Filter out the price alerts
|
||||||
|
priceAlertList = priceAlertList?.filter(
|
||||||
|
(item) => !deletePriceAlertList?.includes(item.id),
|
||||||
|
);
|
||||||
|
|
||||||
|
// Filter news and earnings using the symbolsToDelete
|
||||||
|
news = news?.filter(
|
||||||
|
(newsItem) => !symbolsToDelete.includes(newsItem?.symbol),
|
||||||
|
);
|
||||||
|
|
||||||
|
earnings = earnings?.filter(
|
||||||
|
(earningsItem) => !symbolsToDelete.includes(earningsItem?.symbol),
|
||||||
|
);
|
||||||
|
priceAlertList = [...priceAlertList];
|
||||||
|
|
||||||
|
if (priceAlertList?.length > 0) {
|
||||||
|
groupedNews = [...groupNews(news, priceAlertList)];
|
||||||
|
groupedEarnings = [...groupEarnings(earnings)];
|
||||||
|
} else {
|
||||||
|
groupedEarnings = [];
|
||||||
|
groupedEarnings = [];
|
||||||
|
}
|
||||||
|
|
||||||
deletePriceAlertList = [];
|
deletePriceAlertList = [];
|
||||||
numberOfChecked = 0;
|
numberOfChecked = 0;
|
||||||
editMode = !editMode;
|
editMode = !editMode;
|
||||||
@ -98,6 +161,16 @@
|
|||||||
event?.preventDefault();
|
event?.preventDefault();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function changeTab(i) {
|
||||||
|
activeIdx = i;
|
||||||
|
if (activeIdx === 0) {
|
||||||
|
rawTabData = groupedNews;
|
||||||
|
} else {
|
||||||
|
rawTabData = groupedEarnings;
|
||||||
|
}
|
||||||
|
displayList = rawTabData?.slice(0, 8);
|
||||||
|
}
|
||||||
|
|
||||||
async function getPriceAlertList() {
|
async function getPriceAlertList() {
|
||||||
const response = await fetch("/api/get-price-alert", {
|
const response = await fetch("/api/get-price-alert", {
|
||||||
method: "GET",
|
method: "GET",
|
||||||
@ -106,8 +179,31 @@
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
let output = await response.json();
|
let output = await response.json();
|
||||||
output = output?.sort((a, b) => a?.symbol?.localeCompare(b?.symbol));
|
output.data = output?.data?.sort((a, b) =>
|
||||||
priceAlertList = [...output];
|
a?.symbol?.localeCompare(b?.symbol),
|
||||||
|
);
|
||||||
|
priceAlertList = [...output?.data];
|
||||||
|
|
||||||
|
news = output?.news;
|
||||||
|
earnings = output?.earnings;
|
||||||
|
|
||||||
|
news = news?.map((item) => {
|
||||||
|
const match = priceAlertList?.find((w) => w?.symbol === item?.symbol);
|
||||||
|
return match ? { ...item, type: match?.type } : { ...item };
|
||||||
|
});
|
||||||
|
|
||||||
|
earnings = earnings?.map((item) => {
|
||||||
|
const match = priceAlertList?.find((w) => w?.symbol === item?.symbol);
|
||||||
|
return match ? { ...item, name: match?.name } : { ...item };
|
||||||
|
});
|
||||||
|
if (priceAlertList?.length > 0) {
|
||||||
|
groupedEarnings = groupEarnings(earnings);
|
||||||
|
groupedNews = groupNews(news, priceAlertList);
|
||||||
|
} else {
|
||||||
|
groupedEarnings = [];
|
||||||
|
groupedNews = [];
|
||||||
|
}
|
||||||
|
changeTab(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
$: charNumber = $screenWidth < 640 ? 15 : 40;
|
$: charNumber = $screenWidth < 640 ? 15 : 40;
|
||||||
@ -126,6 +222,23 @@
|
|||||||
editMode = !editMode;
|
editMode = !editMode;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function handleScroll() {
|
||||||
|
const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
|
||||||
|
const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
|
||||||
|
if (isBottom && displayList?.length !== rawTabData?.length) {
|
||||||
|
const nextIndex = displayList?.length;
|
||||||
|
const filteredItem = rawTabData?.slice(nextIndex, nextIndex + 8);
|
||||||
|
displayList = [...displayList, ...filteredItem];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMount(async () => {
|
||||||
|
window.addEventListener("scroll", handleScroll);
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener("scroll", handleScroll);
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
let inputValue = "";
|
let inputValue = "";
|
||||||
let touchedInput = false;
|
let touchedInput = false;
|
||||||
|
|
||||||
@ -179,7 +292,7 @@
|
|||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
<section
|
<section
|
||||||
class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pt-5 px-4 lg:px-3"
|
class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pb-20 pt-5 px-4 lg:px-3"
|
||||||
>
|
>
|
||||||
<div class="text-sm sm:text-[1rem] breadcrumbs">
|
<div class="text-sm sm:text-[1rem] breadcrumbs">
|
||||||
<ul>
|
<ul>
|
||||||
@ -200,47 +313,7 @@
|
|||||||
</h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#if priceAlertList?.length === 0}
|
{#if data?.user}
|
||||||
<div class="flex flex-col justify-center items-center m-auto pt-8">
|
|
||||||
<span class="text-white font-bold text-white text-xl sm:text-3xl">
|
|
||||||
No Alerts set
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span
|
|
||||||
class="text-white text-sm sm:text-[1rem] m-auto p-4 text-center"
|
|
||||||
>
|
|
||||||
Create price alerts for your stocks that have the most potential
|
|
||||||
in your opinion.
|
|
||||||
</span>
|
|
||||||
{#if !data?.user}
|
|
||||||
<a
|
|
||||||
class="w-64 flex mt-10 justify-center items-center m-auto btn text-white bg-[#fff] sm:hover:bg-gray-300 transition duration-150 ease-in-out group"
|
|
||||||
href="/register"
|
|
||||||
>
|
|
||||||
Get Started
|
|
||||||
<span
|
|
||||||
class="tracking-normal group-hover:translate-x-0.5 transition-transform duration-150 ease-in-out"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
class="w-4 h-4"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
><g transform="rotate(90 12 12)"
|
|
||||||
><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="white"
|
|
||||||
d="M13.06 3.283a1.5 1.5 0 0 0-2.12 0L5.281 8.939a1.5 1.5 0 0 0 2.122 2.122L10.5 7.965V19.5a1.5 1.5 0 0 0 3 0V7.965l3.096 3.096a1.5 1.5 0 1 0 2.122-2.122L13.06 3.283Z"
|
|
||||||
/></g
|
|
||||||
></g
|
|
||||||
></svg
|
|
||||||
>
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
{:else}
|
|
||||||
<div
|
<div
|
||||||
class="w-full {$screenWidth < 640
|
class="w-full {$screenWidth < 640
|
||||||
? 'grid grid-cols-2'
|
? 'grid grid-cols-2'
|
||||||
@ -285,7 +358,7 @@
|
|||||||
>
|
>
|
||||||
{#if !editMode}
|
{#if !editMode}
|
||||||
<span class="ml-1 text-white text-sm sm:text-[1rem]">
|
<span class="ml-1 text-white text-sm sm:text-[1rem]">
|
||||||
Edit Watchlist
|
Edit Alert
|
||||||
</span>
|
</span>
|
||||||
{:else}
|
{:else}
|
||||||
<span class="ml-1 text-white text-sm sm:text-[1rem]">
|
<span class="ml-1 text-white text-sm sm:text-[1rem]">
|
||||||
@ -302,7 +375,7 @@
|
|||||||
bind:inputValue
|
bind:inputValue
|
||||||
bind:touchedInput
|
bind:touchedInput
|
||||||
>
|
>
|
||||||
<div class="relative sm:ml-3 w-full">
|
<div class="relative w-full">
|
||||||
<div
|
<div
|
||||||
class="absolute inset-y-0 left-0 flex items-center pl-2.5"
|
class="absolute inset-y-0 left-0 flex items-center pl-2.5"
|
||||||
>
|
>
|
||||||
@ -361,104 +434,366 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!--Start Table-->
|
<!--Start Table-->
|
||||||
<div
|
{#if priceAlertList?.length > 0}
|
||||||
class="w-full rounded-md overflow-hidden overflow-x-scroll no-scrollbar"
|
<div
|
||||||
>
|
class="w-full rounded-md overflow-hidden overflow-x-scroll no-scrollbar"
|
||||||
<table
|
|
||||||
class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto mt-4"
|
|
||||||
>
|
>
|
||||||
<!-- head -->
|
<table
|
||||||
<thead>
|
class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto mt-4"
|
||||||
<tr class="">
|
>
|
||||||
<th class="text-white font-semibold text-sm">Symbol</th>
|
<!-- head -->
|
||||||
<th class="text-white font-semibold text-sm">Company</th>
|
<thead>
|
||||||
|
<tr class="">
|
||||||
|
<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-end text-sm"
|
<th class="text-white font-semibold text-end text-sm"
|
||||||
>Price Target</th
|
>Price Target</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
|
|
||||||
>
|
|
||||||
<th class="text-white font-semibold text-end text-sm"
|
|
||||||
>Volume</th
|
|
||||||
>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody class="p-3">
|
|
||||||
{#each priceAlertList as item}
|
|
||||||
<!-- row -->
|
|
||||||
<tr
|
|
||||||
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]"
|
|
||||||
>
|
|
||||||
<td
|
|
||||||
on:click={() => handleFilter(item?.id)}
|
|
||||||
class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap text-start border-b-[#09090B] flex flex-row items-center"
|
|
||||||
>
|
>
|
||||||
<input
|
<th class="text-white font-semibold text-end text-sm"
|
||||||
type="checkbox"
|
>Condition</th
|
||||||
checked={deletePriceAlertList?.includes(item?.id) ??
|
|
||||||
false}
|
|
||||||
class="{!editMode
|
|
||||||
? 'hidden'
|
|
||||||
: ''} bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 mr-3 cursor-pointer"
|
|
||||||
/>
|
|
||||||
{#if !editMode}
|
|
||||||
<HoverStockChart
|
|
||||||
symbol={item?.symbol}
|
|
||||||
assetType={item?.assetType}
|
|
||||||
/>
|
|
||||||
{:else}
|
|
||||||
{item?.symbol}
|
|
||||||
{/if}
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td
|
|
||||||
class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
|
|
||||||
>
|
>
|
||||||
{item?.name?.length > charNumber
|
<th class="text-white font-semibold text-end text-sm">
|
||||||
? item?.name?.slice(0, charNumber) + "..."
|
Price</th
|
||||||
: item?.name}
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td
|
|
||||||
class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"
|
|
||||||
>
|
>
|
||||||
{item?.targetPrice}
|
<th class="text-white font-semibold text-end text-sm"
|
||||||
</td>
|
>% Change</th
|
||||||
|
|
||||||
<td
|
|
||||||
class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"
|
|
||||||
>
|
>
|
||||||
{item.price?.toFixed(2)}
|
<th class="text-white font-semibold text-end text-sm"
|
||||||
</td>
|
>Volume</th
|
||||||
|
|
||||||
<td
|
|
||||||
class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"
|
|
||||||
>
|
>
|
||||||
{#if item?.changesPercentage >= 0}
|
|
||||||
<span class="text-[#00FC50]"
|
|
||||||
>+{item?.changesPercentage?.toFixed(2)}%</span
|
|
||||||
>
|
|
||||||
{:else}
|
|
||||||
<span class="text-[#FF2F1F]"
|
|
||||||
>{item?.changesPercentage?.toFixed(2)}%
|
|
||||||
</span>
|
|
||||||
{/if}
|
|
||||||
</td>
|
|
||||||
<td
|
|
||||||
class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"
|
|
||||||
>
|
|
||||||
{abbreviateNumber(item?.volume)}
|
|
||||||
</td>
|
|
||||||
</tr>
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="p-3">
|
||||||
|
{#each priceAlertList as item}
|
||||||
|
<!-- row -->
|
||||||
|
<tr
|
||||||
|
class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B]"
|
||||||
|
>
|
||||||
|
<td
|
||||||
|
on:click={() => handleFilter(item?.id)}
|
||||||
|
class="text-blue-400 font-medium text-sm sm:text-[1rem] whitespace-nowrap text-start border-b-[#09090B] flex flex-row items-center"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={deletePriceAlertList?.includes(item?.id) ??
|
||||||
|
false}
|
||||||
|
class="{!editMode
|
||||||
|
? 'hidden'
|
||||||
|
: ''} bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 mr-3 cursor-pointer"
|
||||||
|
/>
|
||||||
|
{#if !editMode}
|
||||||
|
<HoverStockChart
|
||||||
|
symbol={item?.symbol}
|
||||||
|
assetType={item?.assetType}
|
||||||
|
/>
|
||||||
|
{:else}
|
||||||
|
{item?.symbol}
|
||||||
|
{/if}
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td
|
||||||
|
class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b-[#09090B]"
|
||||||
|
>
|
||||||
|
{item?.name?.length > charNumber
|
||||||
|
? item?.name?.slice(0, charNumber) + "..."
|
||||||
|
: item?.name}
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td
|
||||||
|
class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"
|
||||||
|
>
|
||||||
|
{item?.targetPrice}
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td
|
||||||
|
class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"
|
||||||
|
>
|
||||||
|
{item?.condition}
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td
|
||||||
|
class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"
|
||||||
|
>
|
||||||
|
{item.price?.toFixed(2)}
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td
|
||||||
|
class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"
|
||||||
|
>
|
||||||
|
{#if item?.changesPercentage >= 0}
|
||||||
|
<span class="text-[#00FC50]"
|
||||||
|
>+{item?.changesPercentage?.toFixed(2)}%</span
|
||||||
|
>
|
||||||
|
{:else}
|
||||||
|
<span class="text-[#FF2F1F]"
|
||||||
|
>{item?.changesPercentage?.toFixed(2)}%
|
||||||
|
</span>
|
||||||
|
{/if}
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class="text-white font-medium text-sm sm:text-[1rem] whitespace-nowrap text-end border-b-[#09090B]"
|
||||||
|
>
|
||||||
|
{abbreviateNumber(item?.volume)}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{/each}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="w-full m-auto border-b border-gray-600 mt-10 mb-5"
|
||||||
|
></div>
|
||||||
|
|
||||||
|
<div class=" text-white">
|
||||||
|
<div
|
||||||
|
class="inline-flex justify-center w-full rounded-md sm:w-auto mb-3"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="bg-[#313131] w-full min-w-24 sm:w-fit relative flex flex-wrap items-center justify-center rounded-md p-1 mt-4"
|
||||||
|
>
|
||||||
|
{#each tabs as item, i}
|
||||||
|
{#if data?.user?.tier !== "Pro" && i > 0}
|
||||||
|
<button
|
||||||
|
on:click={() => goto("/pricing")}
|
||||||
|
class="group relative z-[1] rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="relative text-sm sm:text-[1rem] block font-semibold"
|
||||||
|
>
|
||||||
|
{item.title}
|
||||||
|
<svg
|
||||||
|
class="inline-block ml-0.5 -mt-1 w-3.5 h-3.5"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
><path
|
||||||
|
fill="#A3A3A3"
|
||||||
|
d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
|
||||||
|
/></svg
|
||||||
|
>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
{:else}
|
||||||
|
<button
|
||||||
|
on:click={() => changeTab(i)}
|
||||||
|
class="group relative z-[1] rounded-full w-1/2 min-w-24 md:w-auto px-5 py-1 {activeIdx ===
|
||||||
|
i
|
||||||
|
? 'z-0'
|
||||||
|
: ''} "
|
||||||
|
>
|
||||||
|
{#if activeIdx === i}
|
||||||
|
<div
|
||||||
|
class="absolute inset-0 rounded-md bg-[#fff]"
|
||||||
|
></div>
|
||||||
|
{/if}
|
||||||
|
<span
|
||||||
|
class="relative text-sm sm:text-[1rem] block font-semibold {activeIdx ===
|
||||||
|
i
|
||||||
|
? 'text-black'
|
||||||
|
: 'text-white'}"
|
||||||
|
>
|
||||||
|
{item.title}
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{#if activeIdx === 0}
|
||||||
|
{#if groupedNews?.length > 0}
|
||||||
|
{#each displayList as [date, titleGroups]}
|
||||||
|
<h3 class="mb-1.5 mt-3 font-semibold text-faded">
|
||||||
|
{date}
|
||||||
|
</h3>
|
||||||
|
<div class="border border-gray-700">
|
||||||
|
{#each titleGroups as { title, items, symbols }}
|
||||||
|
<div class="flex border-gray-600 text-small">
|
||||||
|
<div
|
||||||
|
class="hidden min-w-[100px] items-center justify-center bg-[#27272A] p-1 lg:flex"
|
||||||
|
>
|
||||||
|
{new Date(
|
||||||
|
items[0].publishedDate,
|
||||||
|
).toLocaleTimeString("en-US", {
|
||||||
|
hour: "2-digit",
|
||||||
|
minute: "2-digit",
|
||||||
|
hour12: true,
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="flex-grow px-3 py-2 lg:py-1 border-t border-gray-700"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href={items[0].url}
|
||||||
|
target="_blank"
|
||||||
|
rel="nofollow noopener noreferrer"
|
||||||
|
class="text-white sm:hover:text-blue-400"
|
||||||
|
>
|
||||||
|
<h4
|
||||||
|
class="text-sm font-semibold lg:text-[1rem]"
|
||||||
|
>
|
||||||
|
{title}
|
||||||
|
</h4>
|
||||||
|
</a>
|
||||||
|
<div
|
||||||
|
class="flex flex-wrap gap-x-2 pt-2 text-sm lg:pt-0.5"
|
||||||
|
>
|
||||||
|
<div class="text-white lg:hidden">
|
||||||
|
{new Date(
|
||||||
|
items[0].publishedDate,
|
||||||
|
).toLocaleTimeString("en-US", {
|
||||||
|
hour: "2-digit",
|
||||||
|
minute: "2-digit",
|
||||||
|
hour12: true,
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
<div class="text-white">
|
||||||
|
{items[0].site}
|
||||||
|
</div>
|
||||||
|
·
|
||||||
|
<div class="flex flex-wrap gap-x-2">
|
||||||
|
{#each symbols as symbol}
|
||||||
|
<a
|
||||||
|
href={`/${items[0].type}/${symbol}`}
|
||||||
|
class="sm:hover:text-white text-blue-400"
|
||||||
|
>
|
||||||
|
{symbol}
|
||||||
|
</a>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
{:else}
|
||||||
|
<div class="text-sm sm:text-[1rem] mt-5">
|
||||||
|
No news yet. Add some stocks to the price alert list to
|
||||||
|
see the latest news.
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{:else if groupedEarnings?.length > 0}
|
||||||
|
{#each displayList as [date, titleGroups]}
|
||||||
|
<h3 class="mb-1.5 mt-3 font-semibold text-faded">
|
||||||
|
{date}
|
||||||
|
</h3>
|
||||||
|
<div class="border border-gray-700">
|
||||||
|
{#each titleGroups as item}
|
||||||
|
<div class="flex border-gray-600 text-small">
|
||||||
|
<div
|
||||||
|
class="hidden min-w-[100px] items-center justify-center bg-[#27272A] p-1 lg:flex"
|
||||||
|
>
|
||||||
|
{formatTime(item?.time)}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="flex-grow px-3 py-2 lg:py-1 border-t border-gray-700"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<strong>{item?.name}</strong>
|
||||||
|
(<HoverStockChart symbol={item?.symbol} />)
|
||||||
|
{item?.isToday
|
||||||
|
? "will report today"
|
||||||
|
: [
|
||||||
|
"Monday",
|
||||||
|
"Tuesday",
|
||||||
|
"Wednesday",
|
||||||
|
"Thursday",
|
||||||
|
].includes(
|
||||||
|
new Date().toLocaleDateString("en-US", {
|
||||||
|
weekday: "long",
|
||||||
|
}),
|
||||||
|
)
|
||||||
|
? "will report tomorrow"
|
||||||
|
: "will report Monday"}
|
||||||
|
{#if item?.time}
|
||||||
|
{#if compareTimes(item?.time, "16:00") >= 0}
|
||||||
|
after market closes.
|
||||||
|
{:else if compareTimes(item?.time, "09:30") <= 0}
|
||||||
|
before market opens.
|
||||||
|
{:else}
|
||||||
|
during market.
|
||||||
|
{/if}
|
||||||
|
{/if}
|
||||||
|
Analysts estimate {abbreviateNumber(
|
||||||
|
item?.revenueEst,
|
||||||
|
true,
|
||||||
|
)} in revenue ({(
|
||||||
|
(item?.revenueEst / item?.revenuePrior - 1) *
|
||||||
|
100
|
||||||
|
)?.toFixed(2)}% YoY) and ${item?.epsEst} in earnings
|
||||||
|
per share ({(
|
||||||
|
(item?.epsEst / item?.epsPrior - 1) *
|
||||||
|
100
|
||||||
|
)?.toFixed(2)}% YoY).
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="flex flex-wrap gap-x-2 pt-2 text-sm lg:pt-0.5"
|
||||||
|
>
|
||||||
|
<div class="text-white lg:hidden">
|
||||||
|
{formatTime(item?.time)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
</tbody>
|
{:else}
|
||||||
</table>
|
<div class="text-sm sm:text-[1rem] mt-5">
|
||||||
</div>
|
No earnings yet. Add some stocks to the alert list to see
|
||||||
<!--End Table-->
|
the latest earnings data.
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if priceAlertList?.length === 0}
|
||||||
|
<div
|
||||||
|
class="flex flex-col justify-center items-center m-auto mt-14"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="text-white font-bold text-white text-xl sm:text-3xl"
|
||||||
|
>
|
||||||
|
No Alerts set
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="text-white text-sm sm:text-[1rem] m-auto p-4 text-center"
|
||||||
|
>
|
||||||
|
Create price alerts for your stocks that have the most
|
||||||
|
potential in your opinion.
|
||||||
|
</span>
|
||||||
|
{#if !data?.user}
|
||||||
|
<a
|
||||||
|
class="w-64 flex mt-10 justify-center items-center m-auto btn text-white bg-[#fff] sm:hover:bg-gray-300 transition duration-150 ease-in-out group"
|
||||||
|
href="/register"
|
||||||
|
>
|
||||||
|
Get Started
|
||||||
|
<span
|
||||||
|
class="tracking-normal group-hover:translate-x-0.5 transition-transform duration-150 ease-in-out"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-4 h-4"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
><g transform="rotate(90 12 12)"
|
||||||
|
><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="white"
|
||||||
|
d="M13.06 3.283a1.5 1.5 0 0 0-2.12 0L5.281 8.939a1.5 1.5 0 0 0 2.122 2.122L10.5 7.965V19.5a1.5 1.5 0 0 0 3 0V7.965l3.096 3.096a1.5 1.5 0 1 0 2.122-2.122L13.06 3.283Z"
|
||||||
|
/></g
|
||||||
|
></g
|
||||||
|
></svg
|
||||||
|
>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
{/if}
|
{/if}
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
|||||||
@ -237,6 +237,7 @@
|
|||||||
|
|
||||||
watchList = output?.data;
|
watchList = output?.data;
|
||||||
news = output?.news;
|
news = output?.news;
|
||||||
|
console.log(news);
|
||||||
earnings = output?.earnings;
|
earnings = output?.earnings;
|
||||||
|
|
||||||
news = news?.map((item) => {
|
news = news?.map((item) => {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user