bugfixing websocket

2024-09-16 22:29:32 +02:00 · 2024-09-16 22:29:32 +02:00 · 051849eaab
commit 051849eaab
parent cea69f9349
6 changed files with 173 additions and 232 deletions
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@ -334,6 +334,11 @@ $: {
                          <Button builders={[builder]} type="submit" class="w-full bg-[#141417] hover:bg-[#141417]">
                            <a href="/most-shorted-stocks" class="text-start w-full text-[1rem] text-white ml-4 mt-4">Top Shorted Stocks</a>
                          </Button>
+                          <!--
+                          <Button builders={[builder]} type="submit" class="w-full bg-[#141417] hover:bg-[#141417]">
+                            <a href="/industry" class="text-start w-full text-[1rem] text-white ml-4 mt-4">By Industry</a>
+                          </Button>
+                          -->
                          <Button builders={[builder]} type="submit" class="w-full bg-[#141417] hover:bg-[#141417]">
                            <a href="/stock-screener" class="text-start w-full text-[1rem] text-white ml-4 mt-4">Stock Screener</a>
                          </Button>
@ -711,7 +716,7 @@ $: {
        
                <div class="flex flex-row items-center ml-9 w-full mt-3">
        
-                  <Accordion.Root class="w-full"Top >
+                  <Accordion.Root class="w-full">
        
                    <Accordion.Item value="item-1">
        
@ -724,6 +729,7 @@ $: {
                          <a href="/analysts" class="text-[1rem] text-white ml-4 mt-4">Top Analyst</a>
                          <a href="/analysts/top-stocks" class="text-[1rem] text-white ml-4 mt-4">Top Analyst Stocks</a>
                          <a href="/most-shorted-stocks" class="text-[1rem] text-white ml-4 mt-4">Top Shorted Stocks</a>
+                          <!--<a href="/industry" class="text-[1rem] text-white ml-4 mt-4">By Industry</a>-->
                          <a href="/stock-screener" class="text-[1rem] text-white ml-4 mt-4">Stock Screener</a>
                          <a href="/market-mover" class="text-[1rem] text-white ml-4 mt-4">Market Mover</a>
                          <a href="/heatmaps" class="text-[1rem] text-white ml-4 mt-4">Heatmaps</a>
--- a/src/routes/crypto/[tickerID]/+layout.svelte
+++ b/src/routes/crypto/[tickerID]/+layout.svelte
@ -318,45 +318,47 @@ onMount(async () => {

 });

-afterUpdate( async () => {
- 
- if(previousTicker !== $cryptoTicker && typeof socket !== 'undefined')
- {
-   previousTicker = $cryptoTicker;
-   //socket.send('close')
-   socket?.close();
-   await new Promise((resolve, reject) => {
-     socket?.addEventListener('close', resolve);
-   });
-  
-   if(socket?.readyState === WebSocket?.CLOSED)
-   {
-     await websocketRealtimeData()
-     console.log('connecting again')
-   }

- }
+  afterUpdate(async () => {
+    if (previousTicker !== $cryptoTicker && typeof socket !== "undefined") {
+      previousTicker = $cryptoTicker;
+      //socket.send('close')
+      if (socket?.readyState === WebSocket?.OPEN) {
+        socket?.close();
+      }
+      
+      await new Promise((resolve, reject) => {
+        socket?.addEventListener("close", resolve);
+      });

-});
+      if (socket?.readyState === WebSocket?.CLOSED) {
+        await websocketRealtimeData();
+        console.log("connecting again");
+      }
+    }
+  });


-onDestroy(() => {
-  try {
-    //socket?.send('close')
-    socket?.close()
-  }
-  catch(e) {
-    console.log(e)
-  }  
- 
-  //$displayCompanyName = '';
-  $currentPortfolioPrice = null;
-  $currentPrice = null;
-  $priceIncrease = null;
-  $traded = false
-  
-});
+  onDestroy(() => {
+    try {
+      //socket?.send('close')
+       if (socket && typeof socket !== "undefined") {
+        if (socket.readyState === WebSocket.OPEN) {
+          socket?.close(); // Close the WebSocket connection
+        }
+        socket = null; // Ensure socket is set to null
+      }
+    }
+    catch(e) {
+      console.log(e)
+    }  

+    //$displayCompanyName = '';
+    $currentPortfolioPrice = null;
+    $currentPrice = null;
+    $priceIncrease = null;
+    //$traded = false
+  });

    
    
--- a/src/routes/etf/[tickerID]/+layout.svelte
+++ b/src/routes/etf/[tickerID]/+layout.svelte
@ -336,7 +336,9 @@ async function fetchPortfolio()
   {
     previousTicker = $etfTicker;
     //socket.send('close')
-     socket?.close();
+      if (socket.readyState === WebSocket.OPEN) {
+        socket?.close(); // Close the WebSocket connection
+      }
     await new Promise((resolve, reject) => {
       socket.addEventListener('close', resolve);
     });
@ -355,7 +357,12 @@ async function fetchPortfolio()
  onDestroy(() => {
    try {
      //socket?.send('close')
-      socket?.close()
+       if (socket && typeof socket !== "undefined") {
+        if (socket.readyState === WebSocket.OPEN) {
+          socket?.close(); // Close the WebSocket connection
+        }
+        socket = null; // Ensure socket is set to null
+      }
    }
    catch(e) {
      console.log(e)
--- a/src/routes/industry/+layout.svelte
+++ b/src/routes/industry/+layout.svelte
@ -1,175 +1,29 @@
 <script lang='ts'>
    import { numberOfUnreadNotification } from '$lib/store';
    import { page } from '$app/stores';
-    import ArrowLogo from "lucide-svelte/icons/move-up-right";
-    import { goto } from '$app/navigation';
+

    export let data;

-let navigation = [
-    {
-        title: 'Stock Lists',
-        link: '/list'
-    },
-    {
-        title: 'Mega-Cap Stocks',
-        link: '/list/mega-cap-stocks'
-    },
-    {
-        title: 'Large-Cap Stocks',
-        link: '/list/large-cap-stocks'
-    },
-    {
-        title: 'Mid-Cap Stocks',
-        link: '/list/mid-cap-stocks'
-    },
-    {
-        title: 'Small-Cap Stocks',
-        link: '/list/small-cap-stocks'
-    },
-    {
-        title: 'Micro-Cap Stocks',
-        link: '/list/micro-cap-stocks'
-    },
-    {
-        title: 'Nano-Cap Stocks',
-        link: '/list/nano-cap-stocks'
-    },
-    {
-        title: 'All Stocks Listed on the NASDAQ',
-        link: '/list/nasdaq-stocks'
-    },
-    {
-        title: 'All Stocks Listed on the NYSE',
-        link: '/list/nyse-stocks'
-    },
-    {
-        title: 'All Stocks Listed on XETRA',
-        link: '/list/xetra-stocks'
-    },
-    {
-        title: 'All Stocks Listed on AMEX',
-        link: '/list/amex-stocks'
-    },
-    {
-        title: 'Dow Jones Industrial Average Stocks List',
-        link: '/list/dow-jones-stocks'
-    },
-    {
-        title: 'NASDAQ 100 Index Stocks List',
-        link: '/list/nasdaq-100-stocks'
-    },
-    {
-        title: 'S&P 500 Index Stocks List',
-        link: '/list/sp-500-stocks'
-    },
-    {
-        title: 'German Companies on the US Stock Market',
-        link: '/list/german-stocks-us'
-    },
-    {
-        title: 'Canadian Companies on the US Stock Market',
-        link: '/list/canadian-stocks-us'
-    },
-    {
-        title: 'Chinese Companies on the US Stock Market',
-        link: '/list/chinese-stocks-us'
-    },
-    {
-        title: 'Indian Companies on the US Stock Market',
-        link: '/list/indian-stocks-us'
-    },
-    {
-        title: 'Israeli Companies on the US Stock Market',
-        link: '/list/israeli-stocks-us'
-    },
-    {
-        title: 'UK Companies on the US Stock Market',
-        link: '/list/uk-stocks-us'
-    },
-    {
-        title: 'Japanese Companies on the US Stock Market',
-        link: '/list/japanese-stocks-us'
-    },
-    {
-        title: 'Financials Sector Stocks',
-        link: '/list/financial-sector'
-    },
-    {
-        title: 'Healthcare Sector Stocks',
-        link: '/list/healthcare-sector'
-    },
-    {
-        title: 'Technology Sector Stocks',
-        link: '/list/technology-sector'
-    },
-    {
-        title: 'Industrials Sector Stocks',
-        link: '/list/industrials-sector'
-    },
-    {
-        title: 'Energy Sector Stocks',
-        link: '/list/energy-sector'
-    },
-    {
-        title: 'Utilities Sector Stocks',
-        link: '/list/utilities-sector'
-    },
-    {
-        title: 'Consumer Cyclical Sector Stocks',
-        link: '/list/consumer-cyclical-sector'
-    },
-    {
-        title: 'Real Estate Sector Stocks',
-        link: '/list/real-estate-sector'
-    },
-    {
-        title: 'Basic Materials Sector Stocks',
-        link: '/list/basic-materials-sector'
-    },
-    {
-        title: 'Communication Services Sector Stocks',
-        link: '/list/communication-services-sector'
-    },
-    {
-        title: 'Consumer Defensive Sector Stocks',
-        link: '/list/consumer-defensive-sector'
-    },
-    {
-        title: 'Delisted Companies',
-        link: '/list/delisted-stocks'
-    },
-    {
-        title: 'Bitcoin ETFs',
-        link: '/list/bitcoin-etfs'
-    },
-    {
-        title: 'Magnificent Seven Stocks',
-        link: '/list/magnificent-seven'
-    },
-    {
-        title: 'Dividend Kings',
-        link: '/list/dividend-kings'
-    },
-    {
-        title: 'Dividend Aristocrats',
-        link: '/list/dividend-aristocrats'
-    },
-    {
-        title: 'All Active REITs on the US Stock Market',
-        link: '/list/reit-stocks'
-    },
-    
-];

-let updatedNavigation = navigation?.map(item => {
-    return {
-        ...item,
-        link: item.link + '/'
-    };
-});
+  function handleMode(i) {
+    activeIdx = i;
+  }
+  
+  const tabs = [
+      {
+        title: "Overview",
+      },
+      {
+        title: "Sectors",
+      },
+      {
+        title: "Industries",
+      },
+    ];
+  
+    let activeIdx = 0;

-const combinedNavigation = navigation?.concat(updatedNavigation);
 </script>
        

@ -200,40 +54,46 @@ const combinedNavigation = navigation?.concat(updatedNavigation);
            <div class="text-sm sm:text-[1rem] breadcrumbs ml-3 lg:ml-10">
                <ul>
                  <li><a href="/" class="text-gray-300">Home</a></li> 
-                  <li><a href="/list/" class="text-gray-300">Lists</a></li>
-                  {#if $page.url.pathname.startsWith('/list/')}
-                    <li>
-                        <a class="text-gray-300">
-                            {combinedNavigation?.find((item) => item?.link === $page.url.pathname)?.title}
-                        </a>
-                    </li> 
-                    {/if}
+                  <li><span class="text-gray-300">Industry</span></li>
                </ul>
            </div>



        
-
-
-        
        <div class="mt-10 sm:mt-5 w-full m-auto mb-10 bg-[#09090B] px-3 lg:px-10 overflow-hidden">
        
        
            <!--Start Top Winners/Losers-->
            <div class="flex flex-col justify-center items-center">
              
-              <div class="ml-2 text-start w-full text-white mb-2">
-                {#each navigation as item}
-                  {#if item?.link === $page.url.pathname}      
-                    <span class="font-bold text-2xl">
-                      {item?.title}
-                    </span>
-                  {/if}
-                  {/each}
+              <div class="ml-2 text-start w-full text-white mb-1 text-3xl font-semibold">
+                Stock Sectors & Industries
              </div>
    
              <div class="border-b mt-2 border-blue-400 w-full mb-7" />
+              
+                <div class="w-full mb-4">
+                    <div class="bg-[#313131] w-fit relative flex flex-wrap items-center justify-center rounded-lg p-1 -mt-3">
+                    {#each tabs as item, i}
+                    <button
+                        on:click={() => handleMode(i)}
+                        class="group relative z-[1] rounded-full px-6 py-1 {activeIdx === i
+                        ? 'z-0'
+                        : ''} "
+                    >
+                        {#if activeIdx === i}
+                            <div
+                            class="absolute inset-0 rounded-lg bg-purple-600"
+                            ></div>
+                        {/if}
+                        <span class="relative text-[1rem] block font-semibold duration-200 text-white">
+                            {item.title}
+                        </span>
+                    </button>
+                    {/each}
+                    </div>
+                </div>

              <div class="flex justify-center w-full m-auto overflow-hidden">
      
--- a/src/routes/industry/+page.svelte
+++ b/src/routes/industry/+page.svelte
@ -1,13 +1,72 @@
 <script lang='ts'>
 import { screenWidth } from '$lib/store';
 import IndustryTable from '$lib/components/IndustryTable.svelte';
-import { sectorList } from '$lib/utils';
+import { industryList, sectorList } from '$lib/utils';

 export let data;
 let rawData = data?.getIndustryOverview;

+const sectorNavigation = [
+    {
+        title: 'Financial Services',
+        link: '/list/financial-sector'
+    },
+    {
+        title: 'Finance',
+        link: '/list/financial-sector'
+    },
+    {
+        title: 'Healthcare',
+        link: '/list/healthcare-sector'
+    },
+    {
+        title: 'Technology',
+        link: '/list/technology-sector'
+    },
+    {
+        title: 'Industrials',
+        link: '/list/industrials-sector'
+    },
+    {
+        title: 'Energy',
+        link: '/list/energy-sector'
+    },
+    {
+        title: 'Utilities',
+        link: '/list/utilities-sector'
+    },
+    {
+        title: 'Consumer Cyclical',
+        link: '/list/consumer-cyclical-sector'
+    },
+    {
+        title: 'Real Estate',
+        link: '/list/real-estate-sector'
+    },
+    {
+        title: 'Basic Materials',
+        link: '/list/basic-materials-sector'
+    },
+    {
+        title: 'Communication Services',
+        link: '/list/communication-services-sector'
+    },
+    {
+        title: 'Consumer Defensive',
+        link: '/list/consumer-defensive-sector'
+    },
+]

-  
+function sectorSelector(sector) {
+    const selectedSector = sectorNavigation?.find(item => item?.title === sector);
+
+    if (selectedSector) {
+      goto(selectedSector?.link);
+    } else {
+      // Handle the case when the sector is not found
+      console.error(`Sector not found: ${sector}`);
+    }
+  }

 $: charNumber = $screenWidth < 640 ? 20 : 30;

@ -18,10 +77,8 @@ $: charNumber = $screenWidth < 640 ? 20 : 30;
          
        <div class="border border-gray-800 w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
            <svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
-            
-            These are all the actively traded REITs (Real Estate Investment Trusts) on the US stock market.
-            
-          </div>
+            We categorize stocks into {sectorList?.length} sectors and {industryList?.length} industries, based on the company's primary business activity.
+        </div>
    
      
        
--- a/src/routes/stocks/[tickerID]/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/+layout.svelte
@ -237,7 +237,10 @@ async function fetchPortfolio()
    if (previousTicker !== $stockTicker && typeof socket !== "undefined") {
      previousTicker = $stockTicker;
      //socket.send('close')
-      socket?.close();
+      if (socket?.readyState === WebSocket?.OPEN) {
+        socket?.close();
+      }
+      
      await new Promise((resolve, reject) => {
        socket?.addEventListener("close", resolve);
      });
@ -250,12 +253,18 @@ async function fetchPortfolio()
  });

  onDestroy(() => {
-    if (socket) {
-    if (socket.readyState === WebSocket.OPEN) {
-      socket.close(); // Close the WebSocket connection
+    try {
+      //socket?.send('close')
+       if (socket && typeof socket !== "undefined") {
+        if (socket.readyState === WebSocket.OPEN) {
+          socket?.close(); // Close the WebSocket connection
+        }
+        socket = null; // Ensure socket is set to null
+      }
    }
-    socket = null; // Ensure socket is set to null
-  }
+    catch(e) {
+      console.log(e)
+    }  

    //$displayCompanyName = '';
    $currentPortfolioPrice = null;