update options flow page

jsconfig.json

@@ -1,17 +0,0 @@
-{
-  "extends": "./.svelte-kit/tsconfig.json",
-  "compilerOptions": {
-    "allowJs": true,
-    "checkJs": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "resolveJsonModule": true,
-    "skipLibCheck": true,
-    "sourceMap": true,
-    "strict": true
-  }
-  // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias and https://kit.svelte.dev/docs/configuration#files
-  //
-  // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
-  // from the referenced tsconfig.json - TypeScript does not merge them in
-}

src/lib/components/Table/OptionsFlowTable.svelte

@@ -237,7 +237,13 @@
   <div class="table">
     <VirtualList
       width="100%"
-      height={$screenWidth < 640 ? 550 : 850}
+      height={$screenWidth < 640
+        ? data?.user?.tier === "Pro"
+          ? 550
+          : 250
+        : data?.user?.tier === "Pro"
+          ? 850
+          : 250}
       itemCount={displayedData.length}
       itemSize={40}
     >
@@ -584,7 +590,11 @@
         let:index
         let:style
         {style}
-        class="tr {index % 2 === 0 ? 'bg-odd' : 'bg-[#17171D]'}"
+        class="tr {index % 2 === 0 ? 'bg-[#19191F]' : 'bg-[#121217]'} {index +
+          1 ===
+          rawData?.length && data?.user?.tier !== 'Pro'
+          ? 'opacity-[0.3]'
+          : ''}"
       >
         <!-- Row data -->
 
@@ -791,7 +801,6 @@
   .th {
     display: none;
     font-weight: 700;
-    background-color: #09090b;
   }
 
   .th > .td {

src/routes/options-flow/+page.server.ts

@@ -10,7 +10,8 @@ export const load = async ({ locals, cookies }) => {
         "X-API-KEY": apiKey,
       },
     });
-    const output = await response.json();
+    let output = await response.json();
+    output = user?.tier !== "Pro" ? output?.slice(0, 6) : output;
 
     return output;
   };

src/routes/options-flow/+page.svelte

@@ -16,6 +16,7 @@
   import { Button } from "$lib/components/shadcn/button/index.js";
   import { Calendar } from "$lib/components/shadcn/calendar/index.js";
   import CalendarIcon from "lucide-svelte/icons/calendar";
+  import UpgradeToPro from "$lib/components/UpgradeToPro.svelte";
 
   import { page } from "$app/stores";
 
@@ -529,78 +530,74 @@
   }
 
   async function websocketRealtimeData() {
-    newData = [];
+    if (data?.user?.tier === "Pro") {
-    try {
+      newData = [];
-      socket = new WebSocket(data?.wsURL + "/options-flow-reader");
+      try {
-      /*
+        socket = new WebSocket(data?.wsURL + "/options-flow-reader");
-    socket.addEventListener("open", () => {
-      const ids = rawData.map(item => item.id);
-      sendMessage(JSON.stringify({ ids }));
-    });
-    */
 
-      socket.addEventListener("message", (event) => {
+        socket.addEventListener("message", (event) => {
-        const totalVolume = displayCallVolume + displayPutVolume;
+          const totalVolume = displayCallVolume + displayPutVolume;
-        if (mode === true) {
+          if (mode === true) {
-          try {
+            try {
-            newData = JSON?.parse(event.data) ?? [];
+              newData = JSON?.parse(event.data) ?? [];
-            if (newData?.length > 0) {
+              if (newData?.length > 0) {
-              newData?.forEach((item) => {
+                newData?.forEach((item) => {
-                item.dte = daysLeft(item?.date_expiration);
+                  item.dte = daysLeft(item?.date_expiration);
-              });
+                });
 
-              //calculateStats(newData);
+                //calculateStats(newData);
-              //console.log(previousVolume);
+                //console.log(previousVolume);
-              if (
+                if (
-                newData?.length > rawData?.length &&
+                  newData?.length > rawData?.length &&
-                previousVolume !== totalVolume
+                  previousVolume !== totalVolume
-              ) {
+                ) {
-                //console.log(previousVolume,totalVolume,);
+                  //console.log(previousVolume,totalVolume,);
-                rawData = newData;
+                  rawData = newData;
-                shouldLoadWorker.set(true);
+                  shouldLoadWorker.set(true);
-                //console.log('loading worker')
+                  //console.log('loading worker')
-                //displayedData = rawData;
+                  //displayedData = rawData;
 
-                if (!muted) {
+                  if (!muted) {
-                  audio?.play();
+                    audio?.play();
+                  }
                 }
               }
-            }
 
-            /*
+              /*
           if (previousCallVolume !== displayCallVolume && !muted && audio) {
             audio?.play();
           }
           */
-          } catch (e) {
+            } catch (e) {
-            console.error("Error processing WebSocket message:", e);
+              console.error("Error processing WebSocket message:", e);
+            }
+            newData = [];
+            previousVolume = totalVolume;
           }
-          newData = [];
+        });
-          previousVolume = totalVolume;
-        }
-      });
 
-      socket.addEventListener("close", (event) => {
+        socket.addEventListener("close", (event) => {
-        console.log("WebSocket connection closed:", event.reason);
+          console.log("WebSocket connection closed:", event.reason);
 
-        // Explicitly nullify the socket and remove all event listeners
+          // Explicitly nullify the socket and remove all event listeners
-        if (socket) {
+          if (socket) {
-          socket.onmessage = null;
+            socket.onmessage = null;
-          socket.onopen = null;
+            socket.onopen = null;
-          socket.onclose = null;
+            socket.onclose = null;
-          socket.onerror = null;
+            socket.onerror = null;
-          socket = null;
+            socket = null;
-        }
+          }
-      });
+        });
 
-      socket.addEventListener("error", (error) => {
+        socket.addEventListener("error", (error) => {
-        console.error("WebSocket error:", error);
+          console.error("WebSocket error:", error);
-        // Handle WebSocket errors here
+          // Handle WebSocket errors here
-      });
+        });
-    } catch (error) {
+      } catch (error) {
-      console.error("WebSocket connection error:", error);
+        console.error("WebSocket connection error:", error);
-      // Handle connection errors here
+        // Handle connection errors here
-      setTimeout(() => websocketRealtimeData(), 400);
+        setTimeout(() => websocketRealtimeData(), 400);
+      }
     }
   }
 
@@ -1668,6 +1665,7 @@
                 {filteredData}
                 {rawData}
               />
+              <UpgradeToPro {data} />
             </div>
           {:else}
             <div
@@ -1686,12 +1684,6 @@
             </div>
           {/if}
         </div>
-
-        <!--
-          <div class="relative bottom-[400px] w-fit m-auto flex justify-center items-center">
-            <UpgradeToPro data={data} title="Get the recent Options Flow Data from Hedge Funds and major institutional traders to never miss out"/>
-          </div>
-          -->
       {:else}
         <div class="flex justify-center items-center h-80">
           <div class="relative">