AmineTMIRI/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui fixes

Browse Source
This commit is contained in:
MuslemRahimi 2024-09-17 16:13:51 +02:00
parent 2ae8736828
commit c7f8d14461
4 changed files with 164 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/routes/earnings-calendar/+page.svelte
View File

@ -461,7 +461,7 @@ $: {
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Pro Subscription
Pro Subscription 🔥
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
</div>

92
src/routes/market-news/+layout.svelte
View File

@ -3,11 +3,38 @@ import logo from '$lib/images/news_logo.png'
import ScrollToTop from '$lib/components/ScrollToTop.svelte';
import ArrowLogo from "lucide-svelte/icons/move-up-right";
import { goto } from '$app/navigation';
import { page } from '$app/stores';
export let data;
let displaySection = 'stock'
function handleMode(i) {
activeIdx = i;
if(activeIdx === 0) {
goto("/market-news")
} else if (activeIdx === 1) {
goto("/market-news/general")
}
}
const tabs = [
{
title: "Stock",
},
{
title: "General",
},
];
let activeIdx = 0;
// Subscribe to the $page store to reactively update the activeIdx based on the URL
$: if ($page.url.pathname === '/market-news') {
activeIdx = 0;
} else if ($page.url.pathname.startsWith('/market-news/general')) {
activeIdx = 1;
}
</script>
<!-- HEADER FOR BETTER SEO -->
@ -86,22 +113,25 @@ let displaySection = 'stock'
<div class="w-full mb-2" >
<ul class="pr-4 sm:pr-0 w-full font-medium flex flex-row items-center bg-[#09090B] overflow-x-scroll no-scrollbar space-x-3 rtl:space-x-reverse py-2">
<li class="cursor-pointer flex flex-col items-center text-xl">
<a href='/market-news' on:click={() => displaySection = 'stock'} class="px-3 font-medium text-gray-400 sm:hover:text-white {displaySection === 'stock' ? 'text-white ' : 'bg-[#09090B]'}" >
Stock
</a>
<div class="{displaySection === 'stock' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[4.2rem]" />
</li>
<li class="cursor-pointer flex flex-col items-center text-xl">
<a href='/market-news/general' on:click={() => displaySection = 'general'} class="px-3 font-medium text-gray-400 sm:hover:text-white {displaySection === 'general' ? 'text-white ' : 'bg-[#09090B]'}" >
General
</a>
<div class="{displaySection === 'general' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[4.2rem]" />
</li>
</ul>
</div>
<div class="bg-[#313131] w-fit relative mr-auto flex flex-wrap items-center justify-center rounded sm:rounded-lg p-1 -mt-3">
{#each tabs as item, i}
<button
on:click={() => handleMode(i)}
class="group relative z-[1] rounded-full px-6 py-1 {activeIdx === i
? 'z-0'
: ''} "
>
{#if activeIdx === i}
<div
class="absolute inset-0 rounded-lg bg-purple-600"
></div>
{/if}
<span class="relative text-[1rem] sm:text-lg block font-semibold duration-200 text-white">
{item.title}
</span>
</button>
{/each}
</div>
@ -121,7 +151,7 @@ let displaySection = 'stock'
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Pro Subscription
Pro Subscription 🔥
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
</div>
@ -132,30 +162,44 @@ let displaySection = 'stock'
</div>
{/if}
<div on:click={() => goto('/analysts')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
<div on:click={() => goto('/earnings-calendar')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Earnings Calendar 🌟
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
</div>
<span class="text-white p-3 ml-3 mr-3">
Get the latest Earnings of companies
</span>
</div>
</div>
<div on:click={() => goto('/dividends-calendar')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Wallstreet Analyst
Dividend Calendar 💸
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
</div>
<span class="text-white p-3 ml-3 mr-3">
Get the latest top Wall Street analyst ratings.
Stay updated on upcoming Dividends in the stock market.
</span>
</div>
</div>
<div on:click={() => goto('/politicians')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
<div on:click={() => goto('/economic-calendar')} class="w-full bg-[#141417] duration-100 ease-out sm:hover:text-white text-gray-400 sm:hover:border-gray-700 border border-gray-800 rounded-lg h-fit pb-4 mt-4 cursor-pointer">
<div class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0">
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Congress Trading
Economic Events 🌍
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0"/>
</div>
<span class="text-white p-3 ml-3 mr-3">
Get the latest top Congress trading insights.
Stay updated on upcoming Economic Events worldwide.
</span>
</div>
</div>

36
src/routes/market-news/+page.svelte
View File

@ -1,9 +1,8 @@
<script lang="ts">
import { formatDistanceToNow } from 'date-fns';
import { formatInTimeZone } from 'date-fns-tz'
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
import { numberOfUnreadNotification } from '$lib/store';
import { onMount } from 'svelte';
export let data;
@ -37,17 +36,22 @@ const inputDate = new Date(dateString);
};
async function infiniteHandler({ detail: { loaded, complete } })
{
if (news?.length === rawData?.length) {
complete();
} else {
const nextIndex = news?.length;
const newArticles = rawData?.slice(nextIndex, nextIndex + 5);
news = [...news, ...newArticles];
loaded();
async function handleScroll() {
const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
if (isBottom && news?.length !== rawData?.length) {
const nextIndex = news?.length;
const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 25);
news = [...news, ...filteredNewResults];
}
}
}
onMount(async () => {
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
};
})
let videoId = null;
@ -117,7 +121,7 @@ function checkIfYoutubeVideo(link) {
{:else}
<a href={item.url} target="_blank">
<div class="h-48 sm:h-60 m-auto border border-slate-800 rounded-none sm:rounded-lg ">
<img src={item?.image} class="w-screen sm:w-full h-48 sm:h-60 rounded-none sm:rounded-t-lg" alt="news image" loading="lazy">
<img src={item?.image} class="w-screen sm:w-full object-cover h-48 sm:h-60 rounded-none sm:rounded-t-lg" alt="news image" loading="lazy">
</div>
</a>
{/if}
@ -137,7 +141,7 @@ function checkIfYoutubeVideo(link) {
{item?.title?.length > 120 ? item?.title?.slice(0,120) +'...' : item?.title}
</a>
<p class="text-white text-sm mt-2">
{item?.text.length > 100 ? item?.text.slice(0,100) + "..." : item?.text}
{item?.text?.length > 100 ? item?.text?.slice(0,100) + "..." : item?.text}
</p>
</div>
@ -145,8 +149,6 @@ function checkIfYoutubeVideo(link) {
{/each}
<InfiniteLoading on:infinite={infiniteHandler} />
{/if}

122
src/routes/market-news/general/+page.svelte
View File

@ -1,50 +1,81 @@
<script lang="ts">
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
import { numberOfUnreadNotification } from '$lib/store';
import { formatDate } from '$lib/utils';
export let data;
let rawData = data?.getGeneralNews;
let news = rawData.slice(0,15) ?? [];
async function infiniteHandler({ detail: { loaded, complete } })
{
if (news?.length === rawData?.length) {
complete();
} else {
const nextIndex = news?.length;
const newArticles = rawData?.slice(nextIndex, nextIndex + 5);
news = [...news, ...newArticles];
loaded();
}
}
let videoId = null;
function checkIfYoutubeVideo(link) {
const url = new URL(link);
if (url.hostname === "www.youtube.com") {
const searchParams = url.searchParams;
searchParams.delete('t'); // Remove the "t" parameter
const videoIdMatch = url.search.match(/v=([^&]+)/);
if (videoIdMatch) {
return videoIdMatch[1];
}
} else {
return null;
}
import { numberOfUnreadNotification } from '$lib/store';
import { onMount } from 'svelte';
export let data;
let rawData = data?.getGeneralNews;
let news = rawData.slice(0,15) ?? [];
const formatDate = (dateString) => {
// Create a date object for the input dateString
const inputDate = new Date(dateString);
// Create a date object for the current time in New York City
const nycTime = new Date().toLocaleString("en-US", { timeZone: "America/New_York" });
const currentNYCDate = new Date(nycTime);
// Calculate the difference in milliseconds
const difference = inputDate.getTime() - currentNYCDate.getTime();
// Convert the difference to minutes
const minutes = Math.abs(Math.round(difference / (1000 * 60)));
if (minutes < 60) {
return `${minutes} minutes`;
} else if (minutes < 1440) {
const hours = Math.round(minutes / 60);
return `${hours} hour${hours !== 1 ? 's' : ''}`;
} else {
const days = Math.round(minutes / 1440);
return `${days} day${days !== 1 ? 's' : ''}`;
}
};
async function handleScroll() {
const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
if (isBottom && news?.length !== rawData?.length) {
const nextIndex = news?.length;
const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 25);
news = [...news, ...filteredNewResults];
}
</script>
}
onMount(async () => {
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
};
})
let videoId = null;
function checkIfYoutubeVideo(link) {
const url = new URL(link);
if (url.hostname === "www.youtube.com") {
const searchParams = url.searchParams;
searchParams?.delete('t'); // Remove the "t" parameter
const videoIdMatch = url?.search?.match(/v=([^&]+)/);
if (videoIdMatch) {
return videoIdMatch[1];
}
} else {
return null;
}
}
</script>
<svelte:head>
@ -92,7 +123,7 @@
{:else}
<a href={item?.url} target="_blank">
<div class="h-48 sm:h-60 m-auto border border-slate-800 rounded-none sm:rounded-lg ">
<img src={item?.image} class="w-screen sm:w-full h-48 sm:h-60 rounded-none sm:rounded-t-lg" alt="news image" loading="lazy">
<img src={item?.image} class="w-screen sm:w-full object-cover h-48 sm:h-60 rounded-none sm:rounded-t-lg" alt="news image" loading="lazy">
</div>
</a>
{/if}
@ -114,7 +145,6 @@
{/each}
<InfiniteLoading on:infinite={infiniteHandler} />