JSFiddle - React, Tailwind, and code Playground

by andreas_karz

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js"></script>
<div id="test" ng-controller="CountCtrl as vm">
  <h2 ng-click="vm.addHost()">
    Monitoring Board 
    <span class="small">({{vm.totalErrors}})</span>
  </h2>
  <counter ng-repeat="host in vm.data | orderBy: 'host'" host="{{host.host}}" count="host.error"></counter>
  <hr />
  <input type="text" ng-model="vm.data[0].host">
  <pre>{{vm.data|json}}</pre>
  <script type="text/ng-template" id="test.html">
    <div class="widget">
      <input type="text" class="label" ng-model="counter.host">
      <input type="text" class="error" ng-model="counter.count"> 
      <button type="button" ng-click="counter.decrement(); ">-</button>
      <button type="button" ng-click="counter.increment();">+</button>
    </div>
  </script>
</div>

CSS

.widget{
  display: inline-block;
  border:1px solid silver;
  width:200px;
  height:110px;
  margin-right:20px;
  margin-top:20px;
  background-color:#383737;
  color:#FFF;
}

.widget input[type="text"]{
  background-color:#383737;
  color:#FFF;
  border:0;
}

.widget input[type="text"].label{
  text-align: center;
  width: 186px;
  padding:7px;
  font-size: 1.2rem;
  border-bottom:1px dashed silver;
  margin-bottom: 20px;
}

.widget input[type="text"].error{
  width: 30px;
  border:1px solid grey;
  margin-left: 20px;
}

span.small{
  font-size: 1rem;
}

pre{
  font-size:10px;
}

JavaScript

angular
	.module('Todo', [])
  .controller('CountCtrl', function CountCtrl($scope, $interval, $filter) {
		this.data = [];
  	this.totalErrors = 0;

		$scope.$watch(angular.bind(this, function () {
      return this;
    }), function (newVal, oldVal) {
        newVal.totalErrors = 0;
        for (x in newVal.data) {
          newVal.totalErrors += parseInt(newVal.data[x].error);
        }
    }, true);
    
   var getData = function(CountCtrl){
	 		CountCtrl.data = window.data;
			var min = 1;
			var max = 20;
			var x = Math.floor(Math.random() * (max - min)) + min;
    	this.data[0].error=x;
    }
    getData(this);
  	$interval(getData, 10000, 0, true, this);
    
    this.addHost = function(){
    	var newHost = {
      	'host': 'ux7807',
        'error': 3
      }
      this.data.push(newHost);
    }
    
	})
	.component('counter', {
    isolate: false,
    bindings: {
      count: '=', /* two way binding */
      host: '@' /* one way binding */
    },
    controller: function ($filter) {
      this.data =  $filter('filter')(window.data, {host:this.host});
      function increment() {
        this.count++;
      }
      function decrement() {
        this.count--;
      }
      this.increment = increment;
      this.decrement = decrement;
    },
    templateUrl: 'test.html'
  })
;

window.data = [
  {
    'host': 'ux7800',
    'error':0
  },
  {
    'host': 'ux7809',
    'replicator':'ux7800',
    'error': 2
  }
];

angular.bootstrap(document.getElementById("test"), ['Todo']);