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

update flow page

Browse Source
This commit is contained in:
MuslemRahimi 2024-11-11 19:23:15 +01:00
parent 64ef6d916b
commit 77f93f8e80
3 changed files with 151 additions and 208 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/lib/images/senator/Byron_Donalds.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

1
src/lib/utils.ts
View File

@ -597,6 +597,7 @@ function convertNYTimeToLocalTime(nyTimeString) {
export function getPartyForPoliticians(name) { export function getPartyForPoliticians(name) {
// Predefined list of senators and their parties // Predefined list of senators and their parties
const senatorPartyMap = { const senatorPartyMap = {
"Bryon Donalds": "Republican",
"Blake Moore": "Republican", "Blake Moore": "Republican",
"Bill Hagerty": "Republican", "Bill Hagerty": "Republican",
"Scott Peters": "Democratic", "Scott Peters": "Democratic",

358
src/routes/politicians/flow-data/+page.svelte
View File

@ -14,55 +14,19 @@
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL; let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
let rawData = data?.getPoliticianRSS; let rawData = data?.getPoliticianRSS;
let slicedRawData = []; let displayList = rawData?.slice(0, 50) || [];
let displayList = [];
let isLoaded = false;
let displayStructure = "Table";
let displayRows = 100;
let filterList = [];
let changeRowFilter = false;
let changeRuleFilter = false;
async function handleScroll() { async function handleScroll() {
const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height
const isBottom = window.innerHeight + window.scrollY >= scrollThreshold; const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
if (isBottom && displayList?.length !== slicedRawData?.length) { if (isBottom && displayList?.length !== rawData?.length) {
const nextIndex = displayList?.length; const nextIndex = displayList?.length;
const filteredNewResults = slicedRawData?.slice(nextIndex, nextIndex + 9); const filteredNewResults = rawData?.slice(nextIndex, nextIndex + 9);
displayList = [...displayList, ...filteredNewResults]; displayList = [...displayList, ...filteredNewResults];
} }
} }
onMount(async () => { onMount(async () => {
rawData?.forEach((item) => {
let representative = item?.representative || "";
representative = representative
?.replace("Jr", "")
.replace(/Dr./g, "")
.replace(/Dr_/g, "");
const fullName = representative
?.replace(/(\s(?:Dr\s)?\w(?:\.|(?=\s)))?\s/g, "_")
.trim();
item.representative = fullName?.replace(/_/g, " ");
});
rawData = rawData?.map((item) => {
const party = getPartyForPoliticians(item?.representative);
return {
...item,
party: party,
};
});
slicedRawData = rawData?.slice(0, displayRows) ?? [];
displayList = slicedRawData?.slice(0, 20) ?? [];
isLoaded = true;
window.addEventListener("scroll", handleScroll); window.addEventListener("scroll", handleScroll);
//window.addEventListener('keydown', handleKeyDown); //window.addEventListener('keydown', handleKeyDown);
@ -135,7 +99,7 @@
</svelte:head> </svelte:head>
<section <section
class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden pb-20 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>
@ -157,192 +121,170 @@
</div> </div>
<body class="w-full overflow-hidden m-auto"> <body class="w-full overflow-hidden m-auto">
{#if isLoaded} <section class="w-full overflow-hidden m-auto sm:mt-10">
<section class="w-full overflow-hidden m-auto sm:mt-10"> <div class=" flex justify-center w-full m-auto overflow-hidden">
<div class=" flex justify-center w-full m-auto overflow-hidden"> <div
<div class="relative flex justify-center items-center overflow-hidden w-full"
class="relative flex justify-center items-center overflow-hidden w-full" >
> <main class="w-full">
<main class="w-full"> <div class="w-full m-auto mt-4">
<div class="w-full m-auto mt-4"> <div
<div class="w-full m-auto rounded-none sm:rounded-lg mb-4 overflow-x-scroll sm:overflow-hidden"
class="w-full m-auto rounded-none sm:rounded-lg mb-4 overflow-x-scroll sm:overflow-hidden" >
<table
class="table table-sm table-pin-cols table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto"
> >
<table <thead>
class="table table-sm table-pin-cols table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto" <tr class="bg-[#09090B] border-b border-[#27272A]">
> <th
<thead> class="bg-[#09090B] text-start bg-[#09090B] text-white text-sm font-medium sm:font-semibold"
>
Person
</th>
<td
class="text-start bg-[#09090B] text-white text-sm font-medium sm:font-semibold"
>
Company
</td>
<td
class="text-end bg-[#09090B] text-white text-sm font-medium sm:font-semibold"
>
Date
</td>
<td
class="text-center bg-[#09090B] text-white text-sm font-medium sm:font-semibold"
>
Amount
</td>
<td
class="text-white text-end text-sm font-medium sm:font-semibold"
>Type</td
>
</tr>
</thead>
<tbody>
{#each displayList as item, index}
<tr <tr
class="bg-[#09090B] border-b border-[#27272A]" class="odd:bg-[#27272A] border-b-[#09090B] {index +
1 ===
rawData?.length && data?.user?.tier !== 'Pro'
? 'opacity-[0.1]'
: ''}"
> >
<th <th
class="bg-[#09090B] text-start bg-[#09090B] text-white text-sm font-medium sm:font-semibold" class="{index % 2
? 'bg-[#09090B]'
: 'bg-[#27272A]'} text-white text-sm sm:text-[1rem] whitespace-nowrap"
> >
Person <div class="flex flex-row items-center">
</th> <div
<td class="flex-shrink-0 rounded-full border border-slate-700 w-9 h-9 relative {item?.party ===
class="text-start bg-[#09090B] text-white text-sm font-medium sm:font-semibold" 'Republican'
> ? 'bg-[#98272B]'
Company : item?.party === 'Democratic'
</td> ? 'bg-[#295AC7]'
: 'bg-[#4E2153]'} flex items-center justify-center"
<td >
class="text-end bg-[#09090B] text-white text-sm font-medium sm:font-semibold" <img
> style="clip-path: circle(50%);"
Date class="rounded-full w-7"
</td> src={`${cloudFrontUrl}/assets/senator/${item?.representative?.replace(/\s+/g, "_")}.png`}
<td loading="lazy"
class="text-center bg-[#09090B] text-white text-sm font-medium sm:font-semibold"
>
Amount
</td>
<td
class="text-white text-end text-sm font-medium sm:font-semibold"
>Type</td
>
</tr>
</thead>
<tbody>
{#each displayList as item, index}
<tr
class="odd:bg-[#27272A] border-b-[#09090B] {index +
1 ===
rawData?.length &&
data?.user?.tier !== 'Pro'
? 'opacity-[0.1]'
: ''}"
>
<th
class="{index % 2
? 'bg-[#09090B]'
: 'bg-[#27272A]'} text-white text-sm sm:text-[1rem] whitespace-nowrap"
>
<div class="flex flex-row items-center">
<div
class="flex-shrink-0 rounded-full border border-slate-700 w-9 h-9 relative {item?.party ===
'Republican'
? 'bg-[#98272B]'
: item?.party === 'Democratic'
? 'bg-[#295AC7]'
: 'bg-[#4E2153]'} flex items-center justify-center"
>
<img
style="clip-path: circle(50%);"
class="rounded-full w-7"
src={`${cloudFrontUrl}/assets/senator/${item?.representative?.replace(/\s+/g, "_")}.png`}
loading="lazy"
/>
</div>
<div
class="flex flex-col ml-3 font-normal"
>
<a
href={`/politicians/${item?.id}`}
class="sm:hover:text-white text-blue-400"
>{getAbbreviatedName(
item?.representative?.replace(
"_",
" ",
),
)}</a
>
<span class="text-gray-300"
>{item?.party}</span
>
</div>
</div>
<!--{item?.firstName} {item?.lastName}-->
</th>
<td
class="text-start whitespace-nowrap text-sm sm:text-[1rem] text-blue-400"
>
<div class="flex flex-col items-start">
<HoverStockChart
symbol={item?.ticker}
assetType={item?.assetType}
/> />
</div>
<span class="text-white" <div class="flex flex-col ml-3 font-normal">
>{item?.assetDescription.length > <a
charNumber href={`/politicians/${item?.id}`}
? formatString( class="sm:hover:text-white text-blue-400"
item?.assetDescription.slice( >{getAbbreviatedName(
0, item?.representative?.replace(
charNumber, "_",
), " ",
) + "..." ),
: formatString(item?.assetDescription) )}</a
?.replace("- Common Stock", "") >
?.replace( <span class="text-gray-300"
"Common Stock", >{item?.party}</span
"",
)}</span
> >
</div> </div>
</td> </div>
<!--{item?.firstName} {item?.lastName}-->
</th>
<td <td
class="text-end text-sm sm:text-[1rem] text-white whitespace-nowrap" class="text-start whitespace-nowrap text-sm sm:text-[1rem] text-blue-400"
> >
{new Date( <div class="flex flex-col items-start">
item?.disclosureDate, <HoverStockChart
)?.toLocaleString("en-US", { symbol={item?.ticker}
month: "short", assetType={item?.assetType}
day: "numeric", />
year: "numeric",
daySuffix: "2-digit",
})}
</td>
<td <span class="text-white"
class="text-center text-sm sm:text-[1rem] text-white whitespace-nowrap" >{item?.assetDescription.length >
> charNumber
{item?.amount?.replace( ? formatString(
"$1,000,001 - $5,000,000", item?.assetDescription.slice(
"$1Mio - $5Mio", 0,
)} charNumber,
</td> ),
<td ) + "..."
class="text-sm sm:text-[1rem] text-end text-white" : formatString(item?.assetDescription)
> ?.replace("- Common Stock", "")
{#if item?.type === "Bought"} ?.replace("Common Stock", "")}</span
<span class="text-[#00FC50]">Bought</span> >
{:else if item?.type === "Sold"} </div>
<span class="text-[#FF2F1F]">Sold</span> </td>
{/if}
</td>
</tr>
{/each}
</tbody>
</table>
</div>
<!--<InfiniteLoading on:infinite={infiniteHandler} />-->
<!--<UpgradeToPro data={data} title="Track the latest trades of corrupt US Politicians"/>--> <td
class="text-end text-sm sm:text-[1rem] text-white whitespace-nowrap"
>
{new Date(
item?.disclosureDate,
)?.toLocaleString("en-US", {
month: "short",
day: "numeric",
year: "numeric",
daySuffix: "2-digit",
})}
</td>
<td
class="text-center text-sm sm:text-[1rem] text-white whitespace-nowrap"
>
{item?.amount?.replace(
"$1,000,001 - $5,000,000",
"$1Mio - $5Mio",
)}
</td>
<td
class="text-sm sm:text-[1rem] text-end text-white"
>
{#if item?.type === "Bought"}
<span class="text-[#00FC50]">Bought</span>
{:else if item?.type === "Sold"}
<span class="text-[#FF2F1F]">Sold</span>
{/if}
</td>
</tr>
{/each}
</tbody>
</table>
</div> </div>
</main> <!--<InfiniteLoading on:infinite={infiniteHandler} />-->
</div>
</div> <!--<UpgradeToPro data={data} title="Track the latest trades of corrupt US Politicians"/>-->
</section> </div>
{:else} </main>
<div class="flex justify-center items-center h-80">
<div class="relative">
<label
class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
>
<span
class="loading loading-spinner loading-md text-gray-400"
></span>
</label>
</div> </div>
</div> </div>
{/if} </section>
</body> </body>
</main> </main>
<aside class="hidden lg:block relative fixed w-1/4 ml-4"> <aside class="hidden lg:block relative fixed w-1/4 ml-4">
{#if data?.user?.tier !== "Pro" || data?.user?.freeTrial} {#if data?.user?.tier !== "Pro"}
<div <div
class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer" class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
> >