AmineTMIRI/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui fix

Browse Source
This commit is contained in:
MuslemRahimi 2024-10-30 22:00:33 +01:00
parent e4b17138c0
commit 04a5377b4f
3 changed files with 545 additions and 461 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

556
src/lib/components/Searchbar.svelte
View File

@ -1,114 +1,107 @@
<script lang="ts">
import { searchBarData, stockTicker, etfTicker, cryptoTicker, screenWidth} from '$lib/store';
import { goto } from '$app/navigation';
import { onMount } from 'svelte';
import {
searchBarData,
stockTicker,
etfTicker,
cryptoTicker,
screenWidth,
} from "$lib/store";
import { goto } from "$app/navigation";
import { onMount } from "svelte";
import Search from "lucide-svelte/icons/search";
let dataLoaded = false; // Flag to track data loading
let assetType = '';
let assetType = "";
let showSuggestions = false;
let notFoundTicker = false;
let searchQuery = '';
let searchQuery = "";
let searchOpen = false;
let searchBarModalChecked = false; // Initialize it to false
let inputElement;
async function loadSearchData() {
if ($searchBarData.length !== 0 || dataLoaded) return;
else {
dataLoaded = true;
// make the GET request to the endpoint
const response = await fetch('/api/searchbar-data', {
method: 'GET',
const response = await fetch("/api/searchbar-data", {
method: "GET",
headers: {
"Content-Type": "application/json"
"Content-Type": "application/json",
},
});
$searchBarData = await response.json();
}
}
function popularTicker(state, assetType) {
searchOpen = false;
if (assetType === 'ETF')
{
etfTicker.update( value => state?.toUpperCase() );
if (assetType === "ETF") {
etfTicker.update((value) => state?.toUpperCase());
} else if (assetType === "Stock") {
stockTicker.update((value) => state?.toUpperCase());
} else if (assetType === "Crypto") {
cryptoTicker.update((value) => state?.toUpperCase());
}
else if (assetType === 'Stock') {
stockTicker.update( value => state?.toUpperCase() );
}
else if (assetType === 'Crypto') {
cryptoTicker.update( value => state?.toUpperCase() );
}
const closePopup = document.getElementById("searchBarModal");
closePopup?.dispatchEvent(new MouseEvent('click'))
closePopup?.dispatchEvent(new MouseEvent("click"));
}
function searchBarTicker(state, assetType)
{
function searchBarTicker(state, assetType) {
showSuggestions = false;
if(state !== '' && $searchBarData?.find(item => item?.symbol === state?.toUpperCase()))
{
if (
state !== "" &&
$searchBarData?.find((item) => item?.symbol === state?.toUpperCase())
) {
notFoundTicker = false;
if (assetType === 'ETF')
{
etfTicker.update( value => state?.toUpperCase() );
goto(`/etf/${state?.toUpperCase()}`)
}
else if (assetType === 'Stock') {
stockTicker.update( value => state?.toUpperCase() );
goto(`/stocks/${state?.toUpperCase()}`)
}
else if (assetType === 'Crypto') {
cryptoTicker.update( value => state?.toUpperCase() );
goto(`/crypto/${state?.toUpperCase()}`)
if (assetType === "ETF") {
etfTicker.update((value) => state?.toUpperCase());
goto(`/etf/${state?.toUpperCase()}`);
} else if (assetType === "Stock") {
stockTicker.update((value) => state?.toUpperCase());
goto(`/stocks/${state?.toUpperCase()}`);
} else if (assetType === "Crypto") {
cryptoTicker.update((value) => state?.toUpperCase());
goto(`/crypto/${state?.toUpperCase()}`);
}
searchOpen = false
searchOpen = false;
//searchQuery = state.toUpperCase();
const closePopup = document.getElementById("searchBarModal");
closePopup?.dispatchEvent(new MouseEvent('click'))
}
else{
closePopup?.dispatchEvent(new MouseEvent("click"));
} else {
notFoundTicker = false;
}
searchQuery ="";
searchQuery = "";
}
let searchResults = [];
let searchResults = [];
async function search() {
async function search() {
const normalizedSearchQuery = searchQuery?.toLowerCase();
// Define names for which symbols without dots should be prioritized
const prioritizeWithoutDotsForNames = ["apple", /* Add more names as needed */];
const prioritizeWithoutDotsForNames = [
"apple" /* Add more names as needed */,
];
const filteredList = $searchBarData?.map(item => ({
const filteredList = $searchBarData
?.map((item) => ({
...item,
nameLower: item?.name?.toLowerCase(),
symbolLower: item?.symbol?.toLowerCase(),
}))?.filter(({ nameLower, symbolLower }) =>
}))
?.filter(
({ nameLower, symbolLower }) =>
nameLower?.includes(normalizedSearchQuery) ||
symbolLower?.includes(normalizedSearchQuery)
symbolLower?.includes(normalizedSearchQuery),
);
filteredList?.sort((a, b) => {
@ -134,7 +127,8 @@ async function search() {
const bNameIndex = bNameLower?.indexOf(normalizedSearchQuery);
// If no exact symbol match, prioritize based on the combined position in name and symbol
const positionComparison = aSymbolIndex + aNameIndex - (bSymbolIndex + bNameIndex);
const positionComparison =
aSymbolIndex + aNameIndex - (bSymbolIndex + bNameIndex);
// Additional condition for prioritizing symbols without dots for specific names
if (prioritizeWithoutDotsForNames.includes(normalizedSearchQuery)) {
@ -150,35 +144,27 @@ async function search() {
searchResults = filteredList?.slice(0, 5);
showSuggestions = normalizedSearchQuery !== "";
}
}
const onKeyPress = e => {
const onKeyPress = (e) => {
if (e?.charCode === 13) {
focusedSuggestion = '';
focusedSuggestion = "";
if (!notFoundTicker) {
searchBarTicker(searchQuery, assetType);
}
}
};
};
let focusedSuggestion = null;
let focusedSuggestion = null;
function handleKeyDown(event) {
function handleKeyDown(event) {
if (event.key === "ArrowDown" && showSuggestions) {
// Move down in the suggestions
event.preventDefault(); // Prevent scrolling
const currentIndex = searchResults?.findIndex(item => item?.symbol === searchQuery);
const currentIndex = searchResults?.findIndex(
(item) => item?.symbol === searchQuery,
);
if (currentIndex < searchResults?.length - 1) {
searchQuery = searchResults[currentIndex + 1]?.symbol;
assetType = searchResults[currentIndex + 1]?.type;
@ -187,83 +173,92 @@ function handleKeyDown(event) {
} else if (event.key === "ArrowUp" && showSuggestions) {
// Move up in the suggestions
event.preventDefault(); // Prevent scrolling
const currentIndex = searchResults?.findIndex(item => item?.symbol === searchQuery);
const currentIndex = searchResults?.findIndex(
(item) => item?.symbol === searchQuery,
);
if (currentIndex > 0) {
searchQuery = searchResults[currentIndex - 1]?.symbol;
assetType = searchResults[currentIndex - 1]?.type;
focusedSuggestion = searchQuery; // Update the focused suggestion
}
}
else if (event.key === "ArrowDown" && !showSuggestions) {
} else if (event.key === "ArrowDown" && !showSuggestions) {
// Move down in the suggestions
event.preventDefault(); // Prevent scrolling
const currentIndex = popularList?.findIndex(item => item?.symbol === searchQuery);
const currentIndex = popularList?.findIndex(
(item) => item?.symbol === searchQuery,
);
if (currentIndex < popularList?.length - 1) {
searchQuery = popularList[currentIndex + 1]?.symbol;
assetType = popularList[currentIndex + 1]?.type;
focusedSuggestion = searchQuery; // Update the focused suggestion
}
}
else if (event.key === "ArrowUp" && !showSuggestions) {
} else if (event.key === "ArrowUp" && !showSuggestions) {
// Move up in the suggestions
event.preventDefault(); // Prevent scrolling
const currentIndex = popularList?.findIndex(item => item?.symbol === searchQuery);
const currentIndex = popularList?.findIndex(
(item) => item?.symbol === searchQuery,
);
if (currentIndex > 0) {
searchQuery = popularList[currentIndex - 1]?.symbol;
assetType = popularList[currentIndex - 1]?.type;
focusedSuggestion = searchQuery; // Update the focused suggestion
}
}
}
const handleControlF = async (event) => {
if (event.ctrlKey && event.key === 'k') {
const handleControlF = async (event) => {
if (event.ctrlKey && event.key === "k") {
// Ctrl+F is pressed, open the modal
const keyboardSearch = document.getElementById('searchBarModal');
keyboardSearch?.dispatchEvent(new MouseEvent('click'))
event.preventDefault()
const keyboardSearch = document.getElementById("searchBarModal");
keyboardSearch?.dispatchEvent(new MouseEvent("click"));
event.preventDefault();
await loadSearchData();
}
};
const handleEscape = (event) => {
if (event.key === 'Escape') {
if (event.key === "Escape") {
// Escape key is pressed, close the modal
searchBarModalChecked = false;
}
};
};
onMount(() => {
window.addEventListener('keydown', handleControlF);
window.addEventListener('keydown', handleEscape);
window.addEventListener("keydown", handleControlF);
window.addEventListener("keydown", handleEscape);
return () => {
window.removeEventListener('keydown', handleControlF);
window.removeEventListener('keydown', handleEscape);
window.removeEventListener("keydown", handleControlF);
window.removeEventListener("keydown", handleEscape);
};
});
let charNumber = 20;
let popularList = [];
const popularSymbols = [
"BTCUSD",
"ETHUSD",
"SOLUSD",
"SPY",
"ADBE",
"DBX",
"HOOD",
"AMZN",
"TSLA",
"AMD",
"MCD",
"NVDA",
"PYPL",
"AAPL",
"BYND",
"KO",
];
let charNumber = 20;
let popularList = [];
const popularSymbols = ['BTCUSD','ETHUSD','SOLUSD','SPY','ADBE','DBX','HOOD','AMZN', 'TSLA', 'AMD','MCD','NVDA','PYPL','AAPL','BYND','KO'];
$: {
$: {
if ($searchBarData && popularList?.length === 0) {
popularList = $searchBarData?.filter(({ symbol }) =>
popularSymbols?.includes(symbol)
popularSymbols?.includes(symbol),
);
// Fisher-Yates (Knuth) Shuffle Algorithm
@ -274,46 +269,41 @@ $: {
popularList = popularList?.slice(0, 5);
}
}
}
$: {
if( searchBarModalChecked === true && typeof window !== 'undefined')
{
if($screenWidth > 640)
{
$: {
if (searchBarModalChecked === true && typeof window !== "undefined") {
if ($screenWidth > 640) {
inputElement.focus();
}
//Page is not scrollable now
document.body.classList.add("overflow-hidden");
}
}
}
$: {
if( searchBarModalChecked === false && typeof window !== 'undefined')
{
$: {
if (searchBarModalChecked === false && typeof window !== "undefined") {
showSuggestions = searchQuery = "";
document.body.classList?.remove("overflow-hidden");
}
}
}
$: {
if(searchQuery?.length !== 0)
{
$: {
if (searchQuery?.length !== 0) {
notFoundTicker = false;
}
}
}
</script>
<label on:mouseover={loadSearchData} on:click={loadSearchData} for="searchBarModal" class="cursor-pointer p-2 sm:hover:bg-[#27272A] text-gray-300 sm:hover:text-white flex-shrink-0 flex items-center justify-center border border-gray-800 rounded-lg">
<label
on:mouseover={loadSearchData}
on:click={loadSearchData}
for="searchBarModal"
class="cursor-pointer p-2 sm:hover:bg-[#27272A] text-gray-300 sm:hover:text-white flex-shrink-0 flex items-center justify-center border border-gray-600 rounded-lg"
>
<Search class="h-[20px] w-[20px]" />
</label>
<!--
<div class="ml-5 w-96 grow">
<div class="relative flex items-center">
@ -355,7 +345,7 @@ $: {
{#if !showSuggestions }
{#each popularList as item}
<li>
<a href={`/${item?.type === 'ETF' ? 'etf' : item?.type === 'Crypto' ? 'crypto' : 'stocks'}/${item?.symbol}`} on:click={() => popularTicker(item?.symbol, item?.assetType) } class="mb-2 {item?.symbol === focusedSuggestion ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#404040] bg-opacity-[0.25] rounded group' : 'shake-ticker cursor-pointer border-b border-gray-600 flex justify-start items-center p-2 text-white group'} w-full">
<a href={`/${item?.type === 'ETF' ? 'etf' : item?.type === 'Crypto' ? 'crypto' : 'stocks'}/${item?.symbol}`} on:click={() => popularTicker(item?.symbol, item?.assetType) } class="mb-2 {item?.symbol === focusedSuggestion ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#27272A] rounded group' : 'shake-ticker cursor-pointer border-b border-gray-600 flex justify-start items-center p-2 text-white group'} w-full">
<div class="flex flex-row items-center w-full">
<div class="flex flex-col ml-2">
<span class="text-blue-400">{item?.symbol}</span>
@ -381,31 +371,30 @@ $: {
</div>
-->
<!--Start Desktop Searchbar-->
<!--Don't remove if since input.focus does not work anymore-->
{#if $screenWidth >= 640}
<input type="checkbox" id="searchBarModal" class="modal-toggle" bind:checked={searchBarModalChecked} />
<dialog id="searchBarModal" class="modal modal-top z-[999]">
<input
type="checkbox"
id="searchBarModal"
class="modal-toggle"
bind:checked={searchBarModalChecked}
/>
<dialog id="searchBarModal" class="modal modal-top z-[999]">
<label for="searchBarModal" class="cursor-pointer modal-backdrop"></label>
<div class="z-[999] modal-box overflow-hidden rounded-xl bg-[#09090B] border border-gray-800 sm:my-8 sm:m-auto sm:h-auto w-full sm:w-1/2 md:w-3/4 lg:w-1/2 2xl:w-1/3 " >
<div
class="z-[999] modal-box overflow-hidden rounded-xl bg-[#09090B] border border-gray-600 sm:my-8 sm:m-auto sm:h-auto w-full sm:w-1/2 md:w-3/4 lg:w-1/2 2xl:w-1/3"
>
<!-- Search layout -->
<div class="mt-5 sm:mt-0">
<div class="relative">
<label for="modal-search" class="sr-only">Search</label>
<input
id="modal-search"
class="rounded-lg w-full text-white bg-[#09090B] border border-gray-800 focus:ring-transparent placeholder-gray-200 py-3 pl-10 pr-4"
class="rounded-lg w-full text-white bg-[#09090B] border border-gray-600 focus:ring-transparent placeholder-gray-200 py-3 pl-10 pr-4"
type="search"
placeholder="Search Anything…"
bind:value={searchQuery}
@ -415,89 +404,128 @@ $: {
on:keypress={onKeyPress}
autocomplete="off"
/>
<button on:click={() => (searchBarTicker(searchQuery, assetType))} class="absolute inset-0 right-auto group" type="submit" aria-label="Search">
<svg class="w-4 h-4 shrink-0 fill-current text-white ml-4 mr-2 text-slate-400" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7zM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z" />
<path d="M15.707 14.293L13.314 11.9a8.019 8.019 0 01-1.414 1.414l2.393 2.393a.997.997 0 001.414 0 .999.999 0 000-1.414z" />
<button
on:click={() => searchBarTicker(searchQuery, assetType)}
class="absolute inset-0 right-auto group"
type="submit"
aria-label="Search"
>
<svg
class="w-4 h-4 shrink-0 fill-current text-white ml-4 mr-2 text-slate-400"
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
><path
d="M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7zM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z"
/>
<path
d="M15.707 14.293L13.314 11.9a8.019 8.019 0 01-1.414 1.414l2.393 2.393a.997.997 0 001.414 0 .999.999 0 000-1.414z"
/>
</svg>
</button>
</div>
</div>
{#if $searchBarData?.length !== 0}
<div class="py-4">
<!-- Popular searches -->
<div class="mb-3 last:mb-0 mt-3">
{#if notFoundTicker}
<p class="text-xs font-semibold text-[#FB6A67] px-2 mb-4">Oh snapp, ticker does not exist in our database</p>
<p class="text-xs font-semibold text-[#FB6A67] px-2 mb-4">
Oh snapp, ticker does not exist in our database
</p>
{/if}
{#if !showSuggestions}
<div class="text-start text-sm font-semibold text-white mb-2">
Popular
</div>
{/if}
<ul class="text-sm" >
{#if !showSuggestions }
<ul class="text-sm">
{#if !showSuggestions}
{#each popularList as item}
<li class="border-b border-gray-800">
<a data-sveltekit-preload-data={false} href={`/${item?.type === 'ETF' ? 'etf' : item?.type === 'Crypto' ? 'crypto' : 'stocks'}/${item?.symbol}`} on:click={() => popularTicker(item?.symbol, item?.assetType) } class="mb-2 {item?.symbol === focusedSuggestion ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#404040] bg-opacity-[0.25] rounded group' : 'shake-ticker cursor-pointer bg-[#09090B] sm:hover:bg-[#17171A] rounded-lg flex justify-start items-center p-2 text-white group'} w-full">
<li class="border-b border-gray-600">
<a
data-sveltekit-preload-data={false}
href={`/${item?.type === "ETF" ? "etf" : item?.type === "Crypto" ? "crypto" : "stocks"}/${item?.symbol}`}
on:click={() =>
popularTicker(item?.symbol, item?.assetType)}
class="mb-2 {item?.symbol === focusedSuggestion
? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#27272A] rounded group'
: 'shake-ticker cursor-pointer bg-[#09090B] sm:hover:bg-[#27272A] rounded-lg flex justify-start items-center p-2 text-white group'} w-full"
>
<div class="flex flex-row items-center w-full">
<div class="rounded-full w-10 h-10 relative bg-[#000] flex items-center justify-center">
<img style="clip-path: circle(50%);" class="w-6 h-6" src={`https://financialmodelingprep.com/image-stock/${item?.symbol}.png`} loading="lazy" />
<div
class="rounded-full w-10 h-10 relative bg-[#000] flex items-center justify-center"
>
<img
style="clip-path: circle(50%);"
class="w-6 h-6"
src={`https://financialmodelingprep.com/image-stock/${item?.symbol}.png`}
loading="lazy"
/>
</div>
<div class="flex flex-col ml-2">
<span class="text-blue-400">{item?.symbol}</span>
<span class="text-white">{item?.name.length > 150 ? item?.name?.slice(0,150) + "..." : item?.name}</span>
<span class="text-white"
>{item?.name.length > 150
? item?.name?.slice(0, 150) + "..."
: item?.name}</span
>
</div>
<div class="text-white font-medium ml-auto">
{item?.type}
</div>
</div>
</a>
</li>
{/each}
{:else if showSuggestions && searchResults?.length > 0}
<div class="text-start text-sm font-semibold text-white mb-2">
Suggestions
</div>
{#each searchResults as item}
<li class="border-b border-gray-800">
<li class="border-b border-gray-600">
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-label-has-associated-control -->
<label data-sveltekit-preload-data={false} on:click={() => (searchBarTicker(item?.symbol, item?.type))} class="mb-2 {item?.symbol === focusedSuggestion ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#404040] bg-opacity-[0.25] rounded group' : 'cursor-pointer mb-2 bg-[#09090B] sm:hover:bg-[#17171A] rounded-lg flex justify-start items-center p-2 text-white group'}">
<label
data-sveltekit-preload-data={false}
on:click={() => searchBarTicker(item?.symbol, item?.type)}
class="mb-2 {item?.symbol === focusedSuggestion
? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#27272A] rounded group'
: 'cursor-pointer mb-2 bg-[#09090B] sm:hover:bg-[#27272A] rounded-lg flex justify-start items-center p-2 text-white group'}"
>
<div class="flex flex-row items-center w-full">
<div class="flex flex-col">
<span class="text-blue-400">{item?.symbol}</span>
<span class="text-white">{item?.name?.length > 150 ? item?.name?.slice(0,150) + "..." : item?.name}</span>
<span class="text-white"
>{item?.name?.length > 150
? item?.name?.slice(0, 150) + "..."
: item?.name}</span
>
</div>
<div class="text-white font-medium ml-auto">
{item?.type}
</div>
</div>
</label>
</li>
{/each}
{:else if showSuggestions && searchResults?.length === 0}
<li>
<label class="flex items-center p-2 text-white hover:text-white hover:bg-[#404040] bg-opacity-[0.25] rounded group" >
<svg class="w-3 h-3 fill-slate-400 shrink-0 mr-3 dark:fill-slate-500" width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path d="M11.953 4.29a.5.5 0 0 0-.454-.292H6.14L6.984.62A.5.5 0 0 0 6.12.173l-6 7a.5.5 0 0 0 .379.825h5.359l-.844 3.38a.5.5 0 0 0 .864.445l6-7a.5.5 0 0 0 .075-.534Z" />
<label
class="flex items-center p-2 text-white hover:text-white hover:bg-[#27272A] rounded group"
>
<svg
class="w-3 h-3 fill-slate-400 shrink-0 mr-3 dark:fill-slate-500"
width="12"
height="12"
viewBox="0 0 12 12"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.953 4.29a.5.5 0 0 0-.454-.292H6.14L6.984.62A.5.5 0 0 0 6.12.173l-6 7a.5.5 0 0 0 .379.825h5.359l-.844 3.38a.5.5 0 0 0 .864.445l6-7a.5.5 0 0 0 .075-.534Z"
/>
</svg>
<span>No results found</span>
</label>
@ -509,41 +537,47 @@ $: {
{:else}
<div class="flex justify-center items-center m-auto mt-4 py-20">
<div class="relative">
<label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
<span class="loading loading-spinner loading-md text-gray-400"></span>
<label
class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
>
<span class="loading loading-spinner loading-md text-gray-400"
></span>
</label>
</div>
</div>
{/if}
<label for="searchBarModal" class="absolute left-6 top-4 sm:hidden">
<svg class="w-6 h-6 inline-block mb-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#fff" d="M9.125 21.1L.7 12.7q-.15-.15-.213-.325T.425 12q0-.2.063-.375T.7 11.3l8.425-8.425q.35-.35.875-.35t.9.375q.375.375.375.875t-.375.875L3.55 12l7.35 7.35q.35.35.35.863t-.375.887q-.375.375-.875.375t-.875-.375Z"/></svg>
<span class="text-white text-md font-medium">
Return
</span>
<svg
class="w-6 h-6 inline-block mb-0.5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
><path
fill="#fff"
d="M9.125 21.1L.7 12.7q-.15-.15-.213-.325T.425 12q0-.2.063-.375T.7 11.3l8.425-8.425q.35-.35.875-.35t.9.375q.375.375.375.875t-.375.875L3.55 12l7.35 7.35q.35.35.35.863t-.375.887q-.375.375-.875.375t-.875-.375Z"
/></svg
>
<span class="text-white text-md font-medium"> Return </span>
</label>
</div>
</dialog>
</dialog>
{:else}
<!--End Desktop Searchbar-->
<!--End Desktop Searchbar-->
<!--Start Drawer Sidewise for mobile-->
<!--Start Drawer Sidewise for mobile-->
<div class="drawer drawer-end z-40 overflow-hidden">
<input id="searchBarModal" type="checkbox" class="drawer-toggle" bind:checked={searchBarModalChecked} />
<div class="drawer drawer-end z-40 overflow-hidden">
<input
id="searchBarModal"
type="checkbox"
class="drawer-toggle"
bind:checked={searchBarModalChecked}
/>
<div class="drawer-side overflow-hidden">
<div class="p-3 bg-[#09090B] min-h-screen w-screen pb-20 overflow-hidden 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">
<div class="relative">
@ -560,84 +594,129 @@ $: {
on:keypress={onKeyPress}
autocomplete="off"
/>
<button on:click={() => (searchBarTicker(searchQuery, assetType))} class="absolute inset-0 right-auto group" type="submit" aria-label="Search">
<svg class="w-4 h-4 shrink-0 fill-current text-white ml-4 mr-2 text-slate-400" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"> <path d="M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7zM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z" />
<path d="M15.707 14.293L13.314 11.9a8.019 8.019 0 01-1.414 1.414l2.393 2.393a.997.997 0 001.414 0 .999.999 0 000-1.414z" />
<button
on:click={() => searchBarTicker(searchQuery, assetType)}
class="absolute inset-0 right-auto group"
type="submit"
aria-label="Search"
>
<svg
class="w-4 h-4 shrink-0 fill-current text-white ml-4 mr-2 text-slate-400"
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7zM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z"
/>
<path
d="M15.707 14.293L13.314 11.9a8.019 8.019 0 01-1.414 1.414l2.393 2.393a.997.997 0 001.414 0 .999.999 0 000-1.414z"
/>
</svg>
</button>
</div>
</div>
{#if $searchBarData?.length !== 0}
<div class="py-4">
<!-- Popular searches -->
<div class="mb-3 last:mb-0 mt-3">
{#if notFoundTicker}
<p class="text-xs font-semibold text-[#FB6A67] px-2 mb-4">Oh snapp, ticker does not exist in our database</p>
<p class="text-xs font-semibold text-[#FB6A67] px-2 mb-4">
Oh snapp, ticker does not exist in our database
</p>
{/if}
{#if !showSuggestions}
<div class="text-start text-sm font-semibold text-white mb-2">
Popular
</div>
{/if}
<ul class="text-sm" >
{#if !showSuggestions }
<ul class="text-sm">
{#if !showSuggestions}
{#each popularList as item}
<li class="border-b border-gray-800">
<a data-sveltekit-preload-data={false} href={`/${item?.type === 'ETF' ? 'etf' : item?.type === 'Crypto' ? 'crypto' : 'stocks'}/${item?.symbol}`} on:click={() => popularTicker(item?.symbol, item?.type) } class="mb-2 {item?.symbol === focusedSuggestion ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#404040] bg-opacity-[0.25] rounded group' : 'cursor-pointer bg-[#09090B] bg-opacity-[0.4] rounded-lg flex justify-start items-center p-2 text-white group'} w-full">
<li class="border-b border-gray-600">
<a
data-sveltekit-preload-data={false}
href={`/${item?.type === "ETF" ? "etf" : item?.type === "Crypto" ? "crypto" : "stocks"}/${item?.symbol}`}
on:click={() => popularTicker(item?.symbol, item?.type)}
class="mb-2 {item?.symbol === focusedSuggestion
? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#27272A] rounded group'
: 'cursor-pointer bg-[#09090B] bg-opacity-[0.4] rounded-lg flex justify-start items-center p-2 text-white group'} w-full"
>
<div class="flex flex-row items-center w-full">
<div class="rounded-full w-10 h-10 relative bg-[#000] flex items-center justify-center">
<img style="clip-path: circle(50%);" class="w-6 h-6" src={`https://financialmodelingprep.com/image-stock/${item?.symbol}.png`} loading="lazy" />
<div
class="rounded-full w-10 h-10 relative bg-[#000] flex items-center justify-center"
>
<img
style="clip-path: circle(50%);"
class="w-6 h-6"
src={`https://financialmodelingprep.com/image-stock/${item?.symbol}.png`}
loading="lazy"
/>
</div>
<div class="flex flex-col ml-2">
<span class="text-blue-400">{item?.symbol}</span>
<span class="text-white">{item?.name.length > charNumber ? item?.name.slice(0,charNumber) + "..." : item?.name}</span>
<span class="text-white"
>{item?.name.length > charNumber
? item?.name.slice(0, charNumber) + "..."
: item?.name}</span
>
</div>
<div class="text-white font-medium ml-auto mr-2">
{item?.type}
</div>
</div>
</a>
</li>
{/each}
{:else if showSuggestions && searchResults?.length > 0}
<div class="text-start text-sm font-semibold text-white mb-2">
Suggestions
</div>
{#each searchResults as item}
<li class="border-b border-gray-800">
<li class="border-b border-gray-600">
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-label-has-associated-control -->
<label data-sveltekit-preload-data={false} on:click={() => (searchBarTicker(item?.symbol, item?.type))} class="mb-2 {item?.symbol === focusedSuggestion ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#404040] bg-opacity-[0.25] rounded group' : 'cursor-pointer mb-2 bg-[#09090B] bg-opacity-[0.4] rounded-lg flex justify-start items-center p-2 text-white group'}">
<label
data-sveltekit-preload-data={false}
on:click={() =>
searchBarTicker(item?.symbol, item?.type)}
class="mb-2 {item?.symbol === focusedSuggestion
? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#27272A] rounded group'
: 'cursor-pointer mb-2 bg-[#09090B] bg-opacity-[0.4] rounded-lg flex justify-start items-center p-2 text-white group'}"
>
<div class="flex flex-row items-center w-full">
<div class="flex flex-col ml-1">
<span class="text-blue-400">{item?.symbol}</span>
<span class="text-white">{item?.name.length > charNumber ? item?.name.slice(0,charNumber) + "..." : item?.name}</span>
<span class="text-white"
>{item?.name.length > charNumber
? item?.name.slice(0, charNumber) + "..."
: item?.name}</span
>
</div>
<div class="text-white font-medium ml-auto mr-2">
{item?.type}
</div>
</div>
</label>
</li>
{/each}
{:else if showSuggestions && searchResults?.length === 0}
<li>
<label class="flex items-center p-2 text-white hover:text-white hover:bg-[#404040] bg-opacity-[0.25] rounded group" >
<svg class="w-3 h-3 fill-slate-400 shrink-0 mr-3 dark:fill-slate-500" width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path d="M11.953 4.29a.5.5 0 0 0-.454-.292H6.14L6.984.62A.5.5 0 0 0 6.12.173l-6 7a.5.5 0 0 0 .379.825h5.359l-.844 3.38a.5.5 0 0 0 .864.445l6-7a.5.5 0 0 0 .075-.534Z" />
<label
class="flex items-center p-2 text-white hover:text-white hover:bg-[#27272A] rounded group"
>
<svg
class="w-3 h-3 fill-slate-400 shrink-0 mr-3 dark:fill-slate-500"
width="12"
height="12"
viewBox="0 0 12 12"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.953 4.29a.5.5 0 0 0-.454-.292H6.14L6.984.62A.5.5 0 0 0 6.12.173l-6 7a.5.5 0 0 0 .379.825h5.359l-.844 3.38a.5.5 0 0 0 .864.445l6-7a.5.5 0 0 0 .075-.534Z"
/>
</svg>
<span>No results found</span>
</label>
@ -648,20 +727,25 @@ $: {
</div>
{:else}
<div class="flex justify-center items-center m-auto mt-4 py-20">
<span class="loading loading-lg loading-spinner text-success"></span>
<span class="loading loading-lg loading-spinner text-success"
></span>
</div>
{/if}
<label for="searchBarModal" class="absolute left-6 top-4 sm:hidden">
<svg class="w-6 h-6 inline-block mb-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#fff" d="M9.125 21.1L.7 12.7q-.15-.15-.213-.325T.425 12q0-.2.063-.375T.7 11.3l8.425-8.425q.35-.35.875-.35t.9.375q.375.375.375.875t-.375.875L3.55 12l7.35 7.35q.35.35.35.863t-.375.887q-.375.375-.875.375t-.875-.375Z"/></svg>
</label>
</div>
<label for="searchBarModal" class="absolute left-6 top-4 sm:hidden">
<svg
class="w-6 h-6 inline-block mb-0.5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
><path
fill="#fff"
d="M9.125 21.1L.7 12.7q-.15-.15-.213-.325T.425 12q0-.2.063-.375T.7 11.3l8.425-8.425q.35-.35.875-.35t.9.375q.375.375.375.875t-.375.875L3.55 12l7.35 7.35q.35.35.35.863t-.375.887q-.375.375-.875.375t-.875-.375Z"
/></svg
>
</label>
</div>
</div>
</div>
</div>
{/if}
<!--End Drawer Sidewise for mobile-->

2
src/routes/insider-tracker/+page.svelte
View File

@ -126,7 +126,7 @@
// Sort using the generic comparison function
stockList = [...originalData].sort(compareValues);
};
$: charNumber = $screenWidth < 640 ? 15 : 15;
$: charNumber = $screenWidth < 640 ? 20 : 25;
</script>
<svelte:head>

6
src/routes/watchlist/+layout.svelte
View File

@ -150,7 +150,7 @@
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Pro Subscription 🔥
Pro Subscription
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
@ -170,7 +170,7 @@
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Price Alert ⏰
Price Alert
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>
@ -189,7 +189,7 @@
>
<div class="w-full flex justify-between items-center p-3 mt-3">
<h2 class="text-start text-xl font-semibold text-white ml-3">
Stock Screener 🔎
Stock Screener
</h2>
<ArrowLogo class="w-8 h-8 mr-3 flex-shrink-0" />
</div>