settingsPage for Power-Up

settingsPage.js

/// <reference path="../../types/trello.d.js" />
import Common from "../common/common";
export default class SettingsPage {
  constructor() { }
  /**
   * Renders the settings page
   * @param {TrelloObject} t 
   */
  render = async (t) => {
    /** @type {String} */
    const html = /*html*/`
      <p>You are on the setting page for ${Common.APPNAME}, ${Common.VERSION}</p>
      <p>Set the label for your button:</p> 
      <input type="text" id="boardButtonTextInput" />
      <button id="saveButton" disabled>Save</button>&nbsp;<button id="closeButton">Close</button>
    `;
    // If you look at the index.html you will see there is a single div with this ID
    // this is how we DYNAMICALLY build a page in memory (above) and plop it in place
    document.getElementById("content").innerHTML = html;
    // now hook up things...
    /** @type {HTMLButtonElement} */
    const saveButton = document.getElementById("saveButton");
    /** @type {HTMLInputElement} */
    const input = document.getElementById("boardButtonTextInput");
    input.value = await t.get("board", "private", "buttonName", "Hello World");
    input.addEventListener("keypress", () => saveButton.disabled = false);
    saveButton.addEventListener("click", () => {
      t.set("board", "private", "buttonName", input.value);
      saveButton.disabled = true;
    });
    document.getElementById("closeButton").addEventListener("click", () => {
      t.closePopup();
    });
    t.sizeTo("#content");
  };
}