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>
        <span><input type='checkbox' id='snap'ng-model='snapcheckbox'/><label for='snap' class='btn'>Snaps</label></span>
        <span><input type='checkbox' id='VIT' ng-model='vitcheckbox'/><label for='VIT' class='btn'>VIT</label></span>
        <span><input type='checkbox' id='mount' ng-model='mountcheckbox'/><label for='mount' class='btn'>Mounts</label></span>
        <span><input type='checkbox' id='rep' ng-model='repcheckbox'/><label for='rep' class='btn'>Replication</label></span>
        
        <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 =...

CSS

body{
 background: grey;   
}
.white{
    color: white;
}
#savedData{
    border: 5px solid white;
    position: absolute;
    border-radius: 10px;
    top: 50px;
    left: 20%;
    right: 20%;
    bottom:100px;
    background: rgba(0,0,0,0.75);
}
#savedData textarea{
    position: absolute;
    width: 80%;
    top: 30px;
    bottom: 10px;
    left: 0px;
    right: 0px;
}
#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: 50%;
    min-width: 600px;
    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;   
}

input[type='checkbox']{
 display:none;   
}
input[type='checkbox']:checked ~ label.btn{
      background-color: #e6e6e6;
background-color: #d9d9d9 9;
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
}
label.btn:hover, input[type='checkbox']:checked ~ label.btn:hover{
 background: #ddd;   
}
}

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...