board-new.htm

<dialog id="addElement" u-is="dialog">
  <h2>Add a new Element</h2>
  <div class="u-close" u-action="close"></div>
  <form is="form-json" method="dialog">
    <div class="form-grid">
      <label>Type:</label>
      <select name="type" required>
        <option disabled selected hidden value="">Select Element...</option>
      </select>
      <label>ID:</label>
      <input name="id" required pattern="[0-9a-z]+" placeholder="enter a name ..." maxlength="12">
    </div>
    <div><button u-action="next:configElement" type="submit" style="float:right">Next</button></div>
  </form>
</dialog>

<dialog id="configElement" u-is="dialog">
  <h2><span u-text="type"></span>/<span u-text="id"></span> Configuration</h2>
  <div class="u-close" u-action="close"></div>

  <form is="form-json" method="dialog">
    <div class="form-grid"></div>
    <div><button u-action="done" type="submit" style="float:right">save</button></div>
  </form>
</dialog>

<dialog id="action" u-is="dialog">
  <h2>Event Configuration</h2>
  <div class="u-close" u-action="close"></div>

  <form method="dialog" is="form-json">
    <div class="form-grid">
      <h4 class="wide">on Event:</h4>
      <label>Source:</label><input name="srcId" required />
      <label>Event:</label><select name="event" required></select>
      <h4 class="wide">send Action:</h4>
      <label>Target:</label><select name="target" required></select>
      <label>Action:</label><select name="action" required></select>
      <label>Value:</label><input name="value" value="$v" required />
    </div>
    <div><button type="submit" u-action="return" style="float:right">Save</button></div>
  </form>
</dialog>

<script>
  function lowerKeys(d) {
    const out = {};
    Object.entries(d).forEach(([key, value]) => {
      out[key.toLowerCase()] = value;
    });
    return (out);
  }

  // get definitions for an element type
  function getDefs(id) {
    const type = id.split('/')[0];
    return (uElements.defs[type] ?? {});
  }

  let d2 = document.querySelector('dialog#addElement');

  // new Element dialog
  d2.addEventListener('open', evt => {
    const form = evt.detail.form;

    // populate SELECT with available element types
    var sel = form.querySelector('select[name=type]');
    if ((sel) && (sel.options.length <= 1)) {
      Object.keys(uElements.defs).forEach(function(e) {
        var o = createHTMLElement(sel, 'option', { value: e });
        o.textContent = e;
        o.disabled = !uElements.impl.includes(e);
      });
    }
  });


  // Element config dialog
  let d3 = document.querySelector('dialog#configElement');
  d3.addEventListener('open', evt => {
    let l;
    const ic = '<svg class="icon"><use href="./icons.svg#$"></use></svg>';
    const data = lowerKeys(evt.detail.data);
    const fg = d3.querySelector('.form-grid');
    fg.innerHTML = '';

    function add(k, isEvent, isAction) {
      createHTMLElement(fg, 'label').textContent = k + ':';
      const g = createHTMLElement(fg, 'div', { class: 'form-inline' });

      l = createHTMLElement(g, 'label').innerHTML = ic.replace('$', (isAction ? 'start' : 'no'));
      const o = createHTMLElement(g, 'input', { name: k, style: 'width:18ch' });
      if (data[k.toLowerCase()])
        o.value = data[k.toLowerCase()];

      (l = createHTMLElement(g, 'label', { 'u-action': 'action' }))
        .innerHTML = ic.replace('$', (isEvent ? 'start' : 'no'));
      if (isEvent) {
        l.setAttribute('_event', k);
      }
    } // add()

    // create properties, events and actions inputs
    d3.setAttribute('_id', data.type + '/' + data.id);
    var d = getDefs(data.type);
    getDefs("element").properties.forEach(k => add(k, false, false));

    if (d.extends) {
      const bd = getDefs(d.extends);
      if (bd?.properties) { bd.properties.forEach(k => add(k, false, false)); }
      if (bd?.events) { bd.events.forEach(k => add(k, true, false)); }
      if (bd?.actions) { bd.actions.forEach(k => add(k, false, true)); }
    }

    if (d?.properties) { d.properties.forEach(k => add(k, false, false)); }
    if (d?.events) { d.events.forEach(k => add(k, true, false)); }
    if (d?.actions) { d.actions.forEach(k => add(k, false, true)); }
  });

  d3.addEventListener('click', evt => {
    let tar = evt.target;
    let ua;
    while (tar && tar !== this) {
      ua = tar.getAttribute('u-action');
      if (ua) break;
      tar = tar.parentElement;
    }
    if (ua == 'action') {
      DialogClass.openModalForm('action', {
        srcId: d3.getAttribute('_id'),
        srcEvent: tar.getAttribute('_event'),
      }, function(d) {
        // result of action dialog 
        var fld = d3.querySelector('input[name="' + tar.getAttribute('_event') + '"]');
        fld.value = `${d.target}?${d.action}=${d.value}`;
      });
    }
  });


  d3.addEventListener('submit', evt => {
    const oForm = evt.target;
    const uSub = evt.submitter;

    if (uSub && oForm) {
      const ua = uSub.getAttribute('u-action');
      if (ua === 'done') {
        changeConfig(d3.getAttribute('_id'), oForm.getJsonData());
      }
    }

  });

  // Action config dialog
  let d4 = document.querySelector('dialog#action');
  d4.addEventListener('open', evt => {
    const form = evt.detail.form;
    const data = evt.detail.data;

    const oAction = form.querySelector('SELECT[name=action]');
    const oTarget = form.querySelector('SELECT[name=target]');
    const oEvent = form.querySelector('SELECT[name=event]');
    oTarget.innerHTML = '';

    function listEvents() {
      oEvent.innerHTML = '';
      oEvent.value = '';
      oEvent.disabled = false;
      createHTMLElement(oEvent, 'option', { disabled: true, selected: true, hidden: true, value: "" }).textContent = 'Select event...';
      const eventList = getDefs(data.srcId).events || [];
      eventList.forEach(a => { createHTMLElement(oEvent, 'option', { value: a }).textContent = a; });
      if (eventList.length === 1) {
        oEvent.selectedIndex = 1;
      }
    }

    function listTargets() {
      // populate target dropdown with existing type/id elements
      createHTMLElement(oTarget, 'option', { disabled: true, selected: true, hidden: true, value: "" }).textContent = 'Select target...';
      for (const t in uElements.config) {
        for (const i in uElements.config[t]) {
          const id = t + '/' + i;
          createHTMLElement(oTarget, 'option', { value: id }).textContent = id;
        }
      }
    } // listTargets()


    // populate options for selecting a action for the target
    function listActions() {
      oAction.innerHTML = '';
      oAction.value = '';
      oAction.disabled = false;
      createHTMLElement(oAction, 'option', { disabled: true, selected: true, hidden: true, value: "" }).textContent = 'Select action...';

      const d = getDefs(oTarget.value);
      const actionList = [].concat(
        (d.extends ? getDefs(d.extends).actions : []),
        (d.actions ? d.actions : []));
      actionList.forEach(a => { createHTMLElement(oAction, 'option', { value: a }).textContent = a; });
      if (actionList.length === 1) {
        oAction.selectedIndex = 1;
      }
    }

    if (data.srcEvent) {
      createHTMLElement(oEvent, 'option', { value: data.srcEvent }).textContent = data.srcEvent;
      // oSrcEvent
    } else {
      listEvents();
    }


    if (data.tarId) {
      createHTMLElement(oTarget, 'option', { value: data.tarId }).textContent = data.tarId;
      oTarget.selected = 1;
      listActions();

    } else {
      listTargets();
    }

    oTarget.addEventListener('change', evt => {
      listActions();
    });
  });


</script>