JSFiddle - React, Tailwind, and code Playground

by PiereDome

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.4/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id='body' ng-app>
    <div class='center' ng-controller='replay'>
        <textarea id='rawData' ng-model='rawData'>
        </textarea>
        <button class='btn' id='check' ng-click='checkData()'><i class='icon-ok'></i> Check</button>
        <button class='btn' ng-click='clearRaw()'><i class='icon-trash'></i> Clear</button>
        <button class='btn' ng-click='saveData()'><i class='icon-file'></i> Save</button>
        <div id='companyMissing' class='alert'>
            <button class='close'>&times;</button>
            <h1>Missing Companies</h1>
            <ul ng-repeat='company in missingCompanies'>
                <li>{{company}}</li>
            </ul>
        </div>
        
        <table id='companyList' class='table table-condensed'>
            <thead>
                <th><a href='' ng-click="predicate = 'id'; reverse = !reverse">Company</a></th>
                <th>
                    <a href='' ng-click="predicate = 'percent'; reverse = !reverse">Percent</a>
                </th>
                <th>
                    <a href='' ng-click="predicate = 'fails.snap'; reverse = !reverse">Snaps</a>
                </th>
                <th>
                    <a href='' ng-click="predicate = 'fails.mount'; reverse = !reverse">Mounts</a>
                </th>
                <th>
                    <a href='' ng-click="predicate = 'fails.rep'; reverse = !reverse">Replication</a>
                </th>
                <th>Notes</th>
            </thead>                
            <tbody>
                <tr class='gradient' ng-repeat='company in companies | orderBy:predicate:reverse'>
                    <td><a href='#' ng-click='edit(company)'>{{company.id}}</a></td>
                    <td ng-class='company.percentColor'>{{company.percent}}%</td>
 ...

CSS

body{
 background: grey;   
}
#body{
    background: white;
    width: 800px;
    margin: 10px auto;
    box-shadow: 5px 5px 25px #333;
    border: 3px solid #eee;
}
#companyEditor:before{
    display: block;
    position: fixed;
    //content: '';
    top: -100%;
    left: -100%;
    width: 300%;
    height: 300%;
    background: red;
    opacity: 0.5;
}
#companyEditor{
    display: hidden;
    position: fixed;
    width: 400px;
    top: 100px;
    left: 25%;
    background: #ffeed0;
    background: white;
    border-radius: 25px;
    box-shadow: 1px 3px 15px rgb(100,100,100);
    padding: 20px; 
}
.red{
    text-align: right;
    width: 2.25em;
    color: red;
}
.green{
    text-align: right;
    width: 2.25em;
    color: green;   
}
.short{
    padding: 0px;
    width: 10px;
}
.center{
    margin: 0 auto;
}
a:hover{
 text-decoration: underline;   
}

JavaScript

//Work -With localStorage
//Angular controller

function replay($scope) {
    var index,
        companyRegEx = /[a-z]*[0-9]*-/i,
        percentRegEx = /[0-9]{1,3}(?=%)/i,
        snapsRegEx = /[0-9]+(?= snap)/i,
        mountRegEx = /[0-9]+(?= mount)/i,
        vitRegEx = /[0-9]+(?= vit)/i,
        sqlRegEx = /[0-9]+(?= sql)/i,
        repRegEx = /[0-9]+[+]|rep [0-9]{1,}/i,
        notesRegEx = /\([^\)]+\)/i;
    
    $scope.parseCSV = function(rawData) {
        var rows = rawData.split('\n'),
            companies = [];
        for(var i = 1;i<rows.length;i++){
            cols = rows[i].split(','); 
            companies.push({                
                id: cols[0],
                percent: parseInt(cols[1]),
                percentColor: parseInt(cols[1]) < 90 ? 'red' : 'green',
                fails:{
                    snap: parseInt(cols[2]),
                    mount: parseInt(cols[3]),
                    rep: parseInt(cols[4])
                },               
                notes: cols[5]                    
            });
        }
        $scope.companies = companies;
        $scope.predicate = 'percent';
        $('#companyList').show();
        $('#rawData').hide();
        $('#check').hide();
    };

    if (localStorage.replayData) {
        $scope.parseCSV(localStorage.replayData);
    }

    $scope.checkData = function() {
        var companyList = ["BACKUP01", "BACKUP02", "ABS", "AICF1", "AICF2", "ANI", "AWC", "BEMAS", "BTI", "CCAC", "CEC", "COHVAC", "CP", "CLA", "CSP", "CVL", "DBI", "DBPS", "DSC", "EE", "EIS", "ENC", "ENT", "FI", "FPC", "GGPC", "GTI", "HAS", "HBC", "HC", "HISC", "HLF", "IDE", "IS", "ISHQ", "MFH", "MLWV", "NEHA", "PCGI", "PEPC", "PI", "PNA", "RCS", "RLF", "SCTC", "TE", "TMG", "TRKM", "WSS", "YAC"],
            data = $scope.rawData.split('\n');
        var companies = [];

        //Iterate over the data
        for (var i = 0; i < data.length; i++) {
            var line = data[i],
                id =...