bugfixing && ui fixes
This commit is contained in:
MuslemRahimi
parent
45a9895c41
commit
87935c6517
@ -4,9 +4,7 @@
|
||||
import republicanBackground from "$lib/images/bg-republican.png";
|
||||
import democraticBackground from "$lib/images/bg-democratic.png";
|
||||
import otherBackground from "$lib/images/bg-other.png";
|
||||
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
|
||||
import { getPartyForPoliticians } from '$lib/utils';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
|
||||
export let data;
|
||||
@ -17,7 +15,6 @@
|
||||
let senateTradingList = [];
|
||||
let displayStructure = 'Card';
|
||||
let isLoaded = false;
|
||||
let images = {};
|
||||
|
||||
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
|
||||
|
||||
@ -56,20 +53,17 @@ const district = {
|
||||
}
|
||||
|
||||
|
||||
|
||||
async function infiniteHandler({ detail: { loaded, complete } })
|
||||
{
|
||||
if (senateTradingList?.length === rawData?.length) {
|
||||
complete();
|
||||
} else {
|
||||
const nextIndex = senateTradingList?.length;
|
||||
const newArticles = rawData?.slice(nextIndex, nextIndex + 20);
|
||||
senateTradingList = [...senateTradingList, ...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 && senateTradingList?.length !== rawData?.length) {
|
||||
const nextIndex = senateTradingList?.length;
|
||||
const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 25);
|
||||
senateTradingList = [...senateTradingList, ...filteredNewResults];
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
onMount(async () => {
|
||||
|
||||
@ -105,6 +99,13 @@ onMount(async () => {
|
||||
senateTradingList = rawData.slice(0, 20) ?? [];
|
||||
|
||||
isLoaded = true;
|
||||
|
||||
if(data?.user?.tier === 'Pro') {
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
return () => {
|
||||
window.removeEventListener('scroll', handleScroll);
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -169,7 +170,7 @@ onMount(async () => {
|
||||
<div class="w-full grid grid-cols-2 sm:grid-cols-3 gap-y-3 lg:gap-y-3 gap-x-3 ">
|
||||
|
||||
<!--Start Buy/Sell-->
|
||||
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] shadow-lg rounded-2xl h-20">
|
||||
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] shadow-lg rounded-lg h-20">
|
||||
<div class="flex flex-col items-start">
|
||||
<span class="font-semibold text-gray-200 text-sm sm:text-[1rem]">Buy/Sell</span>
|
||||
<span class="text-start text-sm sm:text-[1rem] font-medium text-white">
|
||||
@ -196,7 +197,7 @@ onMount(async () => {
|
||||
</div>
|
||||
<!--End Buy/Sell-->
|
||||
<!--Start Dem/Rep-->
|
||||
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] shadow-lg rounded-2xl h-20">
|
||||
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] shadow-lg rounded-lg h-20">
|
||||
<div class="flex flex-col items-start">
|
||||
<span class="font-semibold text-gray-200 text-sm sm:text-[1rem]">Dem/Rep</span>
|
||||
<span class="text-start text-sm sm:text-[1rem] font-medium text-white">
|
||||
@ -253,7 +254,7 @@ onMount(async () => {
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each senateTradingList as item}
|
||||
<tr on:click={() => goto(`/politicians/${item?.id}`)} class="odd:bg-[#27272A] sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#09090B] border-b-[#09090B] cursor-pointer">
|
||||
<tr class="odd:bg-[#27272A] sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#09090B] border-b-[#09090B]">
|
||||
|
||||
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap pb-3 border-b border-b-[#09090B]">
|
||||
<div class="flex flex-row items-center">
|
||||
@ -262,7 +263,7 @@ onMount(async () => {
|
||||
<img style="clip-path: circle(50%);" class="avatar rounded-full w-7 sm:w-9" src={`${cloudFrontUrl}/assets/senator/${item?.representative?.replace(/\s+/g, "_")}.png`} loading="lazy"/>
|
||||
</div>
|
||||
<div class="flex flex-col ml-3">
|
||||
<span class="">{item?.representative?.replace('_',' ')}</span>
|
||||
<a href={`/politicians/${item?.id}`} class="sm:hover:text-white text-blue-400">{item?.representative?.replace('_',' ')}</a>
|
||||
<span class="">{item?.party}</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -294,7 +295,6 @@ onMount(async () => {
|
||||
|
||||
</div>
|
||||
|
||||
<InfiniteLoading on:infinite={infiniteHandler} />
|
||||
|
||||
{:else}
|
||||
<div class="relative w-full mt-10">
|
||||
@ -308,7 +308,7 @@ onMount(async () => {
|
||||
{:else}
|
||||
<img class="absolute -mt-4 w-[500px] m-auto " src={otherBackground} />
|
||||
{/if}
|
||||
<div class="flex flex-col justify-center items-center rounded-2xl ">
|
||||
<div class="flex flex-col justify-center items-center rounded-lg ">
|
||||
|
||||
|
||||
<div class="-mt-3 shadow-lg rounded-full border border-slate-600 w-20 h-20 relative {item?.party === 'Republican' ? 'bg-[#98272B]' : item?.party === 'Democratic' ? 'bg-[#295AC7]' : 'bg-[#20202E]'} flex items-center justify-center">
|
||||
@ -390,7 +390,6 @@ onMount(async () => {
|
||||
</label>
|
||||
{/if}
|
||||
|
||||
<InfiniteLoading on:infinite={infiniteHandler} />
|
||||
|
||||
{/if}
|
||||
|
||||
|
||||
@ -4,9 +4,7 @@
|
||||
import republicanBackground from "$lib/images/bg-republican.png";
|
||||
import democraticBackground from "$lib/images/bg-democratic.png";
|
||||
import otherBackground from "$lib/images/bg-other.png";
|
||||
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
|
||||
import { getPartyForPoliticians } from '$lib/utils';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
|
||||
export let data;
|
||||
@ -55,20 +53,17 @@ const district = {
|
||||
}
|
||||
|
||||
|
||||
|
||||
async function infiniteHandler({ detail: { loaded, complete } })
|
||||
{
|
||||
if (senateTradingList?.length === rawData?.length) {
|
||||
complete();
|
||||
} else {
|
||||
const nextIndex = senateTradingList?.length;
|
||||
const newArticles = rawData?.slice(nextIndex, nextIndex + 20);
|
||||
senateTradingList = [...senateTradingList, ...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 && senateTradingList?.length !== rawData?.length) {
|
||||
const nextIndex = senateTradingList?.length;
|
||||
const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 25);
|
||||
senateTradingList = [...senateTradingList, ...filteredNewResults];
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
onMount(async () => {
|
||||
|
||||
@ -104,6 +99,13 @@ onMount(async () => {
|
||||
senateTradingList = rawData.slice(0, 20) ?? [];
|
||||
|
||||
isLoaded = true;
|
||||
|
||||
if(data?.user?.tier === 'Pro') {
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
return () => {
|
||||
window.removeEventListener('scroll', handleScroll);
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -168,7 +170,7 @@ onMount(async () => {
|
||||
<div class="w-full grid grid-cols-2 sm:grid-cols-3 gap-y-3 lg:gap-y-3 gap-x-3 ">
|
||||
|
||||
<!--Start Buy/Sell-->
|
||||
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] shadow-lg rounded-2xl h-20">
|
||||
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] shadow-lg rounded-lg h-20">
|
||||
<div class="flex flex-col items-start">
|
||||
<span class="font-semibold text-gray-200 text-sm sm:text-[1rem]">Buy/Sell</span>
|
||||
<span class="text-start text-sm sm:text-[1rem] font-medium text-white">
|
||||
@ -195,7 +197,7 @@ onMount(async () => {
|
||||
</div>
|
||||
<!--End Buy/Sell-->
|
||||
<!--Start Dem/Rep-->
|
||||
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] shadow-lg rounded-2xl h-20">
|
||||
<div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] shadow-lg rounded-lg h-20">
|
||||
<div class="flex flex-col items-start">
|
||||
<span class="font-semibold text-gray-200 text-sm sm:text-[1rem]">Dem/Rep</span>
|
||||
<span class="text-start text-sm sm:text-[1rem] font-medium text-white">
|
||||
@ -252,7 +254,7 @@ onMount(async () => {
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each senateTradingList as item}
|
||||
<tr on:click={() => goto(`/politicians/${item?.id}`)} class="odd:bg-[#27272A] sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#09090B] border-b-[#09090B] cursor-pointer">
|
||||
<tr class="odd:bg-[#27272A] sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#09090B] border-b-[#09090B]">
|
||||
|
||||
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap pb-3 border-b border-b-[#09090B]">
|
||||
<div class="flex flex-row items-center">
|
||||
@ -261,7 +263,7 @@ onMount(async () => {
|
||||
<img style="clip-path: circle(50%);" class="avatar rounded-full w-7 sm:w-9" src={`${cloudFrontUrl}/assets/senator/${item?.representative?.replace(/\s+/g, "_")}.png`} loading="lazy"/>
|
||||
</div>
|
||||
<div class="flex flex-col ml-3">
|
||||
<span class="">{item?.representative?.replace('_',' ')}</span>
|
||||
<a href={`/politicians/${item?.id}`} class="sm:hover:text-white text-blue-400">{item?.representative?.replace('_',' ')}</a>
|
||||
<span class="">{item?.party}</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -293,7 +295,6 @@ onMount(async () => {
|
||||
|
||||
</div>
|
||||
|
||||
<InfiniteLoading on:infinite={infiniteHandler} />
|
||||
|
||||
{:else}
|
||||
<div class="relative w-full mt-10">
|
||||
@ -307,7 +308,7 @@ onMount(async () => {
|
||||
{:else}
|
||||
<img class="absolute -mt-4 w-[500px] m-auto " src={otherBackground} />
|
||||
{/if}
|
||||
<div class="flex flex-col justify-center items-center rounded-2xl ">
|
||||
<div class="flex flex-col justify-center items-center rounded-lg ">
|
||||
|
||||
|
||||
<div class="-mt-3 shadow-lg rounded-full border border-slate-600 w-20 h-20 relative {item?.party === 'Republican' ? 'bg-[#98272B]' : item?.party === 'Democratic' ? 'bg-[#295AC7]' : 'bg-[#20202E]'} flex items-center justify-center">
|
||||
@ -389,7 +390,6 @@ onMount(async () => {
|
||||
</label>
|
||||
{/if}
|
||||
|
||||
<InfiniteLoading on:infinite={infiniteHandler} />
|
||||
|
||||
{/if}
|
||||
|
||||
|
||||
@ -1,14 +1,11 @@
|
||||
<script lang="ts">
|
||||
import { etfTicker, cryptoTicker, numberOfUnreadNotification, displayCompanyName} from '$lib/store';
|
||||
import { etfTicker, numberOfUnreadNotification, displayCompanyName} from '$lib/store';
|
||||
|
||||
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import { page } from '$app/stores';
|
||||
import { screenWidth } from '$lib/store';
|
||||
import { abbreviateNumber, formatString } from '$lib/utils';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
export let data;
|
||||
let notDestroyed = true;
|
||||
let rawData = data?.getETFHoldings;
|
||||
let holdings = rawData?.slice(0,50);
|
||||
|
||||
@ -32,53 +29,29 @@
|
||||
});
|
||||
}
|
||||
|
||||
function stockSelector(symbol)
|
||||
{
|
||||
if(symbol?.length !== 0 && !['BTC', 'USD']?.includes(symbol))
|
||||
{
|
||||
goto("/stocks/"+symbol)
|
||||
}
|
||||
else if (symbol === 'BTC') {
|
||||
cryptoTicker.update(value => 'BTCUSD');
|
||||
goto("/crypto/BTCUSD")
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
async function infiniteHandler({ detail: { loaded, complete } })
|
||||
{
|
||||
|
||||
if (holdings?.length === rawData?.length && notDestroyed) {
|
||||
complete();
|
||||
}
|
||||
else if (notDestroyed) {
|
||||
const nextIndex = holdings?.length;
|
||||
const newHoldings = rawData?.slice(nextIndex, nextIndex + 50);
|
||||
holdings = [...holdings, ...newHoldings];
|
||||
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 && holdings?.length !== rawData?.length) {
|
||||
const nextIndex = holdings?.length;
|
||||
const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 25);
|
||||
holdings = [...holdings, ...filteredNewResults];
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
$: {
|
||||
if ($page.url.pathname !== '/etf/'+$etfTicker+"/holdings") {
|
||||
notDestroyed = false;
|
||||
}
|
||||
}
|
||||
|
||||
let charNumber = 40;
|
||||
onMount(() => {
|
||||
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
return () => {
|
||||
window.removeEventListener('scroll', handleScroll);
|
||||
};
|
||||
|
||||
})
|
||||
|
||||
$: charNumber = $screenWidth < 640 ? 20 : 30
|
||||
|
||||
$: {
|
||||
if($screenWidth < 640)
|
||||
{
|
||||
charNumber = 16;
|
||||
}
|
||||
else {
|
||||
charNumber = 40;
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@ -152,7 +125,7 @@ $: {
|
||||
</td>
|
||||
<td on:click={() => changeOrder('weights')} class="text-white border-b border-[#09090B] bg-[#09090B] font-semibold text-end text-sm sm:text-[1rem] whitespace-nowrap cursor-pointer">
|
||||
% Weight
|
||||
<svg class="w-5 h-5 inline-block {order === 'highToLow' && category === 'weights' ? 'rotate-180' : ''}" viewBox="0 0 20 20" fill="currentColor" style="max-width:40px"><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>
|
||||
<svg class="w-5 h-5 inline-block {order === 'highToLow' && category === 'weights' ? '' : 'rotate-180'}" viewBox="0 0 20 20" fill="currentColor" style="max-width:40px"><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>
|
||||
</td>
|
||||
</tr>
|
||||
</thead>
|
||||
@ -160,17 +133,17 @@ $: {
|
||||
{#each holdings as item}
|
||||
<!-- row -->
|
||||
{#if item?.asset !== null}
|
||||
<tr on:click={() => stockSelector(item?.asset)} class="w-full sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] {item?.asset?.length !== 0 ? 'cursor-pointer' : ''}">
|
||||
<tr class="w-full sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A]">
|
||||
|
||||
<td class="text-blue-400 text-sm sm:text-[1rem] whitespace-nowrap border-b border-[#09090B]">
|
||||
{item?.asset?.length !== 0 ? item?.asset : '-'}
|
||||
<td class="text-sm sm:text-[1rem] whitespace-nowrap border-b border-[#09090B]">
|
||||
<a href={item?.asset?.length !== 0 && !['BTC', 'USD'].includes(item?.asset) ? `/stocks/${item?.asset}` : item?.asset === 'BTC' ? '/crypto/BTCUSD' : '' } class="sm:hover:text-white text-blue-400">{item?.asset?.length !== 0 ? item?.asset : '-'}</a>
|
||||
</td>
|
||||
|
||||
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b border-[#09090B]">
|
||||
{item?.name?.length > charNumber ? formatString(item?.name?.slice(0,charNumber)) + "..." : formatString(item?.name)}
|
||||
</td>
|
||||
|
||||
|
||||
|
||||
|
||||
<td class="text-white text-sm sm:text-[1rem] whitespace-nowrap border-b border-[#09090B] text-end">
|
||||
{abbreviateNumber(item?.sharesNumber)}
|
||||
@ -196,14 +169,12 @@ $: {
|
||||
|
||||
</div>
|
||||
|
||||
<InfiniteLoading on:infinite={infiniteHandler} />
|
||||
|
||||
|
||||
|
||||
|
||||
{:else}
|
||||
<h2 class="pl-4 pr-4 flex justify-center items-center text-md sm:text-lg text-center text-slate-200">
|
||||
No holdings are available for {$displayCompanyName} 🧐.
|
||||
No holdings are available for {$displayCompanyName}.
|
||||
</h2>
|
||||
|
||||
{/if}
|
||||
|
||||
@ -1122,8 +1122,8 @@
|
||||
|
||||
</div>
|
||||
{:else}
|
||||
<h2 class=" mt-16 flex justify-center items-center text-3xl font-medium text-slate-700 mb-5 m-auto">
|
||||
No data available
|
||||
<h2 class="mt-16 flex justify-center items-center text-lg font-semibold text-white mb-5 m-auto">
|
||||
Sorry for this ETF no data is available
|
||||
</h2>
|
||||
{/if}
|
||||
|
||||
|
||||
@ -332,7 +332,7 @@ async function plotData()
|
||||
</h2>
|
||||
|
||||
|
||||
<ul class="text-[0.8rem] font-medium text-center w-56 pt-5 sm:pt-3 sm:w-56 mb-5 flex m-auto sm:justify-end items-center sm:ml-auto">
|
||||
<ul class="text-[0.8rem] font-medium text-center w-56 pt-5 sm:pt-3 sm:w-56 mb-5 flex m-auto sm:m-0 sm:justify-end items-center sm:ml-auto">
|
||||
<li class="w-full">
|
||||
<label on:click={() => changeTablePeriod('annual')} class="cursor-pointer rounded-l-lg inline-block w-full py-2.5 text-white {filterRule === 'annual' ? 'bg-purple-600' : 'bg-[#2A303C]'} font-semibold border-r border-gray-600" aria-current="page">
|
||||
Annual
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user