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

ui fixes

Browse Source
This commit is contained in:
MuslemRahimi 2024-11-02 13:05:40 +01:00
parent 102d5a36e0
commit 8972c0ecc2
10 changed files with 46 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/components/OptionsNetFlow.svelte
View File

@ -113,7 +113,7 @@
<div class="flex flex-row items-center">
<label
for="optionsNetFlowInfo"
class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold"
class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-2xl font-bold"
>
Options Net Flow
</label>

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

@ -10,7 +10,8 @@
let dataLoaded = false; // Flag to track data loading
let assetType = "";
let focusedSuggestion = "";
let arrowMovement = false;
let showSuggestions = false;
let notFoundTicker = false;
let searchQuery = "";
@ -164,14 +165,13 @@
const onKeyPress = (e) => {
if (e?.charCode === 13) {
focusedSuggestion = "";
const assetActions = {
ETF: () => goto(`/etf/${searchQuery}`),
Stock: () => goto(`/stocks/${searchQuery}`),
Crypto: () => goto(`/crypto/${searchQuery}`),
};
if (searchResults?.length > 0) {
console.log(arrowMovement);
if (!arrowMovement && searchResults?.length > 0) {
searchQuery = searchResults.at(0).symbol;
assetType = searchResults.at(0).type;
}
@ -182,61 +182,42 @@
// Trigger search bar action
searchBarTicker(searchQuery);
}
console.log(focusedSuggestion);
};
let focusedSuggestion = null;
function handleKeyDown(event) {
const newList = searchHistory?.length > 0 ? searchHistory : popularList;
if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
if (event.key === "ArrowDown" && showSuggestions) {
// Move down in the suggestions
event.preventDefault(); // Prevent scrolling
const currentIndex = searchResults?.findIndex(
(item) => item?.symbol === searchQuery,
);
if (currentIndex < searchResults?.length - 1) {
searchQuery = searchResults[currentIndex + 1]?.symbol;
assetType = searchResults[currentIndex + 1]?.type;
focusedSuggestion = searchQuery; // Update the focused suggestion
}
} else if (event.key === "ArrowUp" && showSuggestions) {
// Move up in the suggestions
event.preventDefault(); // Prevent scrolling
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) {
// Move down in the suggestions
event.preventDefault(); // Prevent scrolling
const currentIndex = newList?.findIndex(
(item) => item?.symbol === searchQuery,
);
if (currentIndex < newList?.length - 1) {
searchQuery = newList[currentIndex + 1]?.symbol;
assetType = newList[currentIndex + 1]?.type;
focusedSuggestion = searchQuery; // Update the focused suggestion
}
} else if (event.key === "ArrowUp" && !showSuggestions) {
// Move up in the suggestions
event.preventDefault(); // Prevent scrolling
const currentIndex = newList?.findIndex(
(item) => item?.symbol === searchQuery,
);
if (currentIndex > 0) {
searchQuery = newList[currentIndex - 1]?.symbol;
assetType = newList[currentIndex - 1]?.type;
focusedSuggestion = searchQuery; // Update the focused suggestion
}
event.preventDefault(); // Prevent scrolling
const list = showSuggestions
? searchResults
: searchHistory?.length > 0
? searchHistory
: popularList;
if (!list?.length) return;
const currentIndex = list.findIndex((item) => item?.symbol === searchQuery);
const isMovingDown = event.key === "ArrowDown";
// Check if movement is within bounds
const isValidMove = isMovingDown
? currentIndex < list.length - 1
: currentIndex > 0;
if (isValidMove) {
arrowMovement = true;
const newIndex = currentIndex + (isMovingDown ? 1 : -1);
const selectedItem = list[newIndex];
// Update all related states at once
searchQuery = selectedItem?.symbol;
assetType = selectedItem?.type;
focusedSuggestion = selectedItem?.symbol;
}
}
const handleControlF = async (event) => {
const handleControlD = async (event) => {
if (event.ctrlKey && event.key === "k") {
// Ctrl+F is pressed, open the modal
const keyboardSearch = document.getElementById("searchBarModal");
@ -274,10 +255,10 @@
console.log(e);
}
window.addEventListener("keydown", handleControlF);
window.addEventListener("keydown", handleControlD);
window.addEventListener("keydown", handleEscape);
return () => {
window.removeEventListener("keydown", handleControlF);
window.removeEventListener("keydown", handleControlD);
window.removeEventListener("keydown", handleEscape);
};
});

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

@ -89,7 +89,7 @@
// Reset to original data when 'none' and stop further sorting
if (sortOrder === "none") {
stockList = [...originalData]; // Reset to original data (spread to avoid mutation)
stockList = [...originalData]?.slice(0, 50); // Reset to original data (spread to avoid mutation)
return;
}
@ -124,7 +124,7 @@
};
// Sort using the generic comparison function
stockList = [...originalData].sort(compareValues);
stockList = [...originalData].sort(compareValues)?.slice(0, 50);
};
$: charNumber = $screenWidth < 640 ? 20 : 25;
</script>

2
src/routes/stocks/[tickerID]/financials/+page.svelte
View File

@ -374,7 +374,7 @@
<main class="w-full">
<div class="sm:p-7 m-auto mt-2 sm:mt-0">
<div class="mb-3">
<h1 class="text-xl sm:text-2xl text-gray-200 font-bold">
<h1 class="text-xl sm:text-2xl text-white font-bold">
{#if $coolMode}
{statementConfig?.find(
(item) => item?.propertyName === displayStatement,

2
src/routes/stocks/[tickerID]/financials/balance-sheet/+page.svelte
View File

@ -459,7 +459,7 @@
<main class="w-full">
<div class="sm:p-7 m-auto mt-2 sm:mt-0">
<div class="mb-3">
<h1 class="text-xl sm:text-2xl text-gray-200 font-bold">
<h1 class="text-xl sm:text-2xl text-white font-bold">
{#if $coolMode}
{statementConfig?.find(
(item) => item?.propertyName === displayStatement,

2
src/routes/stocks/[tickerID]/financials/cash-flow/+page.svelte
View File

@ -404,7 +404,7 @@
<main class="w-full">
<div class="sm:p-7 m-auto mt-2 sm:mt-0 w-full">
<div class="mb-3">
<h1 class="text-xl sm:text-2xl text-gray-200 font-bold">
<h1 class="text-xl sm:text-2xl text-white font-bold">
{#if $coolMode}
{statementConfig?.find(
(item) => item?.propertyName === displayStatement,

2
src/routes/stocks/[tickerID]/financials/ratios/+page.svelte
View File

@ -368,7 +368,7 @@
<main class="w-full">
<div class="sm:p-7 m-auto mt-2 sm:mt-0 w-full">
<div class="mb-3">
<h1 class="text-xl sm:text-2xl text-gray-200 font-bold">
<h1 class="text-xl sm:text-2xl text-white font-bold">
{#if $coolMode}
{statementConfig?.find(
(item) => item?.propertyName === displayStatement,

2
src/routes/stocks/[tickerID]/forecast/analyst/+page.svelte
View File

@ -147,7 +147,7 @@
<div
class="mb-5 flex flex-col justify-between gap-y-2.5 sm:mb-2 sm:flex-row sm:items-end"
>
<h1 class="mb-px text-xl font-bold bp:text-2xl sm:pl-1">
<h1 class="mb-px text-xl font-bold sm:text-2xl sm:pl-1">
{$displayCompanyName} Analyst Ratings
</h1>
<div>

2
src/routes/stocks/[tickerID]/statistics/employees/+page.svelte
View File

@ -363,7 +363,7 @@
>
<div class="sm:p-7 w-full m-auto mt-2 sm:mt-0">
<div class="mb-6">
<h2 class="text-xl sm:text-2xl text-gray-200 font-bold mb-4">
<h2 class="text-xl sm:text-2xl text-white font-bold mb-4">
{$stockTicker} Employees
</h2>

2
src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte
View File

@ -396,7 +396,7 @@
<main class="w-full">
<div class="sm:p-7 m-auto mt-2 sm:mt-0">
<div class="mb-3">
<h1 class="text-xl sm:text-2xl text-gray-200 font-bold">
<h1 class="text-xl sm:text-2xl text-white font-bold">
Market Cap
</h1>
</div>