Dashboard One

This is a proof of concept dashboard

by Shawn Wood

HTML

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.1.4/jquery.bootgrid.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.1.4/jquery.bootgrid.js"></script>
<div class="container">
  <h2>Dashboard</h2>
  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">All Stuff</a></li>
    <li><a data-toggle="tab" href="#menu1">My Stuff</a></li>
    <li><a data-toggle="tab" href="#menu2">Minion's Stuff</a></li>
    <li><a data-toggle="tab" href="#menu3">Closed Stuff</a></li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <table id="grid-command-buttons" class="table table-condensed table-hover table-striped bootgrid-table" aria-busy="false">
    <thead>
        <tr>
            <th data-column-id="id" data-identifier="true" data-type="numeric">ID</th>
            <th data-column-id="sender">Sender</th>
            <th data-column-id="received" data-order="desc">Received</th>
            <th data-column-id="commands" data-formatter="commands" data-sortable="false">Commands</th>
        </tr>                    
    </thead>
    <tbody>
        <tr>
            <td class="text-left">1122</td>
            <td class="text-left">[email protected]</td>
            <td class="text-left">2014-10-27T07:23:43</td>
            <td class="text-left"></td>
        </tr>
        <tr>
            <td...

JavaScript

// Boot Grid
var rowIds = [];
var grid = $("#grid-command-buttons").bootgrid({
    selection:false,
    multiSelect: false,
    rowSelect : true,
    formatters: {
        "commands": function(column, row)
        {
            return "<button type=\"button\" class=\"btn btn-xs btn-default command-edit\" data-row-id=\"" + row.id + "\"><span class=\"fa fa-pencil\"></span></button> " + 
                "<button type=\"button\" class=\"btn btn-xs btn-default command-delete\" data-row-id=\"" + row.id + "\"><span class=\"fa fa-trash-o\"></span></button>";
        }
    }
}).on("selected.rs.jquery.bootgrid", function (e, rows) {
                console.log("Select Event Fired"); 
                console.log(rows);
                for (var i = 0; i < rows.length; i++) {
                    rowIds.push({ id: rows[i].id, ad: rows[i].sender, cns: rows[i].received });
                }
                console.log(rowIds);
  
            }).on("deselected.rs.jquery.bootgrid", function (e, rows) {
              console.log("Deselect Event Fired"); 
              console.log(rows);
                for (var i = 0; i < rows.length; i++) {
                        $.each(rowIds, function (ix) {
                        if (rowIds[ix].id == rows[i].id) {
                            rowIds.splice(ix, 1);
                            return false;
                        }
                    });
                }
     console.log(rowIds);
    
            });