JSFiddle - React, Tailwind, and code Playground

by mariob316

HTML

<div id="monitorList">
                
            </div>

CSS

.listHolder{border:2px solid white;margin-right: 10px;background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #D9DBDE 100%);box-shadow: 3px 3px 3px #888888;height:100px;width:380px;margin-top:10px;display:inline-block}

.listHolder span{display:block;}

.imgHolder{background-color:white;width:90px;height:90px;float:left;margin-left:10px;position:relative;top:5px;}


.infoHolder{float:left;margin-left:50px;position:relative;top:5px;}
.listAstatus{margin-top:10px;}
.listName{font-weight:bold}
.listAlarm{color:grey;font-size:15px;}
.listStatus{margin-top:5px; color:rgb(0,160,251);font-weight:bold;}

.listOk{color:rgb(0,160,251);}
.listError{color:rgb(182,182,182)}
.listWarning{color:rgb(255,115,0)}
.listAlert{color:red;}

.sensorError{border:thin solid rgb(182,182,182)}
.sensorAlert{border:thin solid red}
.sensorWarning{border:thin solid rgb(255,115,0)}
.sensorOk{border:thin solid rgb(0,160,251);}

JavaScript

var data = {
    "d": [{
        "machineTrainid": 30,
        "machineTrainname": "test machine 1",
        "lastAlarm": "Last Alarm : 08/03/2012 at 16:19",
        "laststatus": "[AL]"},
    {
        "machineTrainid": 32,
        "machineTrainname": "test 1",
        "lastAlarm": "null",
        "laststatus": "[OK]"},
    {
        "machineTrainid": 40,
        "machineTrainname": "sensorTesting",
        "lastAlarm": "Last Alarm : 09/03/2012 at 17:42",
        "laststatus": "[WA]"},
    {
        "machineTrainid": 43,
        "machineTrainname": "machine 43",
        "lastAlarm": "null",
        "laststatus": "[OK]"},
    {
        "machineTrainid": 56,
        "machineTrainname": "SomeMachine",
        "lastAlarm": "null",
        "laststatus": "[OK]"},
    {
        "machineTrainid": 61,
        "machineTrainname": "GearTurbineTest",
        "lastAlarm": "null",
        "laststatus": "[SF]"}]
};

createMonitorList();

function createMonitorList() {
    var datas = data.d;
    var listHTML = '';
    var val = '';
    var name = '';
    var id = '';
    var lastStatus = '';
    var lastAlarm = '';
    var statusClass = '';
    var statusBorder = '';
    for (var i in datas) {
        val = datas[i];
        id = val.machineTrainid;
        name = val.machineTrainname;
        lastAlarm = val.lastAlarm;
        lastStatus = val.laststatus;

        switch (lastStatus) {
        case "[OK]":
            statusClass = 'listOk';
            lastStatus = "Ok";
            statusBorder = "sensorOk";
            break;
        case "[WA]":
            statusClass = 'listWarning';
            lastStatus = "Warning";
            statusBorder = "sensorWarning";
            break;
        case "[AL]":
            statusClass = 'listAlert';
            lastStatus = "Alert";
            statusBorder = "sensorAlert";
            break;
        case "[SF]":
            statusClass = 'listError';
            lastStatus = "Error";
            statusBorder = "sensorError";
   ...