From 873de788c15ac2ae0318f1205ca9379546492c60 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Mon, 12 Aug 2024 08:15:52 +0200
Subject: [PATCH] ui fixes

---
 src/lib/components/Searchbar.svelte | 22 +++++------
 src/routes/price-alert/+page.svelte | 60 +++++++++++++++--------------
 src/routes/watchlist/+page.svelte   | 32 ++++++++++++++-
 3 files changed, 72 insertions(+), 42 deletions(-)

diff --git a/src/lib/components/Searchbar.svelte b/src/lib/components/Searchbar.svelte
index a2e8bb91..f3e7d4c4 100644
--- a/src/lib/components/Searchbar.svelte
+++ b/src/lib/components/Searchbar.svelte
@@ -389,12 +389,11 @@ $: {
 
 
 
-<!--Start Searchbar Modal-->
+<!--Start Desktop Searchbar-->
 
-{#if $screenWidth > 640}
 <input type="checkbox" id="searchBarModal" class="modal-toggle" bind:checked={searchBarModalChecked} />
 
-<dialog id="searchBarModal" class="modal modal-top z-[999]">
+<dialog id="searchBarModal" class="hidden sm:block modal modal-top z-[999]">
 
 
   <label for="searchBarModal"  class="cursor-pointer modal-backdrop"></label>
@@ -533,19 +532,21 @@ $: {
 </dialog>
 
 
-{:else}
+<!--End Desktop Searchbar-->
+
+
 <!--Start Drawer Sidewise for mobile-->
 
 
-<div class="drawer drawer-end overflow-hidden z-[999]" style="z-index: 9999">
+<div class="sm:hidden drawer drawer-end z-40 overflow-hidden">
   <input id="searchBarModal" type="checkbox" class="drawer-toggle" bind:checked={searchBarModalChecked} />
  
-  <div class="drawer-side overflow-hidden z-[999]">
+  <div class="drawer-side overflow-hidden">
     
-    
-
-  <div class="modal-box z-[999] overflow-hidden rounded-xl bg-[#09090B] min-h-screen w-screen pt-10" >
   
+    <div class="p-3 bg-[#09090B] min-h-screen w-screen pb-20 overflow-hidden pt-10">
+
+      
    
     <!-- Search layout -->
     <div class="mt-5 lg:mt-0">
@@ -667,5 +668,4 @@ $: {
 
 
 <!--End Drawer Sidewise for mobile-->
-{/if}
-<!--End Searchbar Modal-->
\ No newline at end of file
+
diff --git a/src/routes/price-alert/+page.svelte b/src/routes/price-alert/+page.svelte
index c93b4f76..2c189eb2 100644
--- a/src/routes/price-alert/+page.svelte
+++ b/src/routes/price-alert/+page.svelte
@@ -3,29 +3,39 @@ import { numberOfUnreadNotification } from '$lib/store';
 //import { enhance } from '$app/forms';
 import toast from 'svelte-french-toast';
 import { goto } from '$app/navigation';
-import { userRegion, screenWidth } from '$lib/store';
+import {screenWidth } from '$lib/store';
 import MiniPlot from '$lib/components/MiniPlot.svelte';
 import { onMount } from 'svelte';
 
 
 let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
 
-const usRegion = ['cle1','iad1','pdx1','sfo1'];
-
-let fastifyURL;
-
-userRegion.subscribe(value => {
-    if (usRegion.includes(value)) {
-    fastifyURL = import.meta.env.VITE_USEAST_FASTIFY_URL;
-    } else {
-    fastifyURL = import.meta.env.VITE_EU_FASTIFY_URL;
-    }
-});
-
 export let data;
 
 const rawData = data?.getMiniPlotsIndex;
 
+function getCurrentDateFormatted() {
+    // Get current date
+    let date = new Date();
+    
+    // If today is Saturday or Sunday, move to the previous Friday
+    if (date.getDay() === 6) { // Saturday
+        date.setDate(date.getDate() - 1);
+    } else if (date.getDay() === 0) { // Sunday
+        date.setDate(date.getDate() - 2);
+    }
+    
+    // Define months array for formatting
+    const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+    
+    // Get formatted date components
+    const month = months[date.getMonth()];
+    const day = date.getDate();
+    const year = date.getFullYear();
+    
+    // Return formatted date
+    return `${month} ${day}, ${year}`;
+}
 
 let editMode = false;
 let numberOfChecked = 0;
@@ -79,7 +89,7 @@ let priceAlertList = [];
 async function getPriceAlert()
 {
     const postData = {'userId': data?.user?.id}
-    const response = await fetch(fastifyURL+'/get-price-alert', {
+    const response = await fetch(data?.fastifyURL+'/get-price-alert', {
     method: 'POST',
     headers: {
      "Content-Type": "application/json"
@@ -167,19 +177,7 @@ isLoaded = true;
 
 
 
-let charNumber =40;
-
-  
-$: {
-  if ($screenWidth < 640)
-  {
-    charNumber = 15;
-  }
-  else {
-    charNumber =40;
-  }
-}
-
+$: charNumber = $screenWidth < 640 ? 15 : 40;
     
     
 </script>
@@ -259,8 +257,12 @@ $: {
     
         {#if isLoaded}
     
-        <div class="w-full sm:-mt-6 mb-8 m-auto flex justify-center items-center p-3">
-          <div class="w-full grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-y-3 lg:gap-y-0 gap-x-3 ">
+        <div class="text-white text-xs sm:text-sm pb-5 sm:pb-2 pl-3 sm:pl-0">
+          Stock Indexes - {getCurrentDateFormatted()}
+        </div>
+    
+        <div class="w-full -mt-4 sm:mt-0 mb-8 m-auto flex justify-center items-center p-3 sm:p-0">
+          <div class="w-full grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-y-3 lg:gap-y-0 gap-x-3 ">
           <MiniPlot title="S&P500" priceData = {priceDataSP500} changesPercentage={changeSP500} previousClose={previousCloseSP500}/>
           <MiniPlot title="Nasdaq" priceData = {priceDataNasdaq} changesPercentage={changeNasdaq} previousClose={previousCloseNasdaq}/>
           <MiniPlot title="Dow" priceData = {priceDataDowJones} changesPercentage={changeDowJones} previousClose={previousCloseDowJones}/>
diff --git a/src/routes/watchlist/+page.svelte b/src/routes/watchlist/+page.svelte
index 5cd0bde9..0a73d1ab 100644
--- a/src/routes/watchlist/+page.svelte
+++ b/src/routes/watchlist/+page.svelte
@@ -18,6 +18,30 @@ export let data;
 
 const rawData = data?.getMiniPlotsIndex;
 
+function getCurrentDateFormatted() {
+    // Get current date
+    let date = new Date();
+    
+    // If today is Saturday or Sunday, move to the previous Friday
+    if (date.getDay() === 6) { // Saturday
+        date.setDate(date.getDate() - 1);
+    } else if (date.getDay() === 0) { // Sunday
+        date.setDate(date.getDate() - 2);
+    }
+    
+    // Define months array for formatting
+    const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+    
+    // Get formatted date components
+    const month = months[date.getMonth()];
+    const day = date.getDate();
+    const year = date.getFullYear();
+    
+    // Return formatted date
+    return `${month} ${day}, ${year}`;
+}
+
+
 let priceDataSP500;
 let priceDataNasdaq;
 let priceDataDowJones;
@@ -412,8 +436,12 @@ onDestroy( () => {
 
     {#if isLoaded}
 
-    <div class="w-full -mt-6 mb-8 m-auto flex justify-center items-center p-3">
-      <div class="w-full grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-y-3 lg:gap-y-0 gap-x-3 ">
+    <div class="text-white text-xs sm:text-sm pb-5 sm:pb-2 pl-3 sm:pl-0">
+      Stock Indexes - {getCurrentDateFormatted()}
+    </div>
+
+    <div class="w-full -mt-4 sm:mt-0 mb-8 m-auto flex justify-center items-center p-3 sm:p-0">
+      <div class="w-full grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-y-3 lg:gap-y-0 gap-x-3 ">
       <MiniPlot title="S&P500" priceData = {priceDataSP500} changesPercentage={changeSP500} previousClose={previousCloseSP500}/>
       <MiniPlot title="Nasdaq" priceData = {priceDataNasdaq} changesPercentage={changeNasdaq} previousClose={previousCloseNasdaq}/>
       <MiniPlot title="Dow" priceData = {priceDataDowJones} changesPercentage={changeDowJones} previousClose={previousCloseDowJones}/>