Syntax Builder

super-embed:
<html>
<head>
  <title>PineConnector Syntax Builder</title>
  <style>
    form {
      display: flex;
      flex-direction: column;
      gap: 10px;
      max-width: 400px;
      margin: 0 auto;
    }

    label {
      font-weight: bold;
    }

    input[type="text"],
    select,
    textarea {
      padding: 5px;
      border-radius: 3px;
      border: 1px solid gray;
    }

    button {
      padding: 10px 20px;
      background-color: blue;
      color: white;
      border: none;
      border-radius: 3px;
      cursor: pointer;
    }

    button:hover {
      background-color: darkblue;
    }

    #syntax {
      margin-top: 20px;
      font-family: monospace;
      white-space: pre-wrap;
    }
  </style>
</head>
<body>
  <h1>PineConnector Syntax Builder</h1>
  <form>
    <label for="licenseID">License ID:</label>
    <input type="text" id="licenseID" name="licenseID" required>

    <label for="command">Command:</label>
    <select id="command" name="command" required>
      <option value="">Select a command</option>
      <option value="buy">Buy</option>
      <option value="sell">Sell</option>
      <option value="closelong">Close Long</option>
    </select>

    <label for="symbol">Symbol:</label>
    <input type="text" id="symbol" name="symbol" required>

    <label for="risk">Risk:</label>
    <input type="text" id="risk" name="risk">

    <label for="sl">Stop Loss:</label>
    <input type="text" id="sl" name="sl">

    <button type="button">Generate Syntax</button>

    <div id="syntax"></div>
  </form>

  <script>
    const button = document.querySelector("button");
    const syntaxDiv = document.getElementById("syntax");

    button.addEventListener("click", () => {
      const licenseID = document.getElementById("licenseID").value.trim();
      const command = document.getElementById("command").value.trim();
      const symbol = document.getElementById("symbol").value.trim();
      const risk = document.getElementById("risk").value.trim();
      const sl = document.getElementById("sl").value.trim();

      // Validate the user's input
      if (!licenseID || !command || !symbol) {
        alert("Please fill in all required fields.");
        return;
      }

      // Check for unacceptable PineConnector syntax
      if (licenseID.includes(",") || symbol.includes(",") || risk.includes(",") || sl.includes(",")) {
        alert("License ID, symbol, risk, and stop loss cannot contain commas.");
        return;
      }

      // Check if the user entered a valid command
      const commands = ["buy", "sell", "closelong"];
      if (!commands.includes(command)) {
        alert("Please select a valid command.");
        return;
      }

      // Generate the PineConnector syntax
      let syntax = licenseID + "," + command + "," + symbol;
      if (risk) {
        syntax += ",risk=" + risk;
      }
      if (sl) {
        syntax += ",sl=" + sl;
      }

      // Display the generated syntax
      syntaxDiv.textContent = syntax;  });

   

  </script>
</body>
</html>