add download button to market movers

src/lib/utils.ts

@@ -1307,17 +1307,6 @@ export const getLastTradingDay = () => {
   const nyDate = new Date(
     date.toLocaleString("en-US", { timeZone: etTimeZone }),
   );
-  const currentHour = nyDate.getHours();
-  const currentMinutes = nyDate.getMinutes();
-  const isMarketClosed =
-    currentHour < 9 ||
-    (currentHour === 9 && currentMinutes < 30) ||
-    currentHour >= 16;
-
-  // If market is closed, move to the previous day
-  if (isMarketClosed) {
-    nyDate.setDate(nyDate.getDate() - 1);
-  }
 
   // Loop backwards to find the most recent trading day
   while (true) {

src/routes/market-mover/[slug]/+page.svelte

@@ -2,6 +2,8 @@
   import { screenWidth, numberOfUnreadNotification } from "$lib/store";
   import { abbreviateNumber, getLastTradingDay } from "$lib/utils";
   import TableHeader from "$lib/components/Table/TableHeader.svelte";
+  import { goto } from "$app/navigation";
+
   import { afterUpdate } from "svelte";
   export let data;
   let timePeriod = "1D";
@@ -119,6 +121,34 @@
   });
 
   $: charNumber = $screenWidth < 640 ? 20 : 30;
+
+  const exportData = (format = "csv") => {
+    if (data?.user?.tier === "Pro") {
+      // Add headers row
+      const csvRows = [];
+      csvRows.push("Rank,Symbol,Name,Change, Price, Market Cap, Volume");
+
+      // Add data rows
+      stockList?.forEach((item) => {
+        const csvRow = `${item?.rank},${item?.symbol},${item?.name},${item?.changesPercentage},${item?.price},${item?.marketCap},${item?.volume}`;
+        csvRows.push(csvRow);
+      });
+
+      // Create CSV blob and trigger download
+      const csv = csvRows.join("\n");
+      const blob = new Blob([csv], { type: "text/csv" });
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.setAttribute("hidden", "");
+      a.setAttribute("href", url);
+      a.setAttribute("download", `${data?.getParams}_${timePeriod}.csv`);
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+    } else {
+      goto("/pricing");
+    }
+  };
 </script>
 
 <svelte:head>
@@ -238,6 +268,28 @@
                 <span class="hidden lg:inline">Updated</span>
                 {lastTradingDay}
               </div>
+
+              <div
+                class="flex flex-row items-center justify-end w-fit sm:w-[50%] md:w-auto ml-auto"
+              >
+                <label
+                  on:click={() => exportData("csv")}
+                  class="cursor-pointer w-fit border-gray-600 border bg-[#09090B] text-sm px-3 sm:px-4 py-1.5 sm:py-2 sm:hover:bg-[#27272A] ease-out flex flex-row justify-between items-center text-white rounded-md"
+                >
+                  <span class="truncate">Download</span>
+                  <svg
+                    class="{data?.user?.tier === 'Pro'
+                      ? 'hidden'
+                      : ''} ml-1 -mt-0.5 w-3.5 h-3.5"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    ><path
+                      fill="#A3A3A3"
+                      d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
+                    /></svg
+                  >
+                </label>
+              </div>
             </div>
           </div>
 

src/routes/market-mover/afterhours/+page.svelte

@@ -2,6 +2,7 @@
   import { screenWidth, numberOfUnreadNotification } from "$lib/store";
   import { abbreviateNumber, getLastTradingDay } from "$lib/utils";
   import TableHeader from "$lib/components/Table/TableHeader.svelte";
+  import { goto } from "$app/navigation";
 
   export let data;
   let categoryType = "gainers";
@@ -103,6 +104,34 @@
     stockList = [...originalData].sort(compareValues);
   };
   $: charNumber = $screenWidth < 640 ? 20 : 30;
+
+  const exportData = (format = "csv") => {
+    if (data?.user?.tier === "Pro") {
+      // Add headers row
+      const csvRows = [];
+      csvRows.push("Rank,Symbol,Name,Change, Price, Market Cap, Volume");
+
+      // Add data rows
+      stockList?.forEach((item) => {
+        const csvRow = `${item?.rank},${item?.symbol},${item?.name},${item?.changesPercentage},${item?.price},${item?.marketCap},${item?.volume}`;
+        csvRows.push(csvRow);
+      });
+
+      // Create CSV blob and trigger download
+      const csv = csvRows.join("\n");
+      const blob = new Blob([csv], { type: "text/csv" });
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.setAttribute("hidden", "");
+      a.setAttribute("href", url);
+      a.setAttribute("download", `afterhours_${categoryType}.csv`);
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+    } else {
+      goto("/pricing");
+    }
+  };
 </script>
 
 <svelte:head>
@@ -190,6 +219,27 @@
                 <span class="hidden lg:inline">Updated</span>
                 {lastTradingDay}
               </div>
+              <div
+                class="flex flex-row items-center justify-end w-fit sm:w-[50%] md:w-auto ml-auto"
+              >
+                <label
+                  on:click={() => exportData("csv")}
+                  class="cursor-pointer w-fit border-gray-600 border bg-[#09090B] text-sm px-3 sm:px-4 py-1.5 sm:py-2 sm:hover:bg-[#27272A] ease-out flex flex-row justify-between items-center text-white rounded-md"
+                >
+                  <span class="truncate">Download</span>
+                  <svg
+                    class="{data?.user?.tier === 'Pro'
+                      ? 'hidden'
+                      : ''} ml-1 -mt-0.5 w-3.5 h-3.5"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    ><path
+                      fill="#A3A3A3"
+                      d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
+                    /></svg
+                  >
+                </label>
+              </div>
             </div>
           </div>
 

src/routes/market-mover/premarket/+page.svelte

@@ -2,6 +2,7 @@
   import { screenWidth, numberOfUnreadNotification } from "$lib/store";
   import { abbreviateNumber, getLastTradingDay } from "$lib/utils";
   import TableHeader from "$lib/components/Table/TableHeader.svelte";
+  import { goto } from "$app/navigation";
 
   export let data;
   let categoryType = "gainers";
@@ -112,6 +113,34 @@
     stockList = [...originalData].sort(compareValues);
   };
   $: charNumber = $screenWidth < 640 ? 20 : 30;
+
+  const exportData = (format = "csv") => {
+    if (data?.user?.tier === "Pro") {
+      // Add headers row
+      const csvRows = [];
+      csvRows.push("Rank,Symbol,Name,Change, Price, Market Cap, Volume");
+
+      // Add data rows
+      stockList?.forEach((item) => {
+        const csvRow = `${item?.rank},${item?.symbol},${item?.name},${item?.changesPercentage},${item?.price},${item?.marketCap},${item?.volume}`;
+        csvRows.push(csvRow);
+      });
+
+      // Create CSV blob and trigger download
+      const csv = csvRows.join("\n");
+      const blob = new Blob([csv], { type: "text/csv" });
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.setAttribute("hidden", "");
+      a.setAttribute("href", url);
+      a.setAttribute("download", `premarket_${categoryType}.csv`);
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+    } else {
+      goto("/pricing");
+    }
+  };
 </script>
 
 <svelte:head>
@@ -199,6 +228,27 @@
                 <span class="hidden lg:inline">Updated</span>
                 {lastTradingDay}
               </div>
+              <div
+                class="flex flex-row items-center justify-end w-fit sm:w-[50%] md:w-auto ml-auto"
+              >
+                <label
+                  on:click={() => exportData("csv")}
+                  class="cursor-pointer w-fit border-gray-600 border bg-[#09090B] text-sm px-3 sm:px-4 py-1.5 sm:py-2 sm:hover:bg-[#27272A] ease-out flex flex-row justify-between items-center text-white rounded-md"
+                >
+                  <span class="truncate">Download</span>
+                  <svg
+                    class="{data?.user?.tier === 'Pro'
+                      ? 'hidden'
+                      : ''} ml-1 -mt-0.5 w-3.5 h-3.5"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    ><path
+                      fill="#A3A3A3"
+                      d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"
+                    /></svg
+                  >
+                </label>
+              </div>
             </div>
           </div>