Generate Configuration Querystring

Configuration generator

by wio_dude

HTML

<form>
  <div>
    <label for="service">Service url</label>
    <input id="service" type="text" />
  </div>
  <div>
    <input id="record" type="checkbox" checked /><label for="record">Record Call</label>
  </div>
  <div>
    <input id="challenge" type="checkbox" checked /><label for="challenge">Issue Static Challenge</label>
  </div>
  <div>
    <label for="destination">Destination number</label>
    <input id="destination" type="text" value="15555555555" />
  </div>

  <div>
    <input id="whisper" type="checkbox" /><label for="whisper">Send call whisper</label><br />
    <textarea id="message"></textarea>
  </div>
</form>
<textarea id="url" rows="3" cols="80" readonly></textarea>

JavaScript

function byId(id) {
  return document.getElementById(id);
}

$e = {};
const inputIds = [
  'service',
  'record',
  'challenge',
  'destination',
  'whisper',
  'message',
];

const otherIds = [
  'url',
];

for (const id of inputIds) {
  $e[id] = byId(id);
  $e[id].addEventListener('input', updateParams);
}

for (const id of otherIds) {
  $e[id] = byId(id);
}


function updateParams() {
  const params = {
    destination: $e.destination.value,
  };
  if ($e.record.checked) {
    params.record = 'on';
  }
  console.log($e.challenge.checked)
  if ($e.challenge.checked) {
    params.challenge = 'on';
  }
  if ($e.whisper.checked && $e.message.value.length > 0) {
    params.whisper = $e.message.value;
  }

  const querystring = new URLSearchParams(params).toString()
  if ($e.service.value.length > 0) {
    let service = $e.service.value;
    if (!service.startsWith('http')) {
      service = `https://${service}`;
    }
    $e.url.value = `${service}/start?${querystring}`;

  } else {
    $e.url.value = `$\{SERVICE_URL\}/start?${querystring}`;

  }
}

updateParams();