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>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css">
<div id='body' ng-app>
    <div class='center' ng-controller='replay'>
        <div id='addData'>
            <h1>Drag &amp; Drop</h1>
            <div id='drop_zone'>
                <textarea id='rawData' ng-model='rawData'></textarea>
                <button class='btn' ng-click='clearRaw()'>Clear</button>
            </div>
            <output id="list"></output>
            <button class='btn btn-success' ng-click='addCompanies()'><i class='icon-plus'></i> Add</button>
            <button class='btn btn-danger' ng-click='cancelAdd()'><i class='icon-remove'></i> Cancel</button>
        </div>
        
        <button class='btn' ng-click='addData()'><i class='icon-plus'></i> Add Data</button>
        <button class='btn' ng-click='saveData()'><i class='icon-save'></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>
        ...

CSS

body{
 background: grey;   
}

#drop_zone{
    height: 70%;
    font: 20px 'Calibri';
    border: 2px dashed #999;
    margin: 15px 5px;
    text-align: center;
} 
textarea{
 resize: none;   
}
#rawData{
    margin: 5px;
    width: 95%;   
    height: 80%;
}
#body{
    background: white;
    width: 800px;
    margin: 10px auto;
    box-shadow: 5px 5px 25px #333;
    border: 3px solid #eee;
}
#companyEditor, #addData{
    display: hidden;
    position: fixed;
    z-index: 5;
    width: 390px;
    height: 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 drag and drop/ local storage
//Angular controller
//Function to determine which .CSV and return correct info

function parseCSV(rawData) {
    var companies = [];
    var lines = rawData.split('\n');
    if (lines[0].match(/Companies/)) {
        for (var i = 1; i < lines.length; i++) {
            cols = lines[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]
            });
        }
        return companies;
    } else {
        lines[12] = lines[12].concat(lines.splice(13, 2));
        for (var i = 0; i < lines.length; i++) {
            lines[i] = lines[i].split(',');
        }
        var serverCount = 0,
            snaps = 0,
            snapFails = 0,
            vits = 0,
            mounts = 0,
            sqls = 0,
            rep = 0;
        for (var i = 13; lines[i][1].length > 1; i++) {
            line = lines[i];
            //parseData
            snaps += parseInt(line[2]);
            snapFails += parseInt(line[3]);
            vits += parseInt(line[5]);
            mounts += parseInt(line[7]);
            sqls += parseInt(line[9]);
            rep += parseInt(line[13]);
            //Count how many server
            serverCount++;
        }
        var id = lines[3][0].match(/[\w]+$/)[0];
        var percent = Math.round(snaps / (24 * serverCount) * 100);
        company = {
            id: id,
            percent: percent,
            percentColor: percent < 90 ? 'red' : 'green',
            fails: {
                snap: snapFails,
                mount: mounts,
                rep: rep
            },
            notes: ''
        };
        return company;
    }

}



function...