frontend/src/lib/components/PriceAlert.svelte

<script lang="ts">
  import toast from "svelte-french-toast";
  import { openPriceAlert, newPriceAlertData } from "$lib/store";

  export let data;
  export let ticker;
  export let assetType;

  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 (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);",
      });
    } else {
      const closePopup = document.getElementById("priceAlertModal");
      closePopup?.dispatchEvent(new MouseEvent("click"));

      const postData = {
        userId: data?.user?.id,
        symbol: ticker,
        name: data?.getStockQuote?.name,
        assetType: assetType,
        priceWhenCreated: currentPrice,
        condition: condition,
        targetPrice: targetPrice,
      };

      // Make the POST request to the endpoint
      const response = await fetch("/api/create-price-alert", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(postData),
      });

      $newPriceAlertData = await response?.json();

      //const output = await response.json();

      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;
    }
  }

  $: {
    if ($openPriceAlert === true) {
      $openPriceAlert = false;
      currentPrice = Number(data?.getStockQuote?.price?.toFixed(2));
      targetPrice = currentPrice;
      condition = "above";
    }
  }
</script>

<svelte:head>
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
  />
</svelte:head>

<!--Start Trade Modal-->
<input type="checkbox" id="priceAlertModal" class="modal-toggle" />

<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 absolute right-5 top-5 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
      >
    </label>

    <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 flex-col sm:flex-row justify-between items-start sm:items-center mt-5 font-semibold text-white"
      >
        <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"
        >
          <img
            style="clip-path: circle(50%);"
            class="w-4 h-4 inline-block -mt-1 mr-1"
            src={`https://financialmodelingprep.com/image-stock/${ticker?.toUpperCase()}.png`}
            loading="lazy"
          />

          {ticker?.toUpperCase()}, 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"
          >
            <option value="above" selected>Above</option>
            <option value="below">Below</option>
          </select>
        </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>

          <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>
</dialog>