ui fixes
This commit is contained in:
MuslemRahimi
parent
b0fdcee2d7
commit
ba8feb92d5
@ -1,6 +1,7 @@
|
||||
<script lang="ts">
|
||||
import {userRegion, secFilingsClicked, stockTicker, clientSideCache, } from '$lib/store';
|
||||
import { afterUpdate } from 'svelte';
|
||||
import { Motion, AnimateSharedLayout } from "svelte-motion";
|
||||
|
||||
import { fade } from 'svelte/transition';
|
||||
|
||||
@ -25,18 +26,19 @@ let accordionOpen = {};
|
||||
let newData;
|
||||
let isLoaded = false;
|
||||
|
||||
function changeSECType(changeType) {
|
||||
switch (changeType) {
|
||||
case '8K':
|
||||
secType = changeType;
|
||||
function changeSECType(index) {
|
||||
activeIdx = index;
|
||||
switch (activeIdx) {
|
||||
case 0:
|
||||
secType = '8K';
|
||||
prepareData(secFilingsList?.eightK);
|
||||
break;
|
||||
case '10K':
|
||||
secType = changeType;
|
||||
case 1:
|
||||
secType = '10K';
|
||||
prepareData(secFilingsList?.tenK);
|
||||
break;
|
||||
case '10Q':
|
||||
secType = changeType;
|
||||
case 2:
|
||||
secType = '10Q';
|
||||
prepareData(secFilingsList?.tenQ);
|
||||
break;
|
||||
// Default case in case changeType doesn't match any of the specified cases
|
||||
@ -114,19 +116,45 @@ async function fetchData() {
|
||||
};
|
||||
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
title: "8-K",
|
||||
},
|
||||
{
|
||||
title: "10-K",
|
||||
},
|
||||
{
|
||||
title: "10-Q"
|
||||
}
|
||||
];
|
||||
let activeIdx = 0;
|
||||
|
||||
|
||||
afterUpdate(async() => {
|
||||
$: {
|
||||
|
||||
if($stockTicker && typeof window !== 'undefined' && $secFilingsClicked === true) {
|
||||
isLoaded = false;
|
||||
$secFilingsClicked = false;
|
||||
await fetchData()
|
||||
activeIdx = 0;
|
||||
secType = '8K';
|
||||
accordionOpen = {}
|
||||
|
||||
const asyncFunctions = [
|
||||
fetchData()
|
||||
];
|
||||
Promise.all(asyncFunctions)
|
||||
.then((results) => {
|
||||
prepareData(secFilingsList?.eightK);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('An error occurred:', error);
|
||||
});
|
||||
|
||||
isLoaded = true;
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@ -144,23 +172,51 @@ afterUpdate(async() => {
|
||||
|
||||
<div class="w-11/12 mt-5">
|
||||
<div class="relative right-0 bg-[#27272A] rounded-lg">
|
||||
<ul class="relative flex flex-wrap p-1 list-none rounded-lg">
|
||||
<li class="z-30 flex-auto text-center {secType === '8K' ? 'bg-[#00C806] rounded-lg' : ''}">
|
||||
<label on:click={() => changeSECType('8K')} class="border z-30 flex items-center justify-center w-full px-0 py-1 mb-0 border-0 rounded-lg bg-inherit">
|
||||
<span class="ml-1 {secType === '8K' ? 'text-black' : 'text-white'} font-medium">8-K</span>
|
||||
</label>
|
||||
</li>
|
||||
<li class="z-30 flex-auto text-center {secType === '10K' ? 'bg-[#0FC008] rounded-lg' : ''}">
|
||||
<label on:click={() => changeSECType('10K')} class="z-30 flex items-center justify-center w-full px-0 py-1 mb-0 border-0 rounded-lg bg-inherit">
|
||||
<span class="ml-1 {secType === '10K' ? 'text-black' : 'text-white'} font-medium">10-K</span>
|
||||
</label>
|
||||
</li>
|
||||
<li class="z-30 flex-auto text-center {secType === '10Q' ? 'bg-[#0FC008] rounded-lg' : ''}">
|
||||
<label on:click={() => changeSECType('10Q')} class="z-30 flex items-center justify-center w-full px-0 py-1 mb-0 border-0 rounded-lg bg-inherit">
|
||||
<span class="ml-1 {secType === '10Q' ? 'text-black' : 'text-white'} font-medium">10-Q</span>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="relative flex flex-row items-center p-1 list-none rounded-lg">
|
||||
<AnimateSharedLayout>
|
||||
{#each tabs as item, i}
|
||||
<button
|
||||
on:click={() => changeSECType(i)}
|
||||
class="group relative z-[1] rounded-lg px-6 py-1 border z-30 flex items-center justify-center w-full px-0 py-1 mb-0 border-0 bg-inherit {activeIdx === i
|
||||
? 'z-0'
|
||||
: ''} "
|
||||
>
|
||||
{#if activeIdx === i}
|
||||
<Motion
|
||||
layoutId="clicked-btn"
|
||||
transition={{ duration: 0.2 }}
|
||||
let:motion
|
||||
>
|
||||
<div
|
||||
use:motion
|
||||
class="absolute inset-0 rounded-lg sm:rounded-lg {[0,1,2]?.includes(activeIdx) ? 'bg-[#00C806]' : 'bg-[#E02424]'}"
|
||||
></div>
|
||||
</Motion>
|
||||
{/if}
|
||||
|
||||
{#if item?.title === '8-K'}
|
||||
<span
|
||||
class="relative block font-medium duration-200 {secType === '8K' ? 'text-black' : 'text-white'}">
|
||||
{item.title}
|
||||
</span>
|
||||
{:else if item?.title === '10-K'}
|
||||
<span
|
||||
class="relative block font-medium duration-200 {secType === '10K' ? 'text-black' : 'text-white'}">
|
||||
{item.title}
|
||||
</span>
|
||||
{:else}
|
||||
<span
|
||||
class="relative block font-medium duration-200 {secType === '10Q' ? 'text-black' : 'text-white'}">
|
||||
{item.title}
|
||||
</span>
|
||||
{/if}
|
||||
|
||||
</button>
|
||||
{/each}
|
||||
</AnimateSharedLayout>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -164,7 +164,6 @@ isLoaded = true;
|
||||
<!-- Other meta tags -->
|
||||
<meta property="og:title" content={`${$displayCompanyName} (${$etfTicker}) US Congress & Senate Trading · stocknear`}/>
|
||||
<meta property="og:description" content={`Get the latest US congress & senate trading of ${$displayCompanyName} (${$etfTicker}) from democrates and republicans.`} />
|
||||
<meta property="og:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
|
||||
<meta property="og:type" content="website"/>
|
||||
<!-- Add more Open Graph meta tags as needed -->
|
||||
|
||||
@ -172,7 +171,6 @@ isLoaded = true;
|
||||
<meta name="twitter:card" content="summary_large_image"/>
|
||||
<meta name="twitter:title" content={`${$displayCompanyName} (${$etfTicker}) US Congress & Senate Trading · stocknear`}/>
|
||||
<meta name="twitter:description" content={`Get the latest US congress & senate trading of ${$displayCompanyName} (${$etfTicker}) from democrates and republicans.`} />
|
||||
<meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
|
||||
<!-- Add more Twitter meta tags as needed -->
|
||||
|
||||
</svelte:head>
|
||||
@ -297,7 +295,7 @@ isLoaded = true;
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each senateTradingList as item}
|
||||
<tr on:click={() => goto(`/politicians/${item?.id}`)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#0F0F0F] border-b-[#0F0F0F] cursor-pointer">
|
||||
<tr on:click={() => goto(`/politicians/${item?.id}`)} class="odd:bg-[#202020] sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#0F0F0F] border-b-[#0F0F0F] cursor-pointer">
|
||||
|
||||
<td class="text-gray-200 pb-3 border-b border-b-[#0F0F0F]">
|
||||
<div class="flex flex-row items-center">
|
||||
|
||||
@ -510,7 +510,7 @@ $: {
|
||||
{#if $currentPortfolioPrice !== null && $currentPortfolioPrice !== 0}
|
||||
{$stockTicker?.includes('.DE') || $stockTicker?.includes('.F') ? `${$currentPortfolioPrice}€` : ` $${$currentPortfolioPrice}`}
|
||||
{:else}
|
||||
---
|
||||
{data?.getStockQuote?.price}
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -299,7 +299,7 @@ isLoaded = true;
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each senateTradingList as item}
|
||||
<tr on:click={() => goto(`/politicians/${item?.id}`)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#0F0F0F] border-b-[#0F0F0F] cursor-pointer">
|
||||
<tr on:click={() => goto(`/politicians/${item?.id}`)} class="odd:bg-[#202020] sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#0F0F0F] border-b-[#0F0F0F] cursor-pointer">
|
||||
|
||||
<td class="text-gray-200 pb-3 border-b border-b-[#0F0F0F]">
|
||||
<div class="flex flex-row items-center">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user