JSFiddle - React, Tailwind, and code Playground

by PiereDome

HTML

<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()' />
        Missing Companies
        <ul ng-repeat='company in missingCompanies'>
            <li class='noEmail'>{{company}}</li>
        </ul>
        Current Companies
            <div class='gradient' ng-repeat='company in companies'>
            <input id='{{company.id}}' type='checkbox' ng-model='checked' />
                <label for='{{company.id}}'>{{company.id}}: <span ng-class='company.color'>{{company.percent}}%</span></label>
           <table ng-show='checked'>
               <tbody>
                   <tr><td>Snaps: {{company.fails.snap}}</td>
                   <td>Mounts: {{company.fails.mount}}</td>
                   <td>VITs: {{company.fails.vit}}</td>
                   <td>SQLs: {{company.fails.sql}}</td>
                       <td>Note: {{company.fails.note}}</td></tr>
               </tbody>
           </table>
        </div>
    </div>
</div>

CSS

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

JavaScript

//Work Tool
//Angular controller


function tester($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('-', '');
                var index = companyList.indexOf(id.toUpperCase());

                //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),
                    note: line.match(notesRegEx)
                };
                percent = line.match(percentRegEx);

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