EX project

ex-project.markdown

EX project

A Pen by Yaakov Shore on CodePen.

License.

index.html

<div class="container-fluid">
  <div class="row">
    <div id="devices" class="col-md-3 border border-primary rounded"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
  </div>
</div>

script.js

const data = {
	"device_groups": [{
		"id": "1",
		"name": "group 1",
		"devices": [{
			"id": 11,
			"name": "device 11",
			"active": 1
		}, {
			"id": 12,
			"name": "device 12",
			"active": 0
		}, {
			"id": 13,
			"name": "device 13",
			"active": 1
		}, {
			"id": 14,
			"name": "device 14",
			"active": 0
		}, {
			"id": 15,
			"name": "device 15",
			"active": 0
		}, {
			"id": 16,
			"name": "device 16",
			"active": 1
		}, {
			"id": 17,
			"name": "device 17",
			"active": 1
		}]

	}, {
		"id": "2",
		"name": "group 2",
		"devices": [{
			"id": 21,
			"name": "device 21",
			"active": 1
		}, {
			"id": 22,
			"name": "device 22",
			"active": 0
		}, {
			"id": 23,
			"name": "device 23",
			"active": 1
		}, {
			"id": 24,
			"name": "device 24",
			"active": 0
		}, {
			"id": 25,
			"name": "device 25",
			"active": 0
		}, {
			"id": 26,
			"name": "device 26",
			"active": 1
		}, {
			"id": 27,
			"name": "device 27",
			"active": 1
		}]

	}, {
		"id": "3",
		"name": "group 3",
		"devices": [{
			"id": 31,
			"name": "device 31",
			"active": 1
		}, {
			"id": 32,
			"name": "device 32",
			"active": 0
		}, {
			"id": 33,
			"name": "device 33",
			"active": 1
		}, {
			"id": 34,
			"name": "device 34",
			"active": 0
		}, {
			"id": 35,
			"name": "device 35",
			"active": 0
		}, {
			"id": 36,
			"name": "device 36",
			"active": 1
		}, {
			"id": 37,
			"name": "device 37",
			"active": 1
		}]

	}],
    
    "protocols": [ {
        "id": 1,
        "name": "Modbus"
    },{
        "id": 2,
        "name": "DNP 3"
    },{
        "id": 3,
        "name": "IEC104"
    },{
        "id": 4,
        "name": "MMS"
    }],
    
    "times": [ {
        "id": 1,
        "name": "Last 30 minutes"
    },{
        "id": 2,
        "name": "Last Hour"
    },{
        "id": 3,
        "name": "Last 8 hours"
    },{
        "id": 4,
        "name": "Last 24 Hours"
    }]
}
 
let deviceGroups = data.device_groups;
let devicesHTML = deviceGroups.map(
  deviceGroup => `<p class="bg-primary text-white">
    <span class="caret"></span>
      <input type="checkbox" name="${deviceGroup.name}" value="${deviceGroup.id}">
    <span id="group-${deviceGroup.id}" class="group" onclick=toggleList(${deviceGroup.id})>${deviceGroup.name}</span></input></p>
<ul id="group-${deviceGroup.id}-list">` + 
                deviceGroup.devices.map( 
                    device => `<li><input type="checkbox" name="${device.name}" value="${device.id}">${device.name}</input></li>`).join('')+`</ul>`
                           ).join('');


document.getElementById('devices').innerHTML = devicesHTML;

function toggleList(num){
  $('#group-' + num + '-list').toggle("slow");
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.scss

p {
  padding-bottom: 10px;
  margin-bottom: 0;
}

li {
  list-style: none;
  padding-left: 10px;
  margin-bottom: 0;
}

input {
  margin: 0px;
  margin: 10px
}

#devices {
  padding: 0;
}

.caret:after{
  margin: 0 10px;
  content:"\f0da";
  color: white;
  font-family: FontAwesome;
}

.group{
  cursor: pointer;
}

.container-fluid{
  margin: 20px;
} 

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.0/css/all.min.css" rel="stylesheet" />