update news section
This commit is contained in:
MuslemRahimi
parent
af67492e11
commit
5fcb820c85
@ -21,6 +21,7 @@
|
|||||||
let watchList: any[] = [];
|
let watchList: any[] = [];
|
||||||
|
|
||||||
let news = [];
|
let news = [];
|
||||||
|
let groupedNews = {};
|
||||||
let checkedItems;
|
let checkedItems;
|
||||||
let socket;
|
let socket;
|
||||||
|
|
||||||
@ -213,6 +214,22 @@
|
|||||||
|
|
||||||
watchList = output?.data;
|
watchList = output?.data;
|
||||||
news = output?.news;
|
news = output?.news;
|
||||||
|
news = news?.map((item) => {
|
||||||
|
const match = watchList?.find((w) => w?.symbol === item?.symbol);
|
||||||
|
return match ? { ...item, type: match?.type } : { ...item };
|
||||||
|
});
|
||||||
|
groupedNews = Object?.entries(
|
||||||
|
news?.reduce((acc, item) => {
|
||||||
|
const dateKey = new Intl.DateTimeFormat("en-US", {
|
||||||
|
day: "2-digit",
|
||||||
|
month: "short",
|
||||||
|
year: "numeric",
|
||||||
|
}).format(new Date(item?.publishedDate));
|
||||||
|
if (!acc[dateKey]) acc[dateKey] = [];
|
||||||
|
acc[dateKey]?.push(item);
|
||||||
|
return acc;
|
||||||
|
}, {}),
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
async function createWatchList(event) {
|
async function createWatchList(event) {
|
||||||
@ -1319,70 +1336,96 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="w-full m-auto border-b border-gray-600 mt-16 mb-16"
|
class="w-full m-auto border-b border-gray-600 mt-16 mb-10"
|
||||||
></div>
|
></div>
|
||||||
|
|
||||||
|
<div class=" text-white">
|
||||||
|
<div class="mb-3 flex items-center space-x-2">
|
||||||
<h2
|
<h2
|
||||||
class="text-start text-white text-xl sm:text-2xl font-bold mb-3"
|
class="text-start text-white text-xl sm:text-2xl font-bold"
|
||||||
>
|
>
|
||||||
News
|
News
|
||||||
</h2>
|
</h2>
|
||||||
|
<!--
|
||||||
|
<button title="Refresh news"
|
||||||
|
><svg
|
||||||
|
class="w-5 h-5 mt-1.5 text-icon"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
style="max-width:40px"
|
||||||
|
><path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
|
||||||
|
stroke-width="2"
|
||||||
|
></path></svg
|
||||||
|
></button
|
||||||
|
>
|
||||||
|
-->
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="relative text-gray-800 m-auto">
|
{#each groupedNews as [date, items]}
|
||||||
<div class="flex flex-wrap md:flex-row">
|
<h3 class="mb-1.5 mt-3 font-semibold text-faded">
|
||||||
{#each news as item}
|
{date}
|
||||||
<a
|
</h3>
|
||||||
href={item.url}
|
<div class="border border-gray-700">
|
||||||
target="_blank"
|
{#each items as item}
|
||||||
class="cursor-pointer mb-10 w-full"
|
<div class="flex border-gray-600 text-small">
|
||||||
>
|
|
||||||
<div class="flex-shrink-0 float-left">
|
|
||||||
<img
|
|
||||||
src={item?.image}
|
|
||||||
class="float-left w-36 sm:w-40 rounded-xl ml-2 mr-4 mb-2"
|
|
||||||
alt="news image"
|
|
||||||
loading="lazy"
|
|
||||||
/>
|
|
||||||
<div
|
<div
|
||||||
class="absolute w-36 sm:w-40 ml-2 mr-4 mb-2 h-6 bg-[#0C0F17] bg-opacity-80 flex justify-center items-center"
|
class="hidden min-w-[100px] items-center justify-center bg-[#27272A] p-1 lg:flex"
|
||||||
>
|
>
|
||||||
<p class="text-white italic text-xs">
|
{new Date(item.publishedDate).toLocaleTimeString(
|
||||||
{new URL(item?.url).hostname.replace(
|
"en-US",
|
||||||
"www.",
|
{
|
||||||
"",
|
hour: "2-digit",
|
||||||
|
minute: "2-digit",
|
||||||
|
hour12: true,
|
||||||
|
},
|
||||||
)}
|
)}
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="flex-grow">
|
|
||||||
<div class="text-sm text-white flex flex-row">
|
|
||||||
<div
|
<div
|
||||||
class="rounded-full w-6 h-6 relative bg-gray-800 mr-1.5 mb-0.5"
|
class="flex-grow px-3 py-2 lg:py-1 border-gray-700 border-t"
|
||||||
>
|
>
|
||||||
<img
|
<a
|
||||||
class="rounded-full w-4 h-4 absolute inset-1/2 transform -translate-x-1/2 -translate-y-1/2"
|
href={item?.url}
|
||||||
src={`https://financialmodelingprep.com/image-stock/${item.symbol}.png`}
|
target="_blank"
|
||||||
loading="lazy"
|
rel="nofollow noopener noreferrer"
|
||||||
/>
|
class="text-white sm:hover:text-blue-400"
|
||||||
</div>
|
|
||||||
{item?.symbol} · {formatDate(
|
|
||||||
item?.publishedDate,
|
|
||||||
)} ago
|
|
||||||
</div>
|
|
||||||
<h2
|
|
||||||
class="text-start text-sm sm:text-md font-medium mb-2 flex-shrink text-white"
|
|
||||||
>
|
>
|
||||||
{item.title}
|
<h4
|
||||||
</h2>
|
class="text-sm font-semibold lg:text-[1rem]"
|
||||||
<p class="text-white text-sm sm:text-md p-2">
|
>
|
||||||
{item?.text?.length > 250
|
{item?.title}
|
||||||
? item?.text?.slice(0, 250) + "..."
|
</h4>
|
||||||
: item?.text}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</a>
|
</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(
|
||||||
|
item.publishedDate,
|
||||||
|
).toLocaleTimeString("en-US", {
|
||||||
|
hour: "2-digit",
|
||||||
|
minute: "2-digit",
|
||||||
|
hour12: true,
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
<div class="text-white">{item?.site}</div>
|
||||||
|
·
|
||||||
|
<div class="flex flex-wrap gap-x-2">
|
||||||
|
<a
|
||||||
|
href={`/${item?.type}/${item?.symbol}`}
|
||||||
|
class="sm:hover:text-white text-blue-400"
|
||||||
|
>{item?.symbol}</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{:else}
|
{:else}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user