diff --git a/src/routes/politicians/+page.svelte b/src/routes/politicians/+page.svelte index 7bb68f8b..b23291c7 100644 --- a/src/routes/politicians/+page.svelte +++ b/src/routes/politicians/+page.svelte @@ -3,25 +3,26 @@ import democraticBackground from "$lib/images/bg-democratic.png"; import otherBackground from "$lib/images/bg-other.png"; - import { screenWidth, numberOfUnreadNotification } from "$lib/store"; + import { numberOfUnreadNotification } from "$lib/store"; import { abbreviateNumber } from "$lib/utils"; import { onMount } from "svelte"; + import { page } from "$app/stores"; + import { compareTwoStrings } from "string-similarity"; // import * as XLSX from 'xlsx'; export let data; let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL; + let pagePathName = $page?.url?.pathname; let rawData = data?.getAllPolitician; let displayList = []; let filterQuery = ""; - let isLoaded = false; - - let filterList = []; - - let changeRuleFilter = false; + let animationClass = ""; + let animationId = ""; + let favoriteList = []; async function handleScroll() { const scrollThreshold = document.body.offsetHeight * 0.8; // 80% of the website height @@ -34,6 +35,28 @@ } onMount(async () => { + try { + const savedList = localStorage?.getItem(pagePathName); + + if (savedList) { + favoriteList = JSON?.parse(savedList); + } + } catch (e) { + console.log(e); + } + + rawData?.sort((a, b) => { + // Check if each id is in the favoriteList + const aIsFavorite = favoriteList?.includes(a?.id); + const bIsFavorite = favoriteList?.includes(b?.id); + + // If both are favorites or both are not, keep their order + if (aIsFavorite === bIsFavorite) return 0; + + // If a is favorite and b is not, a comes first; otherwise, b comes first + return aIsFavorite ? -1 : 1; + }); + displayList = rawData?.slice(0, 20) ?? []; isLoaded = true; @@ -47,59 +70,6 @@ }; }); - async function handleFilter(e, newFilter) { - //e.preventDefault(); - - changeRuleFilter = true; - const filterSet = new Set(filterList); - - // Check if the new filter already exists in the list - if (filterSet?.has(newFilter)) { - // If it exists, remove it from the list - filterSet?.delete(newFilter); - } else { - // If it doesn't exist, add it to the list - filterSet?.add(newFilter); - } - filterList = Array?.from(filterSet); - //console.log(filterList) - changeRuleFilter = true; - } - - function filterData(data) { - const newData = data?.filter((item) => { - //Democratic Party nested conditions - if ( - filterList?.includes("Democratic") && - item?.party && - item?.party?.toLowerCase() === "democratic" - ) { - return true; - } - //Republican Party nested conditions - if ( - filterList?.includes("Republican") && - item?.party && - item?.party?.toLowerCase() === "republican" - ) { - return true; - } - - //Other Party nested conditions - if ( - filterList?.includes("Other") && - item?.party && - item?.party?.toLowerCase() === "other" - ) { - return true; - } else { - return false; - } - }); - - return newData; - } - function handleInput(event) { filterQuery = event.target.value?.toLowerCase(); let newData = []; @@ -134,14 +104,41 @@ }, 500); } - $: { - if (filterList && changeRuleFilter === true) { - displayList = filterList?.length !== 0 ? filterData(rawData) : rawData; - displayList = [...displayList]; - changeRuleFilter = false; - //console.log(slicedRawData?.length) + function saveList() { + try { + // Save the version along with the rules + localStorage?.setItem(pagePathName, JSON?.stringify(favoriteList)); + } catch (e) { + console.log("Failed saving indicator rules: ", e); } } + + async function addToFavorite(event, itemId) { + event?.preventDefault(); + if (favoriteList.includes(itemId)) { + // Remove ticker from the watchlist. + favoriteList = favoriteList?.filter((item) => item !== itemId); + } else { + // Add ticker to the watchlist. + animationId = itemId; + animationClass = "heartbeat"; + const removeAnimation = () => { + animationId = ""; + animationClass = ""; + }; + favoriteList = [...favoriteList, itemId]; + const heartbeatElement = document.getElementById(itemId); + if (heartbeatElement) { + // Only add listener if it's not already present + if (!heartbeatElement.classList.contains("animation-added")) { + heartbeatElement.addEventListener("animationend", removeAnimation); + heartbeatElement.classList.add("animation-added"); // Prevent re-adding listener + } + } + } + + saveList(); + } @@ -233,7 +230,7 @@ > - + @@ -276,6 +274,26 @@ : 'sm:hover:shadow-[#636465]'} border-gray-600 shadow-md rounded-md h-auto pb-4 pt-4 mb-7" >
+
+ addToFavorite(event, item?.id)} + class=" {favoriteList?.includes(item?.id) + ? 'text-[#FBCE3C]' + : 'text-white'} absolute top-0 right-5 z-20" + > + +
{#if item?.party === "Republican"} -{#if $screenWidth >= 640} - - - - - - -
- - -
-
- -
-
-

- Political Party -

-
    -
  • - -
    • -
  • - -
    • -
-
- -
-
    -
  • - -
    • - -
-
-
- -
-
-
- - -{:else} -
- -
-
- - -
-
-
- -
-

- Filter List -

-
- - -
- -
-
-

- Political Party -

-
    -
  • - -
    • -
  • - -
    • -
-
- -
-
    -
  • - -
    • - -
-
-
- - - -
-
-

- Transaction Type -

-
    -
  • - -
    • -
-
- -
-
    -
  • - -
    • - -
-
-
- - -
-
-
-
-
-
-
-{/if} - diff --git a/src/routes/pricing/+page.svelte b/src/routes/pricing/+page.svelte index 05eab1b6..77516d58 100644 --- a/src/routes/pricing/+page.svelte +++ b/src/routes/pricing/+page.svelte @@ -135,7 +135,7 @@ class="w-full m-auto flex flex-col sm:flex-row justify-center items-center gap-x-4 gap-y-2" >

- Black Friday Deal