togglii.js

javascript: (() => {
  var $http = $('body').injector().get('$http');
  var url = 'proxy/authpermissions-v2-server/toggles/';
  const GREEN = 'green';
  const RED = 'black';

  function render() {
    const scrollPos = window.scrollY;
    $http.get(url).then(res => res.data.toggles.sort((a, b) => sorter(a, b))).then(toggles => {
      const ul = convertTogglesToUl(toggles);
      const form = getForm();
      let togglii = document.getElementById('togglii');
      if (togglii) {
        document.body.removeChild(togglii);
      }
      togglii = Object.assign(el('section'), {
        id: 'togglii'
      });
      togglii.appendChild(form);
      togglii.appendChild(ul);
      document.body.appendChild(togglii);
      window.setTimeout(() => scrollTo(0, scrollPos), 0);
    });
  }
  render();

  function sorter(a, b) {
    return a.toggleId.toLowerCase().localeCompare(b.toggleId.toLowerCase());
  }

  function getForm() {
    const toggleIdInput = Object.assign(el('input'), {
      id: 'toggleId'
    });
    const toggleDescInput = Object.assign(el('input'), {
      id: 'toggleDesc'
    });
    toggleDescInput.placeholder = 'description (optional)';
    toggleIdInput.placeholder = 'Toggle ID';
    const select = el('select', [], [Object.assign(el('option'), {
      value: 'true',
      innerText: 'ENABLED'
    }), Object.assign(el('option'), {
      value: 'false',
      innerText: 'DISABLED'
    })]);
    const btn = Object.assign(el('button'), {
      innerText: 'CREATE TOGGLE'
    });
    btn.onclick = function() {
      const description = '';
      const toggleId = toggleIdInput.value;
      const enabled = select.value === 'true';
      const toggle = {
        toggleId: toggleId,
        translationKey: toggleId,
        enabled: enabled,
        description: description || toggleId
      };
      save(toggle);
    };
    const form = el('form', ['btn'], [toggleIdInput, toggleDescInput, select, btn]);
    form.style.color = 'black';
    return form;
  }

  function el(tag, classNames, children, attrs) {
    var element = document.createElement(tag);
    element.className = classNames || '';
    (children || []).forEach(child => element.appendChild(child));
    return element;
  }

  function getToggleBtn(toggle) {
    const cb = Object.assign(el('input'), {
      type: 'checkbox',
      checked: toggle.enabled
    });
    cb.onchange = function(e) {
      save(Object.assign(toggle, {
        enabled: cb.checked
      }));
    };
    return el('label', [], [cb, Object.assign(el('span'), {
      innerText: 'ENABLED'
    })]);
  }

  function getDeleteBtn(toggle) {
    const del = Object.assign(el('button'), {
      title: `delete ${toggle.toggleId}`
    });
    del.innerHTML = `☠`;
    del.style.border = 'none';
    del.style.fontSize = '2em';
    del.style.float = 'right';
    del.onclick = function(e) {
      if (confirm(`r u sure u wanna delete ${toggle.toggleId}?`)) {
        deleteToggle(toggle).then(res => {
          del.parentElement.parentElement.removeChild(del.parentElement);
        });
      }
    };
    return del;
  }

  function getPre(tog) {
    var pre = el('pre');
    pre.style.color = tog.enabled ? GREEN : RED;
    pre.innerText = JSON.stringify(tog, null, 2);
    pre.dataToggle = tog;
    return pre;
  }

  function convertTogglesToUl(togs) {
    var ul = el('ul', 'list-group');
    togs.forEach(tog => {
      var li = el('li', 'list-group-item');
      var pre = getPre(tog);
      li.appendChild(pre);
      li.appendChild(getToggleBtn(tog));
      li.appendChild(getDeleteBtn(tog));
      ul.appendChild(li);
    });
    return ul;
  }

  function save(toggle) {
    return $http.put(url + toggle.toggleId, toggle).then(() => render()).catch(handleErr('save'));
  }

  function deleteToggle(toggle) {
    return $http.delete(url + toggle.toggleId).then(() => alert(`deleted ${toggle.toggleId}`)).catch(handleErr('delete'));
  }

  function handleErr(msg) {
    return () => {
      alert(msg + ' failed');
      throw new Error(msg + ' failed');
    };
  }
})();