ui fix
This commit is contained in:
MuslemRahimi
parent
35b1cacaca
commit
59d1ced79b
@ -331,7 +331,9 @@
|
|||||||
class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 border border-gray-600 bg-primary rounded-md h-20"
|
class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 border border-gray-600 bg-primary rounded-md h-20"
|
||||||
>
|
>
|
||||||
<div class="flex flex-col items-start">
|
<div class="flex flex-col items-start">
|
||||||
<span class="font-medium text-gray-200 text-sm">Put/Call</span>
|
<span class="font-medium text-white text-sm sm:text-[1rem]"
|
||||||
|
>Put/Call</span
|
||||||
|
>
|
||||||
<span
|
<span
|
||||||
class="text-start text-sm sm:text-[1rem] font-medium text-white"
|
class="text-start text-sm sm:text-[1rem] font-medium text-white"
|
||||||
>
|
>
|
||||||
@ -387,7 +389,9 @@
|
|||||||
class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 border border-gray-600 bg-primary rounded-md h-20"
|
class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 border border-gray-600 bg-primary rounded-md h-20"
|
||||||
>
|
>
|
||||||
<div class="flex flex-col items-start">
|
<div class="flex flex-col items-start">
|
||||||
<span class="font-medium text-gray-200 text-sm">Call Flow</span>
|
<span class="font-medium text-white text-sm sm:text-[1rem]"
|
||||||
|
>Call Flow</span
|
||||||
|
>
|
||||||
<span
|
<span
|
||||||
class="text-start text-sm sm:text-[1rem] font-medium text-white"
|
class="text-start text-sm sm:text-[1rem] font-medium text-white"
|
||||||
>
|
>
|
||||||
@ -445,7 +449,9 @@
|
|||||||
class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 border border-gray-600 bg-primary rounded-md h-20"
|
class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 border border-gray-600 bg-primary rounded-md h-20"
|
||||||
>
|
>
|
||||||
<div class="flex flex-col items-start">
|
<div class="flex flex-col items-start">
|
||||||
<span class="font-medium text-gray-200 text-sm">Put Flow</span>
|
<span class="font-medium text-white text-sm sm:text-[1rem]"
|
||||||
|
>Put Flow</span
|
||||||
|
>
|
||||||
<span
|
<span
|
||||||
class="text-start text-sm sm:text-[1rem] font-medium text-white"
|
class="text-start text-sm sm:text-[1rem] font-medium text-white"
|
||||||
>
|
>
|
||||||
@ -526,7 +532,9 @@
|
|||||||
<div
|
<div
|
||||||
class="flex justify-start items-center w-full m-auto mt-6 overflow-x-scroll"
|
class="flex justify-start items-center w-full m-auto mt-6 overflow-x-scroll"
|
||||||
>
|
>
|
||||||
<table class="table table-sm table-compact w-full">
|
<table
|
||||||
|
class="table table-sm table-compact bg-table border border-gray-800 w-full"
|
||||||
|
>
|
||||||
<thead>
|
<thead>
|
||||||
<TableHeader {columns} {sortOrders} {sortData} />
|
<TableHeader {columns} {sortOrders} {sortData} />
|
||||||
</thead>
|
</thead>
|
||||||
@ -534,7 +542,7 @@
|
|||||||
{#each displayList as item, index}
|
{#each displayList as item, index}
|
||||||
{#if item?.investorName?.length > 0}
|
{#if item?.investorName?.length > 0}
|
||||||
<tr
|
<tr
|
||||||
class="border-y border-gray-800 odd:bg-odd sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-default border-b-[#09090B] {index +
|
class="border-b border-gray-800 odd:bg-odd sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] {index +
|
||||||
1 ===
|
1 ===
|
||||||
shareholderList?.length && data?.user?.tier !== 'Pro'
|
shareholderList?.length && data?.user?.tier !== 'Pro'
|
||||||
? 'opacity-[0.1]'
|
? 'opacity-[0.1]'
|
||||||
|
|||||||
@ -121,7 +121,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<section class="w-full overflow-hidden m-auto sm:mt-10 px-0 mt-10">
|
<section class="w-full overflow-hidden m-auto sm:mt-10 px-0 mt-10">
|
||||||
<div class="p-3 sm:p-0 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"
|
||||||
>
|
>
|
||||||
|
|||||||
@ -192,9 +192,7 @@
|
|||||||
<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 mt-10">
|
<section class="w-full overflow-hidden m-auto sm:mt-10 mt-10">
|
||||||
<div
|
<div class=" 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
|
<div
|
||||||
class="relative flex justify-center items-center overflow-hidden w-full"
|
class="relative flex justify-center items-center overflow-hidden w-full"
|
||||||
>
|
>
|
||||||
@ -264,12 +262,12 @@
|
|||||||
{#each displayList as item}
|
{#each displayList as item}
|
||||||
<a
|
<a
|
||||||
href={`/politicians/${item?.id}`}
|
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 ===
|
class="w-full cursor-pointer bg-[#141417] sm:hover:bg-[#000] transition-colors ease-in-out {item?.party ===
|
||||||
'Republican'
|
'Republican'
|
||||||
? 'sm:hover:shadow-[#80000D]'
|
? 'sm:hover:shadow-[#80000D]'
|
||||||
: item?.party === 'Democratic'
|
: item?.party === 'Democratic'
|
||||||
? 'sm:hover:shadow-[#1358C3]'
|
? 'sm:hover:shadow-[#1358C3]'
|
||||||
: 'sm:hover:shadow-[#636465]'} border-gray-600 shadow-md rounded-md h-auto pb-4 pt-4 mb-7"
|
: 'sm:hover:shadow-[#636465]'} shadow-md rounded-md h-auto pb-4 pt-4 mb-7"
|
||||||
>
|
>
|
||||||
<div class="flex flex-col relative">
|
<div class="flex flex-col relative">
|
||||||
<div
|
<div
|
||||||
@ -312,7 +310,7 @@
|
|||||||
class="flex flex-col justify-center items-center rounded-2xl"
|
class="flex flex-col justify-center items-center rounded-2xl"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="-mt-3 shadow-lg rounded-full border border-slate-600 w-20 h-20 relative {item?.party ===
|
class="-mt-3 shadow-lg rounded-full border border-gray-800 w-20 h-20 relative {item?.party ===
|
||||||
'Republican'
|
'Republican'
|
||||||
? 'republican-striped bg-[#98272B]'
|
? 'republican-striped bg-[#98272B]'
|
||||||
: item?.party === 'Democratic'
|
: item?.party === 'Democratic'
|
||||||
|
|||||||
@ -6,6 +6,7 @@
|
|||||||
stockTicker,
|
stockTicker,
|
||||||
} from "$lib/store";
|
} from "$lib/store";
|
||||||
import { getPartyForPoliticians } from "$lib/utils";
|
import { getPartyForPoliticians } from "$lib/utils";
|
||||||
|
import TableHeader from "$lib/components/Table/TableHeader.svelte";
|
||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
|
|
||||||
@ -103,6 +104,83 @@
|
|||||||
window.removeEventListener("scroll", handleScroll);
|
window.removeEventListener("scroll", handleScroll);
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
|
let columns = [
|
||||||
|
{ key: "representative", label: "Person", align: "left" },
|
||||||
|
{ key: "party", label: "Party", align: "left" },
|
||||||
|
{ key: "transactionDate", label: "Transaction Date", align: "right" },
|
||||||
|
{
|
||||||
|
key: "amount",
|
||||||
|
label: "Amount",
|
||||||
|
align: "right",
|
||||||
|
},
|
||||||
|
{ key: "type", label: "Type", align: "right" },
|
||||||
|
];
|
||||||
|
|
||||||
|
let sortOrders = {
|
||||||
|
representative: { order: "none", type: "string" },
|
||||||
|
party: { order: "none", type: "string" },
|
||||||
|
transactionDate: { order: "none", type: "date" },
|
||||||
|
amount: { order: "none", type: "string" },
|
||||||
|
type: { order: "none", type: "string" },
|
||||||
|
};
|
||||||
|
|
||||||
|
const sortData = (key) => {
|
||||||
|
// Reset all other keys to 'none' except the current key
|
||||||
|
for (const k in sortOrders) {
|
||||||
|
if (k !== key) {
|
||||||
|
sortOrders[k].order = "none";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Cycle through 'none', 'asc', 'desc' for the clicked key
|
||||||
|
const orderCycle = ["none", "asc", "desc"];
|
||||||
|
|
||||||
|
let originalData = rawData;
|
||||||
|
const currentOrderIndex = orderCycle.indexOf(sortOrders[key].order);
|
||||||
|
sortOrders[key].order =
|
||||||
|
orderCycle[(currentOrderIndex + 1) % orderCycle.length];
|
||||||
|
const sortOrder = sortOrders[key].order;
|
||||||
|
|
||||||
|
// Reset to original data when 'none' and stop further sorting
|
||||||
|
if (sortOrder === "none") {
|
||||||
|
senateTradingList = [...originalData]?.slice(0, 50); // Reset to original data (spread to avoid mutation)
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Define a generic comparison function
|
||||||
|
const compareValues = (a, b) => {
|
||||||
|
const { type } = sortOrders[key];
|
||||||
|
let valueA, valueB;
|
||||||
|
|
||||||
|
switch (type) {
|
||||||
|
case "date":
|
||||||
|
valueA = new Date(a[key]);
|
||||||
|
valueB = new Date(b[key]);
|
||||||
|
break;
|
||||||
|
case "string":
|
||||||
|
valueA = a[key].toUpperCase();
|
||||||
|
valueB = b[key].toUpperCase();
|
||||||
|
return sortOrder === "asc"
|
||||||
|
? valueA.localeCompare(valueB)
|
||||||
|
: valueB.localeCompare(valueA);
|
||||||
|
case "number":
|
||||||
|
default:
|
||||||
|
valueA = parseFloat(a[key]);
|
||||||
|
valueB = parseFloat(b[key]);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (sortOrder === "asc") {
|
||||||
|
return valueA < valueB ? -1 : valueA > valueB ? 1 : 0;
|
||||||
|
} else {
|
||||||
|
return valueA > valueB ? -1 : valueA < valueB ? 1 : 0;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Sort using the generic comparison function
|
||||||
|
senateTradingList = [...originalData].sort(compareValues)?.slice(0, 50);
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
@ -296,32 +374,12 @@
|
|||||||
class="table table-sm sm:table-md table-compact rounded-none sm:rounded-md w-full bg-table border border-gray-800 m-auto"
|
class="table table-sm sm:table-md table-compact rounded-none sm:rounded-md w-full bg-table border border-gray-800 m-auto"
|
||||||
>
|
>
|
||||||
<thead>
|
<thead>
|
||||||
<tr class="bg-default border-b border-[#27272A]">
|
<TableHeader {columns} {sortOrders} {sortData} />
|
||||||
<th
|
|
||||||
class="shadow-md text-start bg-default text-white text-sm font-semibold"
|
|
||||||
>
|
|
||||||
Person
|
|
||||||
</th>
|
|
||||||
<th
|
|
||||||
class="shadow-md text-end bg-default text-white text-sm font-semibold"
|
|
||||||
>
|
|
||||||
Transaction Date
|
|
||||||
</th>
|
|
||||||
<th
|
|
||||||
class="shadow-md text-end bg-default text-white text-sm font-semibold"
|
|
||||||
>
|
|
||||||
Amount
|
|
||||||
</th>
|
|
||||||
<th
|
|
||||||
class="shadow-md text-white font-semibold text-end text-sm"
|
|
||||||
>Type</th
|
|
||||||
>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{#each senateTradingList as item}
|
{#each senateTradingList as item}
|
||||||
<tr
|
<tr
|
||||||
class="odd:bg-odd sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-default border-b border-gray-800"
|
class="odd:bg-odd sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] border-b border-gray-800"
|
||||||
>
|
>
|
||||||
<td
|
<td
|
||||||
class="text-white text-sm sm:text-[1rem] whitespace-nowrap pb-3"
|
class="text-white text-sm sm:text-[1rem] whitespace-nowrap pb-3"
|
||||||
@ -350,12 +408,17 @@
|
|||||||
item?.representative?.replace("_", " "),
|
item?.representative?.replace("_", " "),
|
||||||
)}</a
|
)}</a
|
||||||
>
|
>
|
||||||
<span class="text-gray-300">{item?.party}</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!--{item?.firstName} {item?.lastName}-->
|
<!--{item?.firstName} {item?.lastName}-->
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
|
<td
|
||||||
|
class="text-start text-sm sm:text-[1rem] whitespace-nowrap text-white"
|
||||||
|
>
|
||||||
|
{item?.party}
|
||||||
|
</td>
|
||||||
|
|
||||||
<td
|
<td
|
||||||
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
|
class="text-end text-sm sm:text-[1rem] whitespace-nowrap text-white"
|
||||||
>
|
>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user