<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<section class="content">
<p><pre class="output"></pre></p>
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-body">
<div class="pull-left">
<div class="btn-group dept-filter">
<!-- here comes the filter -->
</div>
</div>
<div class="table-container">
<table class="table table-filter">
<tbody>
<tr data-status="pagado">
<td>
<div class="media">
<a href="#" class="pull-left">
<img src="https://s3.amazonaws.com/uifaces/faces/twitter/fffabs/120.jpg" class="media-photo">
</a>
<div class="media-body">
<span class="media-meta pull-right">Febrero 13, 2016</span>
<h4 class="title">
Lorem Impsum
<span class="pull-right pagado">(Pagado)</span>
</h4>
<p class="summary">Ut enim ad minim veniam, quis nostrud exercitation...</p>
</div>
</div>
</td>
</tr>
<tr data-status="pendiente">
<td>
<div class="media">
<a href="#" class="pull-left">
<img src="https://s3.amazonaws.com/uifaces/faces/twitter/fffabs/120.jpg" class="media-photo">
</a>
<div class="media-body">
<span class="media-meta pull-right">Febrero 13, 2016</span>
<h4 class="title">
Lorem Impsum
<span class="pull-right pendiente">(Pendiente)</span>
</h4>
<p class="summary">Ut enim ad minim veniam, quis nostrud exercitation...</p>
</div>
</div>
</td>
</tr>
<tr data-status="cancelado">
<td>
<div class="media">
<a href="#" class="pull-left">
<img src="https://s3.amazonaws.com/uifaces/faces/twitter/fffabs/120.jpg" class="media-photo">
</a>
<div class="media-body">
<span class="media-meta pull-right">Febrero 13, 2016</span>
<h4 class="title">
Lorem Impsum
<span class="pull-right cancelado">(Cancelado)</span>
</h4>
<p class="summary">Ut enim ad minim veniam, quis nostrud exercitation...</p>
</div>
</div>
</td>
</tr>
<tr data-status="pagado" class="selected">
<td>
<div class="media">
<a href="#" class="pull-left">
<img src="https://s3.amazonaws.com/uifaces/faces/twitter/fffabs/120.jpg" class="media-photo">
</a>
<div class="media-body">
<span class="media-meta pull-right">Febrero 13, 2016</span>
<h4 class="title">
Lorem Impsum
<span class="pull-right pagado">(Pagado)</span>
</h4>
<p class="summary">Ut enim ad minim veniam, quis nostrud exercitation...</p>
</div>
</div>
</td>
</tr>
<tr data-status="pendiente">
<td>
<div class="media">
<a href="#" class="pull-left">
<img src="https://s3.amazonaws.com/uifaces/faces/twitter/fffabs/120.jpg" class="media-photo">
</a>
<div class="media-body">
<span class="media-meta pull-right">Febrero 13, 2016</span>
<h4 class="title">
Lorem Impsum
<span class="pull-right pendiente">(Pendiente)</span>
</h4>
<p class="summary">Ut enim ad minim veniam, quis nostrud exercitation...</p>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="content-footer">
<p></p>
</div>
</div>
</section>
</div>
</div>
/* --------------------------------------------------
:: General
-------------------------------------------------- */
body {
font-family: 'Open Sans', sans-serif;
color: #353535;
}
.content h1 {
text-align: center;
}
.content .content-footer p {
color: #6d6d6d;
font-size: 12px;
text-align: center;
}
.content .content-footer p a {
color: inherit;
font-weight: bold;
}
/* --------------------------------------------------
:: Table Filter
-------------------------------------------------- */
.panel {
border: 1px solid #ddd;
background-color: #fcfcfc;
}
.panel .btn-group {
margin: 15px 0 30px;
}
.panel .btn-group .btn {
transition: background-color .3s ease;
}
.table-filter {
background-color: #fff;
border-bottom: 1px solid #eee;
}
.table-filter tbody tr:hover {
cursor: pointer;
background-color: #eee;
}
.table-filter tbody tr td {
padding: 10px;
vertical-align: middle;
border-top-color: #eee;
}
.table-filter tbody tr.selected td {
background-color: #eee;
}
.table-filter tr td:first-child {
width: 38px;
}
.table-filter tr td:nth-child(2) {
width: 35px;
}
.ckbox {
position: relative;
}
.ckbox input[type="checkbox"] {
opacity: 0;
}
.ckbox label {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.ckbox label:before {
content: '';
top: 1px;
left: 0;
width: 18px;
height: 18px;
display: block;
position: absolute;
border-radius: 2px;
border: 1px solid #bbb;
background-color: #fff;
}
.ckbox input[type="checkbox"]:checked + label:before {
border-color: #2BBCDE;
background-color: #2BBCDE;
}
.ckbox input[type="checkbox"]:checked + label:after {
top: 3px;
left: 3.5px;
content: '\e013';
color: #fff;
font-size: 10px;
font-family: 'Glyphicons Halflings';
position: absolute;
}
.table-filter .star {
color: #ccc;
text-align: center;
display: block;
}
.table-filter .star.star-checked {
color: #F0AD4E;
}
.table-filter .star:hover {
color: #ccc;
}
.table-filter .star.star-checked:hover {
color: #F0AD4E;
}
.table-filter .media-photo {
width: 35px;
}
.table-filter .media-body {
display: block;
/* Had to use this style to force the div to expand (wasn't necessary with my bootstrap version 3.3.6) */
}
.table-filter .media-meta {
font-size: 10px;
color: #999;
}
.table-filter .media .title {
color: #2BBCDE;
font-size: 14px;
font-weight: bold;
line-height: normal;
margin: 0;
}
.table-filter .media .title span {
font-size: .8em;
margin-right: 20px;
}
.table-filter .media .title span.pagado {
color: #5cb85c;
}
.table-filter .media .title span.pendiente {
color: #f0ad4e;
}
.table-filter .media .title span.cancelado {
color: #d9534f;
}
.table-filter .media .summary {
font-size: 12px;
}
function getKeyByValue(obj, key, val) {
for (var i in obj) {
if (obj) {
var o = obj[i];
for (var k in o) {
if (k==key && val == o[k]) {
return i;
//break;
}
}
}
}
}
function arrayUpdate (array, value) {
if (array.indexOf(value) === -1) {
array.push(value);
//console.log('New array collection is : ' + array);
return array;
} else if (array.indexOf(value) > -1) {
//console.log(value + ' already exists in the array collection.');
}
}
function arrayNextIndex(array, value) {
var index = array.indexOf(value);
if(index >= 0 && index < array.length - 1){
nextItem = array[index + 1];
return nextItem;
}
}
/*
var item = (from user input); //some code to get the initial item from user
function findcode(code){
var arr = ["ball", "1f7g", "spoon", "2c8d", "pen", "9c3c"]; //making the array
for (var i=0; i<arr.lenth; i++){ //for loop to look through array
arr.indexOf(item); //search array for whatever the user input was
var code = arr(i+1); //make the variable 'code' whatever comes next
break;
}
}
*/
/*
index = array.indexOf(value);
if(index >= 0 && index < array.length - 1){ nextItem = array[index + 1] }
var data = {"ball":"1f7g", "spoon":"2c8d", "pen":"9c3c"}
var code = data[name]
*/
var jsonObj =
{
"dataUser": [
{
"user_id": "2",
"user_name": "user.name2",
"user_active": "1",
"department_id": "1",
"department_name": "dept1",
"registry_entry": [
{
"entry_id": "398",
"user_id": "2",
"action_type": "1",
"timestamp_start": "2017-09-11 00:50:04",
"timestamp_end": "0000-00-00 00:00:00"
}
]
},
{
"user_id": "3",
"user_name": "user.name3",
"user_active": "1",
"department_id": "1",
"department_name": "dept1",
"registry_entry": [
{
"entry_id": "399",
"user_id": "3",
"action_type": "1",
"timestamp_start": "2017-09-11 00:50:11",
"timestamp_end": "0000-00-00 00:00:00"
},
{
"entry_id": "400",
"user_id": "3",
"action_type": "2",
"timestamp_start": "2017-09-11 00:50:26",
"timestamp_end": "0000-00-00 00:00:00"
}
]
},
{
"user_id": "4",
"user_name": "user.name4",
"user_active": "1",
"department_id": "1",
"department_name": "dept1",
"registry_entry": [
{
"entry_id": "401",
"user_id": "4",
"action_type": "1",
"timestamp_start": "2017-09-11 00:50:35",
"timestamp_end": "0000-00-00 00:00:00"
},
{
"entry_id": "402",
"user_id": "4",
"action_type": "2",
"timestamp_start": "2017-09-11 00:50:50",
"timestamp_end": "2017-09-11 00:50:57"
}
]
},
{
"user_id": "5",
"user_name": "user.name15",
"user_active": "1",
"department_id": "1",
"department_name": "dept2",
"registry_entry": [
{
"entry_id": "404",
"user_id": "15",
"action_type": "1",
"timestamp_start": "2017-09-11 00:51:30",
"timestamp_end": "0000-00-00 00:00:00"
},
{
"entry_id": "405",
"user_id": "15",
"action_type": "2",
"timestamp_start": "2017-09-11 00:51:37",
"timestamp_end": "2017-09-11 00:51:41"
},
{
"entry_id": "406",
"user_id": "15",
"action_type": "3",
"timestamp_start": "2017-09-11 00:51:47",
"timestamp_end": "0000-00-00 00:00:00"
}
]
},
{
"user_id": "15",
"user_name": "user.name5",
"user_active": "1",
"department_id": "1",
"department_name": "dept1",
"registry_entry": [
{
"entry_id": "403",
"user_id": "5",
"action_type": "1",
"timestamp_start": "2017-09-11 00:51:07",
"timestamp_end": "2017-09-11 00:51:11"
}
]
},
{
"user_id": "7",
"user_name": "user.name7",
"user_active": "1",
"department_id": "1",
"department_name": "dept1"
},
{
"user_id": "6",
"user_name": "user.name6",
"user_active": "1",
"department_id": "1",
"department_name": "dept1",
"registry_entry": [
{
"entry_id": "484",
"user_id": "6",
"action_type": "1",
"timestamp_start": "2017-09-11 00:51:30",
"timestamp_end": "0000-00-00 00:00:01"
},
{
"entry_id": "485",
"user_id": "6",
"action_type": "2",
"timestamp_start": "2017-09-11 00:51:37",
"timestamp_end": "0000-00-00 00:00:01"
},
{
"entry_id": "486",
"user_id": "6",
"action_type": "3",
"timestamp_start": "2017-09-11 00:51:47",
"timestamp_end": "0000-00-00 00:00:00"
},
{
"entry_id": "488",
"user_id": "6",
"action_type": "4",
"timestamp_start": "2017-09-11 01:02:47",
"timestamp_end": "0000-00-00 00:00:01"
}
]
}
],
"dataRegistryActions": [
{
"signature_id": "1",
"locked": "1",
"signature_name": "presence",
"signature_description": "presence"
},
{
"signature_id": "2",
"locked": "1",
"signature_name": "P1",
"signature_description": "main"
},
{
"signature_id": "3",
"locked": "0",
"signature_name": "P2",
"signature_description": "short"
},
{
"signature_id": "4",
"locked": "0",
"signature_name": "P3",
"signature_description": "special"
}
],
"dataDepartments": [
{
"department_id": "1",
"department_name": "dept1-I"
},
{
"department_id": "2",
"department_name": "dept2-A"
},
{
"department_id": "3",
"department_name": "dept3-N"
},
{
"department_id": "4",
"department_name": "dept4-AP"
},
{
"department_id": "5",
"department_name": "dept5-C"
},
]
};
$(document).ready(function () {
var dEntry = jsonObj.dataDepartments;
for (var d in dEntry) {
$(".dept-filter").append('<button type="button" class="btn btn-default btn-filter" data-target="FILTER-NAME">'+dEntry[d].department_name+'</button>\n');
}
$(".dept-filter").append('<button type="button" class="btn btn-default btn-filter" data-target="all">All</button>\n');
$('.star').on('click', function () {
$(this).toggleClass('star-checked');
});
$('.ckbox label').on('click', function () {
$(this).parents('tr').toggleClass('selected');
});
$('.btn-filter').on('click', function () {
var $target = $(this).data('target');
if ($target != 'all') {
$('.table tr').css('display', 'none');
$('.table tr[data-status="' + $target + '"]').fadeIn('slow');
} else {
$('.table tr').css('display', 'none').fadeIn('slow');
}
});
});