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

bugfixing

Browse Source
This commit is contained in:
MuslemRahimi 2024-11-11 23:18:53 +01:00
parent e66fbddaa5
commit 8fbff43eb2
4 changed files with 533 additions and 518 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
src/lib/components/CommunitySentiment.svelte
View File

File diff suppressed because one or more lines are too long

9
src/lib/schemas.js
View File

@ -9,15 +9,6 @@ export const loginUserSchema = z.object({
export const registerUserSchema = z export const registerUserSchema = z
.object({ .object({
username: z
.string({ required_error: "Username is required" })
.regex(/^[a-zA-Z0-9!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]*$/, {
message:
"Username can only contain letters, numbers, and special characters.",
}) // Updated regex pattern
.min(3, { message: "Username must be at least 2 characters" })
.max(64, { message: "Username must be less than 64 characters" })
.trim(),
email: z email: z
.string({ required_error: "Email is required" }) .string({ required_error: "Email is required" })
.email({ message: "Email must be a valid email" }), .email({ message: "Email must be a valid email" }),

556
src/routes/politicians/+page.svelte
View File

@ -1,22 +1,21 @@
<script lang='ts'> <script lang="ts">
import republicanBackground from "$lib/images/bg-republican.png"; import republicanBackground from "$lib/images/bg-republican.png";
import democraticBackground from "$lib/images/bg-democratic.png"; import democraticBackground from "$lib/images/bg-democratic.png";
import otherBackground from "$lib/images/bg-other.png"; import otherBackground from "$lib/images/bg-other.png";
import { screenWidth, numberOfUnreadNotification } from '$lib/store'; import { screenWidth, numberOfUnreadNotification } from "$lib/store";
import { abbreviateNumber } from '$lib/utils'; import { abbreviateNumber } from "$lib/utils";
import { onMount } from 'svelte'; import { onMount } from "svelte";
import { compareTwoStrings } from 'string-similarity'; import { compareTwoStrings } from "string-similarity";
// import * as XLSX from 'xlsx'; // import * as XLSX from 'xlsx';
export let data; export let data;
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL; let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
let rawData = data?.getAllPolitician; let rawData = data?.getAllPolitician;
let displayList = []; let displayList = [];
let filterQuery = ''; let filterQuery = "";
let isLoaded = false; let isLoaded = false;
@ -24,7 +23,6 @@
let changeRuleFilter = 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;
@ -35,27 +33,20 @@
} }
} }
onMount(async () => {
displayList = rawData?.slice(0, 20) ?? [];
onMount(async () => {
displayList = rawData?.slice(0,20) ?? [];
isLoaded = true; isLoaded = true;
window.addEventListener('scroll', handleScroll); window.addEventListener("scroll", handleScroll);
//window.addEventListener('keydown', handleKeyDown); //window.addEventListener('keydown', handleKeyDown);
return () => { return () => {
// Cleanup the event listeners when the component is unmounted // Cleanup the event listeners when the component is unmounted
window.removeEventListener('scroll', handleScroll); window.removeEventListener("scroll", handleScroll);
//window.removeEventListener('keydown', handleKeyDown); //window.removeEventListener('keydown', handleKeyDown);
}; };
}); });
async function handleFilter(e, newFilter) { async function handleFilter(e, newFilter) {
//e.preventDefault(); //e.preventDefault();
@ -69,52 +60,53 @@ onMount(async () => {
} else { } else {
// If it doesn't exist, add it to the list // If it doesn't exist, add it to the list
filterSet?.add(newFilter); filterSet?.add(newFilter);
} }
filterList = Array?.from(filterSet); filterList = Array?.from(filterSet);
//console.log(filterList) //console.log(filterList)
changeRuleFilter = true; changeRuleFilter = true;
} }
function filterData(data) { function filterData(data) {
const newData = data?.filter(item => { const newData = data?.filter((item) => {
//Democratic Party nested conditions //Democratic Party nested conditions
if (filterList?.includes("Democratic") && item?.party && item?.party?.toLowerCase() === "democratic") { if (
filterList?.includes("Democratic") &&
item?.party &&
item?.party?.toLowerCase() === "democratic"
) {
return true; return true;
} }
//Republican Party nested conditions //Republican Party nested conditions
if (filterList?.includes("Republican") && item?.party && item?.party?.toLowerCase() === "republican") { if (
filterList?.includes("Republican") &&
item?.party &&
item?.party?.toLowerCase() === "republican"
) {
return true; return true;
} }
//Other Party nested conditions //Other Party nested conditions
if (filterList?.includes("Other") && item?.party && item?.party?.toLowerCase() === "other") { if (
filterList?.includes("Other") &&
item?.party &&
item?.party?.toLowerCase() === "other"
) {
return true; return true;
} } else {
else {
return false; return false;
} }
}); });
return newData return newData;
} }
function handleInput(event) { function handleInput(event) {
filterQuery = event.target.value?.toLowerCase(); filterQuery = event.target.value?.toLowerCase();
let newData = []; let newData = [];
setTimeout(() => { setTimeout(() => {
if (filterQuery?.length !== 0) { if (filterQuery?.length !== 0) {
newData = rawData?.filter(item => { newData = rawData?.filter((item) => {
const representative = item?.representative?.toLowerCase(); const representative = item?.representative?.toLowerCase();
// Check if representative includes filterQuery // Check if representative includes filterQuery
if (representative?.includes(filterQuery)) return true; if (representative?.includes(filterQuery)) return true;
@ -140,49 +132,59 @@ onMount(async () => {
displayList = rawData?.slice(0, 20); displayList = rawData?.slice(0, 20);
} }
}, 500); }, 500);
} }
$: { $: {
if(filterList && changeRuleFilter === true) if (filterList && changeRuleFilter === true) {
{
displayList = filterList?.length !== 0 ? filterData(rawData) : rawData; displayList = filterList?.length !== 0 ? filterData(rawData) : rawData;
displayList = [...displayList]; displayList = [...displayList];
changeRuleFilter = false; changeRuleFilter = false;
//console.log(slicedRawData?.length) //console.log(slicedRawData?.length)
} }
} }
</script>
<!-- HEADER FOR BETTER SEO -->
</script> <svelte:head>
<title>
<!-- HEADER FOR BETTER SEO --> {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} US
<svelte:head> Politician Stock Trade Tracker · stocknear</title
<title> {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} US Politician Stock Trade Tracker · stocknear</title> >
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<meta name="description" content="What are US Politicians trading? Filter by Senate or House, Party, Committee, State and more - get detailed infomation about it."> <meta
name="description"
content="What are US Politicians trading? Filter by Senate or House, Party, Committee, State and more - get detailed infomation about it."
/>
<!-- Other meta tags --> <!-- Other meta tags -->
<meta property="og:title" content="US Politician Stock Trade Tracker · stocknear"/> <meta
<meta property="og:description" content="What are US Politicians trading? Filter by Senate or House, Party, Committee, State and more - get detailed infomation about it."> property="og:title"
<meta property="og:type" content="website"/> content="US Politician Stock Trade Tracker · stocknear"
/>
<meta
property="og:description"
content="What are US Politicians trading? Filter by Senate or House, Party, Committee, State and more - get detailed infomation about it."
/>
<meta property="og:type" content="website" />
<!-- Add more Open Graph meta tags as needed --> <!-- Add more Open Graph meta tags as needed -->
<!-- Twitter specific meta tags --> <!-- Twitter specific meta tags -->
<meta name="twitter:card" content="summary_large_image"/> <meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="US Politician Stock Trade Tracker · stocknear"/> <meta
<meta name="twitter:description" content="What are US Politicians trading? Filter by Senate or House, Party, Committee, State and more - get detailed infomation about it."> name="twitter:title"
content="US Politician Stock Trade Tracker · stocknear"
/>
<meta
name="twitter:description"
content="What are US Politicians trading? Filter by Senate or House, Party, Committee, State and more - get detailed infomation about it."
/>
<!-- Add more Twitter meta tags as needed --> <!-- Add more Twitter meta tags as needed -->
</svelte:head> </svelte:head>
<section class="w-full max-w-3xl sm:max-w-screen-xl overflow-hidden min-h-screen pt-5 pb-40">
<section
class="w-full max-w-3xl sm:max-w-screen-xl overflow-hidden min-h-screen pt-5 pb-40"
>
<div class="text-sm sm:text-[1rem] breadcrumbs ml-4"> <div class="text-sm sm:text-[1rem] breadcrumbs ml-4">
<ul> <ul>
<li><a href="/" class="text-gray-300">Home</a></li> <li><a href="/" class="text-gray-300">Home</a></li>
@ -190,24 +192,26 @@ onMount(async () => {
</ul> </ul>
</div> </div>
<body class="w-full overflow-hidden m-auto"> <body class="w-full overflow-hidden m-auto">
{#if isLoaded} {#if isLoaded}
<section
class="w-full overflow-hidden m-auto sm:mt-10 px-0 sm:px-3 mt-10"
<section class="w-full overflow-hidden m-auto sm:mt-10 px-0 sm:px-3 mt-10"> >
<div
<div class="p-3 sm:p-0 flex justify-center w-full m-auto overflow-hidden"> class="p-3 sm:p-0 flex justify-center w-full m-auto overflow-hidden"
<div class="relative flex justify-center items-center overflow-hidden w-full"> >
<div
class="relative flex justify-center items-center overflow-hidden w-full"
>
<main class="w-full"> <main class="w-full">
<div class="w-full pb-3"> <div class="w-full pb-3">
<div class="relative right-0 bg-[#09090B]"> <div class="relative right-0 bg-[#09090B]">
<ul class="relative grid grid-cols-1 sm:grid-cols-4 gap-y-3 gap-x-3 flex flex-wrap p-1 list-none rounded-[3px]"> <ul
<li class="pl-3 py-1.5 flex-auto text-center bg-[#2E3238] rounded-[3px]"> class="relative grid grid-cols-1 sm:grid-cols-4 gap-y-3 gap-x-3 flex flex-wrap p-1 list-none rounded-[3px]"
>
<li
class="pl-3 py-1.5 flex-auto text-center bg-[#2E3238] rounded-[3px]"
>
<label class="flex flex-row items-center"> <label class="flex flex-row items-center">
<input <input
id="modal-search" id="modal-search"
@ -218,79 +222,147 @@ onMount(async () => {
on:input={handleInput} on:input={handleInput}
autocomplete="off" autocomplete="off"
/> />
<svg class="ml-auto mr-5 h-8 w-8 inline-block mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#fff" d="m19.485 20.154l-6.262-6.262q-.75.639-1.725.989t-1.96.35q-2.402 0-4.066-1.663T3.808 9.503T5.47 5.436t4.064-1.667t4.068 1.664T15.268 9.5q0 1.042-.369 2.017t-.97 1.668l6.262 6.261zM9.539 14.23q1.99 0 3.36-1.37t1.37-3.361t-1.37-3.36t-3.36-1.37t-3.361 1.37t-1.37 3.36t1.37 3.36t3.36 1.37"/></svg> <svg
class="ml-auto mr-5 h-8 w-8 inline-block mr-2"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
><path
fill="#fff"
d="m19.485 20.154l-6.262-6.262q-.75.639-1.725.989t-1.96.35q-2.402 0-4.066-1.663T3.808 9.503T5.47 5.436t4.064-1.667t4.068 1.664T15.268 9.5q0 1.042-.369 2.017t-.97 1.668l6.262 6.261zM9.539 14.23q1.99 0 3.36-1.37t1.37-3.361t-1.37-3.36t-3.36-1.37t-3.361 1.37t-1.37 3.36t1.37 3.36t3.36 1.37"
/></svg
>
</label> </label>
</li> </li>
<li class="pl-3 py-1.5 flex-auto text-center bg-[#2E3238] rounded-[3px]"> <li
<label for="filterList" class="flex flex-row items-center cursor-pointer"> class="pl-3 py-1.5 flex-auto text-center bg-[#2E3238] rounded-[3px]"
<span class="text-[0.75rem] sm:text-[1rem] text-gray-400 ml-2 text-start w-full px-0 py-1 bg-inherit"> >
<label
for="filterList"
class="flex flex-row items-center cursor-pointer"
>
<span
class="text-[0.75rem] sm:text-[1rem] text-gray-400 ml-2 text-start w-full px-0 py-1 bg-inherit"
>
Filter Filter
</span> </span>
<svg class="ml-auto mr-5 h-5 w-5 inline-block transform transition-transform mr-2 rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="#fff" d="m488.832 344.32l-339.84 356.672a32 32 0 0 0 0 44.16l.384.384a29.44 29.44 0 0 0 42.688 0l320-335.872l319.872 335.872a29.44 29.44 0 0 0 42.688 0l.384-.384a32 32 0 0 0 0-44.16L535.168 344.32a32 32 0 0 0-46.336 0z"/></svg> <svg
class="ml-auto mr-5 h-5 w-5 inline-block transform transition-transform mr-2 rotate-180"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1024 1024"
><path
fill="#fff"
d="m488.832 344.32l-339.84 356.672a32 32 0 0 0 0 44.16l.384.384a29.44 29.44 0 0 0 42.688 0l320-335.872l319.872 335.872a29.44 29.44 0 0 0 42.688 0l.384-.384a32 32 0 0 0 0-44.16L535.168 344.32a32 32 0 0 0-46.336 0z"
/></svg
>
</label> </label>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="w-full m-auto mt-4"> <div class="w-full m-auto mt-4">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 sm:gap-5"> <div
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 sm:gap-5"
>
{#each displayList as item} {#each displayList as item}
<a href={`/politicians/${item?.id}`} class="w-full cursor-pointer bg-[#141417] sm:hover:bg-[#000] transition-colors ease-in-out border sm:hover:border-[#000] {item?.party ==='Republican' ? 'sm:hover:shadow-[#80000D]' : item?.party === 'Democratic' ? 'sm:hover:shadow-[#1358C3]' : 'sm:hover:shadow-[#636465]'} border-slate-800 shadow-md rounded-lg h-auto pb-4 pt-4 mb-7"> <a
href={`/politicians/${item?.id}`}
class="w-full cursor-pointer bg-[#141417] sm:hover:bg-[#000] transition-colors ease-in-out border sm:hover:border-[#000] {item?.party ===
'Republican'
? 'sm:hover:shadow-[#80000D]'
: item?.party === 'Democratic'
? 'sm:hover:shadow-[#1358C3]'
: 'sm:hover:shadow-[#636465]'} border-slate-800 shadow-md rounded-lg h-auto pb-4 pt-4 mb-7"
>
<div class="flex flex-col relative"> <div class="flex flex-col relative">
{#if item?.party === 'Republican'} {#if item?.party === "Republican"}
<img class="absolute -mt-4 w-full m-auto rounded-lg" src={republicanBackground} /> <img
{:else if item?.party === 'Democratic'} class="absolute -mt-4 w-full m-auto rounded-lg"
<img class="absolute -mt-4 w-[500px] m-auto rounded-lg" src={democraticBackground} /> src={republicanBackground}
/>
{:else if item?.party === "Democratic"}
<img
class="absolute -mt-4 w-[500px] m-auto rounded-lg"
src={democraticBackground}
/>
{:else} {:else}
<img class="absolute -mt-4 w-[500px] m-auto rounded-lg" src={otherBackground} /> <img
class="absolute -mt-4 w-[500px] m-auto rounded-lg"
src={otherBackground}
/>
{/if} {/if}
<div class="flex flex-col justify-center items-center rounded-2xl "> <div
class="flex flex-col justify-center items-center rounded-2xl"
>
<div class="-mt-3 shadow-lg rounded-full border border-slate-600 w-20 h-20 relative {item?.party === 'Republican' ? 'republican-striped bg-[#98272B]' : item?.party === 'Democratic' ? 'democratic-striped bg-[#295AC7]' : 'other-striped bg-[#20202E]'} flex items-center justify-center"> <div
<img style="clip-path: circle(50%);" class="rounded-full w-16" src={`${cloudFrontUrl}/assets/senator/${item?.representative?.replace(/\s+/g, "_")}.png`} loading="lazy"/> class="-mt-3 shadow-lg rounded-full border border-slate-600 w-20 h-20 relative {item?.party ===
'Republican'
? 'republican-striped bg-[#98272B]'
: item?.party === 'Democratic'
? 'democratic-striped bg-[#295AC7]'
: 'other-striped bg-[#20202E]'} flex items-center justify-center"
>
<img
style="clip-path: circle(50%);"
class="rounded-full w-16"
src={`${cloudFrontUrl}/assets/senator/${item?.representative?.replace(/\s+/g, "_")}.png`}
loading="lazy"
/>
</div> </div>
<span class="text-white text-lg font-medium mt-2 mb-2"> <span
class="text-white text-lg font-medium mt-2 mb-2"
>
{item?.representative} {item?.representative}
</span> </span>
<span class="text-white text-md mb-8"> <span class="text-white text-md mb-8">
{item?.party ?? 'n/a'} {#if item?.district !== undefined && item?.district?.length !== 0} / {item?.district} {/if} {item?.party ?? "n/a"}
{#if item?.district !== undefined && item?.district?.length !== 0}
/ {item?.district}
{/if}
</span> </span>
</div> </div>
<div class="flex flex-row justify-between items-center w-full px-10 pb-4"> <div
<label class="cursor-pointer flex flex-col items-center"> class="flex flex-row justify-between items-center w-full px-10 pb-4"
<span class="text-white text-[1rem] font-semibold">{abbreviateNumber(item?.totalTrades)}</span> >
<span class="text-slate-300 font-medium text-sm">Total Trades</span> <label
class="cursor-pointer flex flex-col items-center"
>
<span class="text-white text-[1rem] font-semibold"
>{abbreviateNumber(item?.totalTrades)}</span
>
<span class="text-slate-300 font-medium text-sm"
>Total Trades</span
>
</label> </label>
<div class="flex flex-col items-center "> <div class="flex flex-col items-center">
<span class="text-white text-[1rem] font-semibold"> <span class="text-white text-[1rem] font-semibold">
{item?.lastTrade?.length !== undefined ? new Date(item?.lastTrade)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' }) : 'n/a'} {item?.lastTrade?.length !== undefined
? new Date(item?.lastTrade)?.toLocaleString(
"en-US",
{
month: "short",
day: "numeric",
year: "numeric",
daySuffix: "2-digit",
},
)
: "n/a"}
</span> </span>
<span class="text-slate-300 font-medium text-sm">Last Traded</span> <span class="text-slate-300 font-medium text-sm"
>Last Traded</span
>
</div> </div>
</div> </div>
</div></a
>
</a>
{/each} {/each}
<!--<InfiniteLoading on:infinite={infiniteHandler} />--> <!--<InfiniteLoading on:infinite={infiniteHandler} />-->
</div> </div>
</div> </div>
</main> </main>
</div> </div>
</div> </div>
@ -298,70 +370,99 @@ onMount(async () => {
{:else} {:else}
<div class="flex justify-center items-center h-80"> <div class="flex justify-center items-center h-80">
<div class="relative"> <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"> <label
<span class="loading loading-spinner loading-md text-gray-400"></span> 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> </label>
</div> </div>
</div> </div>
{/if} {/if}
</body> </body>
</section>
{#if $screenWidth >= 640}
</section>
{#if $screenWidth >= 640}
<!--Start View All List--> <!--Start View All List-->
<input type="checkbox" id="filterList" class="modal-toggle" /> <input type="checkbox" id="filterList" class="modal-toggle" />
<dialog id="filterList" class="modal modal-bottom sm:modal-middle"> <dialog id="filterList" class="modal modal-bottom sm:modal-middle">
<label
id="filterList"
for="filterList"
class="cursor-pointer modal-backdrop bg-[#000] bg-opacity-[0.5]"
></label>
<div
<label id="filterList" for="filterList" class="cursor-pointer modal-backdrop bg-[#000] bg-opacity-[0.5]"></label> class="modal-box w-full bg-[#09090B] sm:border sm:border-slate-800 max-h-[600px] overflow-y-scroll"
>
<label
<div class="modal-box w-full bg-[#09090B] sm:border sm:border-slate-800 max-h-[600px] overflow-y-scroll"> for="filterList"
class="cursor-pointer absolute right-5 top-2 bg-[#09090B] text-[1.8rem] text-white"
>
<label for="filterList" class="cursor-pointer absolute right-5 top-2 bg-[#09090B] text-[1.8rem] text-white">
✕ ✕
</label> </label>
<div class="text-white mt-5 pb-5"> <div class="text-white mt-5 pb-5">
<div class="flex flex-col items-center justify-start"> <div class="flex flex-col items-center justify-start">
<!--Start Political Party--> <!--Start Political Party-->
<div class="grid grid-cols-2 mt-4 w-full ml-auto mt-4"> <div class="grid grid-cols-2 mt-4 w-full ml-auto mt-4">
<div class="mb-4 mr-auto"> <div class="mb-4 mr-auto">
<h2 class="text-xl sm:text-2xl text-white font-bold mb-3">Political Party</h2> <h2 class="text-xl sm:text-2xl text-white font-bold mb-3">
<ul class="space-y-1 "> Political Party
</h2>
<ul class="space-y-1">
<li class="mb-2 cursor-pointer"> <li class="mb-2 cursor-pointer">
<label on:click|stopPropagation={(event) => handleFilter(event,'Democratic')} class="cursor-pointer flex w-full items-center space-x-2 py-2 md:w-1/2 lg:w-1/3 lg:space-x-1.5 lg:py-[5px]"> <label
<input checked={filterList?.includes('Democratic')} type="checkbox" class="cursor-pointer bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 dark:bg-dark-600 lg:h-4 lg:w-4" /> on:click|stopPropagation={(event) =>
<label class="text-white text-md cursor-pointer">Democratic</label> handleFilter(event, "Democratic")}
class="cursor-pointer flex w-full items-center space-x-2 py-2 md:w-1/2 lg:w-1/3 lg:space-x-1.5 lg:py-[5px]"
>
<input
checked={filterList?.includes("Democratic")}
type="checkbox"
class="cursor-pointer bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 dark:bg-dark-600 lg:h-4 lg:w-4"
/>
<label class="text-white text-md cursor-pointer"
>Democratic</label
>
</label> </label>
</li> </li>
<li class="mb-2 cursor-pointer"> <li class="mb-2 cursor-pointer">
<label on:click|stopPropagation={(event) => handleFilter(event,'Republican')} class="cursor-pointer flex w-full items-center space-x-2 py-2 md:w-1/2 lg:w-1/3 lg:space-x-1.5 lg:py-[5px]"> <label
<input checked={filterList?.includes('Republican')} type="checkbox" class="cursor-pointer bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 dark:bg-dark-600 lg:h-4 lg:w-4" /> on:click|stopPropagation={(event) =>
<label class="text-white text-md cursor-pointer">Republican</label> handleFilter(event, "Republican")}
class="cursor-pointer flex w-full items-center space-x-2 py-2 md:w-1/2 lg:w-1/3 lg:space-x-1.5 lg:py-[5px]"
>
<input
checked={filterList?.includes("Republican")}
type="checkbox"
class="cursor-pointer bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 dark:bg-dark-600 lg:h-4 lg:w-4"
/>
<label class="text-white text-md cursor-pointer"
>Republican</label
>
</label> </label>
</li> </li>
</ul> </ul>
</div> </div>
<!-- Column 2 --> <!-- Column 2 -->
<div class="mt-11"> <div class="mt-11">
<ul class="space-y-1 "> <ul class="space-y-1">
<li class="mb-2 cursor-pointer"> <li class="mb-2 cursor-pointer">
<label on:click|stopPropagation={(event) => handleFilter(event,'Other')} class="cursor-pointer flex w-full items-center space-x-2 py-2 md:w-1/2 lg:w-1/3 lg:space-x-1.5 lg:py-[5px]"> <label
<input checked={filterList?.includes('Other')} type="checkbox" class="cursor-pointer bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 dark:bg-dark-600 lg:h-4 lg:w-4" /> on:click|stopPropagation={(event) =>
<label class="text-white text-md cursor-pointer">Other</label> handleFilter(event, "Other")}
class="cursor-pointer flex w-full items-center space-x-2 py-2 md:w-1/2 lg:w-1/3 lg:space-x-1.5 lg:py-[5px]"
>
<input
checked={filterList?.includes("Other")}
type="checkbox"
class="cursor-pointer bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 dark:bg-dark-600 lg:h-4 lg:w-4"
/>
<label class="text-white text-md cursor-pointer"
>Other</label
>
</label> </label>
</li> </li>
<!-- ...other list items --> <!-- ...other list items -->
@ -369,45 +470,42 @@ onMount(async () => {
</div> </div>
</div> </div>
<!--End Political Party--> <!--End Political Party-->
</div> </div>
</div> </div>
</div> </div>
</dialog> </dialog>
<!--End View All List--> <!--End View All List-->
{:else} {:else}
<div class="drawer drawer-end z-40 overflow-hidden w-screen"> <div class="drawer drawer-end z-40 overflow-hidden w-screen">
<input id="filterList" type="checkbox" class="drawer-toggle"/> <input id="filterList" type="checkbox" class="drawer-toggle" />
<div class="drawer-side overflow-y-scroll overflow-hidden"> <div class="drawer-side overflow-y-scroll overflow-hidden">
<div
class="bg-[#000] min-h-screen w-screen pb-20 overflow-y-scroll overflow-hidden"
<div class="bg-[#000] min-h-screen w-screen pb-20 overflow-y-scroll overflow-hidden"> >
<label for="filterList" class="absolute left-6 top-6"> <label for="filterList" class="absolute left-6 top-6">
<svg class="w-6 h-6 inline-block mb-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#fff" d="M9.125 21.1L.7 12.7q-.15-.15-.213-.325T.425 12q0-.2.063-.375T.7 11.3l8.425-8.425q.35-.35.875-.35t.9.375q.375.375.375.875t-.375.875L3.55 12l7.35 7.35q.35.35.35.863t-.375.887q-.375.375-.875.375t-.875-.375Z"/></svg> <svg
class="w-6 h-6 inline-block mb-0.5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
><path
fill="#fff"
d="M9.125 21.1L.7 12.7q-.15-.15-.213-.325T.425 12q0-.2.063-.375T.7 11.3l8.425-8.425q.35-.35.875-.35t.9.375q.375.375.375.875t-.375.875L3.55 12l7.35 7.35q.35.35.35.863t-.375.887q-.375.375-.875.375t-.875-.375Z"
/></svg
>
</label> </label>
<div class="w-screen overflow-y-scroll">
<div class="w-screen overflow-y-scroll" >
<div class="space-y-3 sm:pt-5"> <div class="space-y-3 sm:pt-5">
<div class="bg-[#000] h-auto w-screen"> <div class="bg-[#000] h-auto w-screen">
<!--Start Header--> <!--Start Header-->
<div class="bg-[#000] w-full p-1 flex flex-col items-center pb-10 h-auto"> <div
<h2 class="text-center m-auto text-[1.1rem] font-medium text-white mt-5"> class="bg-[#000] w-full p-1 flex flex-col items-center pb-10 h-auto"
>
<h2
class="text-center m-auto text-[1.1rem] font-medium text-white mt-5"
>
Filter List Filter List
</h2> </h2>
</div> </div>
<!--End Header--> <!--End Header-->
@ -415,17 +513,35 @@ onMount(async () => {
<!--Start Political Party--> <!--Start Political Party-->
<div class="grid grid-cols-2 mt-4 w-11/12 ml-auto mt-4"> <div class="grid grid-cols-2 mt-4 w-11/12 ml-auto mt-4">
<div class="mb-4 mr-auto"> <div class="mb-4 mr-auto">
<h2 class="text-xl sm:text-2xl text-white font-bold mb-3">Political Party</h2> <h2 class="text-xl sm:text-2xl text-white font-bold mb-3">
<ul class="space-y-1 "> Political Party
</h2>
<ul class="space-y-1">
<li class="mb-2 cursor-pointer"> <li class="mb-2 cursor-pointer">
<label on:click|stopPropagation={(event) => handleFilter(event,'Democratic')} class="flex w-full items-center space-x-2 py-2 md:w-1/2 lg:w-1/3 lg:space-x-1.5 lg:py-[5px]"> <label
<input checked={filterList?.includes('Democratic')} type="checkbox" class="bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 dark:bg-dark-600 lg:h-4 lg:w-4" /> on:click|stopPropagation={(event) =>
handleFilter(event, "Democratic")}
class="flex w-full items-center space-x-2 py-2 md:w-1/2 lg:w-1/3 lg:space-x-1.5 lg:py-[5px]"
>
<input
checked={filterList?.includes("Democratic")}
type="checkbox"
class="bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 dark:bg-dark-600 lg:h-4 lg:w-4"
/>
<label class="text-white text-md">Democratic</label> <label class="text-white text-md">Democratic</label>
</label> </label>
</li> </li>
<li class="mb-2 cursor-pointer"> <li class="mb-2 cursor-pointer">
<label on:click|stopPropagation={(event) => handleFilter(event,'Republican')} class="flex w-full items-center space-x-2 py-2 md:w-1/2 lg:w-1/3 lg:space-x-1.5 lg:py-[5px]"> <label
<input checked={filterList?.includes('Republican')} type="checkbox" class="bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 dark:bg-dark-600 lg:h-4 lg:w-4" /> on:click|stopPropagation={(event) =>
handleFilter(event, "Republican")}
class="flex w-full items-center space-x-2 py-2 md:w-1/2 lg:w-1/3 lg:space-x-1.5 lg:py-[5px]"
>
<input
checked={filterList?.includes("Republican")}
type="checkbox"
class="bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 dark:bg-dark-600 lg:h-4 lg:w-4"
/>
<label class="text-white text-md">Republican</label> <label class="text-white text-md">Republican</label>
</label> </label>
</li> </li>
@ -433,10 +549,18 @@ onMount(async () => {
</div> </div>
<!-- Column 2 --> <!-- Column 2 -->
<div class="mt-10"> <div class="mt-10">
<ul class="space-y-1 "> <ul class="space-y-1">
<li class="mb-2 cursor-pointer"> <li class="mb-2 cursor-pointer">
<label on:click|stopPropagation={(event) => handleFilter(event,'Other')} class="flex w-full items-center space-x-2 py-2 md:w-1/2 lg:w-1/3 lg:space-x-1.5 lg:py-[5px]"> <label
<input checked={filterList?.includes('Other')} type="checkbox" class="bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 dark:bg-dark-600 lg:h-4 lg:w-4" /> on:click|stopPropagation={(event) =>
handleFilter(event, "Other")}
class="flex w-full items-center space-x-2 py-2 md:w-1/2 lg:w-1/3 lg:space-x-1.5 lg:py-[5px]"
>
<input
checked={filterList?.includes("Other")}
type="checkbox"
class="bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 dark:bg-dark-600 lg:h-4 lg:w-4"
/>
<span class="text-white text-md">Other</span> <span class="text-white text-md">Other</span>
</label> </label>
</li> </li>
@ -449,11 +573,21 @@ onMount(async () => {
<!--Start Transaction Type--> <!--Start Transaction Type-->
<div class="grid grid-cols-2 w-11/12 ml-auto mt-4"> <div class="grid grid-cols-2 w-11/12 ml-auto mt-4">
<div class="mb-4 mr-auto"> <div class="mb-4 mr-auto">
<h2 class="text-xl sm:text-2xl text-white font-bold mb-3">Transaction Type</h2> <h2 class="text-xl sm:text-2xl text-white font-bold mb-3">
Transaction Type
</h2>
<ul class="space-y-1"> <ul class="space-y-1">
<li class="mb-2 cursor-pointer"> <li class="mb-2 cursor-pointer">
<label on:click|stopPropagation={(event) => handleFilter(event,'Bought')} class="flex w-full items-center space-x-2 py-2 md:w-1/2 lg:w-1/3 lg:space-x-1.5 lg:py-[5px]"> <label
<input checked={filterList?.includes('Bought')} type="checkbox" class="bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 dark:bg-dark-600 lg:h-4 lg:w-4" /> on:click|stopPropagation={(event) =>
handleFilter(event, "Bought")}
class="flex w-full items-center space-x-2 py-2 md:w-1/2 lg:w-1/3 lg:space-x-1.5 lg:py-[5px]"
>
<input
checked={filterList?.includes("Bought")}
type="checkbox"
class="bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 dark:bg-dark-600 lg:h-4 lg:w-4"
/>
<label class="text-white text-md">Bought</label> <label class="text-white text-md">Bought</label>
</label> </label>
</li> </li>
@ -461,10 +595,18 @@ onMount(async () => {
</div> </div>
<!-- Column 2 --> <!-- Column 2 -->
<div class="mt-10"> <div class="mt-10">
<ul class="space-y-1 "> <ul class="space-y-1">
<li class="mb-2 cursor-pointer"> <li class="mb-2 cursor-pointer">
<label on:click|stopPropagation={(event) => handleFilter(event,'Sold')} class="flex w-full items-center space-x-2 py-2 md:w-1/2 lg:w-1/3 lg:space-x-1.5 lg:py-[5px]"> <label
<input checked={filterList?.includes('Sold')} type="checkbox" class="bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 dark:bg-dark-600 lg:h-4 lg:w-4" /> on:click|stopPropagation={(event) =>
handleFilter(event, "Sold")}
class="flex w-full items-center space-x-2 py-2 md:w-1/2 lg:w-1/3 lg:space-x-1.5 lg:py-[5px]"
>
<input
checked={filterList?.includes("Sold")}
type="checkbox"
class="bg-[#2E3238] h-[18px] w-[18px] rounded-sm ring-offset-0 dark:bg-dark-600 lg:h-4 lg:w-4"
/>
<label class="text-white text-md">Sold</label> <label class="text-white text-md">Sold</label>
</label> </label>
</li> </li>
@ -474,49 +616,43 @@ onMount(async () => {
</div> </div>
<!--End Transaction Type--> <!--End Transaction Type-->
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
{/if} </div>
{/if}
<style> <style>
.republican-striped { .republican-striped {
background-image: repeating-linear-gradient( background-image: repeating-linear-gradient(
-45deg, -45deg,
#98272B, #98272b,
#98272B 10px, #98272b 10px,
#840412 10px, #840412 10px,
#840412 20px #840412 20px
); );
} }
.democratic-striped { .democratic-striped {
background-image: repeating-linear-gradient( background-image: repeating-linear-gradient(
-45deg, -45deg,
#295AC7, #295ac7,
#295AC7 10px, #295ac7 10px,
#164D9D 10px, #164d9d 10px,
#164D9D 20px #164d9d 20px
); );
} }
.other-striped { .other-striped {
background-image: repeating-linear-gradient( background-image: repeating-linear-gradient(
-45deg, -45deg,
#A4A6A8, #a4a6a8,
#A4A6A8 10px, #a4a6a8 10px,
#C0C3C5 10px, #c0c3c5 10px,
#C0C3C5 20px #c0c3c5 20px
); );
} }
</style> </style>

2
src/routes/price-alert/+page.svelte
View File

@ -10,8 +10,6 @@
import { onMount } from "svelte"; import { onMount } from "svelte";
import ArrowLogo from "lucide-svelte/icons/move-up-right"; import ArrowLogo from "lucide-svelte/icons/move-up-right";
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
export let data; export let data;
const rawData = data?.getMiniPlotsIndex; const rawData = data?.getMiniPlotsIndex;