AddConnection

by exe1

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
 Add Connection
  <div class="row">
    <div class="col">
       Source Port<br>
       <select id="from_port" name="from_port"></select>
    </div>
    <div class="col">
       Sink Port<br>
       <select id="to_port" name="from_port"></select>
    </div>
  </div>
  <div class="row">
    <div class="col">     
       <div id="from"></div>
    </div>
    <div class="col">
       <div id="to"></div>
    </div>
  </div>
</div>

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}
select {
  width : -webkit-fill-available;
}

#from,#to{
  display: grid;
  grid-template: auto / auto auto;
  grid-gap: 1px;
}
#from>*,#to>*{
  padding:2px 0;
  border: 0px solid black;
}

JavaScript

function drawMenu( out, key, value )
{
  if(typeof value === 'object'){
    var drop = $('<div></div>');
    $.each(value, function(k,i){
      $('<option value="'+k+'">'+k+'</option>').appendTo(drop);
    });
    out.append( '<div>'+key +'</div> <div><select id='+key+'">' + drop.html()+'</select></div>');
  }else{
      out.append('<div>'+key+'</div> <div>'+value +'</div>' );
  }
}

$(function() {
   // your page initialization code here
   // the DOM will be available here
   $.each(ResourceConfiguration.connection.port, function(key,item){
   	 $("#from_port").append('<option value="'+key+'">'+key+'</option>');
     $("#to_port").append('<option value="'+key+'">'+key+'</option>');
   });
   
   $( "#from_port" ).change(function() {
      $( "#from_port option:selected" ).each(function() {
         if( $( this ).text() != "most" ){
         	   $("#to_port").val("most").trigger("change");
         }else if( $( this ).text() == $("#to_port").val() ){
              $("#to_port").val("usb").trigger("change");
         }
         
         $("#from").empty();
         $.each(ResourceConfiguration.connection.port[$( this ).text()], function(key,item){
      	 
           if("socket" == key){
               $.each(item, function(k,i){
                  drawMenu($("#from"),k, i);
               });

           }else{
               // dropdown
               drawMenu($("#from"),key, item);
           }
      	});
    	});
  }).trigger("change");
  $( "#to_port" ).change(function() {
      $( "#to_port option:selected" ).each(function() {
         if( $( this ).text() != "most" ){
         	   $("#from_port").val("most").trigger("change");
         }else if( $( this ).text() == $("#from_port").val() ){
              $("#from_port").val("usb").trigger("change");
         }
         $("#to").empty();
         $.each(ResourceConfiguration.connection.port[$( this ).text()], function(key,item){
      	 
           if("socket" == key){
               $.each(item,...