JSFiddle - React, Tailwind, and code Playground

by willtx

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap.min.js"></script>
<div class="container">
  <tabset>
       <tab heading="Upload File">
            <p>Tab 1 content</p>
      </tab>
      <tab heading="Data Maintenance">
          Tab 2 content
          <div ng-controller="PipelineController">
             <div id="mapFilter" class="panel panel-default">
                <div class="panel-heading text-right">
                    <div class="input-group">
                        <input type="text" class="form-control" ng-model="pipelineGrid.filterOptions.filterText" placeholder="enter filter" />
                        <span class="input-group-addon"><span class="glyphicon glyphicon-filter"></span></span>
                    </div>
                </div>
                <div class="panel-body">
                    <div class="rectangle grid-style" data-ng-grid="pipelineGrid">
                    </div>
                </div>
             </div>
        </div>
        </tab>
  </tabset>
</div>

JavaScript

var appRoot = angular.module('main', ['ngRoute', 'ngGrid', 'ngResource', 'ngAnimate', 'ngSanitize', 'ui.bootstrap']); 

function closeAlert() {
    $scope.mainAlert.isShown = false;
};

appRoot
    .config(['$routeProvider', function ($routeProvider) {
     $routeProvider
            .when('/home', {
                templateUrl: '/home/main',
                controller: 'MainController'
            })
            .when('/pipeline', {
                templateUrl: '/home/pipeline',
                controller: 'PipelineController'
            })
      }])
      .controller('RootController', ['$scope', '$route', '$routeParams', '$location', function ($scope, $route, $routeParams, $location) {
        $scope.$on('$routeChangeSuccess', function (e, current, previous) {
            $scope.activeViewPath = $location.path();
            $scope.mainAlert = {
                isShown: false
            };
        });
    }
    ]);

appRoot.controller('PipelineController', ["$scope", "$location", "$resource", function ($scope, $location, $resource) {

    //move to services
    var pipelineResource = $resource('/api/pipeline', {}, { update: { method: 'PUT' } });
    $scope.pipelineList = [
       {Id=1, Area="Americas", Region="North America", LegalName="Legal Name 1", 
                        Address="2651 North US HIghway 83", Brand="Brand 1", ProjectType="New Development", ContractType = "Franchised",
                        City="kn", State="tx", Country="usa",PostalCode="78834", Status = ProjectStatus.UnderConstruction},
            {Id=2, Area="Europe", Region="Eastern Europe", LegalName="Legal Name 2", 
                        Address="26-28 Agron Street", Brand="Brand 2", ProjectType="Adaptive Re-use", ContractType = "Company Managed w/o License",
                        City="Jerusalem", State="", Country="Israel",PostalCode="9419008", Status = ProjectStatus.UnderConstruction}
    ];

    $scope.startPipeLineAddressCheck = function (address) {
        alert('in...