State and Event Management

by Ankur Marwaha

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.5.2/redux.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux-thunk/2.3.0/redux-thunk.js"></script>
<div id="text"></div>
<button id="addParamBtn">Add Parameter</button>
<button id="addDFBtn">Add Dataflow</button>
<button id="Undo">Undo</button>
<button id="Redo">Redo</button>
<button id="Async">Async</button>
<button id="FetchParameter">FetchParameter</button>
<br><br>
<div class="container">    
  <div class="left-div" id="parameterTable1"></div>
  <div class="right-div" id="parameterTable2"></div>
  <div class="right-div" id="dataflowTable"></div>
</div>

CSS

.container
{
  text-align: center;
  padding: 10px;  
}
.left-div
{
  display: inline-block;
  max-width: 220px;
  text-align: left;
  padding: 10px;
  border-radius: 3px;
  margin: 0px;
  vertical-align: top;
}
.right-div
{
  display: inline-block;
  max-width: 220px;
  text-align: left;
  padding: 10px;
  border-radius: 3px;
  margin: 0px;
}

table.demotable {
	font-family: verdana,arial,sans-serif;
	font-size:11px;
	color:#333333;
	border-width: 1px;
	border-color: #666666;
	border-collapse: collapse;
}
table.demotable th {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #666666;
	background-color: #dedede;
}
table.demotable td {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #666666;
	background-color: #ffffff;
}

JavaScript

// start -> utils
var IdGenerator = (function(){    
    var instance;
    var id = -1;
    function init() {    
    	return {
      	nextId: function () {
          id = id + 1;
        	return id;
      	}      
    };
  };
  return {
    uniqueId: function(){
      if (instance == null) {
        instance = init();
        // constructor is hidden so that objects can't be created by new IdGenerator
        instance.constructor = null;
      }
      return instance.nextId();
    }
  };
})();


function callWebservice_GET(url, callbackFunction) {
	const xhr = new XMLHttpRequest();	
	xhr.onreadystatechange = function(e){
		if(xhr.readyState === 4 && xhr.status === 200) {
			callbackFunction(xhr.responseText);
		}
	}
	xhr.open("GET", url);
	xhr.send();
}

//var url = 'https://api.mlab.com/api/1/databases/testdatabase/collections/activities?f={%22parameters%22:1}&apiKey=LN-0rthepQPd5QQaDMQq4bBXjVpkLtSF';
//var cb = function(data){
//	console.log(data);
//}
//callWebservice_GET(url, cb);

// end - utils
var paramTableHeader = ['Name', 'Type', 'Value', 'Mode'];
var paramTableData = [
  {"name":"Force", "type": "Real", "value":12, "Mode":"In"},
  {"name":"Length", "type": "Real","value":18, "Mode":"Out"}
];	

var dfTableHeader = ['FromParameter', 'Direction', 'ToParameter'];
var dfTableData = [
  {"FromParameter":"Force", "Direction": "To", "ToParameter":"Force1"},
  {"FromParameter":"Length", "Direction": "To", "ToParameter":"Length1"}
];	

var initialState = {
  params: paramTableData,
  dfs: dfTableData
};

var getParams = function(state){
	return state.rootReducer.params;
};

var getDFs = function(state){
	return state.rootReducer.dfs;
};


function buildTable(tableHeader) {
  var table = document.createElement("table");
  table.className="demotable";
  var thead = document.createElement("thead");  
  var headRow = document.createElement("tr");  
  tableHeader.forEach(function(el) {
      var th=document.createElement("th");
     ...