Integration mapping suggestion

A small web based program to show integration mappings (prototype)

by Niklas Ottosson

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table>
  <th>From</th><th>Transform</th><th>To</th>
  <tr>
    <td>
      <select data-bind="options: fromOptions, value: currentFrom"></select>
    </td>
    <td><textarea col="3" row="3" data-bind="value: currentTransform"></textarea></td>
    <td>
      <select data-bind="options: toOptions, value: currentTo"></select>
    </td>
    <td>
      <button data-bind="click: addMapping">Add</button>
    </td>    
  </tr>
  <!-- ko foreach: mappings -->
  <tr><td data-bind="text: $data.from"></td><td data-bind="text: $data.transform"></td><td data-bind="text: $data.to"></td></tr>   <!-- /ko -->
</table>

JavaScript

var model = null;

var Mapping = function(){
	var self = this;

	self.from 			= ko.observable();
  self.to					= ko.observable();
  self.transform 	= ko.observable();
  
}



function ViewModel(){
	var self = this;

  self.currentFrom			= ko.observable();
  self.currentTo				= ko.observable();
  self.currentTransform	= ko.observable();
  
  self.mappings			= ko.observableArray([]);
  self.fromOptions 	= ko.observableArray([]);
  self.toOptions 		= ko.observableArray([]);
  
  self.init	= function(){

    var fromXML = "<rss version='2.0'><channel><title>RSS Title</title></channel></rss>";
    var toXML = "<rss version='2.0'><channel><title>RSS Title</title></channel></rss>";
    
    var fromDoc = $.parseXML(fromXML);
    var toDoc = $.parseXML(toXML);

    $(fromDoc).find("*").each(function(){
    	self.fromOptions.push($(this).prop("tagName"));
    });
    
    $(toDoc).find("*").each(function(){
    	self.toOptions.push($(this).prop("tagName"));
    });
    
  }
  
  self.addMapping 	= function(){
		var mapping 	= new Mapping();
  
  	mapping.from 			= self.currentFrom();
  	mapping.to				= self.currentTo();
  	mapping.transform = self.currentTransform();
  
  	self.mappings.push(mapping);
	}
  
}

$(document).ready(function() {

    // INIT KNOCKOUTJS
    model = new ViewModel();
		ko.applyBindings(model);

	  // INIT STATIC DATA
	  model.init();

});