JSFiddle - React, Tailwind, and code Playground

by oscard

HTML

<div class="content" id="wrapper-app-test" >
	<div class="row">
		<br>
		<span>
			Serial Number : {{serialNumber.value}} &nbsp;|&nbsp; Software Version : {{softwareVersion.value}} &nbsp;|&nbsp;GUI After Sales Version : 1.0
		</span>
		<input type="button" value="Logout" class="test-btn pull-right" ng-click="testLogout()">
		<span class="pull-right">? Procedure of test&nbsp;&nbsp;&nbsp;&nbsp;</span>
		<br><br><br><br>
	</div>
	<form ng-submit="generateReport()">
		<div class="row">
		<div class="small-6 columns">
			<span class="cls_led">Other Device Test<br><br></span>
			<ul>
				<li ng-repeat="item in itList" ng-model="itList">
					<span><input type="button" value="Test" ng-click="launchTest($index, item.statePath)"></span>
					<span class="item_line{{ item.name=='Test LEDs' ?'_led':''}}" >{{item.name}}</span>
					
					<span class='status-msg test_{{item.testStatus | lowercase }}'>
						{{item.testStatus}}{{ item.testStatus =='Processing' ? '...' :''}}
					</span>
				</li>
			</ul>
		</div>
		<div class="small-6 columns">
			<span class="cls_led">{{leds.name}} <br><br></span>
			<span class="cls_led right" ><input type="text" ng-model="ledTime" ng-keypres="setLedTime()" name=""></span>
			<table>
				<tr>
					<th ng-repeat="col in leds.cols">{{col.label}}</th>
				</tr>
				<tr ng-repeat="r in leds.rows">
					<td ng-repeat="c in r.cols track by $index">
						<span ng-show="c.type=='txt'">{{c.text}}</span> 
						<label for="{{c.id}}" ng-show="c.type=='checkbox' && c.state==true || c.state==false">
							<input type="checkbox" id="{{c.id}}" ng-model="c.state" class="hide-checkbox" ng-change="changeLedtestState()" style="display:none">
							<span ng-show="c.state" class="check-mark">&#10004;</span>
	              			<span ng-show="!c.state" class="uncheck-mark">&#10008;</span>
	              		</label>
					</td>
				</tr>
			</table>
			<span><input type="button" ng-click="ledsTest()" value="Test"></span>
			<span class='status-msg...

CSS

/*** App Test css *****/
#wrapper-app-test ul{margin :10px 0; padding:0;}
#wrapper-app-test  ul > li{
  padding-left:10px;
  height: 40px;
  line-height:40px;
  list-style: none;
  border:1px solid #ccc;
  border-bottom:0;
  padding: 0 0 0 10px;
}
#wrapper-app-test li:nth-child(even){
  background: #eee;
}
#wrapper-app-test li:nth-child(odd){
  background: #FFF;
}
#wrapper-app-test li:last-child{
  border-bottom:1px solid #ccc;
}

#wrapper-app-test .item_line{
  display: inline-block;
}

#wrapper-app-test .item_line_led{
  display: inline-block;
  width:29.43%;
  width:20.43%;
}

#wrapper-app-test .status-msg {
    border-radius: 3px;
    display: inline-block;
    float: right;
    height: 20px;
    line-height: 20px;
    margin: 9px;
    padding: 0 12px;
    text-align: center;
    width: 101px;
    font-size: 13px;
}

#wrapper-app-test .test_ready{ background:#0095dd;}
#wrapper-app-test .test_processing{ background:#FFA500;}
#wrapper-app-test .test_pass{ background:#32CD32;}
#wrapper-app-test .test_fail{ background:#F00;}
#wrapper-app-test .test_error{ background:#F00;}

#wrapper-app-test .checkbox-label-first {/*display:inline-block;*/ width: 170px; height: 24px;}
#wrapper-app-test .checkbox-label {display:inline-block; width:83px}

#wrapper-app-test .test-btn input[type=button]{
  border-radius:3px;
  display:inline-block;
  height: 20px;
  line-height:20px;
  padding:0 12px;
  background:#ccc;
  border:0;
}

#wrapper-app-test .check-mark{
    color: #58d37b;
    font-size: 22px;
    transition: all 0.5s ease 0.1s;
}

#wrapper-app-test .uncheck-mark{
    color: #db1536; 
    font-size: 22px;
    transition: all 0.5s ease 0.1s;
}

#wrapper-app-test .hide-checkbox{
    display: none;
}

JavaScript

/*
 Copyright : (C) 2014 Sagemcom - URD2

 This software and source file is the property of Sagemcom
 and may not be copied or used without prior written consent.
 */

'use strict';
/* jshint -W117 */
/**
 *
 * @author dayvison.lemos
 */
sboxApp.controller('DiagController', function($scope, $document,MaintenanceReset) {

	var loggedTmp = false;                                                    
	var login = function() {                                                  
        if ($.xmo.loggedin()) {                                           
            $.xmo.logout(true);                                       
        }                                                                 

        $.xmo.login('internal', '');                                      
        loggedTmp = true;                                                 
	};                                                                        
	                                                                          
	$scope.testLogout = function() {                                                 
        if (loggedTmp) {                                                  
            loggedTmp = false;                                        
            $.xmo.logout(true);                                       
        }                                                                 
	};      

	login();

	var statusPath  = {"Status":"Device/UserInterface/ISPName"};
	var testDeviceInfoPath = {"serialNumber":"Device/DeviceInfo/SerialNumber", "softwareVersion":"Device/DeviceInfo/SoftwareVersion"};

	$scope.itList = [
		{"name":"Test ENET1", "statePath":'Device/Managers/InterfaceDiagnostic/Tests/Test[Alias="ETH0"]/State', "statusPath":'Device/Managers/InterfaceDiagnostic/Tests/Test[Alias="ETH0"]/Status',"testStatus":"Ready"},
		{"name":"Test ENET2", "statePath":'Device/Managers/InterfaceDiagnostic/Tests/Test[Alias="ETH1"]/State',...