From ba8feb92d5a037774619a91d7b21a6f927c0e909 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Thu, 11 Jul 2024 18:31:59 +0200
Subject: [PATCH] ui fixes

---
 src/lib/components/SECFilingsCard.svelte      | 116 +++++++++++++-----
 .../[tickerID]/congress-trading/+page.svelte  |   4 +-
 src/routes/stocks/[tickerID]/+layout.svelte   |   2 +-
 .../insider/congress-trading/+page.svelte     |   2 +-
 4 files changed, 89 insertions(+), 35 deletions(-)

diff --git a/src/lib/components/SECFilingsCard.svelte b/src/lib/components/SECFilingsCard.svelte
index 40c9de9f..0e9bcfc3 100644
--- a/src/lib/components/SECFilingsCard.svelte
+++ b/src/lib/components/SECFilingsCard.svelte
@@ -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 = {}
-    prepareData(secFilingsList?.eightK);
-      isLoaded = true;
+
+    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>
diff --git a/src/routes/etf/[tickerID]/congress-trading/+page.svelte b/src/routes/etf/[tickerID]/congress-trading/+page.svelte
index f6129617..9b47de4a 100644
--- a/src/routes/etf/[tickerID]/congress-trading/+page.svelte
+++ b/src/routes/etf/[tickerID]/congress-trading/+page.svelte
@@ -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">
diff --git a/src/routes/stocks/[tickerID]/+layout.svelte b/src/routes/stocks/[tickerID]/+layout.svelte
index 073b920d..b6758387 100644
--- a/src/routes/stocks/[tickerID]/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/+layout.svelte
@@ -510,7 +510,7 @@ $: {
                           {#if $currentPortfolioPrice !== null && $currentPortfolioPrice !== 0}
                             {$stockTicker?.includes('.DE') || $stockTicker?.includes('.F') ? `${$currentPortfolioPrice}€` : ` $${$currentPortfolioPrice}`}
                           {:else}
-                          ---
+                           {data?.getStockQuote?.price}
                           {/if}
                         </span>
                     </div>
diff --git a/src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte b/src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte
index eaba1e0a..e55285a5 100644
--- a/src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte
+++ b/src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte
@@ -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">