ex vue

ex-vue.markdown

ex vue

A Pen by Yaakov Shore on CodePen.

License.

index.html

<div id="app" class="container-fluid">
  <div class="row">
    <div class="col-md">
      <div class="border border-primary rounded">
       <p class="bg-primary text-white pl-2 font-weight-bold">1. Select Blackboxes</p>
        <div v-model="checkedGroups" v-for='(dg, index) in device_groups'>
    <p class="group" v-bind:id="'p-' + dg.id" v-on:click="display" v-bind:data-groupnum="dg.id"><span v-on:click="display" class="caret"></span><input v-on:click="checkChildren" v-bind:id="'group-' + dg.id"  v-bind:name="'group-' + dg.id" type="checkbox" v-bind:value="dg.id">{{dg.name}}</p>
    <div>
    <ul v-bind:id="'device-group-' + dg.id">
        <li v-for='(d, index) in dg.devices'><input v-bind:data-groupnum="dg.id" v-bind:value="d.name + ',' + d.id" v-model="checkedDevice"  type="checkbox" v-on:click="uncheckGroup(event)">{{d.name}}</li>
      </ul></div>
      </div>
     
  
  </div></div>
  <div class="col-md">
     <div class="border border-primary rounded">
         <p class="bg-primary text-white pl-2 font-weight-bold">2. Select Protocol</p>
    <ul id="protocols">
      <li v-for="(p, index) in protocols"><input type="checkbox" v-bind:id="p.id" v-bind:value="p.name + ',' + p.id" v-model="checkedProtocols" v-on:click="">{{p.name}}</li>
    </ul>
      </div>
 
  </div>
 <div class="col-md">
    <div class="border border-primary rounded">
        <p class="bg-primary text-white pl-2 font-weight-bold">3. Select Time Period</p>
   <ul id="times">
     <li v-for="(t, index) in times"><input type="radio" v-bind:id="t.id" v-bind:value="t.name" v-model="checkedTimes">
       {{t.name}}
     </li>
   </ul>
      </div>
 
    </div>
  <div class="col-md">
     <div class="border border-primary rounded">
       <p class="bg-primary text-white pl-2 font-weight-bold">4. Summary</p>
    <p class="font-weight-bold">Device List</p>
    <ul>
       <li v-for="dv in checkedDevice" :key="dv.name">{{dv | split}}</li>
    </ul>
   
    <p class="font-weight-bold">Protocols</p>
    <ul>
       <li v-for="ps in checkedProtocols" :key="ps.name">{{ps | split}}</li>
    </ul>
   
    <p class="font-weight-bold">Times</p>
    <ul>
      <li v-if="checkedTimes.length > 0">{{checkedTimes}}</li>
    </ul>
      <button id="send" class="btn btn-default" v-on:click="clearAll">Clear</button>
      <button id="send" class="btn btn-primary" v-on:click="logChecked"><span class="collapse"></span>Start Learning</button>
      </div>
   
    </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"
    }],
  checkedGroups: [],
  checkedDevice: [],
  checkedProtocols: [],
  checkedTimes: [],
}

var app = new Vue({
  el: '#app',
  data: data,
  filters: {
  split: function(value){
    let x = value.split(",");
    return x[0];
  }
  },
  methods: {
    uncheckGroup(event){
      let gn = event.target.dataset.groupnum;
      let group = $('#device-group-'+gn+' li input:checked').length;
      if(group < 7){$('#group-' + gn).prop('checked', false)}
    },
    clearAll(){
   $('input[type=checkbox]').prop('checked', false);
        data.checkedGroups = [];
        data.checkedDevice = [];
        data.checkedProtocols = [];
    },
    checkChildren(event){
      let arr = data.checkedDevice;
      let gn = event.target.parentNode.dataset.groupnum;
      if($('#group-' + gn).prop('checked')){
       
         $('#device-group-' + gn + ' li input').each(function(){
           $(this).prop('checked', true);
           var checked = ($(this).val());
           if(arr.indexOf(checked) === -1){
             arr.push(checked);
           }
           
         });
          } else {
         $('#device-group-' + gn + ' li input').each(function(){
           $(this).prop('checked', false);
           var unchecked = ($(this).val());
  arr.splice($.inArray(unchecked, arr),1);
         });
      }
     
    },
    logChecked(){
      console.log('%c Devices:', 'color: orange; font-weight: bold');
      let devices = data.checkedDevice.map(x => x.split(","));
      console.table(devices.map(x => x[1]));
      console.log('%c Protocols:', 'color: orange; font-weight: bold'); 
      let protocols = data.checkedProtocols.map(x => x.split(","));
      console.table(protocols.map(x => x[1]));
      console.log('%c Time Period:', 'color: orange; font-weight: bold');
      console.log(data.checkedTimes);
      
    },
    display(event){
      let groupNum = event.target.dataset.groupnum;
  $("#device-group-" + groupNum).toggle('slow');
  $( "#p-" + groupNum + " span").toggleClass("caret").toggleClass("collapse");
    }
  },
});

scripts

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

style.css

.container-fluid {
background-image: linear-gradient(#add8e6, #fff 300px);
}


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

p:not(.bg-primary):not(.group), button {
  margin-left: 10px;
}

ul{
  padding-left: 15px;
}

li {
  list-style: none;
}

input {
  margin: 0px;
  margin-right: 5px;
}

.col-md {
  padding: 0;
  margin: 10px;
}

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

.collapse, .caret {
  cursor:text;
}

.collapse:not(.show) {
  display: inline;
}
.caret:after{
  margin: 0 10px;
  content:"\f0d7";
  color: white;
  font-family: FontAwesome;
  cursor: text;
}

.border{
  background-color: white;
}
button{
  margin: 5px;
}
.group{
  cursor: pointer;
  background-color: #00008b;
  color: white;
  padding-left: 10px;
}

.container-fluid{
  padding: 20px;
} 

styles

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