Values.html

<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>

<style>
  #types {
    margin-bottom: 10px;
  }

  #roles {
    height: 250px;
    float: left;
    width: 200px;
    margin-right: 50px;
  }

  #result {
    display: block;
    float: right;
    width: 40%;
    height: 200px;
  }

  #contexts {
    float: left;
    width: 250px;
  }
</style>

<textarea readonly id="result"></textarea>
<div id="types"></div>
<div id="contexts"></div>
<select id="roles" multiple></select>

<div id="numberContainer">
  <label for="number">Number</label>
  <input id="number" type="number" placeholder="Number" value=0 />
</div>

<br />

<div id="wrappings">
  <label for="group">Group</label>
  <input id="group" type="number" value=0 />

  <br />

  <label for="order">Order</label>
  <input id="order" type="number" value=0 />
</div>

<br />

<div id="readonlyContainer">
  <label for="checkbox">Readonly</label>
  <input id="readonly" type="checkbox" />
</div>

<div id="formatContainer">
  <label for="format">Format</label>
  <input id="format" type="text" placeholder = "DD MMM, YYYY" />
</div>

<div id="disableAutopopulateContainer">
  <label for="checkbox">Disable Autopopulate</label>
  <input id="disableAutopopulate" type="checkbox" />
</div>

<br />

<select id="attributes" multiple style="height:400px"></select>

<br />

<select id="assignments"></select>

<script type="text/javascript">
  const $types = $('#types')
  const $roles = $('#roles')
  const $attributes = $('#attributes')
  const $number = $('#number')
  const $numberContainer = $('#numberContainer')
  const $result = $('#result')
  const $assignments = $('#assignments')
  const $contexts = $('#contexts')
  const $readonly = $('#readonly')
  const $readonlyContainer = $('#readonlyContainer')
  const $wrappings = $('#wrappings')
  const $group = $('#group')
  const $order = $('#order')
  const $disableAutopopulateContainer = $('#disableAutopopulateContainer')
  const $disableAutopopulate = $('#disableAutopopulate')
  const $formatContainer = $('#formatContainer')
  const $format = $('#format')

  const contexts = [ '12a1b',
  'block_number',
  'building_number',
  'charitable_donations',
  'city',
  'closing_date',
  'commission_listing',
  'commission_selling',
  'contract_date',
  'county',
  'ender_type',
  'expiration_date',
  'file_id',
  'financing_due',
  'full_address',
  'inspection_date',
  'lease_application_date',
  'lease_begin',
  'lease_end',
  'lease_executed',
  'lease_price',
  'leased_price',
  'legal_description',
  'list_date',
  'list_price',
  'listing_status',
  'lot_number',
  'mls_area_major',
  'mls_area_minor',
  'mls_number',
  'option_period',
  'possession_date',
  'postal_code',
  'project_name',
  'property_type',
  'ranch_name',
  'sales_price',
  'square_meters',
  'state',
  'state_code',
  'street_address',
  'street_dir_prefix',
  'street_name',
  'street_number',
  'street_suffix',
  'subdivision',
  't47_due',
  'title_company',
  'title_due',
  'unit_number',
  'year_built' ]


  const assignments = [
    'Signature',
    'Initials',
    'Date',
    'Textbox',
    'Checkbox'
  ]

  const types = {
    Context: {
      name: 'Context',
      hasContexts: true,
      hasWrapping: true,
      hasAutopopulation: true,
      hasFormat: true,
      builder: () => {
        const context = $contexts.find(':checked').val()
        const group = parseInt($group.val())
        const order = parseInt($order.val())
        const disableAutopopulate = $disableAutopopulate.prop('checked')
        const format = $format.val()

        const object = {
          type: 'Context',
          context
        }

        if (disableAutopopulate)
          object.disableAutopopulate = true

        if (format)
          object.format = format

        if (group > 0) {
          object.group = group
          object.order = order
        }

        setJSON(object)
      }
    },

    Roles: {
      name: 'Roles',
      hasRoles: true,
      hasAttribute: true,
      hasWrapping: true,
      hasReadonly: true,
      builder: () => {
        const role = $roles.val()
        const attributes = $attributes.val()
        const readonly = $readonly.prop('checked')
        const group = parseInt($group.val())
        const order = parseInt($order.val())
        const disableAutopopulate = $disableAutopopulate.prop('checked')

        const object = {
          type: 'Roles',
          role,
          attributes
        }

        if (readonly)
          object.readonly = true

        if (disableAutopopulate)
          object.disableAutopopulate = true

        if (group > 0) {
          object.group = group
          object.order = order
        }

        setJSON(object)
      }
    },

    Role: {
      name: 'Role',
      hasRoles: true,
      hasAttribute: true,
      hasNumber: true,
      hasReadonly: true,
      hasWrapping: true,
      builder: () => {
        const number = parseInt($number.val())
        const role = $roles.val()
        const attributes = $attributes.val()
        const readonly = $readonly.prop('checked')
        const group = parseInt($group.val())
        const order = parseInt($order.val())
        const disableAutopopulate = $disableAutopopulate.prop('checked')


        const object = {
          type: 'Role',
          role,
          number,
          attributes
        }

        if (readonly)
          object.readonly = true

        if (disableAutopopulate)
          object.disableAutopopulate = true

        if (group > 0) {
          object.group = group
          object.order = order
        }

        setJSON(object)
      }
    },

    Assignment: {
      name: 'Assignment',
      hasRoles: true,
      hasAssignment: true,
      hasNumber: true,
      builder: () => {
        const number = parseInt($number.val())
        const role = $roles.val()
        const assignment = $assignments.val()

        const object = {
          type: 'Assignment',
          role,
          number,
          assignment
        }

        setJSON(object)
      }
    }
  }

  const roles = [

    {
      name: 'Seller'
    },

    {
      name: 'SellerPowerOfAttorney'
    },

    {
      name: 'SellerLawyer'
    },

    {
      name: 'Landlord'
    },

    {
      name: 'LandlordPowerOfAttorney'
    },

    {
      name: 'Buyer'
    },

    {
      name: 'BuyerLawyer'
    },

    {
      name: 'BuyerPowerOfAttorney'
    },

    {
      name: 'Tenant'
    },

    {
      name: 'TenantPowerOfAttorney'
    },

    {
      name: 'Title'
    },

    {
      name: 'BuyerAgent'
    },

    {
      name: 'CoBuyerAgent'
    },

    {
      name: 'SellerAgent'
    },

    {
      name: 'CoSellerAgent'
    },

    {
      name: 'PrimaryAgent'
    },

    {
      name: 'ExternalBuyerAgent'
    },

    {
      name: 'InternalBuyerAgent'
    },
  ]


  const attributes = [
    {
      name: 'Legal Full Name',
      attr: 'legal_full_name'
    },

    {
      name: 'Email',
      attr: 'email'
    },

    {
      name: 'Phone',
      attr: 'phone_number'
    },

    {
      name: 'Current Address (Full)',
      attr: 'current_address.full'
    },

    {
      name: 'Current Address (Line 1)',
      attr: 'current_address.line1'
    },

    {
      name: 'Current Address (Line 2)',
      attr: 'current_address.line2'
    },

    {
      name: 'Future Address (Full)',
      attr: 'future_address.full'
    },

    {
      name: 'Future Address (Line 1)',
      attr: 'future_address.line'
    },

    {
      name: 'Future Address (Line 2)',
      attr: 'future_address.line2'
    },

    {
      name: 'Company/Trust',
      attr: 'company_title'
    },

    {
      name: '(MLS) Agent MLS ID',
      attr: 'agent.mlsid'
    },

    {
      name: 'Office Email',
      attr: 'office_email'
    },

    {
      name: '(MLS) Office Email',
      attr: 'agent.office.email'
    },

    {
      name: 'Office Fax',
      attr: 'office_fax'
    },

    {
      name: '(MLS) Office Fax',
      attr: 'agent.office.fax'
    },

    {
      name: 'Office Address (Full)',
      attr: 'office_address.full'
    },

    {
      name: 'Office Address (Line 1)',
      attr: 'office_address.line1'
    },

    {
      name: 'Office Address (Line 2)',
      attr: 'office_address.line2'
    },

    {
      name: '(MLS) Office Address (Line 1)',
      attr: 'agent.office.address'
    },

    {
      name: '(MLS) Office Address (Line 2)',
      attr: 'agent.office.address_line2'
    },

    {
      name: 'Office Address (City)',
      attr: 'office_address.city'
    },

    {
      name: '(MLS) Office Address (City)',
      attr: 'agent.office.city'
    },

    {
      name: 'Office Address (Postal Code)',
      attr: 'office_address.postcode'
    },

    {
      name: '(MLS) Office Address (Postal Code)',
      attr: 'agent.office.postal_code'
    },

    {
      name: 'Office Address (State)',
      attr: 'office_address.state'
    },

    {
      name: '(MLS) Office Address (State)',
      attr: 'agent.office.state'
    },

    {
      name: '(MLS) Office MLS ID',
      attr: 'agent.office.mls_id'
    },

    {
      name: '(MLS) Office License Number',
      attr: 'agent.office.license_number'
    },

    {
      name: '(MLS) Office Name',
      attr: 'agent.office.name'
    },

    {
      name: 'Office Phone',
      attr: 'office_phone'
    },

    {
      name: '(MLS) Office Phone',
      attr: 'agent.office.phone'
    }
  ]

  $roles.html(Object.values(roles).map(role => `<option>${role.name}</option>`).join(''))

  $types.html(Object.values(types).map(type => `
    <label>
      <input
        type="radio"
        name="type"
        value="${type.name}"
      />

      ${type.name}
    </label>
  `).join(''))

  $attributes.html(Object.values(attributes).map(a => `<option value="${a.attr}">${a.name}</option>`).join(''))

  $assignments.html(assignments.map(a => `<option>${a}</option>`).join(''))

  $contexts.html(contexts.map(a => `
    <label>
      <input
        type="radio"
        name="context"
        value="${a}"
      />

      ${a}
    </label>
  `).join('<br>'))

  const change = () => {
    $roles.hide()
    $attributes.hide()
    $numberContainer.hide()
    $assignments.hide()
    $contexts.hide()
    $readonlyContainer.hide()
    $wrappings.hide()
    $disableAutopopulateContainer.hide()
    $formatContainer.hide()


    const selected = $types.find(':checked').val()
    if (!selected)
      return

    const type = types[selected]

    if (type.hasAttribute)
      $attributes.show()

    if (type.hasRoles)
      $roles.show()

    if (type.hasNumber)
      $numberContainer.show()

    if (type.hasAssignment)
      $assignments.show()

    if (type.hasContexts)
      $contexts.show()

    if (type.hasWrapping)
      $wrappings.show()

    if (type.hasReadonly)
      $readonlyContainer.show()

    if (type.hasAutopopulation)
      $disableAutopopulateContainer.show()

    if (type.hasFormat)
      $formatContainer.show()

    type.builder()
  }

  const setJSON = object => {
    $result.html(JSON.stringify(object, 4, 4))
  }

  $types.find('input').on('change', change)
  $roles.on('change', change)
  $attributes.on('change', change)
  $number.on('change', change)
  $assignments.on('change', change)
  $contexts.on('change', change)
  $readonly.on('change', change)
  $group.on('change', change)
  $order.on('change', change)
  $disableAutopopulate.on('change', change)
  $format.on('keyup', change)

  change()

  $result.click(() => {
    $result.select()
  })
</script>