From cc4a1e042a6b564875d74ed5edb10f43cf0536f1 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Wed, 7 Aug 2024 20:14:25 +0200
Subject: [PATCH] bugfixing screener

---
 src/routes/stock-screener/+page.svelte        |  8 +--
 .../stock-screener/[strategyId]/+page.svelte  | 58 +++++++------------
 2 files changed, 24 insertions(+), 42 deletions(-)

diff --git a/src/routes/stock-screener/+page.svelte b/src/routes/stock-screener/+page.svelte
index 6059ef32..cbccfeb3 100644
--- a/src/routes/stock-screener/+page.svelte
+++ b/src/routes/stock-screener/+page.svelte
@@ -258,7 +258,7 @@ onMount(async () => {
         </span>
 
         <div class="hidden sm:flex flex-col justify-center items-center m-auto pt-10 mb-10 sm:mb-0">
-          <label for={data?.user ? "addStrategy": "userLogin"} class="flex flex-row items-center justify-center w-56 sm:w-72 hover:bg-purple-600 bg-purple-600 bg-opacity-[0.6] duration-150 cursor-pointer py-2.5 px-4 font-medium text-center text-white rounded-full">
+          <label for={data?.user ? "addStrategy": "userLogin"} class="flex flex-row items-center justify-center w-56 sm:w-72 sm:hover:bg-purple-700 bg-purple-600 duration-100 cursor-pointer py-2.5 px-4 font-medium text-center text-white rounded-lg">
             <svg class="w-6 h-6 inline-block " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#E2E8F0" d="M16 2A14.172 14.172 0 0 0 2 16a14.172 14.172 0 0 0 14 14a14.172 14.172 0 0 0 14-14A14.172 14.172 0 0 0 16 2Zm8 15h-7v7h-2v-7H8v-2h7V8h2v7h7Z"/><path fill="none" d="M24 17h-7v7h-2v-7H8v-2h7V8h2v7h7v2z"/></svg>
             <span class="ml-2">
               New Strategy
@@ -315,7 +315,7 @@ onMount(async () => {
         
           <div class="w-3/4 flex ml-auto flex-row justify-end items-center -mt-2">
             <div class="flex flex-col justify-center items-center mr-2">
-              <label on:click|stopPropagation={() => handleView(st?.rules,st?.title)} for="viewStrategy" class="cursor-pointer w-8 h-8 bg-[#0A59F5] hover:bg-[#0844BC] hover:ring-[1px] hover:bg-purple-600 bg-purple-600 bg-opacity-[0.6] duration-150 font-medium text-center text-white rounded-full">
+              <label on:click|stopPropagation={() => handleView(st?.rules,st?.title)} for="viewStrategy" class="cursor-pointer w-8 h-8 bg-[#0A59F5] hover:bg-[#0844BC] hover:ring-[1px] sm:hover:bg-purple-700 bg-purple-600 duration-100 font-medium text-center text-white rounded-full">
                 <svg class="w-8 h-8 m-auto pt-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <circle cx="12" cy="12" r="3" stroke="#fff" stroke-width="1"></circle> <path d="M21 12C21 12 20 4 12 4C4 4 3 12 3 12" stroke="#fff" stroke-width="1"></path> </g></svg>
               </label>
               <span class="text-white text-xs mt-1">
@@ -324,7 +324,7 @@ onMount(async () => {
             </div>
       
             <div class=" flex flex-col justify-center items-center ml-2 mr-2">
-              <label on:click|stopPropagation={() => selectStrategy(st?.id)} class="cursor-pointer w-8 h-8 bg-[#0A59F5] hover:bg-[#0844BC] hover:ring-[1px] hover:bg-purple-600 bg-purple-600 bg-opacity-[0.6] duration-150 font-medium text-center text-white rounded-full">
+              <label on:click|stopPropagation={() => selectStrategy(st?.id)} class="cursor-pointer w-8 h-8 bg-[#0A59F5] hover:bg-[#0844BC] hover:ring-[1px] sm:hover:bg-purple-700 bg-purple-600 duration-100 font-medium text-center text-white rounded-full">
                 <svg class="h-6 w-6 m-auto pt-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="m19.3 8.925l-4.25-4.2l1.4-1.4q.575-.575 1.413-.575t1.412.575l1.4 1.4q.575.575.6 1.388t-.55 1.387L19.3 8.925ZM17.85 10.4L7.25 21H3v-4.25l10.6-10.6l4.25 4.25Z"/></svg>
               </label>
               <span class="text-white text-xs mt-1">
@@ -333,7 +333,7 @@ onMount(async () => {
             </div>
       
             <div class=" flex flex-col justify-center items-center ml-2 mr-8">
-              <label on:click|stopPropagation={() => deleteStrategyId= st?.id} for="deleteStrategy" class="cursor-pointer w-8 h-8 bg-[#0A59F5] hover:bg-[#0844BC] hover:ring-[1px] hover:bg-purple-600 bg-purple-600 bg-opacity-[0.6] duration-150 font-medium text-center text-white rounded-full">
+              <label on:click|stopPropagation={() => deleteStrategyId= st?.id} for="deleteStrategy" class="cursor-pointer w-8 h-8 bg-[#0A59F5] hover:bg-[#0844BC] hover:ring-[1px] sm:hover:bg-purple-700 bg-purple-600 duration-100 font-medium text-center text-white rounded-full">
                 <svg class="h-6 w-6 m-auto pt-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="white" d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z"/></svg>
               </label>
               <span class="text-white text-xs mt-1">
diff --git a/src/routes/stock-screener/[strategyId]/+page.svelte b/src/routes/stock-screener/[strategyId]/+page.svelte
index 0a2eb5f9..7443a79d 100644
--- a/src/routes/stock-screener/[strategyId]/+page.svelte
+++ b/src/routes/stock-screener/[strategyId]/+page.svelte
@@ -442,7 +442,7 @@ async function updateStockScreenerData() {
       return ratingRecommendationExists && trendAnalysisAccuracyExists && fundamentalAnalysisAccuracyExists;
     });
     filteredData = filterStockScreenerData();
-    displayResults = filteredData?.slice(0, 10);
+    displayResults = filteredData?.slice(0, 50);
   } catch (error) {
     console.error('Error fetching new stock screener data:', error);
     toast.error('Failed to update stock data. Please try again.', {
@@ -495,7 +495,7 @@ async function handleScroll() {
   const isBottom = window.innerHeight + window.scrollY >= scrollThreshold;
   if (isBottom && displayResults?.length !== filteredData?.length) {
       const nextIndex = displayResults?.length;
-      const filteredNewResults = filteredData?.slice(nextIndex, nextIndex + 9);
+      const filteredNewResults = filteredData?.slice(nextIndex, nextIndex + 30);
       displayResults = [...displayResults, ...filteredNewResults];
   }
 }
@@ -552,10 +552,7 @@ async function handleSave(printToast) {
        
       isSaved = true;
     }
-    else {
-      toast.success('Strategy saved!', {
-          style: 'border-radius: 200px; background: #333; color: #fff;'});
-    }
+   
   }  
 }
   
@@ -831,7 +828,7 @@ $: {
   }
 }
 
-$: displayResults = filteredData?.slice(0, 10);
+$: displayResults = filteredData?.slice(0, 50);
 
 $: isSaved = !ruleOfList;
 
@@ -888,7 +885,7 @@ $: charNumber = $screenWidth < 640 ? 20 : 40;
                 Build Strategy
 
 
-              <label for="userLogin" on:click={() => handleSave(true)} class="hidden sm:inline-flex ml-5 sm:hover:bg-purple-700 bg-purple-600 transition duration-100 cursor-pointer font-medium text-center text-white rounded-full px-4 py-1 text-sm border border-slate-800">
+              <label for="userLogin" on:click={() => handleSave(true)} class="hidden sm:inline-flex ml-5 sm:hover:bg-purple-700 bg-purple-600 transition duration-100 cursor-pointer font-medium text-center text-white rounded-lg px-4 py-1 text-sm border border-slate-800">
                 Save
               </label>
     
@@ -2136,7 +2133,7 @@ $: charNumber = $screenWidth < 640 ? 20 : 40;
                         <div class="text-white font-bold text-xl sm:text-2xl flex justify-start items-center">
                           {ruleOfList.length} Rules Preview
                         </div>
-                        <label on:click={handleResetAll} class="ml-auto cursor-pointer transition duration-100 bg-purple-600 sm:hover:bg-purple-700 border border-slate-800 py-2 px-3 rounded-full text-white text-sm">
+                        <label on:click={handleResetAll} class="ml-auto cursor-pointer transition duration-100 bg-purple-600 sm:hover:bg-purple-700 border border-slate-800 py-2 px-3 rounded-lg text-white text-sm">
                           Reset All
                         </label>
                       </div>
@@ -2198,13 +2195,14 @@ $: charNumber = $screenWidth < 640 ? 20 : 40;
                         <tr class="border-b-[#1A1A27]">
                           <th class="text-white bg-[#09090B] text-sm border-b-[#09090B]">Symbol</th>
                           <th class="text-white hidden sm:table-cell bg-[#09090B] text-sm border-b-[#09090B]">Company Name</th>
-                          <th class="text-white bg-[#09090B] text-sm border-b-[#09090B]">Market Cap</th>
+                          <th class="text-white bg-[#09090B] text-sm text-center border-b-[#09090B]">Market Cap</th>
+                          <th class="text-white bg-[#09090B] text-sm text-end border-b-[#09090B]">Change</th>
                           <th class="text-white bg-[#09090B] text-end text-sm border-b-[#09090B]">Price</th>
                         </tr>
                       </thead>
                       <tbody>
                         {#each displayResults as item}
-                        <tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#09090B] border-b-[#09090B] odd:bg-[#27272A] cursor-pointer">
+                        <tr on:click={() => {handleSave(false); goto("/stocks/"+item?.symbol)}} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#09090B] border-b-[#09090B] odd:bg-[#27272A] cursor-pointer">
                           <td class="border-b-[#09090B]">
                             <div class="flex flex-col items-start">
                               <span class="text-blue-400">{item?.symbol}</span>
@@ -2217,40 +2215,24 @@ $: charNumber = $screenWidth < 640 ? 20 : 40;
                             {item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name}
                           </td>
                           
-                          <td class="text-white border-b-[#09090B]">
-                            <span class="text-white text-sm ml-auto">
+                          <td class="text-white text-sm sm:text-[1rem] text-center border-b-[#09090B]">
                               {#if item?.symbol?.includes('.DE') || item?.symbol?.includes('.F')}
                                 €{abbreviateNumber(item?.marketCap)}
                               {:else}
                                 {abbreviateNumber(item?.marketCap,true)}
                               {/if}
-                            </span>
                           </td>
 
-                          <td class="text-gray-200 border-b-[#09090B]">
-                            <div class="flex flex-row justify-end items-center">
-              
-                              <div class="flex flex-col mt-3">
-                                <span class="text-white text-md ml-auto">
-                                  {#if item?.symbol?.includes('.DE') || item?.symbol?.includes('.F')}
-                                    €{item.price?.toFixed(2)}
-                                  {:else}
-                                    ${item.price?.toFixed(2)}
-                                  {/if}
-                                </span>
-                                <div class="flex flex-row mt-1">
-                                  {#if item?.changesPercentage >=0}
-                                    <svg class="w-5 h-5 -mr-0.5 -mt-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#10db06" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>
-                                    <span class="text-[#10DB06] text-xs">+{item?.changesPercentage?.toFixed(2)}%</span>
-                                  {:else}
-                                    <svg class="w-5 h-5 -mr-0.5 -mt-0.5 rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#FF2F1F" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>    
-                                    <span class="text-[#FF2F1F] text-xs">{item?.changesPercentage?.toFixed(2)}% </span> 
-                                  {/if}
-                                </div>
-                              </div>
-              
-                              
-                          </div>
+                          <td class="text-white text-end text-sm sm:text-[1rem] font-medium border-b-[#09090B]">
+                            {#if item?.changesPercentage >=0}
+                              <span class="text-[#10DB06]">+{item?.changesPercentage >= 1000 ? abbreviateNumber(item?.changesPercentage) : item?.changesPercentage?.toFixed(2)}%</span>
+                            {:else}
+                              <span class="text-[#FF2F1F]">{item?.changesPercentage <= -1000 ? abbreviateNumber(item?.changesPercentage) : item?.changesPercentage?.toFixed(2)}% </span> 
+                            {/if}
+                          </td>
+
+                          <td class="text-white text-sm sm:text-[1rem] text-end border-b-[#09090B]">
+                            {item.price?.toFixed(2)}
                         </td>                   
                         </tr>