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">
<div ng-app>
    <div ng-controller='tester'>
        <textarea ng-model='rawData'>
        </textarea>
        <input type='button' value='Check' ng-click='checkData()' />
        <input type='button' value='Clear' ng-click='clearRaw()' />
        <input type='button' value='Export' ng-click='exportData()' />
        Missing Companies
        <ul ng-repeat='company in missingCompanies'>
            <li class='noEmail'>{{company}}</li>
        </ul>
        Current Companies
        <table>
            <thead>
                <th>Company</th>
                <th>Percent</th>
                <th>Snaps</th>
                <th>Mounts</th>
                <th>Replication</th>
                <th>Notes</th>
                <th>Edit</th>
            </thead>                
            <tbody>
            <tr class='gradient' ng-repeat='company in companies'>
                <td>{{company.id}}</td>
                <td ng-class='company.percentColor'>{{company.percent}}%</td>
                <td>{{company.fails.snap}}</td>
                <td>{{company.fails.mount}}</td>                
                <td>{{company.fails.rep}}</td>                
                <td>{{company.fails.notes}}</td>
                <td><span ng-click='edit(company)' title='edit' class='icon-edit'></span></td>                
            </tr>
            </tbody>
        </table>
        </div>
                       <textarea>
                           {{companies | json}}
                       </textarea>
    </div>
</div>

CSS

.noEmail{
    list-style: none;
    color: red;   
}
.noEmail:after{
    content:' - No Email';
}
.red{
    text-align: right;
    width: 2.25em;
    color: red;
}
.green{
    text-align: right;
    width: 2.25em;
    color: green;   
}
input[type='checkbox']{
 display: none;
}
input[type='checkbox']:checked+label:before{
    content: '\25BC';
    content: '\25BD';
}
input[type='text']{
    text-align: right;
    width: 3em;
}
label:before{        
    content: '\25B7';
    content: '\25B6';
}
.gradient{
    background: -moz-linear-gradient(45deg, white, lightgrey);
    border: 1px solid black;
}
td{
 border: 1px solid black;  
}

JavaScript

//Work Tool
//Angular controller


function tester($window, $scope) {
    var companyRegEx = /[a-z]*[0-9]*-/i,
        percentRegEx = /[0-9]+(?=%)/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.checkData = function() {
        var companyList = ["BACKUP01", "BACKUP02", "ABS", "AICF1", "AICF2", "ANI", "AWC", "BEMAS", "BTI", "CCAC", "CEC", "COHVAC", "CP", "CSP", "CVL", "DBI", "DBPS", "DSC", "EE", "EIS", "ENC", "ENT", "FI", "FPC", "GGPC", "GTI", "HAS", "HBC", "HC", "HISC", "HLF", "IDE", "IS", "ISHQ", "MFH", "NEHA", "PCGI", "PEPC", "PI", "PNA", "RCS", "RLF", "SCTC", "TE", "TMG", "TRKM", "WSS", "YAC"],
            data = $scope.rawData.split('\n'),
            companies = [];

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

            //determine if 
            if (id) {
                id = id[0].replace('-', '').toUpperCase();
                var index = companyList.indexOf(id);

                //Check is the id is in the list of companies
                if (index >= 0) {
                    companyList.splice(index, 1);
                } else {
                    alert('company doesn\'t exist: ' + id);
                }

                //Parse the line for the data
                var fails = {
                    snap: line.match(snapsRegEx),
                    mount: line.match(mountRegEx),
                    vit: line.match(vitRegEx),
                    sql: line.match(sqlRegEx),
                    rep: line.match(repRegEx),
                    notes: line.match(notesRegEx)
                };
                percent = line.match(percentRegEx);

                //Pull the string out of the array if is not null
                for (x in...