From 8261e79d4f1ab3a532907227a334af8ea0210189 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Wed, 23 Oct 2024 12:36:40 +0200
Subject: [PATCH] add export price

---
 src/routes/api/historical-price/+server.ts |   2 +-
 src/routes/stocks/[tickerID]/+page.svelte  | 126 +++++++++++++++++----
 2 files changed, 106 insertions(+), 22 deletions(-)

diff --git a/src/routes/api/historical-price/+server.ts b/src/routes/api/historical-price/+server.ts
index 9d1409b0..27a47a5d 100644
--- a/src/routes/api/historical-price/+server.ts
+++ b/src/routes/api/historical-price/+server.ts
@@ -5,7 +5,7 @@ export const POST: RequestHandler = async ({ request, locals }) => {
   const { apiURL, apiKey } = locals;
 
   const postData = { ticker: data?.ticker, timePeriod: data?.timePeriod };
-  const response = await fetch(apiURL + "/historical-price", {
+  const response = await fetch(apiURL + "/export-price-data", {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
diff --git a/src/routes/stocks/[tickerID]/+page.svelte b/src/routes/stocks/[tickerID]/+page.svelte
index d211f6dc..f9b00005 100644
--- a/src/routes/stocks/[tickerID]/+page.svelte
+++ b/src/routes/stocks/[tickerID]/+page.svelte
@@ -1,10 +1,6 @@
 <script lang="ts">
   import { AreaSeries, Chart, PriceLine } from "svelte-lightweight-charts";
-  import {
-    TrackingModeExitMode,
-    ColorType,
-    CrosshairMode,
-  } from "lightweight-charts";
+  import { TrackingModeExitMode, ColorType } from "lightweight-charts";
   import {
     getCache,
     setCache,
@@ -49,6 +45,8 @@
   import Lazy from "$lib/components/Lazy.svelte";
   import { convertTimestamp } from "$lib/utils";
   import { Button } from "$lib/components/shadcn/button/index.js";
+  import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js";
+
   import toast from "svelte-french-toast";
 
   export let data;
@@ -709,7 +707,7 @@
     }
   }
 
-  async function exportData() {
+  async function exportData(timePeriod: string) {
     let exportList = [];
     if (data?.user) {
       const response = await fetch("/api/historical-price", {
@@ -717,18 +715,20 @@
         headers: {
           "Content-Type": "application/json",
         },
-        body: JSON.stringify({ ticker: $stockTicker, timePeriod: "max" }),
+        body: JSON.stringify({ ticker: $stockTicker, timePeriod: timePeriod }),
       });
 
       exportList = await response.json();
 
-      exportList = exportList?.map(({ time, open, high, low, close }) => ({
-        date: time,
-        open,
-        high,
-        low,
-        close,
-      }));
+      exportList = exportList?.map(
+        ({ time, open, high, low, close, date }) => ({
+          date: timePeriod === "max" ? time : date, // Use 'time' if timePeriod is "max", otherwise use 'date'
+          open,
+          high,
+          low,
+          close,
+        }),
+      );
 
       const csvRows = [];
 
@@ -748,7 +748,7 @@
       const a = document.createElement("a");
       a.setAttribute("hidden", "");
       a.setAttribute("href", url);
-      a.setAttribute("download", `${$stockTicker}.csv`);
+      a.setAttribute("download", `${$stockTicker}_${timePeriod}.csv`);
       document.body.appendChild(a);
       a.click();
       document.body.removeChild(a);
@@ -1097,12 +1097,96 @@
               />
             </div>
 
-            <Button
-              on:click={exportData}
-              class="ml-auto border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-lg truncate"
-            >
-              <span class="truncate text-white">Export</span>
-            </Button>
+            <DropdownMenu.Root>
+              <DropdownMenu.Trigger asChild let:builder>
+                <Button
+                  builders={[builder]}
+                  class="ml-auto border-gray-600 border bg-[#09090B] sm:hover:bg-[#27272A] ease-out flex flex-row justify-between items-center px-3 py-2 text-white rounded-lg truncate"
+                >
+                  <span class="truncate text-white">Export</span>
+                  <svg
+                    class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    style="max-width:40px"
+                    aria-hidden="true"
+                  >
+                    <path
+                      fill-rule="evenodd"
+                      d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                      clip-rule="evenodd"
+                    ></path>
+                  </svg>
+                </Button>
+              </DropdownMenu.Trigger>
+              <DropdownMenu.Content
+                class="w-fit h-fit max-h-72 overflow-y-auto scroller"
+              >
+                <DropdownMenu.Label class="text-gray-400">
+                  Historical Stock Price
+                </DropdownMenu.Label>
+                <DropdownMenu.Separator />
+                <DropdownMenu.Group>
+                  <!--
+                      <DropdownMenu.Item on:click={exportData} class="cursor-pointer hover:bg-[#27272A]">
+                       <svg class="w-3.5 h-3.5 mr-1 {data?.user?.tier === 'Pro' ? 'hidden' : ''}" 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>
+                        1 min 
+                      </DropdownMenu.Item>
+                      <DropdownMenu.Item on:click={exportData} class="cursor-pointer hover:bg-[#27272A]">
+                        <svg class="w-3.5 h-3.5 mr-1 {data?.user?.tier === 'Pro' ? 'hidden' : ''}" 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>
+                        5 min
+                      </DropdownMenu.Item>
+                      <DropdownMenu.Item on:click={exportData} class="cursor-pointer hover:bg-[#27272A]">
+                        <svg class="w-3.5 h-3.5 mr-1 {data?.user?.tier === 'Pro' ? 'hidden' : ''}" 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>
+                        15 min
+                      </DropdownMenu.Item>
+                    -->
+                  <DropdownMenu.Item
+                    on:click={() => exportData("30min")}
+                    class="cursor-pointer hover:bg-[#27272A]"
+                  >
+                    <!--<svg
+                      class="w-3.5 h-3.5 mr-1 {data?.user?.tier === 'Pro'
+                        ? 'hidden'
+                        : ''}"
+                      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
+                    >
+                      -->
+                    30 min
+                  </DropdownMenu.Item>
+                  <DropdownMenu.Item
+                    on:click={() => exportData("1hour")}
+                    class="cursor-pointer hover:bg-[#27272A]"
+                  >
+                    <!--
+                    <svg
+                      class="w-3.5 h-3.5 mr-1 {data?.user?.tier === 'Pro'
+                        ? 'hidden'
+                        : ''}"
+                      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
+                    >
+                      -->
+                    1 hour
+                  </DropdownMenu.Item>
+                  <DropdownMenu.Item
+                    on:click={() => exportData("max")}
+                    class="cursor-pointer hover:bg-[#27272A]"
+                  >
+                    1 day
+                  </DropdownMenu.Item>
+                </DropdownMenu.Group>
+              </DropdownMenu.Content>
+            </DropdownMenu.Root>
           </div>
           <!--End Time Interval-->