JSFiddle - React, Tailwind, and code Playground

by balloob

HTML

<script src="https://unpkg.com/[email protected]/dist/js-yaml.min.js"></script>
Input:
<br>
<textarea id='input' style='display: block; height: 200px; width: 100%;'>
homeassistant:
  customize:
    - entity_id: sensor
      icon: mdi:kettle # Give all sensor the kettle icon
    - entity_id: light.family*
      hidden: true # Hide all lights that have an ID starting with 'family'
    - entity_id: switch.wemo_switch_1,switch.wemo_switch_2,switch.wemo_switch_3
      entity_picture: /local/toaster.jpg # Set picture on multiple devices
</textarea>
<button id='do'>Convert</button>

<br>
<br> Output:
<pre id='output'></pre>

JavaScript

String.prototype.trim = function() 
{
  return String(this).replace(/^\s+|\s+$/g, '');
};
function convert() {
  var data = document.getElementById('input').value;
  var yaml = jsyaml.load(data);
  var hass = yaml.homeassistant;

  if (!hass) {
    console.log(yaml)
    alert('Cannot find homeassistant section');
    return;
  }

  var origCust = hass.customize;

  if (!origCust) {
    console.log(yaml)
    alert("Cannot find customize");
    return;
  }

  delete hass.customize;

  var cust = hass.customize = {}
  var custDomain = hass.customize_domain = {}
  var custGlob = hass.customize_glob = {}

  Object.keys(origCust).forEach(function(key) {
    var value = origCust[key];
    var entityId = value.entity_id;
    delete value.entity_id;

    if (entityId.indexOf(',') !== -1) {
      entityId = entityId.split(',');
    } else {
      entityId = [entityId];
    }

    entityId.forEach(function(ent) {
  		ent = ent.trim();    
      if (ent.indexOf('*') !== -1) {
        custGlob[ent] = value;
      } else if (ent.indexOf('.') === -1) {
        custDomain[ent] = value;
      } else {
        cust[ent] = value;
      }
    });
  });

  document.getElementById('output').innerHTML = jsyaml.dump(yaml);
}

document.getElementById('do').onclick = convert;

convert();