update price alert
This commit is contained in:
MuslemRahimi
parent
1af431052a
commit
f2ab85b076
@ -1,7 +1,6 @@
|
||||
<script lang="ts">
|
||||
import toast from "svelte-french-toast";
|
||||
import {
|
||||
screenWidth,
|
||||
openPriceAlert,
|
||||
displayCompanyName,
|
||||
stockTicker,
|
||||
@ -9,17 +8,21 @@
|
||||
cryptoTicker,
|
||||
assetType,
|
||||
} from "$lib/store";
|
||||
import RangeSlider from "svelte-range-slider-pips";
|
||||
|
||||
export let data;
|
||||
export let ticker;
|
||||
|
||||
let currentPrice = data?.getStockQuote?.price;
|
||||
let values = [0];
|
||||
let displayPrice = (currentPrice * (1 + values?.at(0) / 100))?.toFixed(2);
|
||||
let currentPrice = Number(data?.getStockQuote?.price?.toFixed(2));
|
||||
let targetPrice = currentPrice; //(currentPrice * (1 + targetPrice / 100))?.toFixed(2);
|
||||
let condition = "above";
|
||||
|
||||
function changeStatement(event) {
|
||||
condition = event.target.value;
|
||||
}
|
||||
|
||||
async function handleCreateAlert() {
|
||||
if (values?.at(0) === 0) {
|
||||
toast.error(`Percentage change must not be zero`, {
|
||||
if (targetPrice < 0) {
|
||||
toast.error(`Target Price must be above zero`, {
|
||||
style:
|
||||
"border-radius: 10px; background: #333; color: #fff; padding: 12px; margin-top: 10px; box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);",
|
||||
});
|
||||
@ -37,10 +40,9 @@
|
||||
: $cryptoTicker,
|
||||
name: $displayCompanyName,
|
||||
assetType: $assetType,
|
||||
priceWhenCreated: currentPrice?.toFixed(2),
|
||||
condition: values?.at(0) < 0 ? "below" : "above",
|
||||
targetPrice: displayPrice,
|
||||
path: "create-price-alert",
|
||||
priceWhenCreated: currentPrice,
|
||||
condition: condition,
|
||||
targetPrice: targetPrice,
|
||||
};
|
||||
|
||||
// Make the POST request to the endpoint
|
||||
@ -52,92 +54,22 @@
|
||||
body: JSON.stringify(postData),
|
||||
});
|
||||
|
||||
const output = await response.json();
|
||||
//const output = await response.json();
|
||||
|
||||
if (output === "success") {
|
||||
toast.success(`Successfully created price alert`, {
|
||||
style:
|
||||
"border-radius: 10px; background: #333; color: #fff; padding: 12px; margin-top: 10px; box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);",
|
||||
});
|
||||
values = [0];
|
||||
displayPrice = currentPrice;
|
||||
} else {
|
||||
toast.error(`Something went wrong. Please try again!`, {
|
||||
style:
|
||||
"border-radius: 10px; background: #333; color: #fff; padding: 12px; margin-top: 10px; box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);",
|
||||
});
|
||||
}
|
||||
toast.success(`Successfully created price alert`, {
|
||||
style:
|
||||
"border-radius: 10px; background: #333; color: #fff; padding: 12px; margin-top: 10px; box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);",
|
||||
});
|
||||
targetPrice = currentPrice;
|
||||
}
|
||||
}
|
||||
|
||||
function numPadInput(number) {
|
||||
// Check if the input number is a single digit number
|
||||
if (number >= 0 && number <= 9) {
|
||||
if (Math?.abs(displayPrice - currentPrice) < 0.001) {
|
||||
displayPrice = Number(number);
|
||||
} else {
|
||||
if ((String(displayPrice)?.split(".")[1] || "")?.length < 2) {
|
||||
displayPrice = Number(String(displayPrice) + String(number));
|
||||
}
|
||||
}
|
||||
values[0] = (displayPrice / currentPrice - 1) * 100;
|
||||
|
||||
const button = document.getElementById(`numPad-${number}`);
|
||||
if (button) {
|
||||
button.classList.add("bg-white", "bg-opacity-[0.05]");
|
||||
setTimeout(() => {
|
||||
button.classList.remove("bg-white", "bg-opacity-[0.05]");
|
||||
}, 120);
|
||||
}
|
||||
} else if (number === "remove") {
|
||||
displayPrice = String(displayPrice).slice(0, -1);
|
||||
// If displayPrice becomes an empty string, set it to 0
|
||||
if (displayPrice === "") {
|
||||
displayPrice = 0;
|
||||
}
|
||||
|
||||
values[0] = (displayPrice / currentPrice - 1) * 100;
|
||||
|
||||
const button = document.getElementById(`numPad-remove`);
|
||||
if (button) {
|
||||
button.classList.add("bg-white", "bg-opacity-[0.05]");
|
||||
setTimeout(() => {
|
||||
button.classList.remove("bg-white", "bg-opacity-[0.05]");
|
||||
}, 120);
|
||||
}
|
||||
} else if (number === "dot") {
|
||||
if (
|
||||
!String(displayPrice)?.includes(".") &&
|
||||
(String(displayPrice)?.split(".")[1] || "")?.length < 2
|
||||
) {
|
||||
displayPrice = String(displayPrice) + ".";
|
||||
console.log(displayPrice);
|
||||
}
|
||||
|
||||
values[0] = (displayPrice / currentPrice - 1) * 100;
|
||||
|
||||
const button = document.getElementById(`numPad-dot`);
|
||||
if (button) {
|
||||
button.classList.add("bg-white", "bg-opacity-[0.05]");
|
||||
setTimeout(() => {
|
||||
button.classList.remove("bg-white", "bg-opacity-[0.05]");
|
||||
}, 120);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$: isPositive = values[0] < 0;
|
||||
$: origin = isPositive
|
||||
? "--left: auto; --right: 50%"
|
||||
: "--right: auto; --left: 50%";
|
||||
$: color = isPositive ? "#FF2F1F" : "#0DDE00";
|
||||
|
||||
$: {
|
||||
if ($openPriceAlert === true) {
|
||||
$openPriceAlert = false;
|
||||
currentPrice = data?.getStockQuote?.price;
|
||||
values = [0];
|
||||
displayPrice = (currentPrice * (1 + values?.at(0) / 100))?.toFixed(2);
|
||||
currentPrice = Number(data?.getStockQuote?.price?.toFixed(2));
|
||||
targetPrice = currentPrice;
|
||||
condition = "above";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -149,341 +81,123 @@
|
||||
/>
|
||||
</svelte:head>
|
||||
|
||||
{#if $screenWidth >= 640}
|
||||
<!--Start Trade Modal-->
|
||||
<input type="checkbox" id="priceAlertModal" class="modal-toggle" />
|
||||
<!--Start Trade Modal-->
|
||||
<input type="checkbox" id="priceAlertModal" class="modal-toggle" />
|
||||
|
||||
<dialog id="priceAlertModal" class="modal modal-bottom sm:modal-middle">
|
||||
<dialog id="priceAlertModal" class="modal modal-middle p-2 sm:p-0">
|
||||
<label
|
||||
for="priceAlertModal"
|
||||
class="cursor-pointer modal-backdrop bg-[#000] bg-opacity-[0.3]"
|
||||
></label>
|
||||
|
||||
<div
|
||||
class="modal-box rounded-md w-full bg-[#1E222D] border border-gray-600 min-h-fit h-[600px] sm:h-[500px]"
|
||||
>
|
||||
<!--Start Trade Modal-->
|
||||
<label
|
||||
for="priceAlertModal"
|
||||
class="cursor-pointer modal-backdrop bg-[#fff] bg-opacity-[0.02]"
|
||||
></label>
|
||||
|
||||
<div
|
||||
class="modal-box rounded-none w-full bg-[#000] border border-gray-800 h-[450px]"
|
||||
class="cursor-pointer absolute right-5 top-5 text-[1.8rem] text-white"
|
||||
>
|
||||
<!--Start Trade Modal-->
|
||||
<label
|
||||
for="priceAlertModal"
|
||||
class="cursor-pointer absolute right-5 top-5 bg-[#000] text-[1.8rem] text-white"
|
||||
<svg
|
||||
class="w-8 h-8"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
><path
|
||||
fill="white"
|
||||
d="m6.4 18.308l-.708-.708l5.6-5.6l-5.6-5.6l.708-.708l5.6 5.6l5.6-5.6l.708.708l-5.6 5.6l5.6 5.6l-.708.708l-5.6-5.6z"
|
||||
/></svg
|
||||
>
|
||||
<svg
|
||||
class="w-8 h-8"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
><path
|
||||
fill="white"
|
||||
d="m6.4 18.308l-.708-.708l5.6-5.6l-5.6-5.6l.708-.708l5.6 5.6l5.6-5.6l.708.708l-5.6 5.6l5.6 5.6l-.708.708l-5.6-5.6z"
|
||||
/></svg
|
||||
>
|
||||
</label>
|
||||
</label>
|
||||
|
||||
<div class="flex flex-col w-full">
|
||||
<h2 class="text-white font-medium text-lg text-center m-auto mb-5 mt-3">
|
||||
Price Alerts
|
||||
</h2>
|
||||
<div class="flex flex-col w-full">
|
||||
<h2 class="text-white font-semibold text-lg text-start mb-5">
|
||||
Create Price Alert on {ticker}
|
||||
</h2>
|
||||
|
||||
<div class="flex justify-between items-center">
|
||||
<body class="w-11/12 m-auto">
|
||||
<div
|
||||
class="mt-8 text-center flex flex-col justify-center items-center mb-14"
|
||||
>
|
||||
<div class="text-white font-medium text-5xl">
|
||||
${displayPrice}
|
||||
</div>
|
||||
<div class="text-sm text-white text-opacity-[0.5] mt-2">
|
||||
Current Price: ${currentPrice}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="positive-negative-slider"
|
||||
style="--range: {Math.abs(
|
||||
values[0] / 2,
|
||||
)}%; {origin}; --range-color: {color};"
|
||||
>
|
||||
<RangeSlider
|
||||
id="large"
|
||||
on:change={() =>
|
||||
(displayPrice = (
|
||||
currentPrice *
|
||||
(1 + values?.at(0) / 100)
|
||||
)?.toFixed(2))}
|
||||
suffix="%"
|
||||
min={-100}
|
||||
max={100}
|
||||
all={false}
|
||||
first={false}
|
||||
last={false}
|
||||
rest={false}
|
||||
hoverable={false}
|
||||
bind:values
|
||||
/>
|
||||
</div>
|
||||
{#if values?.at(0) !== 0}
|
||||
<div class="text-white text-center m-auto text-sm">
|
||||
Triggers once when price moves {values?.at(0) > 0
|
||||
? "above"
|
||||
: "below"}
|
||||
{#if values?.at(0) > 0}
|
||||
<svg
|
||||
class="inline-block w-5 h-5 -mr-1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
><g id="evaArrowUpFill0"
|
||||
><g id="evaArrowUpFill1"
|
||||
><path
|
||||
id="evaArrowUpFill2"
|
||||
fill="#00FC50"
|
||||
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-[#00FC50] font-medium"
|
||||
>+{values?.at(0)?.toFixed(2)}%</span
|
||||
>
|
||||
{:else if values?.at(0) < 0}
|
||||
<svg
|
||||
class="inline-block w-5 h-5 -mr-1 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="inline-block text-[#FF2F1F] font-medium"
|
||||
>{values?.at(0)?.toFixed(2)}%
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<div
|
||||
class="text-white text-opacity-60 m-auto text-center text-sm"
|
||||
>
|
||||
Set a trigger by moving the slider.
|
||||
</div>
|
||||
{/if}
|
||||
</body>
|
||||
</div>
|
||||
|
||||
<div class="w-full pt-8 m-auto flex justify-center items-center">
|
||||
<button
|
||||
on:click={handleCreateAlert}
|
||||
class="m-auto cursor-pointer px-7 py-2 rounded-full transition ease-out {values?.at(
|
||||
0,
|
||||
) !== 0
|
||||
? 'bg-[#0DDE00]'
|
||||
: 'bg-gray-600'} text-center text-black font-medium"
|
||||
>
|
||||
Create
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--End Trade Modal-->
|
||||
</div>
|
||||
</dialog>
|
||||
{:else}
|
||||
<!--Start Mobile Price Alert-->
|
||||
<div class="drawer drawer-end overflow-hidden w-screen z-40">
|
||||
<input id="priceAlertModal" type="checkbox" class="drawer-toggle" />
|
||||
<div class="drawer-side overflow-y-scroll overflow-hidden">
|
||||
<div
|
||||
class="bg-[#000] min-h-screen px-5 w-screen pb-20 overflow-y-scroll overflow-hidden"
|
||||
class="flex flex-col sm:flex-row justify-between items-start sm:items-center mt-5 font-semibold text-white"
|
||||
>
|
||||
<!--Start Header-->
|
||||
<div
|
||||
class="bg-[#000] w-full p-1 flex flex-col items-center pb-5 h-auto"
|
||||
<label class="text-sm w-[20%] mb-1 sm:mb-0">Symbol</label>
|
||||
<label
|
||||
class="rounded-md bg-[#2A2E39] w-full sm:w-[80%] py-2 px-2 text-sm border border-gray-600"
|
||||
>
|
||||
<label for="priceAlertModal" class="absolute left-6 top-6">
|
||||
<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>
|
||||
<h2
|
||||
class="text-center m-auto text-[1.1rem] font-medium text-white mt-5"
|
||||
<img
|
||||
style="clip-path: circle(50%);"
|
||||
class="w-4 h-4 inline-block -mt-1 mr-1"
|
||||
src={`https://financialmodelingprep.com/image-stock/${ticker}.png`}
|
||||
loading="lazy"
|
||||
/>
|
||||
|
||||
{ticker}, Regular trading hours
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-4 mt-5 font-semibold text-white">
|
||||
<!-- Condition Label -->
|
||||
<div class="flex flex-col sm:flex-row items-start sm:items-center">
|
||||
<label class="text-sm w-[20%] mb-1 sm:mb-0">Condition</label>
|
||||
<input
|
||||
type="text"
|
||||
value="Price"
|
||||
class="w-full sm:w-[80%] bg-[#2A2E39] border border-gray-600 text-sm rounded-md py-2 px-3 text-white"
|
||||
readonly
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Crossing Dropdown -->
|
||||
<div class="flex flex-col sm:flex-row items-start sm:items-center">
|
||||
<label class="text-sm w-[20%] mb-1 sm:mb-0">Crossing</label>
|
||||
<select
|
||||
on:change={changeStatement}
|
||||
class="w-full sm:w-[80%] bg-[#2A2E39] border border-gray-600 text-sm rounded-md py-2 px-3 text-white"
|
||||
>
|
||||
Price Alert
|
||||
</h2>
|
||||
</div>
|
||||
<!--End Header-->
|
||||
|
||||
<div class="flex justify-between items-center">
|
||||
<body class="w-11/12 m-auto">
|
||||
<div
|
||||
class="mt-8 text-center flex flex-col justify-center items-center mb-14"
|
||||
>
|
||||
<div class="text-white font-medium text-5xl">
|
||||
${displayPrice}
|
||||
</div>
|
||||
<div class="text-sm text-white text-opacity-[0.5] mt-2">
|
||||
Current Price: ${currentPrice}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center font-medium flex justify-center">
|
||||
{#if (displayPrice / currentPrice - 1) * 100 > 100}
|
||||
<span class="text-[#00FC50]"
|
||||
>{((displayPrice / currentPrice - 1) * 100)?.toFixed(
|
||||
2,
|
||||
)}%</span
|
||||
>
|
||||
{:else if values?.at(0) > 0}
|
||||
<span class="text-[#00FC50]">{values?.at(0)?.toFixed(2)}%</span>
|
||||
{:else if values?.at(0) < 0}
|
||||
<span class="inline-block text-[#FF2F1F]"
|
||||
>{values?.at(0)?.toFixed(2)}%
|
||||
</span>
|
||||
{:else}
|
||||
<span class="inline-block text-white text-opacity-[0.6]"
|
||||
>0%</span
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="positive-negative-slider"
|
||||
style="--range: {Math.abs(
|
||||
values[0] / 2,
|
||||
)}%; {origin}; --range-color: {color};"
|
||||
>
|
||||
<RangeSlider
|
||||
id="large"
|
||||
on:change={() =>
|
||||
(displayPrice = (
|
||||
currentPrice *
|
||||
(1 + values?.at(0) / 100)
|
||||
)?.toFixed(2))}
|
||||
suffix="%"
|
||||
min={-100}
|
||||
max={100}
|
||||
all={false}
|
||||
first={false}
|
||||
last={false}
|
||||
rest={false}
|
||||
hoverable={false}
|
||||
bind:values
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="{values?.at(0) !== 0
|
||||
? 'invisible'
|
||||
: ''} text-white text-opacity-60 m-auto text-center text-sm"
|
||||
>
|
||||
Set a trigger by moving the slider.
|
||||
</div>
|
||||
</body>
|
||||
<option value="above" selected>Above</option>
|
||||
<option value="below">Below</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="w-full pt-4 flex justify-end items-center ml-auto pr-8">
|
||||
<button
|
||||
on:click={handleCreateAlert}
|
||||
class="ml-auto cursor-pointer px-5 py-2 rounded-full transition ease-out {values?.at(
|
||||
0,
|
||||
) !== 0
|
||||
? 'bg-[#0DDE00]'
|
||||
: 'bg-gray-600'} text-center text-black font-medium"
|
||||
>
|
||||
Create
|
||||
</button>
|
||||
</div>
|
||||
<!-- Value Input -->
|
||||
<div class="flex flex-col sm:flex-row items-start sm:items-center">
|
||||
<label class="text-sm w-[20%] mb-1 sm:mb-0">Value</label>
|
||||
|
||||
<div
|
||||
class="flex flex-wrap pl-5 rounded-xl bg-[#000] max-w-sm mx-auto mt-5"
|
||||
>
|
||||
{#each Array.from({ length: 9 }, (_, i) => i + 1) as number}
|
||||
<div class="w-1/3">
|
||||
<button
|
||||
id={"numPad-" + number}
|
||||
on:click={() => numPadInput(number)}
|
||||
class="transition ease-out w-20 h-20 text-2xl text-white font-bold rounded-full"
|
||||
>{number}</button
|
||||
>
|
||||
</div>
|
||||
{/each}
|
||||
<div class="w-1/3">
|
||||
<button
|
||||
id="numPad-dot"
|
||||
on:click={() => numPadInput("dot")}
|
||||
class="transition ease-out w-20 h-20 text-2xl text-white font-bold rounded-full"
|
||||
>.</button
|
||||
>
|
||||
</div>
|
||||
<div class="w-1/3">
|
||||
<button
|
||||
id="numPad-0"
|
||||
on:click={() => numPadInput(0)}
|
||||
class="transition ease-out w-20 h-20 text-2xl text-white font-bold rounded-full"
|
||||
>0</button
|
||||
>
|
||||
</div>
|
||||
<div class="w-1/3">
|
||||
<button
|
||||
id="numPad-remove"
|
||||
on:click={() => numPadInput("remove")}
|
||||
class="transition ease-out w-20 h-20 text-2xl text-white font-bold rounded-full"
|
||||
>
|
||||
<svg
|
||||
class="w-6 h-6 inline-block"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
><path
|
||||
fill="gray"
|
||||
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
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
<input
|
||||
type="number"
|
||||
bind:value={targetPrice}
|
||||
step="0.1"
|
||||
class="w-full sm:w-[80%] bg-[#2A2E39] border border-gray-600 text-sm rounded-md py-2 px-3 text-white"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if !isNaN(targetPrice) && targetPrice !== undefined && targetPrice !== null}
|
||||
<div class="flex flex-col gap-2 mt-5 text-white">
|
||||
<label class="text-sm sm:text-[1rem] font-semibold"
|
||||
>Quick Summary:</label
|
||||
>
|
||||
<p class="text-sm sm:text-[1rem]">
|
||||
Your price alert will notify you when the stock price is {condition}
|
||||
{targetPrice?.toFixed(2)}.
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="flex justify-end gap-4 mt-6 absolute bottom-5 right-5">
|
||||
<label
|
||||
for="priceAlertModal"
|
||||
class="cursor-pointer border border-gray-600 text-white py-2 px-4 rounded-md text-sm"
|
||||
>
|
||||
Cancel
|
||||
</label>
|
||||
<button
|
||||
on:click={handleCreateAlert}
|
||||
class="bg-white text-black py-2 px-4 rounded-md text-sm"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--End Trade Modal-->
|
||||
</div>
|
||||
<!--End Mobile Price Alert-->
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
#large {
|
||||
font-size: 1em;
|
||||
margin-inline: 0;
|
||||
--range-handle-focus: gray;
|
||||
}
|
||||
#large .rangeFloat {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
#x {
|
||||
margin-inline: 0;
|
||||
}
|
||||
|
||||
.positive-negative-slider {
|
||||
background: white;
|
||||
position: relative;
|
||||
--range-slider: transparent;
|
||||
margin-inline: 1em;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.positive-negative-slider::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: var(--left);
|
||||
right: var(--right);
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: var(--range, 0);
|
||||
background-color: var(--range-color);
|
||||
border-radius: inherit;
|
||||
}
|
||||
</style>
|
||||
</dialog>
|
||||
|
||||
@ -620,7 +620,7 @@
|
||||
>Reddit Tracker</a
|
||||
>
|
||||
</Button>
|
||||
|
||||
<!--
|
||||
<Button
|
||||
builders={[builder]}
|
||||
type="submit"
|
||||
@ -632,6 +632,7 @@
|
||||
>Lobbying Tracker</a
|
||||
>
|
||||
</Button>
|
||||
-->
|
||||
<Button
|
||||
builders={[builder]}
|
||||
type="submit"
|
||||
@ -1084,12 +1085,13 @@
|
||||
class="text-[1rem] text-white ml-4 mt-4"
|
||||
>Reddit Tracker</a
|
||||
>
|
||||
|
||||
<!--
|
||||
<a
|
||||
href="/corporate-lobbying-tracker"
|
||||
class="text-[1rem] text-white ml-4 mt-4"
|
||||
>Lobbying Tracker</a
|
||||
>
|
||||
-->
|
||||
<a
|
||||
href="/sentiment-tracker"
|
||||
class="text-[1rem] text-white ml-4 mt-4"
|
||||
|
||||
@ -155,7 +155,7 @@
|
||||
</svelte:head>
|
||||
|
||||
<section
|
||||
class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden pb-20 pt-5 px-4 lg:px-3"
|
||||
class="w-full max-w-3xl sm:max-w-screen-2xl overflow-hidden min-h-screen pb-20 pt-5 px-4 lg:px-3"
|
||||
>
|
||||
<div class="text-sm sm:text-[1rem] breadcrumbs">
|
||||
<ul>
|
||||
|
||||
@ -19,6 +19,8 @@
|
||||
import { page } from "$app/stores";
|
||||
import toast from "svelte-french-toast";
|
||||
import CryptoProfileCard from "$lib/components/CryptoProfileCard.svelte";
|
||||
import PriceAlert from "$lib/components/PriceAlert.svelte";
|
||||
|
||||
export let data;
|
||||
|
||||
//$assetType = 'stock';
|
||||
@ -209,18 +211,10 @@
|
||||
}
|
||||
|
||||
let LoginPopup;
|
||||
let PriceAlert;
|
||||
|
||||
onMount(async () => {
|
||||
if (!data?.user) {
|
||||
LoginPopup = (await import("$lib/components/LoginPopup.svelte")).default;
|
||||
} else {
|
||||
/*
|
||||
AddPortfolio = (await import('$lib/components/AddPortfolio.svelte')).default;
|
||||
BuyTrade = (await import('$lib/components/BuyTrade.svelte')).default;
|
||||
SellTrade = (await import('$lib/components/SellTrade.svelte')).default;
|
||||
*/
|
||||
PriceAlert = (await import("$lib/components/PriceAlert.svelte")).default;
|
||||
}
|
||||
|
||||
//const startTime = currentDateTime.set({ hour: 15, minute: 30 });
|
||||
@ -935,107 +929,102 @@
|
||||
{/if}
|
||||
-->
|
||||
|
||||
{#if PriceAlert}
|
||||
<PriceAlert {data} />
|
||||
{/if}
|
||||
<PriceAlert {data} ticker={$cryptoTicker} />
|
||||
|
||||
<!--Start Type of Trade-->
|
||||
|
||||
<input type="checkbox" id="typeOfTrade" class="modal-toggle" />
|
||||
|
||||
<dialog
|
||||
id="typeOfTrade"
|
||||
class="modal modal-bottom sm:modal-middle overflow-hidden"
|
||||
id="addWatchListModal"
|
||||
class="modal modal-bottom sm:modal-middle bg-[#000] bg-opacity-[0.5]"
|
||||
>
|
||||
<label
|
||||
for="typeOfTrade"
|
||||
class="cursor-pointer modal-backdrop bg-[#fff] bg-opacity-[0.08]"
|
||||
id="addWatchListModal"
|
||||
for="addWatchListModal"
|
||||
class="cursor-pointer modal-backdrop"
|
||||
></label>
|
||||
|
||||
<div class="modal-box w-full bg-[#000] border border-slate-600 pb-10">
|
||||
<div class="flex flex-col">
|
||||
<div class="text-white text-md flex flex-col flex-shrink-0">
|
||||
<div class="rounded-full w-10 h-10 relative bg-gray-900 mb-2">
|
||||
<img
|
||||
class="rounded-full w-6 h-6 absolute inset-1/2 transform -translate-x-1/2 -translate-y-1/2"
|
||||
src={`https://financialmodelingprep.com/image-stock/${$cryptoTicker}.png`}
|
||||
/>
|
||||
</div>
|
||||
<span class="mb-1">
|
||||
{$displayCompanyName?.length > 30
|
||||
? $displayCompanyName?.slice(0, 30) + "..."
|
||||
: $displayCompanyName}
|
||||
</span>
|
||||
<div class="flex flex-row items-center mb-10">
|
||||
<span class="mb-1 text-sm font-medium">
|
||||
Current Price: ${$currentPortfolioPrice}
|
||||
</span>
|
||||
<span class="text-blue-400 text-sm font-medium ml-auto">
|
||||
Holding Shares: {holdingShares}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="modal-box rounded-md w-full bg-[#1E222D] sm:border sm:border-gray-600"
|
||||
>
|
||||
<label
|
||||
for="addWatchListModal"
|
||||
class="cursor-pointer bg-[#1E222D] absolute right-5 top-2 text-[1.8rem] text-white"
|
||||
>
|
||||
✕
|
||||
</label>
|
||||
|
||||
<div class="text-white">
|
||||
<h3 class="font-bold text-2xl mb-5">Type of Trade</h3>
|
||||
<h3 class="font-semibold text-lg sm:text-xl mb-10">Add to Watchlist</h3>
|
||||
|
||||
<ul class="menu dropdown-content text-white bg-[#000] rounded -ml-6">
|
||||
<li class="mb-3">
|
||||
<div class="flex flex-col items-center w-full max-w-3xl bg-[#1E222D]">
|
||||
{#each userWatchList as item}
|
||||
<label
|
||||
for="typeOfTrade"
|
||||
on:click={() => handleTypeOfTrade("buy")}
|
||||
class="cursor-pointer flex flex-row justify-start items-center"
|
||||
on:click|stopPropagation={() => toggleUserWatchlist(item?.id)}
|
||||
class="cursor-pointer w-full flex flex-row justify-start items-center mb-5"
|
||||
>
|
||||
<div class="rounded-full w-10 h-10 relative bg-gray-800">
|
||||
<svg
|
||||
class="h-5 w-5 absolute inset-1/2 transform -translate-x-1/2 -translate-y-1/2"
|
||||
viewBox="0 0 16 16"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
fill="green"
|
||||
><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
|
||||
id="SVGRepo_tracerCarrier"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></g><g id="SVGRepo_iconCarrier">
|
||||
<rect width="16" height="16" id="icon-bound" fill="none"
|
||||
></rect>
|
||||
<path
|
||||
d="M0,11h11.2l-2.6,2.6L10,15l6-6H0V11z M4.8,5l2.6-2.6L6,1L0,7h16V5H4.8z"
|
||||
></path>
|
||||
</g></svg
|
||||
>
|
||||
</div>
|
||||
<span class="ml-1 text-white text-lg font-medium"
|
||||
>Buy {$cryptoTicker} Shares</span
|
||||
<div
|
||||
class="flex flex-row items-center w-full bg-[#2A2E39] p-3 rounded-md {item?.ticker?.includes(
|
||||
$cryptoTicker,
|
||||
)
|
||||
? 'border border-gray-400'
|
||||
: ''}"
|
||||
>
|
||||
</label>
|
||||
</li>
|
||||
<li class="mb-3">
|
||||
<label
|
||||
for="typeOfTrade"
|
||||
on:click={() => handleTypeOfTrade("sell")}
|
||||
class="cursor-pointer flex flex-row justify-start items-center"
|
||||
>
|
||||
<div class="rounded-full w-10 h-10 relative bg-gray-800">
|
||||
<svg
|
||||
class="h-5 w-5 absolute inset-1/2 transform -translate-x-1/2 -translate-y-1/2"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
><path
|
||||
fill="red"
|
||||
d="M14.25 21.4q-.575.575-1.425.575T11.4 21.4l-8.8-8.8q-.275-.275-.438-.65T2 11.15V4q0-.825.588-1.413T4 2h7.15q.425 0 .8.163t.65.437l8.8 8.825q.575.575.575 1.413T21.4 14.25l-7.15 7.15ZM6.5 8q.625 0 1.063-.438T8 6.5q0-.625-.438-1.063T6.5 5q-.625 0-1.063.438T5 6.5q0 .625.438 1.063T6.5 8Z"
|
||||
/></svg
|
||||
<div class="flex flex-col items-center w-full">
|
||||
<span class="ml-1 text-white font-medium mr-auto">
|
||||
{item?.title}
|
||||
</span>
|
||||
<span class="ml-1 text-white text-sm font-medium mr-auto">
|
||||
{item?.ticker?.length}
|
||||
{item?.ticker?.length !== 1 ? "Companies" : "Company"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="rounded-full w-8 h-8 relative border border-[#737373]"
|
||||
>
|
||||
{#if item?.ticker?.includes($cryptoTicker)}
|
||||
<svg
|
||||
class="w-full h-full rounded-full"
|
||||
viewBox="0 0 48 48"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
fill="#09090B000"
|
||||
><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
|
||||
id="SVGRepo_tracerCarrier"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></g><g id="SVGRepo_iconCarrier">
|
||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<title>ic_fluent_checkmark_circle_48_filled</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g
|
||||
stroke="none"
|
||||
stroke-width="1"
|
||||
fill="none"
|
||||
fill-rule="evenodd"
|
||||
>
|
||||
<g
|
||||
id="ic_fluent_checkmark_circle_48_filled"
|
||||
fill="#fff"
|
||||
fill-rule="nonzero"
|
||||
>
|
||||
<path
|
||||
d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z"
|
||||
>
|
||||
</path>
|
||||
</g>
|
||||
</g>
|
||||
</g></svg
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<span class="ml-1 text-white text-lg font-medium">
|
||||
Sell {$cryptoTicker} Shares
|
||||
</span>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
@ -21,6 +21,7 @@
|
||||
import { page } from "$app/stores";
|
||||
import toast from "svelte-french-toast";
|
||||
import Markethour from "$lib/components/Markethour.svelte";
|
||||
import PriceAlert from "$lib/components/PriceAlert.svelte";
|
||||
|
||||
export let data;
|
||||
$: $realtimePrice = data?.getStockQuote?.price?.toFixed(2);
|
||||
@ -194,16 +195,10 @@
|
||||
}
|
||||
|
||||
let LoginPopup;
|
||||
let PriceAlert;
|
||||
|
||||
onMount(async () => {
|
||||
if (!data?.user) {
|
||||
LoginPopup = (await import("$lib/components/LoginPopup.svelte")).default;
|
||||
} else {
|
||||
//AddPortfolio = (await import('$lib/components/AddPortfolio.svelte')).default;
|
||||
//BuyTrade = (await import('$lib/components/BuyTrade.svelte')).default;
|
||||
//SellTrade = (await import('$lib/components/SellTrade.svelte')).default;
|
||||
PriceAlert = (await import("$lib/components/PriceAlert.svelte")).default;
|
||||
}
|
||||
|
||||
if ($isOpen) {
|
||||
@ -747,10 +742,7 @@
|
||||
<!--End Login Modal-->
|
||||
|
||||
<!--Start SellTrade Modal-->
|
||||
{#if PriceAlert}
|
||||
<PriceAlert {data} />
|
||||
{/if}
|
||||
|
||||
<PriceAlert {data} ticker={$etfTicker} />
|
||||
<!--Start Add Watchlist Modal-->
|
||||
<input type="checkbox" id="addWatchListModal" class="modal-toggle" />
|
||||
|
||||
@ -764,10 +756,12 @@
|
||||
class="cursor-pointer modal-backdrop"
|
||||
></label>
|
||||
|
||||
<div class="modal-box w-full bg-[#191919] sm:border sm:border-gray-800">
|
||||
<div
|
||||
class="modal-box rounded-md w-full bg-[#1E222D] sm:border sm:border-gray-600"
|
||||
>
|
||||
<label
|
||||
for="addWatchListModal"
|
||||
class="cursor-pointer bg-[#191919] absolute right-5 top-2 text-[1.8rem] text-white"
|
||||
class="cursor-pointer bg-[#1E222D] absolute right-5 top-2 text-[1.8rem] text-white"
|
||||
>
|
||||
✕
|
||||
</label>
|
||||
@ -775,26 +769,24 @@
|
||||
<div class="text-white">
|
||||
<h3 class="font-semibold text-lg sm:text-xl mb-10">Add to Watchlist</h3>
|
||||
|
||||
<div class="flex flex-col items-center w-full max-w-3xl bg-[#191919]">
|
||||
<div class="flex flex-col items-center w-full max-w-3xl bg-[#1E222D]">
|
||||
{#each userWatchList as item}
|
||||
<label
|
||||
on:click|stopPropagation={() => toggleUserWatchlist(item?.id)}
|
||||
class="cursor-pointer w-full flex flex-row justify-start items-center mb-5"
|
||||
>
|
||||
<div
|
||||
class="flex flex-row items-center w-full bg-[#313131] p-3 rounded-md {item?.ticker?.includes(
|
||||
class="flex flex-row items-center w-full bg-[#2A2E39] p-3 rounded-md {item?.ticker?.includes(
|
||||
$etfTicker,
|
||||
)
|
||||
? 'ring-2 ring-[#04E000]'
|
||||
? 'border border-gray-400'
|
||||
: ''}"
|
||||
>
|
||||
<div class="flex flex-col items-center w-full">
|
||||
<span class="ml-1 text-white font-medium mr-auto">
|
||||
{item?.title}
|
||||
</span>
|
||||
<span
|
||||
class="ml-1 text-white text-opacity-40 text-sm font-medium mr-auto"
|
||||
>
|
||||
<span class="ml-1 text-white text-sm font-medium mr-auto">
|
||||
{item?.ticker?.length}
|
||||
{item?.ticker?.length !== 1 ? "Companies" : "Company"}
|
||||
</span>
|
||||
@ -827,7 +819,7 @@
|
||||
>
|
||||
<g
|
||||
id="ic_fluent_checkmark_circle_48_filled"
|
||||
fill="#04E000"
|
||||
fill="#fff"
|
||||
fill-rule="nonzero"
|
||||
>
|
||||
<path
|
||||
|
||||
@ -24,6 +24,7 @@
|
||||
import toast from "svelte-french-toast";
|
||||
import { convertTimestamp } from "$lib/utils";
|
||||
import AIScore from "$lib/components/AIScore.svelte";
|
||||
import PriceAlert from "$lib/components/PriceAlert.svelte";
|
||||
|
||||
export let data;
|
||||
let prePostData = data?.getPrePostQuote || {};
|
||||
@ -203,16 +204,10 @@
|
||||
}
|
||||
|
||||
let LoginPopup;
|
||||
let PriceAlert;
|
||||
|
||||
onMount(async () => {
|
||||
if (!data?.user) {
|
||||
LoginPopup = (await import("$lib/components/LoginPopup.svelte")).default;
|
||||
} else {
|
||||
//AddPortfolio = (await import('$lib/components/AddPortfolio.svelte')).default;
|
||||
//BuyTrade = (await import('$lib/components/BuyTrade.svelte')).default;
|
||||
//SellTrade = (await import('$lib/components/SellTrade.svelte')).default;
|
||||
PriceAlert = (await import("$lib/components/PriceAlert.svelte")).default;
|
||||
}
|
||||
|
||||
if ($isOpen) {
|
||||
@ -978,9 +973,7 @@
|
||||
<!--End Login Modal-->
|
||||
|
||||
<!--Start SellTrade Modal-->
|
||||
{#if PriceAlert}
|
||||
<PriceAlert {data} />
|
||||
{/if}
|
||||
<PriceAlert {data} ticker={$stockTicker} />
|
||||
|
||||
<!--Start Add Watchlist Modal-->
|
||||
<input type="checkbox" id="addWatchListModal" class="modal-toggle" />
|
||||
@ -995,10 +988,12 @@
|
||||
class="cursor-pointer modal-backdrop"
|
||||
></label>
|
||||
|
||||
<div class="modal-box w-full bg-[#191919] sm:border sm:border-gray-800">
|
||||
<div
|
||||
class="modal-box rounded-md w-full bg-[#1E222D] sm:border sm:border-gray-600"
|
||||
>
|
||||
<label
|
||||
for="addWatchListModal"
|
||||
class="cursor-pointer bg-[#191919] absolute right-5 top-2 text-[1.8rem] text-white"
|
||||
class="cursor-pointer bg-[#1E222D] absolute right-5 top-2 text-[1.8rem] text-white"
|
||||
>
|
||||
✕
|
||||
</label>
|
||||
@ -1006,26 +1001,24 @@
|
||||
<div class="text-white">
|
||||
<h3 class="font-semibold text-lg sm:text-xl mb-10">Add to Watchlist</h3>
|
||||
|
||||
<div class="flex flex-col items-center w-full max-w-3xl bg-[#191919]">
|
||||
<div class="flex flex-col items-center w-full max-w-3xl bg-[#1E222D]">
|
||||
{#each userWatchList as item}
|
||||
<label
|
||||
on:click|stopPropagation={() => toggleUserWatchlist(item?.id)}
|
||||
class="cursor-pointer w-full flex flex-row justify-start items-center mb-5"
|
||||
>
|
||||
<div
|
||||
class="flex flex-row items-center w-full bg-[#313131] p-3 rounded-md {item?.ticker?.includes(
|
||||
class="flex flex-row items-center w-full bg-[#2A2E39] p-3 rounded-md {item?.ticker?.includes(
|
||||
$stockTicker,
|
||||
)
|
||||
? 'ring-2 ring-[#04E000]'
|
||||
? 'border border-gray-400'
|
||||
: ''}"
|
||||
>
|
||||
<div class="flex flex-col items-center w-full">
|
||||
<span class="ml-1 text-white font-medium mr-auto">
|
||||
{item?.title}
|
||||
</span>
|
||||
<span
|
||||
class="ml-1 text-white text-opacity-40 text-sm font-medium mr-auto"
|
||||
>
|
||||
<span class="ml-1 text-white text-sm font-medium mr-auto">
|
||||
{item?.ticker?.length}
|
||||
{item?.ticker?.length !== 1 ? "Companies" : "Company"}
|
||||
</span>
|
||||
@ -1058,7 +1051,7 @@
|
||||
>
|
||||
<g
|
||||
id="ic_fluent_checkmark_circle_48_filled"
|
||||
fill="#04E000"
|
||||
fill="#fff"
|
||||
fill-rule="nonzero"
|
||||
>
|
||||
<path
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user