ui fix
This commit is contained in:
MuslemRahimi
parent
e4b17138c0
commit
04a5377b4f
@ -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 = "";
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
let searchResults = [];
|
||||
|
||||
|
||||
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)) {
|
||||
@ -152,33 +146,25 @@ async function search() {
|
||||
showSuggestions = normalizedSearchQuery !== "";
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const onKeyPress = e => {
|
||||
const onKeyPress = (e) => {
|
||||
if (e?.charCode === 13) {
|
||||
focusedSuggestion = '';
|
||||
focusedSuggestion = "";
|
||||
|
||||
if (!notFoundTicker) {
|
||||
searchBarTicker(searchQuery, assetType);
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
let focusedSuggestion = null;
|
||||
|
||||
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') {
|
||||
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'];
|
||||
|
||||
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
|
||||
@ -276,13 +271,9 @@ $: {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
$: {
|
||||
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
|
||||
@ -291,29 +282,28 @@ $: {
|
||||
}
|
||||
|
||||
$: {
|
||||
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} />
|
||||
<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,21 +404,35 @@ $: {
|
||||
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">
|
||||
@ -439,65 +442,90 @@ $: {
|
||||
<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>
|
||||
{:else}
|
||||
|
||||
<!--End Desktop Searchbar-->
|
||||
|
||||
|
||||
<!--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} />
|
||||
<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,21 +594,36 @@ $: {
|
||||
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">
|
||||
@ -584,60 +633,90 @@ $: {
|
||||
<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>
|
||||
<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>
|
||||
{/if}
|
||||
|
||||
<!--End Drawer Sidewise for mobile-->
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user