JSFiddle - React, Tailwind, and code Playground

by mckennatim

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<body ng-app="SyncApp">
<div ng-controller="SyncCtrl">    
 <br>
<table>
	<caption><b>sync clients with server</b> M=(C\(P\S))U(S\(P\C)) <br>
	<small>(B\A) = the set of elements in B, but not in A.</small></caption>
	<thead>
		<tr>
			<th width="15" valign="top">P <br>prior on client</th>
			<th width="15" valign="top">C <br>current on client</th>
			<th width="15" valign="top">S <br>server updated by other clients </th>
			<th width="15" valign="top">M <br>merged client updates</th>
			<th width="15" valign="top">M-obj <br>merged-obj client updates</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td><ul id="thePList">
			    <li ng-repeat="pi in p">{{pi}} </li>
			</ul></td>			
			<td><ul id="theCList">
			    <li ng-repeat="ci in c">{{ci}} </li>
			</ul></td>			
			<td><ul id="theSList">
			    <li ng-repeat="si in s">{{si}} </li>
			</ul></td>			
			<td><ul id="theMList">
			    <li ng-repeat="mi in m">{{mi}} </li>
			</ul></td>			
			<td><ul id="theMOList">
			    <li ng-repeat="moi in mo">{{moi.product}} </li>
			</ul></td>
		</tr>
	</tbody>
</table>
{{op}} <br> 
{{oc}} <br> 
{{os}} <br> 
{{mo}} <br> 
<h4>refs</h4>
<a href="http://www.cs.umd.edu/class/fall2005/cmsc250/exam/ex1/node5.html">http://www.cs.umd.edu/class/fall2005/cmsc250/exam/ex1/node5.html</a><br>
<a href="http://en.wikipedia.org/wiki/Complement_(set_theory)#Relative_complement">http://en.wikipedia.org/wiki/Complement_(set_theory)#Relative_complement</a><br>
<a href="http://stackoverflow.com/questions/18383636/compare-2-arrays-of-objects-with-underscore-to-find-the-differnce">http://stackoverflow.com/questions/18383636/compare-2-arrays-of-objects-with-underscore-to-find-the-differnce by Jonathan Naguin</a><br>
<a href="http://stackoverflow.com/questions/7146217/merge-2-arrays-of-objects">http://stackoverflow.com/questions/7146217/merge-2-arrays-of-objects by Guya</a>
</div>
</body>

JavaScript

var app = angular.module("SyncApp", []);

app.controller("SyncCtrl", function($scope, SyncService){
    var c = $scope.c = SyncService.c() ;
    var s = $scope.s = SyncService.s() ;
    var p = $scope.p = SyncService.p() ;
    var m = $scope.m = SyncService.merge(p,c,s);
    console.log(m)
    var oc = $scope.oc = SyncService.a2o(c)
    var os = $scope.os = SyncService.a2o(s)
    var op = $scope.op = SyncService.a2o(p)
    var mo = $scope.mo = SyncService.mergeObjs(op, oc, os);
    console.log(JSON.stringify(mo));
    console.log(JSON.stringify(SyncService.difference(op, oc)))
});

app.factory("SyncService", function(){
    return {
        c: function(){
            return ['anise', 
            'apples',
            'bananas',
            'cauliflower',
            'fennel',
            'frogs legs',
            ]
        },
        p: function(){
            return  ['apples',
                'bananas',
                'cantelope',
                'dog food',
                'fennel'
                ]
        },
        s: function(){
            return ['bananas',
            'cantelope',
            'daipers',
            'dog food',
            'fish sticks',
            'gerkins'
            ]
        },
        merge: function(p,c,s){
            // (C\(P\S))U(S\(P\C))
            var ps = _.difference(p,s);
            var pc = _.difference(p,c);
            var cps = _.difference(c,ps);
            console.log(JSON.stringify(pc));
            var spc = _.difference(s,pc);
            var u = _.union(cps, spc);
            return u
        },
        a2o: function(arr){
            var obj = _.map(arr, function(x){
                return {product: x}
            })
            return obj
        },
        difference: function(array){
            var rest = Array.prototype.concat.apply(Array.prototype, Array.prototype.slice.call(arguments, 1));
            var containsEquals = function(obj, target) {
                if (obj == null) return false;
       ...